diff --git a/docs/200.html b/docs/200.html
index 59571ae..ef774f7 100644
--- a/docs/200.html
+++ b/docs/200.html
@@ -2,5 +2,5 @@
<html >
<head><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="prefetch" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="prefetch" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body ><div id="__nuxt"></div><script>window.__NUXT__=(function(a,b,c,d){return {serverRendered:a,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[b,"c","go","graphql","scss",b,c,"docker","typescript","javascript","nginx","bash","yaml",c],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:d,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:d}},data:{},state:{}}}(false,"shell","sh",""))</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script></body>
+<body ><div id="__nuxt"></div><script>window.__NUXT__=(function(a,b,c,d){return {serverRendered:a,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[b,"c","go","graphql","scss",b,c,"docker","typescript","javascript","nginx","bash","yaml",c],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:d,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:d}},data:{},state:{}}}(false,"shell","sh",""))</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/404.html b/docs/404.html
index 59571ae..ef774f7 100644
--- a/docs/404.html
+++ b/docs/404.html
@@ -2,5 +2,5 @@
<html >
<head><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="prefetch" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="prefetch" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body ><div id="__nuxt"></div><script>window.__NUXT__=(function(a,b,c,d){return {serverRendered:a,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[b,"c","go","graphql","scss",b,c,"docker","typescript","javascript","nginx","bash","yaml",c],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:d,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:d}},data:{},state:{}}}(false,"shell","sh",""))</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script></body>
+<body ><div id="__nuxt"></div><script>window.__NUXT__=(function(a,b,c,d){return {serverRendered:a,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[b,"c","go","graphql","scss",b,c,"docker","typescript","javascript","nginx","bash","yaml",c],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:d,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:d}},data:{},state:{}}}(false,"shell","sh",""))</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/_payload.js b/docs/_payload.js
index 8983810..f2ef4de 100644
--- a/docs/_payload.js
+++ b/docs/_payload.js
@@ -1 +1 @@
-export default {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}]},prerenderedAt:1703695523404}
\ No newline at end of file
+export default {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}]},prerenderedAt:1703697982038}
\ No newline at end of file
diff --git a/docs/about/_payload.js b/docs/about/_payload.js
index 5118728..89bf730 100644
--- a/docs/about/_payload.js
+++ b/docs/about/_payload.js
@@ -1 +1 @@
-export default {data:{},prerenderedAt:1703695523175}
\ No newline at end of file
+export default {data:{},prerenderedAt:1703697981790}
\ No newline at end of file
diff --git a/docs/about/index.html b/docs/about/index.html
index 9f4ac52..f76f044 100644
--- a/docs/about/index.html
+++ b/docs/about/index.html
@@ -8,5 +8,5 @@ Beeing initially written with Drupal 5, went through refactoring to Laravel + Vu
Implements automatic route building with OSRM and map rasterization with canvas. Used by users in local cycling communities for ride sharing.</div></div><div class="_buttons_1wy9v_46"><a href="https://github.com/muerwre/orchidmap-front" rel="noopener noreferrer" class="_button_15t7y_1 _variant-outline_15t7y_12 _size-md_15t7y_38 _suffixed_15t7y_42" _target="blank"><!----><span class="_title_15t7y_49"><!--[--> Code <!--]--></span><span class="_suffix_15t7y_42"><!--[--><svg xmlns="http://www.w3.org/2000/svg" height="22" width="22" viewbox="0 0 48 48" fill="currentColor"><path xmlns="http://www.w3.org/2000/svg" d="m16 35.9-12-12 12.1-12.1 2.15 2.15L8.3 23.9l9.85 9.85Zm15.9.1-2.15-2.15 9.95-9.95-9.85-9.85L32 11.9l12 12Z"></path></svg><!--]--></span></a><a href="https://map.vault48.org" rel="noopener noreferrer" class="_button_15t7y_1 _variant-outline_15t7y_12 _size-md_15t7y_38 _suffixed_15t7y_42" _target="blank"><!----><span class="_title_15t7y_49"><!--[--> Visit <!--]--></span><span class="_suffix_15t7y_42"><!--[--><svg xmlns="http://www.w3.org/2000/svg" height="22" width="22" viewbox="0 0 48 48" fill="currentColor"><path d="m24 40-2.1-2.15L34.25 25.5H8v-3h26.25L21.9 10.15 24 8l16 16Z"></path></svg><!--]--></span></a></div></div><!--]--></div><div class="_card_e1njf_1"><!--[--><div class="_card_1wy9v_1"><div class="_thumbnail_1wy9v_7"><img src="/nuxt/obsidian-garden.39e6dff3.png" class="_image_1wy9v_14" alt="Obsidian Garden"></div><div class="_content_1wy9v_20"><div class="_head_1wy9v_27"><h3 class="_title_1wy9v_31">Obsidian Garden</h3><div class="_url_1wy9v_35"><a href="https://muerwre.github.io" rel="noopener noreferrer">https://muerwre.github.io</a></div></div><div class="_description_1wy9v_39">Frontend for personal knowledge database managed by Obsidian.md software.
-Made with nuxt3, nuxt-content plugin and some customizations. Deployed with drone-ci directly to github-pages.</div></div><div class="_buttons_1wy9v_46"><a href="https://github.com/muerwre/muerwre.github.io" rel="noopener noreferrer" class="_button_15t7y_1 _variant-outline_15t7y_12 _size-md_15t7y_38 _suffixed_15t7y_42" _target="blank"><!----><span class="_title_15t7y_49"><!--[--> Code <!--]--></span><span class="_suffix_15t7y_42"><!--[--><svg xmlns="http://www.w3.org/2000/svg" height="22" width="22" viewbox="0 0 48 48" fill="currentColor"><path xmlns="http://www.w3.org/2000/svg" d="m16 35.9-12-12 12.1-12.1 2.15 2.15L8.3 23.9l9.85 9.85Zm15.9.1-2.15-2.15 9.95-9.95-9.85-9.85L32 11.9l12 12Z"></path></svg><!--]--></span></a><a href="https://muerwre.github.io" rel="noopener noreferrer" class="_button_15t7y_1 _variant-outline_15t7y_12 _size-md_15t7y_38 _suffixed_15t7y_42" _target="blank"><!----><span class="_title_15t7y_49"><!--[--> Visit <!--]--></span><span class="_suffix_15t7y_42"><!--[--><svg xmlns="http://www.w3.org/2000/svg" height="22" width="22" viewbox="0 0 48 48" fill="currentColor"><path d="m24 40-2.1-2.15L34.25 25.5H8v-3h26.25L21.9 10.15 24 8l16 16Z"></path></svg><!--]--></span></a></div></div><!--]--></div><!--]--></div></div></section></article><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div><script type="module">import p from "/about/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695523175}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/landing.ff1ac866.js" crossorigin></script><script type="module" src="/nuxt/LayoutHeader.76a50cb0.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/about.0e9f4549.js" crossorigin></script><script type="module" src="/nuxt/BioHeading.35103d09.js" crossorigin></script><script type="module" src="/nuxt/UiButtonGroup.0c17ae03.js" crossorigin></script><script type="module" src="/nuxt/UiActionButton.25935799.js" crossorigin></script><script type="module" src="/nuxt/IconsSend.7a402237.js" crossorigin></script><script type="module" src="/nuxt/IconsGithub.16cd9b9e.js" crossorigin></script><script type="module" src="/nuxt/BioSkills.aaebc3e9.js" crossorigin></script><script type="module" src="/nuxt/BioSkillsCard.e169a707.js" crossorigin></script><script type="module" src="/nuxt/UiCard.6ae63afe.js" crossorigin></script><script type="module" src="/nuxt/UiStars.e4fe484c.js" crossorigin></script><script type="module" src="/nuxt/IconStar.543c220f.js" crossorigin></script><script type="module" src="/nuxt/BioProjects.1d27bb3b.js" crossorigin></script><script type="module" src="/nuxt/BioProjectCard.6c772bed.js" crossorigin></script><script type="module" src="/nuxt/IconsCode.e08f7e6d.js" crossorigin></script><script type="module" src="/nuxt/ArrowRight.c6473713.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script></body>
+Made with nuxt3, nuxt-content plugin and some customizations. Deployed with drone-ci directly to github-pages.</div></div><div class="_buttons_1wy9v_46"><a href="https://github.com/muerwre/muerwre.github.io" rel="noopener noreferrer" class="_button_15t7y_1 _variant-outline_15t7y_12 _size-md_15t7y_38 _suffixed_15t7y_42" _target="blank"><!----><span class="_title_15t7y_49"><!--[--> Code <!--]--></span><span class="_suffix_15t7y_42"><!--[--><svg xmlns="http://www.w3.org/2000/svg" height="22" width="22" viewbox="0 0 48 48" fill="currentColor"><path xmlns="http://www.w3.org/2000/svg" d="m16 35.9-12-12 12.1-12.1 2.15 2.15L8.3 23.9l9.85 9.85Zm15.9.1-2.15-2.15 9.95-9.95-9.85-9.85L32 11.9l12 12Z"></path></svg><!--]--></span></a><a href="https://muerwre.github.io" rel="noopener noreferrer" class="_button_15t7y_1 _variant-outline_15t7y_12 _size-md_15t7y_38 _suffixed_15t7y_42" _target="blank"><!----><span class="_title_15t7y_49"><!--[--> Visit <!--]--></span><span class="_suffix_15t7y_42"><!--[--><svg xmlns="http://www.w3.org/2000/svg" height="22" width="22" viewbox="0 0 48 48" fill="currentColor"><path d="m24 40-2.1-2.15L34.25 25.5H8v-3h26.25L21.9 10.15 24 8l16 16Z"></path></svg><!--]--></span></a></div></div><!--]--></div><!--]--></div></div></section></article><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div><script type="module">import p from "/about/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697981790}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/landing.ff1ac866.js" crossorigin></script><script type="module" src="/nuxt/LayoutHeader.76a50cb0.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/about.0e9f4549.js" crossorigin></script><script type="module" src="/nuxt/BioHeading.35103d09.js" crossorigin></script><script type="module" src="/nuxt/UiButtonGroup.0c17ae03.js" crossorigin></script><script type="module" src="/nuxt/UiActionButton.25935799.js" crossorigin></script><script type="module" src="/nuxt/IconsSend.7a402237.js" crossorigin></script><script type="module" src="/nuxt/IconsGithub.16cd9b9e.js" crossorigin></script><script type="module" src="/nuxt/BioSkills.aaebc3e9.js" crossorigin></script><script type="module" src="/nuxt/BioSkillsCard.e169a707.js" crossorigin></script><script type="module" src="/nuxt/UiCard.6ae63afe.js" crossorigin></script><script type="module" src="/nuxt/UiStars.e4fe484c.js" crossorigin></script><script type="module" src="/nuxt/IconStar.543c220f.js" crossorigin></script><script type="module" src="/nuxt/BioProjects.1d27bb3b.js" crossorigin></script><script type="module" src="/nuxt/BioProjectCard.6c772bed.js" crossorigin></script><script type="module" src="/nuxt/IconsCode.e08f7e6d.js" crossorigin></script><script type="module" src="/nuxt/ArrowRight.c6473713.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/api/_content/cache.json b/docs/api/_content/cache.json
index a0e7135..1d336a3 100644
--- a/docs/api/_content/cache.json
+++ b/docs/api/_content/cache.json
@@ -1 +1 @@
-{"generatedAt":1703695528883,"generateTime":123,"contents":[{"_path":"/blockchain/common-typescript-examples","_dir":"blockchain","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Common Typescript Examples","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Simple #dapp example for tests: "},{"type":"element","tag":"a","props":{"href":"https://metamask.github.io/test-dapp/","rel":["nofollow"]},"children":[{"type":"text","value":"https://metamask.github.io/test-dapp/"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Interaction with smart contracts described in "},{"type":"element","tag":"a","props":{"href":"Smart%20contracts"},"children":[{"type":"text","value":"Smart contracts"}]}]}]},{"type":"element","tag":"h2","props":{"id":"connecting-to-node"},"children":[{"type":"text","value":"Connecting to node"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If #Metamask extension installed, "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Web3.givenProvider"}]},{"type":"text","value":" is available in global window. You can use "},{"type":"element","tag":"a","props":{"href":"https://infura.io","rel":["nofollow"]},"children":[{"type":"text","value":"Infura"}]},{"type":"text","value":" or your node instead:"}]},{"type":"element","tag":"code","props":{"code":"import Web3 from 'web3';\n\n// URL of your node\nconst PROVIDER_URL = 'https://...';\n\nexport const web3 = new Web3(Web3.givenProvider || PROVIDER_URL);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import Web3 from 'web3';\n\n// URL of your node\nconst PROVIDER_URL = 'https://...';\n\nexport const web3 = new Web3(Web3.givenProvider || PROVIDER_URL);\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"getting-wallet-balance"},"children":[{"type":"text","value":"Getting wallet balance"}]},{"type":"element","tag":"code","props":{"code":"const getBalance = async (address: string) => {\n return await web3.eth.getBalance(address);\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const getBalance = async (address: string) => {\n return await web3.eth.getBalance(address);\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"getting-wallet-address"},"children":[{"type":"text","value":"Getting wallet address"}]},{"type":"element","tag":"code","props":{"code":"// first we need to authorize\nconst authorize = async () => {\n await web3.currentProvider.request({ method: 'eth_requestAccounts' });\n}\n\n// then we can get wallet address\nconst getCurrentAddressUser = () => {\n return web3.currentProvider.selectedAddress;\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// first we need to authorize\nconst authorize = async () => {\n await web3.currentProvider.request({ method: 'eth_requestAccounts' });\n}\n\n// then we can get wallet address\nconst getCurrentAddressUser = () => {\n return web3.currentProvider.selectedAddress;\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"sending-transaction"},"children":[{"type":"text","value":"Sending transaction"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sending "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"value"}]},{"type":"text","value":" tokens with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"memo"}]},{"type":"text","value":" as value:"}]},{"type":"element","tag":"code","props":{"code":"\nconst transfer = async ({ \n from, \n to, \n value, \n memo, \n privateKey, \n gasLimit = 44000 \n}) => {\n const nonce = await web3.eth.getTransactionCount(from);\n const gasPrice = await web3.eth.getGasPrice();\n \n const rawTx = {\n from,\n to,\n value: web3.utils.toHex(Web3.utils.toWei(value, 'ether')),\n gasLimit: web3.utils.toHex(gasLimit),\n gasPrice: web3.utils.toHex(gasPrice),\n nonce: web3.utils.toHex(nonce),\n data: memo,\n };\n \n const privateKeyBuffer = EthUtil.toBuffer(privateKey);\n \n const tx = new Transaction(rawTx);\n \n tx.sign(privateKeyBuffer);\n const serializedTx = tx.serialize();\n \n return this.web3.eth.sendSignedTransaction(\n `0x${serializedTx.toString('hex')}`\n );\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\nconst transfer = async ({ \n from, \n to, \n value, \n memo, \n privateKey, \n gasLimit = 44000 \n}) => {\n const nonce = await web3.eth.getTransactionCount(from);\n const gasPrice = await web3.eth.getGasPrice();\n \n const rawTx = {\n from,\n to,\n value: web3.utils.toHex(Web3.utils.toWei(value, 'ether')),\n gasLimit: web3.utils.toHex(gasLimit),\n gasPrice: web3.utils.toHex(gasPrice),\n nonce: web3.utils.toHex(nonce),\n data: memo,\n };\n \n const privateKeyBuffer = EthUtil.toBuffer(privateKey);\n \n const tx = new Transaction(rawTx);\n \n tx.sign(privateKeyBuffer);\n const serializedTx = tx.serialize();\n \n return this.web3.eth.sendSignedTransaction(\n `0x${serializedTx.toString('hex')}`\n );\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"estimating-transaction-fee"},"children":[{"type":"text","value":"Estimating transaction FEE"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Useful to get fixed amount of tokens from user with pre-estimated fee."}]},{"type":"element","tag":"code","props":{"code":"import { web3 } from '.';\n\nconst estimateFee = async ({\n from,\n to,\n value,\n memo,\n}) => {\n const gasPrice = await web3.eth.getGasPrice();\n const gasLimit = await web3.eth.estimateGas({\n from,\n to,\n value: web3.utils.toHex(web3.utils.toWei(value, 'ether')),\n data: web3.utils.asciiToHex(memo),\n }).call();\n \n return web3.utils.fromWei(\n BigInt(gasPrice.toString())\n .multiply(BigInt(gasLimit.toString()))\n .toString()\n );\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { web3 } from '.';\n\nconst estimateFee = async ({\n from,\n to,\n value,\n memo,\n}) => {\n const gasPrice = await web3.eth.getGasPrice();\n const gasLimit = await web3.eth.estimateGas({\n from,\n to,\n value: web3.utils.toHex(web3.utils.toWei(value, 'ether')),\n data: web3.utils.asciiToHex(memo),\n }).call();\n \n return web3.utils.fromWei(\n BigInt(gasPrice.toString())\n .multiply(BigInt(gasLimit.toString()))\n .toString()\n );\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"subscribing-to-wallet-address-change"},"children":[{"type":"text","value":"Subscribing to wallet address change"}]},{"type":"element","tag":"code","props":{"code":"import { web3 } from '.';\n\nweb3.currentProvider.on('accountsChanged', callback);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { web3 } from '.';\n\nweb3.currentProvider.on('accountsChanged', callback);\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"watching-network-change"},"children":[{"type":"text","value":"Watching network change"}]},{"type":"element","tag":"code","props":{"code":"ethereum.on('chainChanged', handler: (chainId: string) => void);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"ethereum.on('chainChanged', handler: (chainId: string) => void);\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"adding-custom-token-to-wallet"},"children":[{"type":"text","value":"Adding custom token to wallet"}]},{"type":"element","tag":"code","props":{"code":"window.ethereum\n .request({\n method: 'wallet_watchAsset',\n params: {\n type: 'ERC20',\n options: {\n address: '0xb60e8dd61c5d32be8058bb8eb970870f07233155',\n symbol: 'FOO',\n decimals: 18,\n image: 'https://foo.io/token-image.svg',\n },\n },\n })\n .then((success) => {\n if (success) {\n console.log('FOO successfully added to wallet!')\n } else {\n throw new Error('Something went wrong.')\n }\n })\n .catch(console.error)\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"window.ethereum\n .request({\n method: 'wallet_watchAsset',\n params: {\n type: 'ERC20',\n options: {\n address: '0xb60e8dd61c5d32be8058bb8eb970870f07233155',\n symbol: 'FOO',\n decimals: 18,\n image: 'https://foo.io/token-image.svg',\n },\n },\n })\n .then((success) => {\n if (success) {\n console.log('FOO successfully added to wallet!')\n } else {\n throw new Error('Something went wrong.')\n }\n })\n .catch(console.error)\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"changing-network-to-custom"},"children":[{"type":"text","value":"Changing network to custom"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Checking current chainId:"}]},{"type":"element","tag":"code","props":{"code":"const getChainID = async () => {\n return ethereum.request({ method: 'eth_chainId' })\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const getChainID = async () => {\n return ethereum.request({ method: 'eth_chainId' })\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Asking wallet to change current network:"}]},{"type":"element","tag":"code","props":{"code":"try {\n await window.ethereum.request({\n method: 'wallet_switchEthereumChain',\n params: [{ chainId: '0x03' }], // ropsten chainID (3) in hex\n });\n} catch (switchError) {\n // This error code indicates that the chain has not been added to MetaMask.\n if (error.code === 4902) {\n try {\n await window.ethereum.request({\n method: 'wallet_addEthereumChain',\n params: [{ \n chainId: '0x03', // ropsten chainID (3) in hex\n chainName: 'Ropsten Test Network', \n nativeCurrency: { \n name: 'ETH',\n symbol: 'ETH',\n decimals: 18\n }, \n rpcUrls: ['https://ropsten.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161'], \n blockExplorerUrls: ['https://ropsten.etherscan.io'] \n }] ,\n });\n } catch (addError) {\n // handle \"add\" error\n }\n }\n // handle other \"switch\" errors\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"try {\n await window.ethereum.request({\n method: 'wallet_switchEthereumChain',\n params: [{ chainId: '0x03' }], // ropsten chainID (3) in hex\n });\n} catch (switchError) {\n // This error code indicates that the chain has not been added to MetaMask.\n if (error.code === 4902) {\n try {\n await window.ethereum.request({\n method: 'wallet_addEthereumChain',\n params: [{ \n chainId: '0x03', // ropsten chainID (3) in hex\n chainName: 'Ropsten Test Network', \n nativeCurrency: { \n name: 'ETH',\n symbol: 'ETH',\n decimals: 18\n }, \n rpcUrls: ['https://ropsten.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161'], \n blockExplorerUrls: ['https://ropsten.etherscan.io'] \n }] ,\n });\n } catch (addError) {\n // handle \"add\" error\n }\n }\n // handle other \"switch\" errors\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Simple #dapp example for tests: "},{"type":"element","tag":"a","props":{"href":"https://metamask.github.io/test-dapp/","rel":["nofollow"]},"children":[{"type":"text","value":"https://metamask.github.io/test-dapp/"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Interaction with smart contracts described in "},{"type":"element","tag":"a","props":{"href":"Smart%20contracts"},"children":[{"type":"text","value":"Smart contracts"}]}]}]},{"type":"element","tag":"h2","props":{"id":"connecting-to-node"},"children":[{"type":"text","value":"Connecting to node"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If #Metamask extension installed, "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Web3.givenProvider"}]},{"type":"text","value":" is available in global window. You can use "},{"type":"element","tag":"a","props":{"href":"https://infura.io","rel":["nofollow"]},"children":[{"type":"text","value":"Infura"}]},{"type":"text","value":" or your node instead:"}]},{"type":"element","tag":"code","props":{"code":"import Web3 from 'web3';\n\n// URL of your node\nconst PROVIDER_URL = 'https://...';\n\nexport const web3 = new Web3(Web3.givenProvider || PROVIDER_URL);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'web3'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0a81e7"},"children":[{"type":"text","value":"// URL of your node"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c91062"},"children":[{"type":"text","value":"PROVIDER_URL"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'https://...'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c91062"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"givenProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c91062"},"children":[{"type":"text","value":"PROVIDER_URL"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":");"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"getting-wallet-balance"},"children":[{"type":"text","value":"Getting wallet balance"}]},{"type":"element","tag":"code","props":{"code":"const getBalance = async (address: string) => {\n return await web3.eth.getBalance(address);\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dfc9dd"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-de9cf1"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2b9286"},"children":[{"type":"text","value":"getBalance"}]},{"type":"element","tag":"span","props":{"class":"ct-de9cf1"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1f936b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-de9cf1"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dfc9dd"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-de9cf1"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ecd2f7"},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"span","props":{"class":"ct-1f936b"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-de9cf1"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a77722"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-de9cf1"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-dfc9dd"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-de9cf1"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"getBalance"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"getting-wallet-address"},"children":[{"type":"text","value":"Getting wallet address"}]},{"type":"element","tag":"code","props":{"code":"// first we need to authorize\nconst authorize = async () => {\n await web3.currentProvider.request({ method: 'eth_requestAccounts' });\n}\n\n// then we can get wallet address\nconst getCurrentAddressUser = () => {\n return web3.currentProvider.selectedAddress;\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0a81e7"},"children":[{"type":"text","value":"// first we need to authorize"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"authorize"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"currentProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"({ method: "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'eth_requestAccounts'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0a81e7"},"children":[{"type":"text","value":"// then we can get wallet address"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"getCurrentAddressUser"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"currentProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"selectedAddress"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"sending-transaction"},"children":[{"type":"text","value":"Sending transaction"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sending "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"value"}]},{"type":"text","value":" tokens with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"memo"}]},{"type":"text","value":" as value:"}]},{"type":"element","tag":"code","props":{"code":"\nconst transfer = async ({ \n from, \n to, \n value, \n memo, \n privateKey, \n gasLimit = 44000 \n}) => {\n const nonce = await web3.eth.getTransactionCount(from);\n const gasPrice = await web3.eth.getGasPrice();\n \n const rawTx = {\n from,\n to,\n value: web3.utils.toHex(Web3.utils.toWei(value, 'ether')),\n gasLimit: web3.utils.toHex(gasLimit),\n gasPrice: web3.utils.toHex(gasPrice),\n nonce: web3.utils.toHex(nonce),\n data: memo,\n };\n \n const privateKeyBuffer = EthUtil.toBuffer(privateKey);\n \n const tx = new Transaction(rawTx);\n \n tx.sign(privateKeyBuffer);\n const serializedTx = tx.serialize();\n \n return this.web3.eth.sendSignedTransaction(\n `0x${serializedTx.toString('hex')}`\n );\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"transfer"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" ({ "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"to"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"memo"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"privateKey"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"gasLimit"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"}) "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c91062"},"children":[{"type":"text","value":"nonce"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"getTransactionCount"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c91062"},"children":[{"type":"text","value":"gasPrice"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"getGasPrice"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c91062"},"children":[{"type":"text","value":"rawTx"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"to"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" value: "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"toHex"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"toWei"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'ether'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":")),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" gasLimit: "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"toHex"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"gasLimit"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" gasPrice: "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"toHex"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"gasPrice"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" nonce: "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"toHex"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"nonce"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" data: "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"memo"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c91062"},"children":[{"type":"text","value":"privateKeyBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"EthUtil"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"toBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"privateKey"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c91062"},"children":[{"type":"text","value":"tx"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"Transaction"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"rawTx"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"tx"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"sign"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"privateKeyBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c91062"},"children":[{"type":"text","value":"serializedTx"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"tx"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"serialize"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c91062"},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"sendSignedTransaction"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"`0x${"}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"serializedTx"}]},{"type":"element","tag":"span","props":{"class":"ct-fd0f2b"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"toString"}]},{"type":"element","tag":"span","props":{"class":"ct-fd0f2b"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'hex'"}]},{"type":"element","tag":"span","props":{"class":"ct-fd0f2b"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"}`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"estimating-transaction-fee"},"children":[{"type":"text","value":"Estimating transaction FEE"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Useful to get fixed amount of tokens from user with pre-estimated fee."}]},{"type":"element","tag":"code","props":{"code":"import { web3 } from '.';\n\nconst estimateFee = async ({\n from,\n to,\n value,\n memo,\n}) => {\n const gasPrice = await web3.eth.getGasPrice();\n const gasLimit = await web3.eth.estimateGas({\n from,\n to,\n value: web3.utils.toHex(web3.utils.toWei(value, 'ether')),\n data: web3.utils.asciiToHex(memo),\n }).call();\n \n return web3.utils.fromWei(\n BigInt(gasPrice.toString())\n .multiply(BigInt(gasLimit.toString()))\n .toString()\n );\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'.'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"estimateFee"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" ({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"to"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"memo"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"}) "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c91062"},"children":[{"type":"text","value":"gasPrice"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"getGasPrice"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c91062"},"children":[{"type":"text","value":"gasLimit"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"estimateGas"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"to"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" value: "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"toHex"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"toWei"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'ether'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":")),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" data: "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"asciiToHex"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"memo"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" })."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"call"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"fromWei"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2eedec"},"children":[{"type":"text","value":"BigInt"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"gasPrice"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"toString"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"())"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"multiply"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2eedec"},"children":[{"type":"text","value":"BigInt"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"gasLimit"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"toString"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"()))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"toString"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"subscribing-to-wallet-address-change"},"children":[{"type":"text","value":"Subscribing to wallet address change"}]},{"type":"element","tag":"code","props":{"code":"import { web3 } from '.';\n\nweb3.currentProvider.on('accountsChanged', callback);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'.'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"currentProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'accountsChanged'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"callback"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":");"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"watching-network-change"},"children":[{"type":"text","value":"Watching network change"}]},{"type":"element","tag":"code","props":{"code":"ethereum.on('chainChanged', handler: (chainId: string) => void);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"ethereum"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'chainChanged'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"handler"}]},{"type":"element","tag":"span","props":{"class":"ct-20099f"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"adding-custom-token-to-wallet"},"children":[{"type":"text","value":"Adding custom token to wallet"}]},{"type":"element","tag":"code","props":{"code":"window.ethereum\n .request({\n method: 'wallet_watchAsset',\n params: {\n type: 'ERC20',\n options: {\n address: '0xb60e8dd61c5d32be8058bb8eb970870f07233155',\n symbol: 'FOO',\n decimals: 18,\n image: 'https://foo.io/token-image.svg',\n },\n },\n })\n .then((success) => {\n if (success) {\n console.log('FOO successfully added to wallet!')\n } else {\n throw new Error('Something went wrong.')\n }\n })\n .catch(console.error)\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"window"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"ethereum"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" method: "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'wallet_watchAsset'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" params: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" type: "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'ERC20'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" options: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" address: "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'0xb60e8dd61c5d32be8058bb8eb970870f07233155'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" symbol: "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'FOO'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" decimals: "}]},{"type":"element","tag":"span","props":{"class":"ct-894d23"},"children":[{"type":"text","value":"18"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" image: "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'https://foo.io/token-image.svg'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-de9cf1"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-2b9286"},"children":[{"type":"text","value":"then"}]},{"type":"element","tag":"span","props":{"class":"ct-de9cf1"},"children":[{"type":"text","value":"(("}]},{"type":"element","tag":"span","props":{"class":"ct-ecd2f7"},"children":[{"type":"text","value":"success"}]},{"type":"element","tag":"span","props":{"class":"ct-de9cf1"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-dfc9dd"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-de9cf1"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"success"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'FOO successfully added to wallet!'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"else"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2eedec"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'Something went wrong.'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":")"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"changing-network-to-custom"},"children":[{"type":"text","value":"Changing network to custom"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Checking current chainId:"}]},{"type":"element","tag":"code","props":{"code":"const getChainID = async () => {\n return ethereum.request({ method: 'eth_chainId' })\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"getChainID"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"ethereum"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"({ method: "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'eth_chainId'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Asking wallet to change current network:"}]},{"type":"element","tag":"code","props":{"code":"try {\n await window.ethereum.request({\n method: 'wallet_switchEthereumChain',\n params: [{ chainId: '0x03' }], // ropsten chainID (3) in hex\n });\n} catch (switchError) {\n // This error code indicates that the chain has not been added to MetaMask.\n if (error.code === 4902) {\n try {\n await window.ethereum.request({\n method: 'wallet_addEthereumChain',\n params: [{ \n chainId: '0x03', // ropsten chainID (3) in hex\n chainName: 'Ropsten Test Network', \n nativeCurrency: { \n name: 'ETH',\n symbol: 'ETH',\n decimals: 18\n }, \n rpcUrls: ['https://ropsten.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161'], \n blockExplorerUrls: ['https://ropsten.etherscan.io'] \n }] ,\n });\n } catch (addError) {\n // handle \"add\" error\n }\n }\n // handle other \"switch\" errors\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"try"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"window"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"ethereum"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" method: "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'wallet_switchEthereumChain'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" params: [{ chainId: "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'0x03'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" }], "}]},{"type":"element","tag":"span","props":{"class":"ct-0a81e7"},"children":[{"type":"text","value":"// ropsten chainID (3) in hex"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"} "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"switchError"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0a81e7"},"children":[{"type":"text","value":"// This error code indicates that the chain has not been added to MetaMask."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"code"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"==="}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-894d23"},"children":[{"type":"text","value":"4902"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"try"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"window"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"ethereum"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" method: "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'wallet_addEthereumChain'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" params: [{ "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" chainId: "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'0x03'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0a81e7"},"children":[{"type":"text","value":"// ropsten chainID (3) in hex"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" chainName: "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'Ropsten Test Network'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" nativeCurrency: { "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" name: "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'ETH'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" symbol: "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'ETH'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" decimals: "}]},{"type":"element","tag":"span","props":{"class":"ct-894d23"},"children":[{"type":"text","value":"18"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" }, "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" rpcUrls: ["}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'https://ropsten.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"], "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" blockExplorerUrls: ["}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'https://ropsten.etherscan.io'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"] "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" }] ,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"addError"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0a81e7"},"children":[{"type":"text","value":"// handle \"add\" error"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0a81e7"},"children":[{"type":"text","value":"// handle other \"switch\" errors"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-894d23{color:#79C0FF}.ct-20099f{color:#C9D1D9}.ct-2eedec{color:#79C0FF}.ct-fd0f2b{color:#A5D6FF}.ct-a77722{color:#79C0FF}.ct-ecd2f7{color:#FFA657}.ct-1f936b{color:#FF7B72}.ct-2b9286{color:#D2A8FF}.ct-de9cf1{color:#C9D1D9}.ct-dfc9dd{color:#FF7B72}.ct-a728a9{color:#D2A8FF}.ct-c91062{color:#79C0FF}.ct-fe8bf2{color:#FF7B72}.ct-0a81e7{color:#8B949E}.ct-e80568{color:#A5D6FF}.ct-58e1b5{color:#C9D1D9}.ct-ec66b6{color:#C9D1D9}.ct-414e6d{color:#FF7B72}.light .ct-414e6d{color:#859900}.light .ct-ec66b6{color:#657B83}.light .ct-58e1b5{color:#268BD2}.light .ct-e80568{color:#2AA198}.light .ct-0a81e7{color:#93A1A1}.light .ct-fe8bf2{color:#073642}.light .ct-c91062{color:#268BD2}.light .ct-a728a9{color:#268BD2}.light .ct-dfc9dd{color:#073642}.light .ct-de9cf1{color:#657B83}.light .ct-2b9286{color:#268BD2}.light .ct-1f936b{color:#859900}.light .ct-ecd2f7{color:#657B83}.light .ct-a77722{color:#859900}.light .ct-fd0f2b{color:#657B83}.light .ct-2eedec{color:#859900}.light .ct-20099f{color:#859900}.light .ct-894d23{color:#D33682}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"connecting-to-node","depth":2,"text":"Connecting to node"},{"id":"getting-wallet-balance","depth":2,"text":"Getting wallet balance"},{"id":"getting-wallet-address","depth":2,"text":"Getting wallet address"},{"id":"sending-transaction","depth":2,"text":"Sending transaction"},{"id":"estimating-transaction-fee","depth":2,"text":"Estimating transaction FEE"},{"id":"subscribing-to-wallet-address-change","depth":2,"text":"Subscribing to wallet address change"},{"id":"watching-network-change","depth":2,"text":"Watching network change"},{"id":"adding-custom-token-to-wallet","depth":2,"text":"Adding custom token to wallet"},{"id":"changing-network-to-custom","depth":2,"text":"Changing network to custom"}]}},"_type":"markdown","_id":"content:Blockchain:Common typescript examples.md","_source":"content","_file":"Blockchain/Common typescript examples.md","_extension":"md"},{"_path":"/blockchain/smart-contracts","_dir":"blockchain","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Smart Contracts","description":"For common functions see Common typescript examples.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For common functions see "},{"type":"element","tag":"a","props":{"href":"Common%20typescript%20examples"},"children":[{"type":"text","value":"Common typescript examples"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"getting-smart-contract-instance"},"children":[{"type":"text","value":"Getting smart contract instance"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Useful for calling smart contract methods:"}]},{"type":"element","tag":"code","props":{"code":"import { Contract } from 'web3-eth-contract';\nimport { web3 } from '.';\n\nconst getContract = (abi: object, address?: string): Contract => {\n const abiFromJson = JSON.parse(JSON.stringify(abi));\n return new web3.eth.Contract(abiFromJson, address);\n};\n\nexport default getContract;\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { Contract } from 'web3-eth-contract';\nimport { web3 } from '.';\n\nconst getContract = (abi: object, address?: string): Contract => {\n const abiFromJson = JSON.parse(JSON.stringify(abi));\n return new web3.eth.Contract(abiFromJson, address);\n};\n\nexport default getContract;\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"executing-contract-method"},"children":[{"type":"text","value":"Executing contract method"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Contract has "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"read"}]},{"type":"text","value":" and "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"write"}]},{"type":"text","value":" methods. To get a list of methods, you can paste contract address on "},{"type":"element","tag":"a","props":{"href":"https://etherscan.io/token/0xdac17f958d2ee523a2206206994597c13d831ec7#readContract","rel":["nofollow"]},"children":[{"type":"text","value":"https://etherscan.io/ ETH"}]},{"type":"text","value":" or any other service."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Read"}]},{"type":"text","value":" methods doesn't require spending "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"gas"}]},{"type":"text","value":". "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Write"}]},{"type":"text","value":" methods cost some amount of "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"gas"}]},{"type":"text","value":", hence they will be executed with confirmation from user."}]},{"type":"element","tag":"h3","props":{"id":"example-for-metamask-without-private-key"},"children":[{"type":"text","value":"Example for #Metamask without private key"}]},{"type":"element","tag":"code","props":{"code":"// see example below\nimport { getContract } from '.';\n\n// ABI of contract\nconst CONTRACT_ABI = { /* ... */ };\n // address for contract\nconst CONTRACT_ADDRESS = '0xdea164f67df4dbfe675d5271c9d404e0260f33bb';\n\nexport const executeContractMethod = async ({}) => {\n // getting contract\n const contract = getContract(CONTRACT_ABI, CONTRACT_ADDRESS);\n \n // Calling write method\n try {\n // authorizing with Metamask\n await web3.currentProvider.request({ method: 'eth_requestAccounts' });\n // getting wallet address\n const addressUser = web3.currentProvider.selectedAddress;\n // calling \"store\" store method for contract\n // payload should include `from` address, that matches\n // current user's wallet\n await contract.methods.store(0, 'Parameter').send({\n from: addressUser,\n });\n } catch (e) {\n throw new Error(e);\n }\n \n // calling read method\n try {\n // this method can return data\n const result = await contract.methods.retrieve().call();\n } catch (e) {\n throw new Error(e);\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// see example below\nimport { getContract } from '.';\n\n// ABI of contract\nconst CONTRACT_ABI = { /* ... */ };\n // address for contract\nconst CONTRACT_ADDRESS = '0xdea164f67df4dbfe675d5271c9d404e0260f33bb';\n\nexport const executeContractMethod = async ({}) => {\n // getting contract\n const contract = getContract(CONTRACT_ABI, CONTRACT_ADDRESS);\n \n // Calling write method\n try {\n // authorizing with Metamask\n await web3.currentProvider.request({ method: 'eth_requestAccounts' });\n // getting wallet address\n const addressUser = web3.currentProvider.selectedAddress;\n // calling \"store\" store method for contract\n // payload should include `from` address, that matches\n // current user's wallet\n await contract.methods.store(0, 'Parameter').send({\n from: addressUser,\n });\n } catch (e) {\n throw new Error(e);\n }\n \n // calling read method\n try {\n // this method can return data\n const result = await contract.methods.retrieve().call();\n } catch (e) {\n throw new Error(e);\n }\n}\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"nodejs-and-react-native-example"},"children":[{"type":"text","value":"Node.js and React Native example"}]},{"type":"element","tag":"code","props":{"code":"// see example below\nimport { getContract } from '.';\n\n// ABI контракта\nconst CONTRACT_ABI = { /* ... */ };\n// contract address\nconst CONTRACT_ADDRESS = '0xdea164f67df4dbfe675d5271c9d404e0260f33bb';\n// getting contract\nconst contract = getContract(CONTRACT_ABI, CONTRACT_ADDRESS);\n// account's private key\nconst privateKey = '...';\n\n// write-methods requires private key\nconst executeContractMethod = async (val: number) => {\n const transaction = contract.methods.store(val);\n const account = web3.eth.accounts.privateKeyToAccount(privateKey);\n const options = {\n to: CONTRACT_ADDRESS,\n data: transaction.encodeABI(),\n gas: await transaction.estimateGas({ from: account.address }),\n gasPrice: await web3.eth.getGasPrice(),\n };\n const signed = await web3.eth.accounts.signTransaction(\n options,\n privateKey,\n );\n await web3.eth.sendSignedTransaction(signed.rawTransaction!);\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// see example below\nimport { getContract } from '.';\n\n// ABI контракта\nconst CONTRACT_ABI = { /* ... */ };\n// contract address\nconst CONTRACT_ADDRESS = '0xdea164f67df4dbfe675d5271c9d404e0260f33bb';\n// getting contract\nconst contract = getContract(CONTRACT_ABI, CONTRACT_ADDRESS);\n// account's private key\nconst privateKey = '...';\n\n// write-methods requires private key\nconst executeContractMethod = async (val: number) => {\n const transaction = contract.methods.store(val);\n const account = web3.eth.accounts.privateKeyToAccount(privateKey);\n const options = {\n to: CONTRACT_ADDRESS,\n data: transaction.encodeABI(),\n gas: await transaction.estimateGas({ from: account.address }),\n gasPrice: await web3.eth.getGasPrice(),\n };\n const signed = await web3.eth.accounts.signTransaction(\n options,\n privateKey,\n );\n await web3.eth.sendSignedTransaction(signed.rawTransaction!);\n};\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"calling-a-batch-of-contracts-methods"},"children":[{"type":"text","value":"Calling a batch of contract's methods"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Function calls batch of requests, returning array of results. For example:"}]},{"type":"element","tag":"code","props":{"code":" const requests = [\n contract.method.balanceOf().call,\n contract.method.getStaked().call\n ]\n\n const result = await makeBatchRequest(request);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":" const requests = [\n contract.method.balanceOf().call,\n contract.method.getStaked().call\n ]\n\n const result = await makeBatchRequest(request);\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"const web3 = new Web3(Web3.givenProvider || PROVIDER_URL);\n\nconst makeBatchRequest = (calls: any[]) => {\n try {\n const web3 = getWeb3NoAccount();\n const batch = new web3.BatchRequest();\n\n const promises = calls.map((call) => {\n return new Promise((resolve, reject) => {\n batch.add(\n call.request({}, (err, result) => {\n if (err) {\n reject(err);\n } else {\n resolve(result);\n }\n })\n );\n });\n });\n\n batch.execute();\n\n return Promise.all(promises);\n } catch {\n return null;\n }\n};\n\nexport default makeBatchRequest;\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const web3 = new Web3(Web3.givenProvider || PROVIDER_URL);\n\nconst makeBatchRequest = (calls: any[]) => {\n try {\n const web3 = getWeb3NoAccount();\n const batch = new web3.BatchRequest();\n\n const promises = calls.map((call) => {\n return new Promise((resolve, reject) => {\n batch.add(\n call.request({}, (err, result) => {\n if (err) {\n reject(err);\n } else {\n resolve(result);\n }\n })\n );\n });\n });\n\n batch.execute();\n\n return Promise.all(promises);\n } catch {\n return null;\n }\n};\n\nexport default makeBatchRequest;\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"subscribing-to-smart-contract-events"},"children":[{"type":"text","value":"Subscribing to smart contract events"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There're different ways to subscribe for contract events. For all of them you will need following variables:"}]},{"type":"element","tag":"code","props":{"code":" import Web3 from 'web3';\n const web3 = new Web3('YOUR_RPC_ENDPOINT_HERE');\n const ABI = 'YOUR ABI HERE';\n const CONTRACT_ADDRESS = 'YOUR CONTRACT ADDRESS HERE';\n const myContract = new Web3.Contract(ABI, CONTRACT_ADDRESS);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":" import Web3 from 'web3';\n const web3 = new Web3('YOUR_RPC_ENDPOINT_HERE');\n const ABI = 'YOUR ABI HERE';\n const CONTRACT_ADDRESS = 'YOUR CONTRACT ADDRESS HERE';\n const myContract = new Web3.Contract(ABI, CONTRACT_ADDRESS);\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"by-accessing-contractevents"},"children":[{"type":"text","value":"By accessing contract.events"}]},{"type":"element","tag":"code","props":{"code":"referralProgramContract.events\n .RegisterUser()\n .on('connected', (subscriptionId: string) => {\n console.log(`| UserRegistered | events | ${subscriptionId}`);\n })\n .on(\n 'data',\n async (event: {\n removed: boolean;\n returnValues: RegisterUserResponseInterface;\n }) => {\n try {\n if (event.removed) {\n return;\n }\n const { user, referrer } = event.returnValues;\n console.log(user, referrer);\n } catch (e) {\n console.log(`| ONCE | ${e}`);\n }\n },\n )\n .on('error', (error: ErrnoException) => {\n console.log(error);\n });\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"referralProgramContract.events\n .RegisterUser()\n .on('connected', (subscriptionId: string) => {\n console.log(`| UserRegistered | events | ${subscriptionId}`);\n })\n .on(\n 'data',\n async (event: {\n removed: boolean;\n returnValues: RegisterUserResponseInterface;\n }) => {\n try {\n if (event.removed) {\n return;\n }\n const { user, referrer } = event.returnValues;\n console.log(user, referrer);\n } catch (e) {\n console.log(`| ONCE | ${e}`);\n }\n },\n )\n .on('error', (error: ErrnoException) => {\n console.log(error);\n });\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"with-filtering"},"children":[{"type":"text","value":"With filtering"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We're listening to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Transfer"}]},{"type":"text","value":" event here:"}]},{"type":"element","tag":"code","props":{"code":" let options = {\n filter: {\n value: [],\n },\n fromBlock: 0\n };\n\n myContract.events.Transfer(options)\n .on('data', event => console.log(event))\n .on('changed', changed => console.log(changed))\n .on('error', err => throw err)\n .on('connected', str => console.log(str))\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":" let options = {\n filter: {\n value: [],\n },\n fromBlock: 0\n };\n\n myContract.events.Transfer(options)\n .on('data', event => console.log(event))\n .on('changed', changed => console.log(changed))\n .on('error', err => throw err)\n .on('connected', str => console.log(str))\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"common-subscribe-method"},"children":[{"type":"text","value":"Common Subscribe method"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Filtering options can also be specified:"}]},{"type":"element","tag":"code","props":{"code":" let options = {\n fromBlock: 0,\n address: ['address-1', 'address-2'], //Only get events from specific addresses\n topics: [] //What topics to subscribe to\n };\n\n let subscription = ('logs', options, (err,event) => {\n if (!err)\n console.log(event)\n });\n\n subscription.on('data', event => console.log(event))\n subscription.on('changed', changed => console.log(changed))\n subscription.on('error', err => { throw err })\n subscription.on('connected', nr => console.log(nr))\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":" let options = {\n fromBlock: 0,\n address: ['address-1', 'address-2'], //Only get events from specific addresses\n topics: [] //What topics to subscribe to\n };\n\n let subscription = ('logs', options, (err,event) => {\n if (!err)\n console.log(event)\n });\n\n subscription.on('data', event => console.log(event))\n subscription.on('changed', changed => console.log(changed))\n subscription.on('error', err => { throw err })\n subscription.on('connected', nr => console.log(nr))\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"getting-event-history"},"children":[{"type":"text","value":"Getting event history"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Getting history for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Transfer"}]},{"type":"text","value":" events for specific values. More info can be found "},{"type":"element","tag":"a","props":{"href":"https://web3js.readthedocs.io/en/v1.2.11/web3-eth-subscribe.html#","rel":["nofollow"]},"children":[{"type":"text","value":"here"}]}]},{"type":"element","tag":"code","props":{"code":" //example options(optional)\n let options = {\n filter: {\n // only get events where transfer value was 1000 or 1337\n value: ['1000', '1337'] \n },\n // number | \"earliest\" | \"pending\" | \"latest\"\n fromBlock: 0, \n toBlock: 'latest'\n };\n\n myContract.getPastEvents('Transfer', options)\n .then(results => console.log(results))\n .catch(err => throw err);\n\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":" //example options(optional)\n let options = {\n filter: {\n // only get events where transfer value was 1000 or 1337\n value: ['1000', '1337'] \n },\n // number | \"earliest\" | \"pending\" | \"latest\"\n fromBlock: 0, \n toBlock: 'latest'\n };\n\n myContract.getPastEvents('Transfer', options)\n .then(results => console.log(results))\n .catch(err => throw err);\n\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For common functions see "},{"type":"element","tag":"a","props":{"href":"Common%20typescript%20examples"},"children":[{"type":"text","value":"Common typescript examples"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"getting-smart-contract-instance"},"children":[{"type":"text","value":"Getting smart contract instance"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Useful for calling smart contract methods:"}]},{"type":"element","tag":"code","props":{"code":"import { Contract } from 'web3-eth-contract';\nimport { web3 } from '.';\n\nconst getContract = (abi: object, address?: string): Contract => {\n const abiFromJson = JSON.parse(JSON.stringify(abi));\n return new web3.eth.Contract(abiFromJson, address);\n};\n\nexport default getContract;\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"Contract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'web3-eth-contract'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'.'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39fbef"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-98d685"},"children":[{"type":"text","value":"getContract"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7760"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-8d5659"},"children":[{"type":"text","value":"abi"}]},{"type":"element","tag":"span","props":{"class":"ct-ba7760"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e9d8e"},"children":[{"type":"text","value":"object"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-8d5659"},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"span","props":{"class":"ct-ba7760"},"children":[{"type":"text","value":"?:"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e9d8e"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-ba7760"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-39fbef"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-39fbef"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f3b352"},"children":[{"type":"text","value":"abiFromJson"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7760"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-82aa2e"},"children":[{"type":"text","value":"JSON"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f3b352"},"children":[{"type":"text","value":"parse"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"Contract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"abiFromJson"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-d2d503"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-d2d503"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"getContract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":";"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"executing-contract-method"},"children":[{"type":"text","value":"Executing contract method"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Contract has "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"read"}]},{"type":"text","value":" and "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"write"}]},{"type":"text","value":" methods. To get a list of methods, you can paste contract address on "},{"type":"element","tag":"a","props":{"href":"https://etherscan.io/token/0xdac17f958d2ee523a2206206994597c13d831ec7#readContract","rel":["nofollow"]},"children":[{"type":"text","value":"https://etherscan.io/ ETH"}]},{"type":"text","value":" or any other service."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Read"}]},{"type":"text","value":" methods doesn't require spending "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"gas"}]},{"type":"text","value":". "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Write"}]},{"type":"text","value":" methods cost some amount of "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"gas"}]},{"type":"text","value":", hence they will be executed with confirmation from user."}]},{"type":"element","tag":"h3","props":{"id":"example-for-metamask-without-private-key"},"children":[{"type":"text","value":"Example for #Metamask without private key"}]},{"type":"element","tag":"code","props":{"code":"// see example below\nimport { getContract } from '.';\n\n// ABI of contract\nconst CONTRACT_ABI = { /* ... */ };\n // address for contract\nconst CONTRACT_ADDRESS = '0xdea164f67df4dbfe675d5271c9d404e0260f33bb';\n\nexport const executeContractMethod = async ({}) => {\n // getting contract\n const contract = getContract(CONTRACT_ABI, CONTRACT_ADDRESS);\n \n // Calling write method\n try {\n // authorizing with Metamask\n await web3.currentProvider.request({ method: 'eth_requestAccounts' });\n // getting wallet address\n const addressUser = web3.currentProvider.selectedAddress;\n // calling \"store\" store method for contract\n // payload should include `from` address, that matches\n // current user's wallet\n await contract.methods.store(0, 'Parameter').send({\n from: addressUser,\n });\n } catch (e) {\n throw new Error(e);\n }\n \n // calling read method\n try {\n // this method can return data\n const result = await contract.methods.retrieve().call();\n } catch (e) {\n throw new Error(e);\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// see example below"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"getContract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'.'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// ABI of contract"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"CONTRACT_ABI"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"/* ... */"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// address for contract"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"CONTRACT_ADDRESS"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'0xdea164f67df4dbfe675d5271c9d404e0260f33bb'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"executeContractMethod"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" ({}) "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// getting contract"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"contract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"getContract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"CONTRACT_ABI"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"CONTRACT_ADDRESS"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// Calling write method"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"try"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// authorizing with Metamask"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"currentProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"({ method: "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'eth_requestAccounts'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// getting wallet address"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"addressUser"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"currentProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"selectedAddress"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// calling \"store\" store method for contract"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// payload should include `from` address, that matches"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// current user's wallet"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"contract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"methods"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"store"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-6138fb"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'Parameter'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"send"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" from: "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"addressUser"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"e"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ee6b52"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"e"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// calling read method"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"try"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// this method can return data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"result"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"contract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"methods"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"retrieve"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"()."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"call"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"e"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ee6b52"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"e"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"nodejs-and-react-native-example"},"children":[{"type":"text","value":"Node.js and React Native example"}]},{"type":"element","tag":"code","props":{"code":"// see example below\nimport { getContract } from '.';\n\n// ABI контракта\nconst CONTRACT_ABI = { /* ... */ };\n// contract address\nconst CONTRACT_ADDRESS = '0xdea164f67df4dbfe675d5271c9d404e0260f33bb';\n// getting contract\nconst contract = getContract(CONTRACT_ABI, CONTRACT_ADDRESS);\n// account's private key\nconst privateKey = '...';\n\n// write-methods requires private key\nconst executeContractMethod = async (val: number) => {\n const transaction = contract.methods.store(val);\n const account = web3.eth.accounts.privateKeyToAccount(privateKey);\n const options = {\n to: CONTRACT_ADDRESS,\n data: transaction.encodeABI(),\n gas: await transaction.estimateGas({ from: account.address }),\n gasPrice: await web3.eth.getGasPrice(),\n };\n const signed = await web3.eth.accounts.signTransaction(\n options,\n privateKey,\n );\n await web3.eth.sendSignedTransaction(signed.rawTransaction!);\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// see example below"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"getContract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'.'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// ABI контракта"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"CONTRACT_ABI"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"/* ... */"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// contract address"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"CONTRACT_ADDRESS"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'0xdea164f67df4dbfe675d5271c9d404e0260f33bb'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// getting contract"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"contract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"getContract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"CONTRACT_ABI"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"CONTRACT_ADDRESS"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// account's private key"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"privateKey"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'...'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// write-methods requires private key"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39fbef"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-98d685"},"children":[{"type":"text","value":"executeContractMethod"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7760"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-39fbef"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-8d5659"},"children":[{"type":"text","value":"val"}]},{"type":"element","tag":"span","props":{"class":"ct-ba7760"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e9d8e"},"children":[{"type":"text","value":"number"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-39fbef"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"transaction"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"contract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"methods"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"store"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"val"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"account"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"accounts"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"privateKeyToAccount"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"privateKey"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" to: "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"CONTRACT_ADDRESS"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" data: "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"transaction"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"encodeABI"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"(),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" gas: "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"transaction"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"estimateGas"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"({ from: "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"account"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" gasPrice: "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"getGasPrice"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"(),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"signed"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"accounts"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"signTransaction"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"privateKey"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"sendSignedTransaction"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"signed"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"rawTransaction"}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"calling-a-batch-of-contracts-methods"},"children":[{"type":"text","value":"Calling a batch of contract's methods"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Function calls batch of requests, returning array of results. For example:"}]},{"type":"element","tag":"code","props":{"code":" const requests = [\n contract.method.balanceOf().call,\n contract.method.getStaked().call\n ]\n\n const result = await makeBatchRequest(request);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"requests"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"contract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"method"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"balanceOf"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"()."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"call"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"contract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"method"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"getStaked"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"()."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"call"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" ]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"result"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"makeBatchRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"const web3 = new Web3(Web3.givenProvider || PROVIDER_URL);\n\nconst makeBatchRequest = (calls: any[]) => {\n try {\n const web3 = getWeb3NoAccount();\n const batch = new web3.BatchRequest();\n\n const promises = calls.map((call) => {\n return new Promise((resolve, reject) => {\n batch.add(\n call.request({}, (err, result) => {\n if (err) {\n reject(err);\n } else {\n resolve(result);\n }\n })\n );\n });\n });\n\n batch.execute();\n\n return Promise.all(promises);\n } catch {\n return null;\n }\n};\n\nexport default makeBatchRequest;\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"givenProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"PROVIDER_URL"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39fbef"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-98d685"},"children":[{"type":"text","value":"makeBatchRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7760"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-8d5659"},"children":[{"type":"text","value":"calls"}]},{"type":"element","tag":"span","props":{"class":"ct-ba7760"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e9d8e"},"children":[{"type":"text","value":"any"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":"[]) "}]},{"type":"element","tag":"span","props":{"class":"ct-39fbef"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"try"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"getWeb3NoAccount"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"batch"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"BatchRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"promises"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"calls"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"map"}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7760"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7760"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e9d8e"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":"(("}]},{"type":"element","tag":"span","props":{"class":"ct-8d5659"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-8d5659"},"children":[{"type":"text","value":"reject"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-39fbef"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"batch"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"add"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"err"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"reject"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"err"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"else"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"result"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"batch"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"execute"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ee6b52"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"all"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"promises"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f1ea08"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-d2d503"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-d2d503"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"makeBatchRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":";"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"subscribing-to-smart-contract-events"},"children":[{"type":"text","value":"Subscribing to smart contract events"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There're different ways to subscribe for contract events. For all of them you will need following variables:"}]},{"type":"element","tag":"code","props":{"code":" import Web3 from 'web3';\n const web3 = new Web3('YOUR_RPC_ENDPOINT_HERE');\n const ABI = 'YOUR ABI HERE';\n const CONTRACT_ADDRESS = 'YOUR CONTRACT ADDRESS HERE';\n const myContract = new Web3.Contract(ABI, CONTRACT_ADDRESS);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'web3'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'YOUR_RPC_ENDPOINT_HERE'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"ABI"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'YOUR ABI HERE'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"CONTRACT_ADDRESS"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'YOUR CONTRACT ADDRESS HERE'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"myContract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"Contract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"ABI"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"CONTRACT_ADDRESS"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"by-accessing-contractevents"},"children":[{"type":"text","value":"By accessing contract.events"}]},{"type":"element","tag":"code","props":{"code":"referralProgramContract.events\n .RegisterUser()\n .on('connected', (subscriptionId: string) => {\n console.log(`| UserRegistered | events | ${subscriptionId}`);\n })\n .on(\n 'data',\n async (event: {\n removed: boolean;\n returnValues: RegisterUserResponseInterface;\n }) => {\n try {\n if (event.removed) {\n return;\n }\n const { user, referrer } = event.returnValues;\n console.log(user, referrer);\n } catch (e) {\n console.log(`| ONCE | ${e}`);\n }\n },\n )\n .on('error', (error: ErrnoException) => {\n console.log(error);\n });\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"referralProgramContract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"events"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"RegisterUser"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-98d685"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86b87d"},"children":[{"type":"text","value":"'connected'"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":", ("}]},{"type":"element","tag":"span","props":{"class":"ct-8d5659"},"children":[{"type":"text","value":"subscriptionId"}]},{"type":"element","tag":"span","props":{"class":"ct-ba7760"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e9d8e"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-39fbef"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"`| UserRegistered | events | ${"}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"subscriptionId"}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"}`"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'data'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-39fbef"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-8d5659"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-ba7760"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d5659"},"children":[{"type":"text","value":"removed"}]},{"type":"element","tag":"span","props":{"class":"ct-ba7760"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e9d8e"},"children":[{"type":"text","value":"boolean"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d5659"},"children":[{"type":"text","value":"returnValues"}]},{"type":"element","tag":"span","props":{"class":"ct-ba7760"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-156cde"},"children":[{"type":"text","value":"RegisterUserResponseInterface"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" }) "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"try"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"removed"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"user"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"referrer"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"returnValues"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"user"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"referrer"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"e"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"`| ONCE | ${"}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"e"}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"}`"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" )"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-98d685"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86b87d"},"children":[{"type":"text","value":"'error'"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":", ("}]},{"type":"element","tag":"span","props":{"class":"ct-8d5659"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-ba7760"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-156cde"},"children":[{"type":"text","value":"ErrnoException"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-39fbef"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" });"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"with-filtering"},"children":[{"type":"text","value":"With filtering"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We're listening to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Transfer"}]},{"type":"text","value":" event here:"}]},{"type":"element","tag":"code","props":{"code":" let options = {\n filter: {\n value: [],\n },\n fromBlock: 0\n };\n\n myContract.events.Transfer(options)\n .on('data', event => console.log(event))\n .on('changed', changed => console.log(changed))\n .on('error', err => throw err)\n .on('connected', str => console.log(str))\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" filter: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" value: [],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" fromBlock: "}]},{"type":"element","tag":"span","props":{"class":"ct-6138fb"},"children":[{"type":"text","value":"0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"myContract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"events"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"Transfer"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'data'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'changed'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"changed"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'error'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'connected'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"str"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"))"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"common-subscribe-method"},"children":[{"type":"text","value":"Common Subscribe method"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Filtering options can also be specified:"}]},{"type":"element","tag":"code","props":{"code":" let options = {\n fromBlock: 0,\n address: ['address-1', 'address-2'], //Only get events from specific addresses\n topics: [] //What topics to subscribe to\n };\n\n let subscription = ('logs', options, (err,event) => {\n if (!err)\n console.log(event)\n });\n\n subscription.on('data', event => console.log(event))\n subscription.on('changed', changed => console.log(changed))\n subscription.on('error', err => { throw err })\n subscription.on('connected', nr => console.log(nr))\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" fromBlock: "}]},{"type":"element","tag":"span","props":{"class":"ct-6138fb"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" address: ["}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'address-1'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'address-2'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"], "}]},{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"//Only get events from specific addresses"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" topics: [] "}]},{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"//What topics to subscribe to"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"subscription"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'logs'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"options"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"err"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"subscription"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'data'"}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"subscription"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'changed'"}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"changed"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"subscription"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'error'"}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"err"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"subscription"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'connected'"}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"nr"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"))"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"getting-event-history"},"children":[{"type":"text","value":"Getting event history"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Getting history for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Transfer"}]},{"type":"text","value":" events for specific values. More info can be found "},{"type":"element","tag":"a","props":{"href":"https://web3js.readthedocs.io/en/v1.2.11/web3-eth-subscribe.html#","rel":["nofollow"]},"children":[{"type":"text","value":"here"}]}]},{"type":"element","tag":"code","props":{"code":" //example options(optional)\n let options = {\n filter: {\n // only get events where transfer value was 1000 or 1337\n value: ['1000', '1337'] \n },\n // number | \"earliest\" | \"pending\" | \"latest\"\n fromBlock: 0, \n toBlock: 'latest'\n };\n\n myContract.getPastEvents('Transfer', options)\n .then(results => console.log(results))\n .catch(err => throw err);\n\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"//example options(optional)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" filter: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// only get events where transfer value was 1000 or 1337"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" value: ["}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'1000'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'1337'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"] "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// number | \"earliest\" | \"pending\" | \"latest\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" fromBlock: "}]},{"type":"element","tag":"span","props":{"class":"ct-6138fb"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" toBlock: "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'latest'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"myContract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"getPastEvents"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'Transfer'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"then"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"results"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-156cde{color:#FFA657}.ct-86b87d{color:#A5D6FF}.ct-f1ea08{color:#79C0FF}.ct-ee6b52{color:#79C0FF}.ct-6138fb{color:#79C0FF}.ct-d06ad1{color:#79C0FF}.ct-7cfc7d{color:#FF7B72}.ct-709ef0{color:#8B949E}.ct-d2d503{color:#FFA657}.ct-af8265{color:#D2A8FF}.ct-82aa2e{color:#79C0FF}.ct-f3b352{color:#79C0FF}.ct-6e9d8e{color:#79C0FF}.ct-8d5659{color:#FFA657}.ct-ba7760{color:#FF7B72}.ct-98d685{color:#D2A8FF}.ct-303309{color:#C9D1D9}.ct-39fbef{color:#FF7B72}.ct-ba7e2c{color:#A5D6FF}.ct-7194b1{color:#C9D1D9}.ct-b1eeeb{color:#C9D1D9}.ct-c8ffb0{color:#FF7B72}.light .ct-c8ffb0{color:#859900}.light .ct-b1eeeb{color:#657B83}.light .ct-7194b1{color:#268BD2}.light .ct-ba7e2c{color:#2AA198}.light .ct-39fbef{color:#073642}.light .ct-303309{color:#657B83}.light .ct-98d685{color:#268BD2}.light .ct-ba7760{color:#859900}.light .ct-8d5659{color:#657B83}.light .ct-6e9d8e{color:#859900}.light .ct-f3b352{color:#268BD2}.light .ct-82aa2e{color:#657B83}.light .ct-af8265{color:#268BD2}.light .ct-d2d503{color:#657B83}.light .ct-709ef0{color:#93A1A1}.light .ct-7cfc7d{color:#073642}.light .ct-d06ad1{color:#268BD2}.light .ct-6138fb{color:#D33682}.light .ct-ee6b52{color:#859900}.light .ct-f1ea08{color:#B58900}.light .ct-86b87d{color:#2AA198}.light .ct-156cde{color:#268BD2}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"getting-smart-contract-instance","depth":2,"text":"Getting smart contract instance"},{"id":"executing-contract-method","depth":2,"text":"Executing contract method","children":[{"id":"example-for-metamask-without-private-key","depth":3,"text":"Example for #Metamask without private key"},{"id":"nodejs-and-react-native-example","depth":3,"text":"Node.js and React Native example"},{"id":"calling-a-batch-of-contracts-methods","depth":3,"text":"Calling a batch of contract's methods"}]},{"id":"subscribing-to-smart-contract-events","depth":2,"text":"Subscribing to smart contract events","children":[{"id":"by-accessing-contractevents","depth":3,"text":"By accessing contract.events"},{"id":"with-filtering","depth":3,"text":"With filtering"},{"id":"common-subscribe-method","depth":3,"text":"Common Subscribe method"},{"id":"getting-event-history","depth":3,"text":"Getting event history"}]}]}},"_type":"markdown","_id":"content:Blockchain:Smart contracts.md","_source":"content","_file":"Blockchain/Smart contracts.md","_extension":"md"},{"_path":"/css/automatic-grid-like-masonry-with-pure-css","_dir":"css","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Automatic Grid Like Masonry With Pure CSS","description":"Grid, that places items by density. Pure #css solution. Can be used with items, that take different amount of rows/columns.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Grid, that places items by density. Pure #css solution. Can be used with items, that take different amount of rows/columns."}]},{"type":"element","tag":"code","props":{"code":"$cell: 250px;\n$gap: 20px;\n\n.grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax($cell, 1fr));\n grid-auto-rows: 256px;\n grid-auto-flow: row dense;\n grid-column-gap: $gap;\n grid-row-gap: $gap;\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"$cell: 250px;\n$gap: 20px;\n\n.grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax($cell, 1fr));\n grid-auto-rows: 256px;\n grid-auto-flow: row dense;\n grid-column-gap: $gap;\n grid-row-gap: $gap;\n}\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"basic-elements-with-double-height-or-width"},"children":[{"type":"text","value":"Basic elements with double height or width"}]},{"type":"element","tag":"code","props":{"code":".h-2 { // takes 2 columns\n grid-column-end: span 2;\n}\n\n.v-2 { // takes 2 rows\n grid-row-end: span 2;\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":".h-2 { // takes 2 columns\n grid-column-end: span 2;\n}\n\n.v-2 { // takes 2 rows\n grid-row-end: span 2;\n}\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"header-that-fills-all-columns"},"children":[{"type":"text","value":"Header, that fills all columns"}]},{"type":"element","tag":"code","props":{"code":".full-width {\n grid-row: 1 / 2; // height: 1 row\n grid-column: 1 / -1;\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":".full-width {\n grid-row: 1 / 2; // height: 1 row\n grid-column: 1 / -1;\n}\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"stamp-element-that-takes-3-rows-in-the-top-right-corner"},"children":[{"type":"text","value":"Stamp element, that takes 3 rows in the top right corner"}]},{"type":"element","tag":"code","props":{"code":".top-right {\n grid-row: 1 / 3; // height here\n grid-column: -2 / -1; // width here\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":".top-right {\n grid-row: 1 / 3; // height here\n grid-column: -2 / -1; // width here\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Grid, that places items by density. Pure #css solution. Can be used with items, that take different amount of rows/columns."}]},{"type":"element","tag":"code","props":{"code":"$cell: 250px;\n$gap: 20px;\n\n.grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax($cell, 1fr));\n grid-auto-rows: 256px;\n grid-auto-flow: row dense;\n grid-column-gap: $gap;\n grid-row-gap: $gap;\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0b1739"},"children":[{"type":"text","value":"$cell: "}]},{"type":"element","tag":"span","props":{"class":"ct-7f7248"},"children":[{"type":"text","value":"250"}]},{"type":"element","tag":"span","props":{"class":"ct-cb9271"},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0b1739"},"children":[{"type":"text","value":"$gap: "}]},{"type":"element","tag":"span","props":{"class":"ct-7f7248"},"children":[{"type":"text","value":"20"}]},{"type":"element","tag":"span","props":{"class":"ct-cb9271"},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-782921"},"children":[{"type":"text","value":".grid"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d1855"},"children":[{"type":"text","value":"display"}]},{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-486191"},"children":[{"type":"text","value":"grid"}]},{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d1855"},"children":[{"type":"text","value":"grid-template-columns"}]},{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-d99f2d"},"children":[{"type":"text","value":"repeat"}]},{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-26f635"},"children":[{"type":"text","value":"auto-fit"}]},{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-d99f2d"},"children":[{"type":"text","value":"minmax"}]},{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-26f635"},"children":[{"type":"text","value":"$cell"}]},{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6a1d51"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-b72695"},"children":[{"type":"text","value":"fr"}]},{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":"));"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e72082"},"children":[{"type":"text","value":"grid-auto-rows"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-7f7248"},"children":[{"type":"text","value":"256"}]},{"type":"element","tag":"span","props":{"class":"ct-cb9271"},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d1855"},"children":[{"type":"text","value":"grid-auto-flow"}]},{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-486191"},"children":[{"type":"text","value":"row"}]},{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-486191"},"children":[{"type":"text","value":"dense"}]},{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d1855"},"children":[{"type":"text","value":"grid-column-gap"}]},{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-26f635"},"children":[{"type":"text","value":"$gap"}]},{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d1855"},"children":[{"type":"text","value":"grid-row-gap"}]},{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-26f635"},"children":[{"type":"text","value":"$gap"}]},{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"basic-elements-with-double-height-or-width"},"children":[{"type":"text","value":"Basic elements with double height or width"}]},{"type":"element","tag":"code","props":{"code":".h-2 { // takes 2 columns\n grid-column-end: span 2;\n}\n\n.v-2 { // takes 2 rows\n grid-row-end: span 2;\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-782921"},"children":[{"type":"text","value":".h-2"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-6636be"},"children":[{"type":"text","value":"// takes 2 columns"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e72082"},"children":[{"type":"text","value":"grid-column-end"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e72082"},"children":[{"type":"text","value":"span"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7f7248"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-782921"},"children":[{"type":"text","value":".v-2"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-6636be"},"children":[{"type":"text","value":"// takes 2 rows"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e72082"},"children":[{"type":"text","value":"grid-row-end"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e72082"},"children":[{"type":"text","value":"span"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7f7248"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"header-that-fills-all-columns"},"children":[{"type":"text","value":"Header, that fills all columns"}]},{"type":"element","tag":"code","props":{"code":".full-width {\n grid-row: 1 / 2; // height: 1 row\n grid-column: 1 / -1;\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-782921"},"children":[{"type":"text","value":".full-width"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e72082"},"children":[{"type":"text","value":"grid-row"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-7f7248"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cb9271"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7f7248"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":"; "}]},{"type":"element","tag":"span","props":{"class":"ct-6636be"},"children":[{"type":"text","value":"// height: 1 row"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e72082"},"children":[{"type":"text","value":"grid-column"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-7f7248"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" / "}]},{"type":"element","tag":"span","props":{"class":"ct-7f7248"},"children":[{"type":"text","value":"-1"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"stamp-element-that-takes-3-rows-in-the-top-right-corner"},"children":[{"type":"text","value":"Stamp element, that takes 3 rows in the top right corner"}]},{"type":"element","tag":"code","props":{"code":".top-right {\n grid-row: 1 / 3; // height here\n grid-column: -2 / -1; // width here\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-782921"},"children":[{"type":"text","value":".top-right"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e72082"},"children":[{"type":"text","value":"grid-row"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-7f7248"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cb9271"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7f7248"},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":"; "}]},{"type":"element","tag":"span","props":{"class":"ct-6636be"},"children":[{"type":"text","value":"// height here"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e72082"},"children":[{"type":"text","value":"grid-column"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-7f7248"},"children":[{"type":"text","value":"-2"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" / "}]},{"type":"element","tag":"span","props":{"class":"ct-7f7248"},"children":[{"type":"text","value":"-1"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":"; "}]},{"type":"element","tag":"span","props":{"class":"ct-6636be"},"children":[{"type":"text","value":"// width here"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-6636be{color:#8B949E}.ct-e72082{color:#79C0FF}.ct-b72695{color:#FF7B72}.ct-6a1d51{color:#79C0FF}.ct-26f635{color:#FFA657}.ct-d99f2d{color:#79C0FF}.ct-486191{color:#79C0FF}.ct-7d1855{color:#79C0FF}.ct-9d7d33{color:#C9D1D9}.ct-782921{color:#79C0FF}.ct-19f723{color:#C9D1D9}.ct-cb9271{color:#FF7B72}.ct-7f7248{color:#79C0FF}.ct-0b1739{color:#FFA657}.light .ct-0b1739{color:#657B83}.light .ct-7f7248{color:#D33682}.light .ct-cb9271{color:#859900}.light .ct-19f723{color:#657B83}.light .ct-782921{color:#93A1A1}.light .ct-9d7d33{color:#657B83}.light .ct-7d1855{color:#859900}.light .ct-486191{color:#657B83}.light .ct-d99f2d{color:#268BD2}.light .ct-26f635{color:#657B83}.light .ct-6a1d51{color:#D33682}.light .ct-b72695{color:#859900}.light .ct-e72082{color:#859900}.light .ct-6636be{color:#93A1A1}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"basic-elements-with-double-height-or-width","depth":3,"text":"Basic elements with double height or width"},{"id":"header-that-fills-all-columns","depth":3,"text":"Header, that fills all columns"},{"id":"stamp-element-that-takes-3-rows-in-the-top-right-corner","depth":3,"text":"Stamp element, that takes 3 rows in the top right corner"}]}},"_type":"markdown","_id":"content:CSS:Automatic Grid like Masonry with pure CSS.md","_source":"content","_file":"CSS/Automatic Grid like Masonry with pure CSS.md","_extension":"md"},{"_path":"/css/sass-nth-child-iterate-mixin","_dir":"css","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Sass Nth Child Iterate Mixin","description":"Say, we need to color n items by specific colors, which depend on its position. #SCSS supports iteration over lists for that purposes:","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Say, we need to color "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"n"}]},{"type":"text","value":" items by specific colors, which depend on its position. #SCSS supports "},{"type":"element","tag":"a","props":{"href":"https://sass-lang.com/documentation/at-rules/control/each","rel":["nofollow"]},"children":[{"type":"text","value":"iteration over lists"}]},{"type":"text","value":" for that purposes:"}]},{"type":"element","tag":"code","props":{"code":"@mixin color-per-child($colors) {\n @each $color in $colors {\n &:nth-child(#{index(($colors), ($color))}) {\n color: $color;\n }\n }\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"@mixin color-per-child($colors) {\n @each $color in $colors {\n &:nth-child(#{index(($colors), ($color))}) {\n color: $color;\n }\n }\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Usage is simple:"}]},{"type":"element","tag":"code","props":{"code":".item {\n @include color_per_child((#ded187, #dbde87, #bade87, #9cde87, #87deaa));\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":".item {\n @include color_per_child((#ded187, #dbde87, #bade87, #9cde87, #87deaa));\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Say, we need to color "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"n"}]},{"type":"text","value":" items by specific colors, which depend on its position. #SCSS supports "},{"type":"element","tag":"a","props":{"href":"https://sass-lang.com/documentation/at-rules/control/each","rel":["nofollow"]},"children":[{"type":"text","value":"iteration over lists"}]},{"type":"text","value":" for that purposes:"}]},{"type":"element","tag":"code","props":{"code":"@mixin color-per-child($colors) {\n @each $color in $colors {\n &:nth-child(#{index(($colors), ($color))}) {\n color: $color;\n }\n }\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-981420"},"children":[{"type":"text","value":"@mixin"}]},{"type":"element","tag":"span","props":{"class":"ct-dd77e2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-93c23f"},"children":[{"type":"text","value":"color-per-child"}]},{"type":"element","tag":"span","props":{"class":"ct-dd77e2"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7a6104"},"children":[{"type":"text","value":"$colors"}]},{"type":"element","tag":"span","props":{"class":"ct-dd77e2"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd77e2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-981420"},"children":[{"type":"text","value":"@each"}]},{"type":"element","tag":"span","props":{"class":"ct-dd77e2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a6104"},"children":[{"type":"text","value":"$color"}]},{"type":"element","tag":"span","props":{"class":"ct-dd77e2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-981420"},"children":[{"type":"text","value":"in"}]},{"type":"element","tag":"span","props":{"class":"ct-dd77e2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a6104"},"children":[{"type":"text","value":"$colors"}]},{"type":"element","tag":"span","props":{"class":"ct-dd77e2"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd77e2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-81e54c"},"children":[{"type":"text","value":"&"}]},{"type":"element","tag":"span","props":{"class":"ct-606577"},"children":[{"type":"text","value":":nth-child"}]},{"type":"element","tag":"span","props":{"class":"ct-dd77e2"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7a6104"},"children":[{"type":"text","value":"#{"}]},{"type":"element","tag":"span","props":{"class":"ct-38e3eb"},"children":[{"type":"text","value":"index"}]},{"type":"element","tag":"span","props":{"class":"ct-7a6104"},"children":[{"type":"text","value":"(($colors), ($color))}"}]},{"type":"element","tag":"span","props":{"class":"ct-dd77e2"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd77e2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fbabdd"},"children":[{"type":"text","value":"color"}]},{"type":"element","tag":"span","props":{"class":"ct-dd77e2"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-7a6104"},"children":[{"type":"text","value":"$color"}]},{"type":"element","tag":"span","props":{"class":"ct-dd77e2"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ea5dba"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ea5dba"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ea5dba"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Usage is simple:"}]},{"type":"element","tag":"code","props":{"code":".item {\n @include color_per_child((#ded187, #dbde87, #bade87, #9cde87, #87deaa));\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bd28ed"},"children":[{"type":"text","value":".item"}]},{"type":"element","tag":"span","props":{"class":"ct-ea5dba"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ea5dba"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d98769"},"children":[{"type":"text","value":"@include"}]},{"type":"element","tag":"span","props":{"class":"ct-ea5dba"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dc09c5"},"children":[{"type":"text","value":"color_per_child"}]},{"type":"element","tag":"span","props":{"class":"ct-ea5dba"},"children":[{"type":"text","value":"(("}]},{"type":"element","tag":"span","props":{"class":"ct-e8ce17"},"children":[{"type":"text","value":"#ded187"}]},{"type":"element","tag":"span","props":{"class":"ct-ea5dba"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-e8ce17"},"children":[{"type":"text","value":"#dbde87"}]},{"type":"element","tag":"span","props":{"class":"ct-ea5dba"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-e8ce17"},"children":[{"type":"text","value":"#bade87"}]},{"type":"element","tag":"span","props":{"class":"ct-ea5dba"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-e8ce17"},"children":[{"type":"text","value":"#9cde87"}]},{"type":"element","tag":"span","props":{"class":"ct-ea5dba"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-e8ce17"},"children":[{"type":"text","value":"#87deaa"}]},{"type":"element","tag":"span","props":{"class":"ct-ea5dba"},"children":[{"type":"text","value":"));"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ea5dba"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-e8ce17{color:#79C0FF}.ct-dc09c5{color:#D2A8FF}.ct-d98769{color:#FF7B72}.ct-bd28ed{color:#79C0FF}.ct-ea5dba{color:#C9D1D9}.ct-fbabdd{color:#79C0FF}.ct-38e3eb{color:#79C0FF}.ct-606577{color:#79C0FF}.ct-81e54c{color:#7EE787}.ct-7a6104{color:#FFA657}.ct-93c23f{color:#D2A8FF}.ct-dd77e2{color:#C9D1D9}.ct-981420{color:#FF7B72}.light .ct-981420{color:#859900}.light .ct-dd77e2{color:#657B83}.light .ct-93c23f{color:#268BD2}.light .ct-7a6104{color:#657B83}.light .ct-81e54c{color:#268BD2}.light .ct-606577{color:#93A1A1}.light .ct-38e3eb{color:#268BD2}.light .ct-fbabdd{color:#859900}.light .ct-ea5dba{color:#657B83}.light .ct-bd28ed{color:#93A1A1}.light .ct-d98769{color:#859900}.light .ct-dc09c5{color:#268BD2}.light .ct-e8ce17{color:#CB4B16}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:CSS:Sass nth-child iterate mixin.md","_source":"content","_file":"CSS/Sass nth-child iterate mixin.md","_extension":"md"},{"_path":"/css/test-if-browser-supports-css-rules","_dir":"css","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Test If Browser Supports CSS Rules","description":"To test if browser supports some #CSS rules, do following:","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To test if browser supports some #CSS rules, do following:"}]},{"type":"element","tag":"code","props":{"code":"@supports (backdrop-filter: blur(5px)) {\n backdrop-filter: blur(5px);\n}\n","language":"css"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"@supports (backdrop-filter: blur(5px)) {\n backdrop-filter: blur(5px);\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@mixin"}]},{"type":"text","value":" will only apply rule if browser support backdrop filtering:"}]},{"type":"element","tag":"code","props":{"code":"@mixin can_backdrop {\n @supports (\n (-webkit-backdrop-filter: blur(5px)) or \n (backdrop-filter: blur(5px))\n ) {\n @content;\n }\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"@mixin can_backdrop {\n @supports (\n (-webkit-backdrop-filter: blur(5px)) or \n (backdrop-filter: blur(5px))\n ) {\n @content;\n }\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To test if browser supports some #CSS rules, do following:"}]},{"type":"element","tag":"code","props":{"code":"@supports (backdrop-filter: blur(5px)) {\n backdrop-filter: blur(5px);\n}\n","language":"css"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7a463c"},"children":[{"type":"text","value":"@supports"}]},{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-c952c5"},"children":[{"type":"text","value":"backdrop-filter"}]},{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1fdda1"},"children":[{"type":"text","value":"blur"}]},{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-402ddd"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-7a463c"},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":")) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dfa80f"},"children":[{"type":"text","value":"backdrop-filter"}]},{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":": blur(5px);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@mixin"}]},{"type":"text","value":" will only apply rule if browser support backdrop filtering:"}]},{"type":"element","tag":"code","props":{"code":"@mixin can_backdrop {\n @supports (\n (-webkit-backdrop-filter: blur(5px)) or \n (backdrop-filter: blur(5px))\n ) {\n @content;\n }\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7a463c"},"children":[{"type":"text","value":"@mixin"}]},{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9b8524"},"children":[{"type":"text","value":"can_backdrop"}]},{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a463c"},"children":[{"type":"text","value":"@supports"}]},{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3b70c6"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-d2edfc"},"children":[{"type":"text","value":"-webkit-backdrop-filter"}]},{"type":"element","tag":"span","props":{"class":"ct-3b70c6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-950408"},"children":[{"type":"text","value":"blur"}]},{"type":"element","tag":"span","props":{"class":"ct-3b70c6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-84a56d"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-e1945f"},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"class":"ct-3b70c6"},"children":[{"type":"text","value":")) "}]},{"type":"element","tag":"span","props":{"class":"ct-28c7f2"},"children":[{"type":"text","value":"or"}]},{"type":"element","tag":"span","props":{"class":"ct-3b70c6"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-c952c5"},"children":[{"type":"text","value":"backdrop-filter"}]},{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1fdda1"},"children":[{"type":"text","value":"blur"}]},{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-402ddd"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-7a463c"},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":" ) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a463c"},"children":[{"type":"text","value":"@content"}]},{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-28c7f2{color:#79C0FF}.ct-e1945f{color:#FF7B72}.ct-84a56d{color:#79C0FF}.ct-950408{color:#79C0FF}.ct-d2edfc{color:#79C0FF}.ct-3b70c6{color:#C9D1D9}.ct-9b8524{color:#D2A8FF}.ct-dfa80f{color:#7EE787}.ct-402ddd{color:#79C0FF}.ct-1fdda1{color:#79C0FF}.ct-c952c5{color:#79C0FF}.ct-6538af{color:#C9D1D9}.ct-7a463c{color:#FF7B72}.light .ct-7a463c{color:#859900}.light .ct-6538af{color:#657B83}.light .ct-c952c5{color:#859900}.light .ct-1fdda1{color:#268BD2}.light .ct-402ddd{color:#D33682}.light .ct-dfa80f{color:#268BD2}.light .ct-9b8524{color:#268BD2}.light .ct-3b70c6{color:#657B83}.light .ct-d2edfc{color:#859900}.light .ct-950408{color:#268BD2}.light .ct-84a56d{color:#D33682}.light .ct-e1945f{color:#859900}.light .ct-28c7f2{color:#657B83}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:CSS:Test if browser supports CSS rules.md","_source":"content","_file":"CSS/Test if browser supports CSS rules.md","_extension":"md"},{"_path":"/docker/building-static-pages-with-docker","_dir":"docker","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Building Static Pages With Docker","description":"Sample #Dockerfile for static Typescript builds such a #nextjs, #gatsby or #nuxt:","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sample #Dockerfile for static Typescript builds such a #nextjs, #gatsby or #nuxt:"}]},{"type":"element","tag":"code","props":{"code":"FROM node:16-alpine as builder\nWORKDIR /app\nCOPY package.json yarn.lock ./\nRUN yarn\nCOPY . .\n\n# your generate command here\nRUN yarn generate\n\nFROM nginx\nCOPY --from=builder /app/dist /usr/share/nginx/html\n","language":"Dockerfile"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"FROM node:16-alpine as builder\nWORKDIR /app\nCOPY package.json yarn.lock ./\nRUN yarn\nCOPY . .\n\n# your generate command here\nRUN yarn generate\n\nFROM nginx\nCOPY --from=builder /app/dist /usr/share/nginx/html\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sample #Dockerfile for static Typescript builds such a #nextjs, #gatsby or #nuxt:"}]},{"type":"element","tag":"code","props":{"code":"FROM node:16-alpine as builder\nWORKDIR /app\nCOPY package.json yarn.lock ./\nRUN yarn\nCOPY . .\n\n# your generate command here\nRUN yarn generate\n\nFROM nginx\nCOPY --from=builder /app/dist /usr/share/nginx/html\n","language":"Dockerfile"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"FROM node:16-alpine as builder\nWORKDIR /app\nCOPY package.json yarn.lock ./\nRUN yarn\nCOPY . .\n\n# your generate command here\nRUN yarn generate\n\nFROM nginx\nCOPY --from=builder /app/dist /usr/share/nginx/html"}]}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Docker:Building static pages with Docker.md","_source":"content","_file":"Docker/Building static pages with Docker.md","_extension":"md"},{"_path":"/docker/drone-ci","_dir":"docker","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Drone Ci","description":"Can be used with Private docker registry to deploy things using #docker.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Can be used with "},{"type":"element","tag":"a","props":{"href":"Private%20docker%20registry"},"children":[{"type":"text","value":"Private docker registry"}]},{"type":"text","value":" to deploy things using #docker."}]},{"type":"element","tag":"h2","props":{"id":"pushing-to-private-docker_registry"},"children":[{"type":"text","value":"Pushing to private docker_registry"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You should specify "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"global_docker_login"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"global_docker_password"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"global_docker_registry"}]},{"type":"text","value":" organizations variables in your "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"drone"}]},{"type":"text","value":". And "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docker_repo"}]},{"type":"text","value":" variable for your repo as "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docker.yourdomain.com/your-image"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is example of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".droneci"}]},{"type":"text","value":" for "},{"type":"element","tag":"a","props":{"href":"Private%20docker%20registry"},"children":[{"type":"text","value":"private docker registry"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"kind: pipeline\nname: build\ntype: docker\n\nplatform:\n os: linux\n arch: amd64\n\nsteps:\n - name: build-master\n image: plugins/docker\n when:\n branch:\n - master\n settings:\n dockerfile: Dockerfile\n tag:\n - ${DRONE_BRANCH}\n username:\n from_secret: global_docker_login\n password:\n from_secret: global_docker_password\n registry:\n from_secret: global_docker_registry\n repo:\n from_secret: docker_repo\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"kind: pipeline\nname: build\ntype: docker\n\nplatform:\n os: linux\n arch: amd64\n\nsteps:\n - name: build-master\n image: plugins/docker\n when:\n branch:\n - master\n settings:\n dockerfile: Dockerfile\n tag:\n - ${DRONE_BRANCH}\n username:\n from_secret: global_docker_login\n password:\n from_secret: global_docker_password\n registry:\n from_secret: global_docker_registry\n repo:\n from_secret: docker_repo\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"docker-compose-file-for-drone-ci"},"children":[{"type":"text","value":"Docker-compose file for drone-ci"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"drone"}]},{"type":"text","value":" service is ui itself and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"drone-agent"}]},{"type":"text","value":" is runner for builds, that can be started on different machine (or machines)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Change "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"secret_id"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"rpc_secret"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"drone.url"}]},{"type":"text","value":" to something you like."}]},{"type":"element","tag":"code","props":{"code":"version: \"3\"\n\nservices:\n drone:\n container_name: drone\n image: drone/drone:latest\n environment:\n - DRONE_GITHUB_CLIENT_ID=secret_id\n - DRONE_GITHUB_CLIENT_SECRET=client_secret\n - DRONE_RPC_SECRET=rpc_secret\n - DRONE_SERVER_HOST=drone.url\n - DRONE_USER_CREATE=\"username:user,admin:true\"\n - DRONE_SERVER_PROTO=https\n - DRONE_TLS_AUTOCERT=false\n - DRONE_GIT_ALWAYS_AUTH=false\n - DRONE_LOGS_DEBUG=true\n - DRONE_LOGS_TRACE=true\n restart: always\n volumes:\n - ./data:/data\n ports:\n - 8090:80\n drone-agent:\n container_name: drone__agent\n image: drone/agent:latest\n command: agent\n restart: always\n volumes:\n - /var/run/docker.sock:/var/run/docker.sock\n environment:\n - DRONE_RPC_SERVER=https://drone.url\n - DRONE_RPC_SECRET=rpc_secret\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"version: \"3\"\n\nservices:\n drone:\n container_name: drone\n image: drone/drone:latest\n environment:\n - DRONE_GITHUB_CLIENT_ID=secret_id\n - DRONE_GITHUB_CLIENT_SECRET=client_secret\n - DRONE_RPC_SECRET=rpc_secret\n - DRONE_SERVER_HOST=drone.url\n - DRONE_USER_CREATE=\"username:user,admin:true\"\n - DRONE_SERVER_PROTO=https\n - DRONE_TLS_AUTOCERT=false\n - DRONE_GIT_ALWAYS_AUTH=false\n - DRONE_LOGS_DEBUG=true\n - DRONE_LOGS_TRACE=true\n restart: always\n volumes:\n - ./data:/data\n ports:\n - 8090:80\n drone-agent:\n container_name: drone__agent\n image: drone/agent:latest\n command: agent\n restart: always\n volumes:\n - /var/run/docker.sock:/var/run/docker.sock\n environment:\n - DRONE_RPC_SERVER=https://drone.url\n - DRONE_RPC_SECRET=rpc_secret\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"caching-builds"},"children":[{"type":"text","value":"Caching builds"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Haven't checked that yet, but there's a "},{"type":"element","tag":"a","props":{"href":"https://laszlo.cloud/the-ultimate-droneci-caching-guide","rel":["nofollow"]},"children":[{"type":"text","value":"manual"}]},{"type":"text","value":" from "},{"type":"element","tag":"a","props":{"href":"https://laszlo.cloud/","rel":["nofollow"]},"children":[{"type":"text","value":"Laszlo Fogas"}]},{"type":"text","value":" about that."}]},{"type":"element","tag":"h2","props":{"id":"get-user-info"},"children":[{"type":"text","value":"Get user info"}]},{"type":"element","tag":"code","props":{"code":"export DRONE_SERVER=https://drone.url\nexport DRONE_TOKEN=password\ndrone info\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export DRONE_SERVER=https://drone.url\nexport DRONE_TOKEN=password\ndrone info\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"mark-user-as-trusted"},"children":[{"type":"text","value":"Mark user as trusted"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes it won't help, then connect to drone database with sqlite and change user's trusted flag to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"1"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"drone repo update $1 --trusted=true && drone repo info $1\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"drone repo update $1 --trusted=true && drone repo info $1\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Can be used with "},{"type":"element","tag":"a","props":{"href":"Private%20docker%20registry"},"children":[{"type":"text","value":"Private docker registry"}]},{"type":"text","value":" to deploy things using #docker."}]},{"type":"element","tag":"h2","props":{"id":"pushing-to-private-docker_registry"},"children":[{"type":"text","value":"Pushing to private docker_registry"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You should specify "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"global_docker_login"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"global_docker_password"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"global_docker_registry"}]},{"type":"text","value":" organizations variables in your "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"drone"}]},{"type":"text","value":". And "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docker_repo"}]},{"type":"text","value":" variable for your repo as "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docker.yourdomain.com/your-image"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is example of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".droneci"}]},{"type":"text","value":" for "},{"type":"element","tag":"a","props":{"href":"Private%20docker%20registry"},"children":[{"type":"text","value":"private docker registry"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"kind: pipeline\nname: build\ntype: docker\n\nplatform:\n os: linux\n arch: amd64\n\nsteps:\n - name: build-master\n image: plugins/docker\n when:\n branch:\n - master\n settings:\n dockerfile: Dockerfile\n tag:\n - ${DRONE_BRANCH}\n username:\n from_secret: global_docker_login\n password:\n from_secret: global_docker_password\n registry:\n from_secret: global_docker_registry\n repo:\n from_secret: docker_repo\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"kind"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"pipeline"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"build"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"docker"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"platform"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"os"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"linux"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"arch"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"amd64"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"steps"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"build-master"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"plugins/docker"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"when"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"branch"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"master"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"settings"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"dockerfile"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"Dockerfile"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"tag"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"${DRONE_BRANCH}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"username"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"from_secret"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"global_docker_login"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"password"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"from_secret"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"global_docker_password"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"registry"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"from_secret"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"global_docker_registry"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"repo"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"from_secret"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"docker_repo"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"docker-compose-file-for-drone-ci"},"children":[{"type":"text","value":"Docker-compose file for drone-ci"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"drone"}]},{"type":"text","value":" service is ui itself and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"drone-agent"}]},{"type":"text","value":" is runner for builds, that can be started on different machine (or machines)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Change "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"secret_id"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"rpc_secret"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"drone.url"}]},{"type":"text","value":" to something you like."}]},{"type":"element","tag":"code","props":{"code":"version: \"3\"\n\nservices:\n drone:\n container_name: drone\n image: drone/drone:latest\n environment:\n - DRONE_GITHUB_CLIENT_ID=secret_id\n - DRONE_GITHUB_CLIENT_SECRET=client_secret\n - DRONE_RPC_SECRET=rpc_secret\n - DRONE_SERVER_HOST=drone.url\n - DRONE_USER_CREATE=\"username:user,admin:true\"\n - DRONE_SERVER_PROTO=https\n - DRONE_TLS_AUTOCERT=false\n - DRONE_GIT_ALWAYS_AUTH=false\n - DRONE_LOGS_DEBUG=true\n - DRONE_LOGS_TRACE=true\n restart: always\n volumes:\n - ./data:/data\n ports:\n - 8090:80\n drone-agent:\n container_name: drone__agent\n image: drone/agent:latest\n command: agent\n restart: always\n volumes:\n - /var/run/docker.sock:/var/run/docker.sock\n environment:\n - DRONE_RPC_SERVER=https://drone.url\n - DRONE_RPC_SECRET=rpc_secret\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"version"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"\"3\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"services"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"drone"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"drone"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"drone/drone:latest"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"DRONE_GITHUB_CLIENT_ID=secret_id"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"DRONE_GITHUB_CLIENT_SECRET=client_secret"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"DRONE_RPC_SECRET=rpc_secret"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"DRONE_SERVER_HOST=drone.url"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"DRONE_USER_CREATE=\"username:user,admin:true\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"DRONE_SERVER_PROTO=https"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"DRONE_TLS_AUTOCERT=false"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"DRONE_GIT_ALWAYS_AUTH=false"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"DRONE_LOGS_DEBUG=true"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"DRONE_LOGS_TRACE=true"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"always"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"./data:/data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"ports"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"8090:80"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"drone-agent"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"drone__agent"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"drone/agent:latest"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"command"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"agent"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"always"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"/var/run/docker.sock:/var/run/docker.sock"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"DRONE_RPC_SERVER=https://drone.url"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"DRONE_RPC_SECRET=rpc_secret"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"caching-builds"},"children":[{"type":"text","value":"Caching builds"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Haven't checked that yet, but there's a "},{"type":"element","tag":"a","props":{"href":"https://laszlo.cloud/the-ultimate-droneci-caching-guide","rel":["nofollow"]},"children":[{"type":"text","value":"manual"}]},{"type":"text","value":" from "},{"type":"element","tag":"a","props":{"href":"https://laszlo.cloud/","rel":["nofollow"]},"children":[{"type":"text","value":"Laszlo Fogas"}]},{"type":"text","value":" about that."}]},{"type":"element","tag":"h2","props":{"id":"get-user-info"},"children":[{"type":"text","value":"Get user info"}]},{"type":"element","tag":"code","props":{"code":"export DRONE_SERVER=https://drone.url\nexport DRONE_TOKEN=password\ndrone info\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f8e52f"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" DRONE_SERVER=https://drone.url"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f8e52f"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" DRONE_TOKEN=password"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":"drone info"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"mark-user-as-trusted"},"children":[{"type":"text","value":"Mark user as trusted"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes it won't help, then connect to drone database with sqlite and change user's trusted flag to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"1"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"drone repo update $1 --trusted=true && drone repo info $1\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":"drone repo update "}]},{"type":"element","tag":"span","props":{"class":"ct-bba773"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-c3cfa5"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" --trusted=true "}]},{"type":"element","tag":"span","props":{"class":"ct-512f70"},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" drone repo info "}]},{"type":"element","tag":"span","props":{"class":"ct-bba773"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-c3cfa5"},"children":[{"type":"text","value":"1"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-512f70{color:#FF7B72}.ct-c3cfa5{color:#C9D1D9}.ct-bba773{color:#C9D1D9}.ct-f8e52f{color:#FF7B72}.ct-e7e4f6{color:#A5D6FF}.ct-ead287{color:#C9D1D9}.ct-5001cf{color:#7EE787}.light .ct-5001cf{color:#268BD2}.light .ct-ead287{color:#657B83}.light .ct-e7e4f6{color:#2AA198}.light .ct-f8e52f{color:#073642}.light .ct-bba773{color:#859900}.light .ct-c3cfa5{color:#268BD2}.light .ct-512f70{color:#859900}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"pushing-to-private-docker_registry","depth":2,"text":"Pushing to private docker_registry"},{"id":"docker-compose-file-for-drone-ci","depth":2,"text":"Docker-compose file for drone-ci"},{"id":"caching-builds","depth":2,"text":"Caching builds"},{"id":"get-user-info","depth":2,"text":"Get user info"},{"id":"mark-user-as-trusted","depth":2,"text":"Mark user as trusted"}]}},"_type":"markdown","_id":"content:Docker:Drone-ci.md","_source":"content","_file":"Docker/Drone-ci.md","_extension":"md"},{"_path":"/docker/github-pages-with-drone-ci","_dir":"docker","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Github Pages With Drone Ci","description":"To deploy github pages with Drone-ci you will need .drone.yml as specified below. You also should define secrets github_username and github_token (get it here) in your drone's repository setup.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To deploy github pages with "},{"type":"element","tag":"a","props":{"href":"Drone-ci"},"children":[{"type":"text","value":"Drone-ci"}]},{"type":"text","value":" you will need "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".drone.yml"}]},{"type":"text","value":" as specified below. You also should define secrets "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"github_username"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"github_token"}]},{"type":"text","value":" (get it "},{"type":"element","tag":"a","props":{"href":"https://github.com/settings/tokens","rel":["nofollow"]},"children":[{"type":"text","value":"here"}]},{"type":"text","value":") in your drone's repository setup."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Github repository should be named as "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"yourname.github.io"}]},{"type":"text","value":" and it could be accessed at "},{"type":"element","tag":"a","props":{"href":"https://yourname.github.io/","rel":["nofollow"]},"children":[{"type":"text","value":"https://yourname.github.io/"}]},{"type":"text","value":". Otherwise it'll be available at "},{"type":"element","tag":"a","props":{"href":"https://yourname.github.io/repo-name/","rel":["nofollow"]},"children":[{"type":"text","value":"https://yourname.github.io/repo-name/"}]},{"type":"text","value":", what you might not like."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You should create branch named "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gh-pages"}]},{"type":"text","value":" in that repo and setup GH Pages at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"https://github.com/<yourusername>/<yourusername>.github.io/settings/pages"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This config will update "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gh-pages"}]},{"type":"text","value":" branch in your project, which will contain only generated content. I know, that's bad, but there's no better way to do that with generic drone plugins."}]},{"type":"element","tag":"code","props":{"code":"kind: pipeline\nname: build\ntype: docker\n\nplatform:\n os: linux\n arch: amd64\n\nsteps:\n - name: build\n image: node:16\n commands:\n - yarn\n - yarn generate\n - rm -rf ./docs\n - mv ./.output/public ./docs\n - touch ./docs/.nojekyll\n - name: publish\n image: plugins/gh-pages\n settings:\n target_branch: gh-pages\n username:\n from_secret: github_username\n password:\n from_secret: github_token\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"kind: pipeline\nname: build\ntype: docker\n\nplatform:\n os: linux\n arch: amd64\n\nsteps:\n - name: build\n image: node:16\n commands:\n - yarn\n - yarn generate\n - rm -rf ./docs\n - mv ./.output/public ./docs\n - touch ./docs/.nojekyll\n - name: publish\n image: plugins/gh-pages\n settings:\n target_branch: gh-pages\n username:\n from_secret: github_username\n password:\n from_secret: github_token\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here we're moving "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"./.output/public"}]},{"type":"text","value":" to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"./docs"}]},{"type":"text","value":", because #nuxt creates symlink for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docs"}]},{"type":"text","value":" and git can't work with that."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Also we create "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".nojekyll"}]},{"type":"text","value":" at the root of repo, so github's internal engine won't "},{"type":"element","tag":"a","props":{"href":"https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/","rel":["nofollow"]},"children":[{"type":"text","value":"ignore files that start with underscore"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"additional-reading"},"children":[{"type":"text","value":"Additional reading"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://plugins.drone.io/plugins/gh-pages","rel":["nofollow"]},"children":[{"type":"text","value":"Drone Github Pages Documentation"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/","rel":["nofollow"]},"children":[{"type":"text","value":"Bypassing Jekyll on GitHub Pages"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To deploy github pages with "},{"type":"element","tag":"a","props":{"href":"Drone-ci"},"children":[{"type":"text","value":"Drone-ci"}]},{"type":"text","value":" you will need "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".drone.yml"}]},{"type":"text","value":" as specified below. You also should define secrets "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"github_username"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"github_token"}]},{"type":"text","value":" (get it "},{"type":"element","tag":"a","props":{"href":"https://github.com/settings/tokens","rel":["nofollow"]},"children":[{"type":"text","value":"here"}]},{"type":"text","value":") in your drone's repository setup."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Github repository should be named as "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"yourname.github.io"}]},{"type":"text","value":" and it could be accessed at "},{"type":"element","tag":"a","props":{"href":"https://yourname.github.io/","rel":["nofollow"]},"children":[{"type":"text","value":"https://yourname.github.io/"}]},{"type":"text","value":". Otherwise it'll be available at "},{"type":"element","tag":"a","props":{"href":"https://yourname.github.io/repo-name/","rel":["nofollow"]},"children":[{"type":"text","value":"https://yourname.github.io/repo-name/"}]},{"type":"text","value":", what you might not like."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You should create branch named "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gh-pages"}]},{"type":"text","value":" in that repo and setup GH Pages at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"https://github.com/<yourusername>/<yourusername>.github.io/settings/pages"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This config will update "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gh-pages"}]},{"type":"text","value":" branch in your project, which will contain only generated content. I know, that's bad, but there's no better way to do that with generic drone plugins."}]},{"type":"element","tag":"code","props":{"code":"kind: pipeline\nname: build\ntype: docker\n\nplatform:\n os: linux\n arch: amd64\n\nsteps:\n - name: build\n image: node:16\n commands:\n - yarn\n - yarn generate\n - rm -rf ./docs\n - mv ./.output/public ./docs\n - touch ./docs/.nojekyll\n - name: publish\n image: plugins/gh-pages\n settings:\n target_branch: gh-pages\n username:\n from_secret: github_username\n password:\n from_secret: github_token\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6714bd"},"children":[{"type":"text","value":"kind"}]},{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-32b0f5"},"children":[{"type":"text","value":"pipeline"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6714bd"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-32b0f5"},"children":[{"type":"text","value":"build"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6714bd"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-32b0f5"},"children":[{"type":"text","value":"docker"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6714bd"},"children":[{"type":"text","value":"platform"}]},{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6714bd"},"children":[{"type":"text","value":"os"}]},{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-32b0f5"},"children":[{"type":"text","value":"linux"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6714bd"},"children":[{"type":"text","value":"arch"}]},{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-32b0f5"},"children":[{"type":"text","value":"amd64"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6714bd"},"children":[{"type":"text","value":"steps"}]},{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-6714bd"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-32b0f5"},"children":[{"type":"text","value":"build"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6714bd"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-32b0f5"},"children":[{"type":"text","value":"node:16"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6714bd"},"children":[{"type":"text","value":"commands"}]},{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-32b0f5"},"children":[{"type":"text","value":"yarn"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-32b0f5"},"children":[{"type":"text","value":"yarn generate"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-32b0f5"},"children":[{"type":"text","value":"rm -rf ./docs"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-32b0f5"},"children":[{"type":"text","value":"mv ./.output/public ./docs"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-32b0f5"},"children":[{"type":"text","value":"touch ./docs/.nojekyll"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-6714bd"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-32b0f5"},"children":[{"type":"text","value":"publish"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6714bd"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-32b0f5"},"children":[{"type":"text","value":"plugins/gh-pages"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6714bd"},"children":[{"type":"text","value":"settings"}]},{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6714bd"},"children":[{"type":"text","value":"target_branch"}]},{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-32b0f5"},"children":[{"type":"text","value":"gh-pages"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6714bd"},"children":[{"type":"text","value":"username"}]},{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6714bd"},"children":[{"type":"text","value":"from_secret"}]},{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-32b0f5"},"children":[{"type":"text","value":"github_username"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6714bd"},"children":[{"type":"text","value":"password"}]},{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6714bd"},"children":[{"type":"text","value":"from_secret"}]},{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-32b0f5"},"children":[{"type":"text","value":"github_token"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here we're moving "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"./.output/public"}]},{"type":"text","value":" to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"./docs"}]},{"type":"text","value":", because #nuxt creates symlink for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docs"}]},{"type":"text","value":" and git can't work with that."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Also we create "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".nojekyll"}]},{"type":"text","value":" at the root of repo, so github's internal engine won't "},{"type":"element","tag":"a","props":{"href":"https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/","rel":["nofollow"]},"children":[{"type":"text","value":"ignore files that start with underscore"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"additional-reading"},"children":[{"type":"text","value":"Additional reading"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://plugins.drone.io/plugins/gh-pages","rel":["nofollow"]},"children":[{"type":"text","value":"Drone Github Pages Documentation"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/","rel":["nofollow"]},"children":[{"type":"text","value":"Bypassing Jekyll on GitHub Pages"}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-32b0f5{color:#A5D6FF}.ct-fe1215{color:#C9D1D9}.ct-6714bd{color:#7EE787}.light .ct-6714bd{color:#268BD2}.light .ct-fe1215{color:#657B83}.light .ct-32b0f5{color:#2AA198}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"additional-reading","depth":2,"text":"Additional reading"}]}},"_type":"markdown","_id":"content:Docker:Github pages with drone-ci.md","_source":"content","_file":"Docker/Github pages with drone-ci.md","_extension":"md"},{"_path":"/docker/private-docker-registry","_dir":"docker","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Private Docker Registry","description":"Suitable to work with Drone-ci for hosting private #docker images.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Suitable to work with "},{"type":"element","tag":"a","props":{"href":"Drone-ci"},"children":[{"type":"text","value":"Drone-ci"}]},{"type":"text","value":" for hosting private #docker images."}]},{"type":"element","tag":"h2","props":{"id":"sample-docker-compose-for-custom-docker-registry"},"children":[{"type":"text","value":"Sample docker-compose for custom docker registry"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This one brings up private docker registry with ui. First you'll need to generate password for it:"}]},{"type":"element","tag":"code","props":{"code":"docker run \\\n --entrypoint htpasswd registry:2 \\\n -Bbn user mypassword > auth/registry.password\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"docker run \\\n --entrypoint htpasswd registry:2 \\\n -Bbn user mypassword > auth/registry.password\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"version: \"3\"\nservices:\n registry:\n container_name: docker__registry\n image: registry:2\n ports:\n - 5000:5000\n restart: always\n environment:\n - REGISTRY_STORAGE_FILESYSTEM_ROOTDIRECTORY=/data\n - REGISTRY_AUTH=htpasswd\n - REGISTRY_AUTH_HTPASSWD_REALM=Registry\n - REGISTRY_AUTH_HTPASSWD_PATH=/auth/registry.password\n - REGISTRY_HTTP_SECRET=password\n - REGISTRY_STORAGE_DELETE_ENABLED=true\n volumes:\n - ./registry/auth:/auth\n - ./registry/data:/data\n ui:\n container_name: docker__ui\n image: parabuzzle/craneoperator:latest\n ports:\n - 80:80\n restart: always\n environment:\n - REGISTRY_HOST=registry\n - REGISTRY_PORT=5000\n - REGISTRY_PROTOCOL=http\n - ALLOW_REGISTRY_LOGIN=true\n - REGISTRY_ALLOW_DELETE=true\n - USERNAME=registry\n - PASSWORD=password\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"version: \"3\"\nservices:\n registry:\n container_name: docker__registry\n image: registry:2\n ports:\n - 5000:5000\n restart: always\n environment:\n - REGISTRY_STORAGE_FILESYSTEM_ROOTDIRECTORY=/data\n - REGISTRY_AUTH=htpasswd\n - REGISTRY_AUTH_HTPASSWD_REALM=Registry\n - REGISTRY_AUTH_HTPASSWD_PATH=/auth/registry.password\n - REGISTRY_HTTP_SECRET=password\n - REGISTRY_STORAGE_DELETE_ENABLED=true\n volumes:\n - ./registry/auth:/auth\n - ./registry/data:/data\n ui:\n container_name: docker__ui\n image: parabuzzle/craneoperator:latest\n ports:\n - 80:80\n restart: always\n environment:\n - REGISTRY_HOST=registry\n - REGISTRY_PORT=5000\n - REGISTRY_PROTOCOL=http\n - ALLOW_REGISTRY_LOGIN=true\n - REGISTRY_ALLOW_DELETE=true\n - USERNAME=registry\n - PASSWORD=password\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"squash-layers-on-registry"},"children":[{"type":"text","value":"Squash layers on registry"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes you need to squash all layers in docker registry to free up disk space."}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Run this command to mark oldest layers"}]}]},{"type":"element","tag":"code","props":{"code":"# Try this first\ndocker run \\\n --rm anoxis/registry-cli \\\n -r https://registry.url \\\n -l user:password \\\n --delete \\\n --num 2\n\n# Then this \ndocker run -it \\\n -v /path/to/registry/data:/registry \\\n -e REGISTRY_URL=https://registry.url \\\n -e DRY_RUN=\"false\" \\\n -e REGISTRY_AUTH=\"user:password\" \\\n mortensrasmussen/docker-registry-manifest-cleanup\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"# Try this first\ndocker run \\\n --rm anoxis/registry-cli \\\n -r https://registry.url \\\n -l user:password \\\n --delete \\\n --num 2\n\n# Then this \ndocker run -it \\\n -v /path/to/registry/data:/registry \\\n -e REGISTRY_URL=https://registry.url \\\n -e DRY_RUN=\"false\" \\\n -e REGISTRY_AUTH=\"user:password\" \\\n mortensrasmussen/docker-registry-manifest-cleanup\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Suitable to work with "},{"type":"element","tag":"a","props":{"href":"Drone-ci"},"children":[{"type":"text","value":"Drone-ci"}]},{"type":"text","value":" for hosting private #docker images."}]},{"type":"element","tag":"h2","props":{"id":"sample-docker-compose-for-custom-docker-registry"},"children":[{"type":"text","value":"Sample docker-compose for custom docker registry"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This one brings up private docker registry with ui. First you'll need to generate password for it:"}]},{"type":"element","tag":"code","props":{"code":"docker run \\\n --entrypoint htpasswd registry:2 \\\n -Bbn user mypassword > auth/registry.password\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":"docker run \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" --entrypoint htpasswd registry:2 \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" -Bbn user mypassword "}]},{"type":"element","tag":"span","props":{"class":"ct-438f39"},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" auth/registry.password"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"version: \"3\"\nservices:\n registry:\n container_name: docker__registry\n image: registry:2\n ports:\n - 5000:5000\n restart: always\n environment:\n - REGISTRY_STORAGE_FILESYSTEM_ROOTDIRECTORY=/data\n - REGISTRY_AUTH=htpasswd\n - REGISTRY_AUTH_HTPASSWD_REALM=Registry\n - REGISTRY_AUTH_HTPASSWD_PATH=/auth/registry.password\n - REGISTRY_HTTP_SECRET=password\n - REGISTRY_STORAGE_DELETE_ENABLED=true\n volumes:\n - ./registry/auth:/auth\n - ./registry/data:/data\n ui:\n container_name: docker__ui\n image: parabuzzle/craneoperator:latest\n ports:\n - 80:80\n restart: always\n environment:\n - REGISTRY_HOST=registry\n - REGISTRY_PORT=5000\n - REGISTRY_PROTOCOL=http\n - ALLOW_REGISTRY_LOGIN=true\n - REGISTRY_ALLOW_DELETE=true\n - USERNAME=registry\n - PASSWORD=password\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9aa4ac"},"children":[{"type":"text","value":"version"}]},{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"\"3\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9aa4ac"},"children":[{"type":"text","value":"services"}]},{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aa4ac"},"children":[{"type":"text","value":"registry"}]},{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aa4ac"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"docker__registry"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aa4ac"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"registry:2"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aa4ac"},"children":[{"type":"text","value":"ports"}]},{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"5000:5000"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aa4ac"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"always"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aa4ac"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"REGISTRY_STORAGE_FILESYSTEM_ROOTDIRECTORY=/data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"REGISTRY_AUTH=htpasswd"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"REGISTRY_AUTH_HTPASSWD_REALM=Registry"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"REGISTRY_AUTH_HTPASSWD_PATH=/auth/registry.password"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"REGISTRY_HTTP_SECRET=password"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"REGISTRY_STORAGE_DELETE_ENABLED=true"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aa4ac"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"./registry/auth:/auth"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"./registry/data:/data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aa4ac"},"children":[{"type":"text","value":"ui"}]},{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aa4ac"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"docker__ui"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aa4ac"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"parabuzzle/craneoperator:latest"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aa4ac"},"children":[{"type":"text","value":"ports"}]},{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"80:80"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aa4ac"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"always"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aa4ac"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"REGISTRY_HOST=registry"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"REGISTRY_PORT=5000"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"REGISTRY_PROTOCOL=http"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"ALLOW_REGISTRY_LOGIN=true"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"REGISTRY_ALLOW_DELETE=true"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"USERNAME=registry"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"PASSWORD=password"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"squash-layers-on-registry"},"children":[{"type":"text","value":"Squash layers on registry"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes you need to squash all layers in docker registry to free up disk space."}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Run this command to mark oldest layers"}]}]},{"type":"element","tag":"code","props":{"code":"# Try this first\ndocker run \\\n --rm anoxis/registry-cli \\\n -r https://registry.url \\\n -l user:password \\\n --delete \\\n --num 2\n\n# Then this \ndocker run -it \\\n -v /path/to/registry/data:/registry \\\n -e REGISTRY_URL=https://registry.url \\\n -e DRY_RUN=\"false\" \\\n -e REGISTRY_AUTH=\"user:password\" \\\n mortensrasmussen/docker-registry-manifest-cleanup\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a54b1a"},"children":[{"type":"text","value":"# Try this first"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":"docker run \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" --rm anoxis/registry-cli \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" -r https://registry.url \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" -l user:password \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" --delete \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" --num 2"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a54b1a"},"children":[{"type":"text","value":"# Then this "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":"docker run -it \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" -v /path/to/registry/data:/registry \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" -e REGISTRY_URL=https://registry.url \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" -e DRY_RUN="}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" -e REGISTRY_AUTH="}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"\"user:password\""}]},{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" mortensrasmussen/docker-registry-manifest-cleanup"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-a54b1a{color:#8B949E}.ct-793975{color:#A5D6FF}.ct-9aa4ac{color:#7EE787}.ct-438f39{color:#FF7B72}.ct-d03b6c{color:#C9D1D9}.light .ct-d03b6c{color:#657B83}.light .ct-438f39{color:#859900}.light .ct-9aa4ac{color:#268BD2}.light .ct-793975{color:#2AA198}.light .ct-a54b1a{color:#93A1A1}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"sample-docker-compose-for-custom-docker-registry","depth":2,"text":"Sample docker-compose for custom docker registry"},{"id":"squash-layers-on-registry","depth":2,"text":"Squash layers on registry"}]}},"_type":"markdown","_id":"content:Docker:Private docker registry.md","_source":"content","_file":"Docker/Private docker registry.md","_extension":"md"},{"_path":"/docker/refresh-containers-on-pull","_dir":"docker","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Refresh Containers On Pull","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"setting-up-watchtower"},"children":[{"type":"text","value":"Setting up watchtower"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://containrrr.dev/watchtower/","rel":["nofollow"]},"children":[{"type":"text","value":"Watchtower"}]},{"type":"text","value":" will automatically pull updated #docker containers. Can be used with "},{"type":"element","tag":"a","props":{"href":"Private%20docker%20registry"},"children":[{"type":"text","value":"Private docker registry"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"Drone-ci"},"children":[{"type":"text","value":"Drone-ci"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"version: \"3\"\n\nservices:\n watchtower:\n container_name: docker__watchtower\n image: v2tec/watchtower\n restart: always\n volumes:\n - /var/run/docker.sock:/var/run/docker.sock\n - /home/user/.docker/config.json:/config.json\n command: --interval 60 image_1 image_2\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"version: \"3\"\n\nservices:\n watchtower:\n container_name: docker__watchtower\n image: v2tec/watchtower\n restart: always\n volumes:\n - /var/run/docker.sock:/var/run/docker.sock\n - /home/user/.docker/config.json:/config.json\n command: --interval 60 image_1 image_2\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"setting-up-watchtower"},"children":[{"type":"text","value":"Setting up watchtower"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://containrrr.dev/watchtower/","rel":["nofollow"]},"children":[{"type":"text","value":"Watchtower"}]},{"type":"text","value":" will automatically pull updated #docker containers. Can be used with "},{"type":"element","tag":"a","props":{"href":"Private%20docker%20registry"},"children":[{"type":"text","value":"Private docker registry"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"Drone-ci"},"children":[{"type":"text","value":"Drone-ci"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"version: \"3\"\n\nservices:\n watchtower:\n container_name: docker__watchtower\n image: v2tec/watchtower\n restart: always\n volumes:\n - /var/run/docker.sock:/var/run/docker.sock\n - /home/user/.docker/config.json:/config.json\n command: --interval 60 image_1 image_2\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-31f911"},"children":[{"type":"text","value":"version"}]},{"type":"element","tag":"span","props":{"class":"ct-1873fc"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1aa90a"},"children":[{"type":"text","value":"\"3\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-31f911"},"children":[{"type":"text","value":"services"}]},{"type":"element","tag":"span","props":{"class":"ct-1873fc"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1873fc"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-31f911"},"children":[{"type":"text","value":"watchtower"}]},{"type":"element","tag":"span","props":{"class":"ct-1873fc"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1873fc"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-31f911"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-1873fc"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1aa90a"},"children":[{"type":"text","value":"docker__watchtower"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1873fc"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-31f911"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-1873fc"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1aa90a"},"children":[{"type":"text","value":"v2tec/watchtower"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1873fc"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-31f911"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-1873fc"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1aa90a"},"children":[{"type":"text","value":"always"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1873fc"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-31f911"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-1873fc"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1873fc"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-1aa90a"},"children":[{"type":"text","value":"/var/run/docker.sock:/var/run/docker.sock"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1873fc"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-1aa90a"},"children":[{"type":"text","value":"/home/user/.docker/config.json:/config.json"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1873fc"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-31f911"},"children":[{"type":"text","value":"command"}]},{"type":"element","tag":"span","props":{"class":"ct-1873fc"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1aa90a"},"children":[{"type":"text","value":"--interval 60 image_1 image_2"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-1aa90a{color:#A5D6FF}.ct-1873fc{color:#C9D1D9}.ct-31f911{color:#7EE787}.light .ct-31f911{color:#268BD2}.light .ct-1873fc{color:#657B83}.light .ct-1aa90a{color:#2AA198}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"setting-up-watchtower","depth":2,"text":"Setting up watchtower"}]}},"_type":"markdown","_id":"content:Docker:Refresh containers on pull.md","_source":"content","_file":"Docker/Refresh containers on pull.md","_extension":"md"},{"_path":"/docker/seed-dump-inside-docker","_dir":"docker","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Seed Dump Inside Docker","description":"If you need to seed .sql dump in #docker container, just run this command. Also you can try to rsync file with SSH to get it from remote host.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you need to seed "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".sql"}]},{"type":"text","value":" dump in #docker container, just run this command. Also you can try to "},{"type":"element","tag":"a","props":{"href":"/linux/Rsync%20file%20with%20SSH"},"children":[{"type":"text","value":"rsync file with SSH"}]},{"type":"text","value":" to get it from remote host."}]},{"type":"element","tag":"code","props":{"code":"#####\n# usage: ./script.sh \"/path/to/dump.sql\"\n#####\n\nDUMP_PATH=$1\nCONTAINER=\"db\"\nUSER=root\nPASSWORD=password\nDB=database\n\ncat \"$DUMP_PATH\" | docker exec -i $CONTAINER mysql -u$USER -p$PASSWORD $DB\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"#####\n# usage: ./script.sh \"/path/to/dump.sql\"\n#####\n\nDUMP_PATH=$1\nCONTAINER=\"db\"\nUSER=root\nPASSWORD=password\nDB=database\n\ncat \"$DUMP_PATH\" | docker exec -i $CONTAINER mysql -u$USER -p$PASSWORD $DB\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you need to seed "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".sql"}]},{"type":"text","value":" dump in #docker container, just run this command. Also you can try to "},{"type":"element","tag":"a","props":{"href":"/linux/Rsync%20file%20with%20SSH"},"children":[{"type":"text","value":"rsync file with SSH"}]},{"type":"text","value":" to get it from remote host."}]},{"type":"element","tag":"code","props":{"code":"#####\n# usage: ./script.sh \"/path/to/dump.sql\"\n#####\n\nDUMP_PATH=$1\nCONTAINER=\"db\"\nUSER=root\nPASSWORD=password\nDB=database\n\ncat \"$DUMP_PATH\" | docker exec -i $CONTAINER mysql -u$USER -p$PASSWORD $DB\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-773aeb"},"children":[{"type":"text","value":"#####"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-773aeb"},"children":[{"type":"text","value":"# usage: ./script.sh \"/path/to/dump.sql\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-773aeb"},"children":[{"type":"text","value":"#####"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9df562"},"children":[{"type":"text","value":"DUMP_PATH="}]},{"type":"element","tag":"span","props":{"class":"ct-d1eb62"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-0873da"},"children":[{"type":"text","value":"1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9df562"},"children":[{"type":"text","value":"CONTAINER="}]},{"type":"element","tag":"span","props":{"class":"ct-273241"},"children":[{"type":"text","value":"\"db\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9df562"},"children":[{"type":"text","value":"USER=root"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9df562"},"children":[{"type":"text","value":"PASSWORD=password"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9df562"},"children":[{"type":"text","value":"DB=database"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9df562"},"children":[{"type":"text","value":"cat "}]},{"type":"element","tag":"span","props":{"class":"ct-273241"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-d1eb62"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-0873da"},"children":[{"type":"text","value":"DUMP_PATH"}]},{"type":"element","tag":"span","props":{"class":"ct-273241"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-9df562"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-05f29a"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-9df562"},"children":[{"type":"text","value":" docker "}]},{"type":"element","tag":"span","props":{"class":"ct-6472e8"},"children":[{"type":"text","value":"exec"}]},{"type":"element","tag":"span","props":{"class":"ct-9df562"},"children":[{"type":"text","value":" -i "}]},{"type":"element","tag":"span","props":{"class":"ct-d1eb62"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-0873da"},"children":[{"type":"text","value":"CONTAINER"}]},{"type":"element","tag":"span","props":{"class":"ct-9df562"},"children":[{"type":"text","value":" mysql -u"}]},{"type":"element","tag":"span","props":{"class":"ct-d1eb62"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-0873da"},"children":[{"type":"text","value":"USER"}]},{"type":"element","tag":"span","props":{"class":"ct-9df562"},"children":[{"type":"text","value":" -p"}]},{"type":"element","tag":"span","props":{"class":"ct-d1eb62"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-0873da"},"children":[{"type":"text","value":"PASSWORD"}]},{"type":"element","tag":"span","props":{"class":"ct-9df562"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d1eb62"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-0873da"},"children":[{"type":"text","value":"DB"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-6472e8{color:#79C0FF}.ct-05f29a{color:#FF7B72}.ct-273241{color:#A5D6FF}.ct-0873da{color:#C9D1D9}.ct-d1eb62{color:#C9D1D9}.ct-9df562{color:#C9D1D9}.ct-773aeb{color:#8B949E}.light .ct-773aeb{color:#93A1A1}.light .ct-9df562{color:#657B83}.light .ct-d1eb62{color:#859900}.light .ct-0873da{color:#268BD2}.light .ct-273241{color:#2AA198}.light .ct-05f29a{color:#859900}.light .ct-6472e8{color:#268BD2}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Docker:Seed dump inside docker.md","_source":"content","_file":"Docker/Seed dump inside docker.md","_extension":"md"},{"_path":"/docker/wait-for-mysql","_dir":"docker","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Wait For Mysql","description":"wait-for-it.sh doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before #mysql is ready to accept connections","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/vishnubob/wait-for-it","rel":["nofollow"]},"children":[{"type":"text","value":"wait-for-it.sh"}]},{"type":"text","value":" doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before #mysql is ready to accept connections"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This script waits for first successful query from database or exits with non-zero status after timeout."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don't forget to change "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$query"}]},{"type":"text","value":" for the actually working one."}]},{"type":"element","tag":"code","props":{"code":"# Waits for mysql to become actually available\nwait_for_mysql() {\n query=\"SELECT count(*) FROM users\"\n \n timeout=180 # 3 minutes limit\n i=0\n \n while ! docker exec -it \"$1\" mysql --user=\"$2\" --password=\"$3\" -e \"$query\" $4 >/dev/null 2>&1; do\n sleep 1;\n\n i=$(($i+1))\n if [[ ${i} -ge ${timeout} ]]; then\n echo \"[Error] can't properly query MySQL after ${i} secs\"\n exit 1;\n fi\n done\n}\n\n# usage: wait_for_mysql miin-mysql-dev root password database\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"# Waits for mysql to become actually available\nwait_for_mysql() {\n query=\"SELECT count(*) FROM users\"\n \n timeout=180 # 3 minutes limit\n i=0\n \n while ! docker exec -it \"$1\" mysql --user=\"$2\" --password=\"$3\" -e \"$query\" $4 >/dev/null 2>&1; do\n sleep 1;\n\n i=$(($i+1))\n if [[ ${i} -ge ${timeout} ]]; then\n echo \"[Error] can't properly query MySQL after ${i} secs\"\n exit 1;\n fi\n done\n}\n\n# usage: wait_for_mysql miin-mysql-dev root password database\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"Wait%20for%20redis"},"children":[{"type":"text","value":"Wait for redis"}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/vishnubob/wait-for-it","rel":["nofollow"]},"children":[{"type":"text","value":"wait-for-it.sh"}]},{"type":"text","value":" doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before #mysql is ready to accept connections"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This script waits for first successful query from database or exits with non-zero status after timeout."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don't forget to change "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$query"}]},{"type":"text","value":" for the actually working one."}]},{"type":"element","tag":"code","props":{"code":"# Waits for mysql to become actually available\nwait_for_mysql() {\n query=\"SELECT count(*) FROM users\"\n \n timeout=180 # 3 minutes limit\n i=0\n \n while ! docker exec -it \"$1\" mysql --user=\"$2\" --password=\"$3\" -e \"$query\" $4 >/dev/null 2>&1; do\n sleep 1;\n\n i=$(($i+1))\n if [[ ${i} -ge ${timeout} ]]; then\n echo \"[Error] can't properly query MySQL after ${i} secs\"\n exit 1;\n fi\n done\n}\n\n# usage: wait_for_mysql miin-mysql-dev root password database\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a8e5eb"},"children":[{"type":"text","value":"# Waits for mysql to become actually available"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e5eecc"},"children":[{"type":"text","value":"wait_for_mysql"}]},{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" query="}]},{"type":"element","tag":"span","props":{"class":"ct-222dd0"},"children":[{"type":"text","value":"\"SELECT count(*) FROM users\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" timeout=180 "}]},{"type":"element","tag":"span","props":{"class":"ct-a8e5eb"},"children":[{"type":"text","value":"# 3 minutes limit"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" i=0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-34dae7"},"children":[{"type":"text","value":"while"}]},{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-34dae7"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" docker "}]},{"type":"element","tag":"span","props":{"class":"ct-bce09d"},"children":[{"type":"text","value":"exec"}]},{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" -it "}]},{"type":"element","tag":"span","props":{"class":"ct-222dd0"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-57393f"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-b31d54"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-222dd0"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" mysql --user="}]},{"type":"element","tag":"span","props":{"class":"ct-222dd0"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-57393f"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-b31d54"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-222dd0"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-222dd0"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" -e "}]},{"type":"element","tag":"span","props":{"class":"ct-222dd0"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-57393f"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-b31d54"},"children":[{"type":"text","value":"query"}]},{"type":"element","tag":"span","props":{"class":"ct-222dd0"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-34dae7"},"children":[{"type":"text","value":"do"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" sleep 1"}]},{"type":"element","tag":"span","props":{"class":"ct-34dae7"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" i="}]},{"type":"element","tag":"span","props":{"class":"ct-222dd0"},"children":[{"type":"text","value":"$(("}]},{"type":"element","tag":"span","props":{"class":"ct-57393f"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-b31d54"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-34dae7"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-4500fd"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-222dd0"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-34dae7"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" [[ "}]},{"type":"element","tag":"span","props":{"class":"ct-57393f"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-b31d54"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-57393f"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-34dae7"},"children":[{"type":"text","value":"-ge"}]},{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-57393f"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-b31d54"},"children":[{"type":"text","value":"timeout"}]},{"type":"element","tag":"span","props":{"class":"ct-57393f"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" ]]"}]},{"type":"element","tag":"span","props":{"class":"ct-34dae7"},"children":[{"type":"text","value":";"}]},{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-34dae7"},"children":[{"type":"text","value":"then"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bce09d"},"children":[{"type":"text","value":"echo"}]},{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-222dd0"},"children":[{"type":"text","value":"\"[Error] can't properly query MySQL after "}]},{"type":"element","tag":"span","props":{"class":"ct-57393f"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-b31d54"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-57393f"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-222dd0"},"children":[{"type":"text","value":" secs\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bce09d"},"children":[{"type":"text","value":"exit"}]},{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" 1"}]},{"type":"element","tag":"span","props":{"class":"ct-34dae7"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-34dae7"},"children":[{"type":"text","value":"fi"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-34dae7"},"children":[{"type":"text","value":"done"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a8e5eb"},"children":[{"type":"text","value":"# usage: wait_for_mysql miin-mysql-dev root password database"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"Wait%20for%20redis"},"children":[{"type":"text","value":"Wait for redis"}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-4500fd{color:#79C0FF}.ct-b31d54{color:#C9D1D9}.ct-57393f{color:#C9D1D9}.ct-bce09d{color:#79C0FF}.ct-34dae7{color:#FF7B72}.ct-222dd0{color:#A5D6FF}.ct-f1b587{color:#C9D1D9}.ct-e5eecc{color:#D2A8FF}.ct-a8e5eb{color:#8B949E}.light .ct-a8e5eb{color:#93A1A1}.light .ct-e5eecc{color:#268BD2}.light .ct-f1b587{color:#657B83}.light .ct-222dd0{color:#2AA198}.light .ct-34dae7{color:#859900}.light .ct-bce09d{color:#268BD2}.light .ct-57393f{color:#859900}.light .ct-b31d54{color:#268BD2}.light .ct-4500fd{color:#D33682}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Docker:Wait for mysql.md","_source":"content","_file":"Docker/Wait for mysql.md","_extension":"md"},{"_path":"/docker/wait-for-redis","_dir":"docker","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Wait For Redis","description":"wait-for-it.sh doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before redis is ready to accept connections","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/vishnubob/wait-for-it","rel":["nofollow"]},"children":[{"type":"text","value":"wait-for-it.sh"}]},{"type":"text","value":" doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before redis is ready to accept connections"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This script waits for first successful ping or exits with non-zero status after 3 minutes."}]},{"type":"element","tag":"code","props":{"code":"# Waits for redis to become actually available\nwait_for_redis() {\n timeout=180 # 3 minutes\n i=0\n while ! docker exec -it \"$1\" redis-cli -h localhost -p 6379 -a \"$2\" ping | grep \"PONG\" >/dev/null 2>&1; do\n sleep 1;\n\n i=$(($i+1))\n if [[ ${i} -ge ${timeout} ]]; then\n echo \"[Error] can't properly ping Redis container after ${i} secs\"\n exit 1;\n fi\n done\n}\n\n# usage: wait_for_redis miin-redis-dev password\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"# Waits for redis to become actually available\nwait_for_redis() {\n timeout=180 # 3 minutes\n i=0\n while ! docker exec -it \"$1\" redis-cli -h localhost -p 6379 -a \"$2\" ping | grep \"PONG\" >/dev/null 2>&1; do\n sleep 1;\n\n i=$(($i+1))\n if [[ ${i} -ge ${timeout} ]]; then\n echo \"[Error] can't properly ping Redis container after ${i} secs\"\n exit 1;\n fi\n done\n}\n\n# usage: wait_for_redis miin-redis-dev password\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"Wait%20for%20mysql"},"children":[{"type":"text","value":"Wait for mysql"}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/vishnubob/wait-for-it","rel":["nofollow"]},"children":[{"type":"text","value":"wait-for-it.sh"}]},{"type":"text","value":" doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before redis is ready to accept connections"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This script waits for first successful ping or exits with non-zero status after 3 minutes."}]},{"type":"element","tag":"code","props":{"code":"# Waits for redis to become actually available\nwait_for_redis() {\n timeout=180 # 3 minutes\n i=0\n while ! docker exec -it \"$1\" redis-cli -h localhost -p 6379 -a \"$2\" ping | grep \"PONG\" >/dev/null 2>&1; do\n sleep 1;\n\n i=$(($i+1))\n if [[ ${i} -ge ${timeout} ]]; then\n echo \"[Error] can't properly ping Redis container after ${i} secs\"\n exit 1;\n fi\n done\n}\n\n# usage: wait_for_redis miin-redis-dev password\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-15417a"},"children":[{"type":"text","value":"# Waits for redis to become actually available"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-765ec8"},"children":[{"type":"text","value":"wait_for_redis"}]},{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" timeout=180 "}]},{"type":"element","tag":"span","props":{"class":"ct-15417a"},"children":[{"type":"text","value":"# 3 minutes"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" i=0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3e06c3"},"children":[{"type":"text","value":"while"}]},{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3e06c3"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" docker "}]},{"type":"element","tag":"span","props":{"class":"ct-fe4a82"},"children":[{"type":"text","value":"exec"}]},{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" -it "}]},{"type":"element","tag":"span","props":{"class":"ct-333e9d"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-705dc7"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-ffdc0d"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-333e9d"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" redis-cli -h localhost -p 6379 -a "}]},{"type":"element","tag":"span","props":{"class":"ct-333e9d"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-705dc7"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-ffdc0d"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-333e9d"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" ping "}]},{"type":"element","tag":"span","props":{"class":"ct-3e06c3"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" grep "}]},{"type":"element","tag":"span","props":{"class":"ct-333e9d"},"children":[{"type":"text","value":"\"PONG\""}]},{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3e06c3"},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":"/dev/null "}]},{"type":"element","tag":"span","props":{"class":"ct-3e06c3"},"children":[{"type":"text","value":"2>&1;"}]},{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3e06c3"},"children":[{"type":"text","value":"do"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" sleep 1"}]},{"type":"element","tag":"span","props":{"class":"ct-3e06c3"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" i="}]},{"type":"element","tag":"span","props":{"class":"ct-333e9d"},"children":[{"type":"text","value":"$(("}]},{"type":"element","tag":"span","props":{"class":"ct-705dc7"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-ffdc0d"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-3e06c3"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-060abb"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-333e9d"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3e06c3"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" [[ "}]},{"type":"element","tag":"span","props":{"class":"ct-705dc7"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-ffdc0d"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-705dc7"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3e06c3"},"children":[{"type":"text","value":"-ge"}]},{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-705dc7"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-ffdc0d"},"children":[{"type":"text","value":"timeout"}]},{"type":"element","tag":"span","props":{"class":"ct-705dc7"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" ]]"}]},{"type":"element","tag":"span","props":{"class":"ct-3e06c3"},"children":[{"type":"text","value":";"}]},{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3e06c3"},"children":[{"type":"text","value":"then"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe4a82"},"children":[{"type":"text","value":"echo"}]},{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-333e9d"},"children":[{"type":"text","value":"\"[Error] can't properly ping Redis container after "}]},{"type":"element","tag":"span","props":{"class":"ct-705dc7"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-ffdc0d"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-705dc7"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-333e9d"},"children":[{"type":"text","value":" secs\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe4a82"},"children":[{"type":"text","value":"exit"}]},{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" 1"}]},{"type":"element","tag":"span","props":{"class":"ct-3e06c3"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3e06c3"},"children":[{"type":"text","value":"fi"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3e06c3"},"children":[{"type":"text","value":"done"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-15417a"},"children":[{"type":"text","value":"# usage: wait_for_redis miin-redis-dev password"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"Wait%20for%20mysql"},"children":[{"type":"text","value":"Wait for mysql"}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-060abb{color:#79C0FF}.ct-ffdc0d{color:#C9D1D9}.ct-705dc7{color:#C9D1D9}.ct-333e9d{color:#A5D6FF}.ct-fe4a82{color:#79C0FF}.ct-3e06c3{color:#FF7B72}.ct-d2c0fb{color:#C9D1D9}.ct-765ec8{color:#D2A8FF}.ct-15417a{color:#8B949E}.light .ct-15417a{color:#93A1A1}.light .ct-765ec8{color:#268BD2}.light .ct-d2c0fb{color:#657B83}.light .ct-3e06c3{color:#859900}.light .ct-fe4a82{color:#268BD2}.light .ct-333e9d{color:#2AA198}.light .ct-705dc7{color:#859900}.light .ct-ffdc0d{color:#268BD2}.light .ct-060abb{color:#D33682}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Docker:Wait for redis.md","_source":"content","_file":"Docker/Wait for redis.md","_extension":"md"},{"_path":"/frontend/react-native/oauth2-login","_dir":"react-native","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"OAuth2 Login","description":"Use #oauth2 login with React-Native","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use #oauth2 login with React-Native"}]},{"type":"element","tag":"h2","props":{"id":"common-oauth2-providers"},"children":[{"type":"text","value":"Common OAuth2 providers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Can be handled by "},{"type":"element","tag":"a","props":{"href":"react-native-app-auth"},"children":[{"type":"text","value":"react-native-app-auth"}]},{"type":"text","value":" by redirecting to url "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"com.yourapp://oauth2provider"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"example-for-google"},"children":[{"type":"text","value":"Example for #Google"}]},{"type":"element","tag":"code","props":{"code":"import { authorize } from 'react-native-app-auth';\n\nconst GOOGLE_OAUTH_CLIENT = '...';\n\n// ...\nconst authState = await authorize({\n issuer: 'https://accounts.google.com',\n clientId: `${GOOGLE_OAUTH_CLIENT}.apps.googleusercontent.com`,\n redirectUrl: `com.yourapp:/oauth2redirect/google`,\n scopes: ['openid', 'profile'],\n dangerouslyAllowInsecureHttpRequests: true,\n});\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { authorize } from 'react-native-app-auth';\n\nconst GOOGLE_OAUTH_CLIENT = '...';\n\n// ...\nconst authState = await authorize({\n issuer: 'https://accounts.google.com',\n clientId: `${GOOGLE_OAUTH_CLIENT}.apps.googleusercontent.com`,\n redirectUrl: `com.yourapp:/oauth2redirect/google`,\n scopes: ['openid', 'profile'],\n dangerouslyAllowInsecureHttpRequests: true,\n});\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"example-for-yandex"},"children":[{"type":"text","value":"Example for #Yandex"}]},{"type":"element","tag":"code","props":{"code":"const YANDEX_OAUTH_CLIENT = '...';\nconst YANDEX_OAUTH_SECRET = '...'; // better hide it somehow\nconst APP_ID = 'com.yourapp';\n\nconst authState = await authorize({\n serviceConfiguration: {\n authorizationEndpoint: `https://oauth.yandex.ru/authorize?response_type=code&client_id=${YANDEX_OAUTH_CLIENT}&redirect_uri=${APP_ID}:/oauth2redirect`,\n // TODO: replace it with your own backend to secure client_secret:\n tokenEndpoint: `https://oauth.yandex.ru/token?grant_type=authorization_code&client_id=${YANDEX_OAUTH_CLIENT}&client_secret=${YANDEX_OAUTH_SECRET}`,\n },\n clientId: YANDEX_OAUTH_CLIENT,\n redirectUrl: `${APP_ID}:/oauth2redirect`,\n scopes: ['login:info', 'login:avatar'],\n dangerouslyAllowInsecureHttpRequests: true,\n});\n\ncallback(authState.accessToken);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const YANDEX_OAUTH_CLIENT = '...';\nconst YANDEX_OAUTH_SECRET = '...'; // better hide it somehow\nconst APP_ID = 'com.yourapp';\n\nconst authState = await authorize({\n serviceConfiguration: {\n authorizationEndpoint: `https://oauth.yandex.ru/authorize?response_type=code&client_id=${YANDEX_OAUTH_CLIENT}&redirect_uri=${APP_ID}:/oauth2redirect`,\n // TODO: replace it with your own backend to secure client_secret:\n tokenEndpoint: `https://oauth.yandex.ru/token?grant_type=authorization_code&client_id=${YANDEX_OAUTH_CLIENT}&client_secret=${YANDEX_OAUTH_SECRET}`,\n },\n clientId: YANDEX_OAUTH_CLIENT,\n redirectUrl: `${APP_ID}:/oauth2redirect`,\n scopes: ['login:info', 'login:avatar'],\n dangerouslyAllowInsecureHttpRequests: true,\n});\n\ncallback(authState.accessToken);\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"apple-id-login"},"children":[{"type":"text","value":"Apple ID login"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/invertase/react-native-apple-authentication","rel":["nofollow"]},"children":[{"type":"text","value":"react-native-apple-authentication"}]},{"type":"text","value":" has its own "},{"type":"element","tag":"a","props":{"href":"https://github.com/invertase/react-native-apple-authentication/tree/main/docs","rel":["nofollow"]},"children":[{"type":"text","value":"documentation"}]},{"type":"text","value":" on setting up OAuth using Apple ID."}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use #oauth2 login with React-Native"}]},{"type":"element","tag":"h2","props":{"id":"common-oauth2-providers"},"children":[{"type":"text","value":"Common OAuth2 providers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Can be handled by "},{"type":"element","tag":"a","props":{"href":"react-native-app-auth"},"children":[{"type":"text","value":"react-native-app-auth"}]},{"type":"text","value":" by redirecting to url "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"com.yourapp://oauth2provider"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"example-for-google"},"children":[{"type":"text","value":"Example for #Google"}]},{"type":"element","tag":"code","props":{"code":"import { authorize } from 'react-native-app-auth';\n\nconst GOOGLE_OAUTH_CLIENT = '...';\n\n// ...\nconst authState = await authorize({\n issuer: 'https://accounts.google.com',\n clientId: `${GOOGLE_OAUTH_CLIENT}.apps.googleusercontent.com`,\n redirectUrl: `com.yourapp:/oauth2redirect/google`,\n scopes: ['openid', 'profile'],\n dangerouslyAllowInsecureHttpRequests: true,\n});\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4522d3"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-beebff"},"children":[{"type":"text","value":"authorize"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-4522d3"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"'react-native-app-auth'"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-069a1d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9bf1e2"},"children":[{"type":"text","value":"GOOGLE_OAUTH_CLIENT"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4522d3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"'...'"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-69c1e5"},"children":[{"type":"text","value":"// ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-069a1d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9bf1e2"},"children":[{"type":"text","value":"authState"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4522d3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4522d3"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c658e4"},"children":[{"type":"text","value":"authorize"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" issuer: "}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"'https://accounts.google.com'"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" clientId: "}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"`${"}]},{"type":"element","tag":"span","props":{"class":"ct-9bf1e2"},"children":[{"type":"text","value":"GOOGLE_OAUTH_CLIENT"}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"}.apps.googleusercontent.com`"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" redirectUrl: "}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"`com.yourapp:/oauth2redirect/google`"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" scopes: ["}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"'openid'"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"'profile'"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":"],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" dangerouslyAllowInsecureHttpRequests: "}]},{"type":"element","tag":"span","props":{"class":"ct-0e6b1b"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":"});"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"example-for-yandex"},"children":[{"type":"text","value":"Example for #Yandex"}]},{"type":"element","tag":"code","props":{"code":"const YANDEX_OAUTH_CLIENT = '...';\nconst YANDEX_OAUTH_SECRET = '...'; // better hide it somehow\nconst APP_ID = 'com.yourapp';\n\nconst authState = await authorize({\n serviceConfiguration: {\n authorizationEndpoint: `https://oauth.yandex.ru/authorize?response_type=code&client_id=${YANDEX_OAUTH_CLIENT}&redirect_uri=${APP_ID}:/oauth2redirect`,\n // TODO: replace it with your own backend to secure client_secret:\n tokenEndpoint: `https://oauth.yandex.ru/token?grant_type=authorization_code&client_id=${YANDEX_OAUTH_CLIENT}&client_secret=${YANDEX_OAUTH_SECRET}`,\n },\n clientId: YANDEX_OAUTH_CLIENT,\n redirectUrl: `${APP_ID}:/oauth2redirect`,\n scopes: ['login:info', 'login:avatar'],\n dangerouslyAllowInsecureHttpRequests: true,\n});\n\ncallback(authState.accessToken);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-069a1d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9bf1e2"},"children":[{"type":"text","value":"YANDEX_OAUTH_CLIENT"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4522d3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"'...'"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-069a1d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9bf1e2"},"children":[{"type":"text","value":"YANDEX_OAUTH_SECRET"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4522d3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"'...'"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":"; "}]},{"type":"element","tag":"span","props":{"class":"ct-69c1e5"},"children":[{"type":"text","value":"// better hide it somehow"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-069a1d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9bf1e2"},"children":[{"type":"text","value":"APP_ID"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4522d3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"'com.yourapp'"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-069a1d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9bf1e2"},"children":[{"type":"text","value":"authState"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4522d3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4522d3"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c658e4"},"children":[{"type":"text","value":"authorize"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" serviceConfiguration: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" authorizationEndpoint: "}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"`https://oauth.yandex.ru/authorize?response_type=code&client_id=${"}]},{"type":"element","tag":"span","props":{"class":"ct-9bf1e2"},"children":[{"type":"text","value":"YANDEX_OAUTH_CLIENT"}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"}&redirect_uri=${"}]},{"type":"element","tag":"span","props":{"class":"ct-9bf1e2"},"children":[{"type":"text","value":"APP_ID"}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"}:/oauth2redirect`"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-69c1e5"},"children":[{"type":"text","value":"// TODO: replace it with your own backend to secure client_secret:"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" tokenEndpoint: "}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"`https://oauth.yandex.ru/token?grant_type=authorization_code&client_id=${"}]},{"type":"element","tag":"span","props":{"class":"ct-9bf1e2"},"children":[{"type":"text","value":"YANDEX_OAUTH_CLIENT"}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"}&client_secret=${"}]},{"type":"element","tag":"span","props":{"class":"ct-9bf1e2"},"children":[{"type":"text","value":"YANDEX_OAUTH_SECRET"}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"}`"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" clientId: "}]},{"type":"element","tag":"span","props":{"class":"ct-9bf1e2"},"children":[{"type":"text","value":"YANDEX_OAUTH_CLIENT"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" redirectUrl: "}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"`${"}]},{"type":"element","tag":"span","props":{"class":"ct-9bf1e2"},"children":[{"type":"text","value":"APP_ID"}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"}:/oauth2redirect`"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" scopes: ["}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"'login:info'"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"'login:avatar'"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":"],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" dangerouslyAllowInsecureHttpRequests: "}]},{"type":"element","tag":"span","props":{"class":"ct-0e6b1b"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":"});"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c658e4"},"children":[{"type":"text","value":"callback"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-beebff"},"children":[{"type":"text","value":"authState"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-beebff"},"children":[{"type":"text","value":"accessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":");"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"apple-id-login"},"children":[{"type":"text","value":"Apple ID login"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/invertase/react-native-apple-authentication","rel":["nofollow"]},"children":[{"type":"text","value":"react-native-apple-authentication"}]},{"type":"text","value":" has its own "},{"type":"element","tag":"a","props":{"href":"https://github.com/invertase/react-native-apple-authentication/tree/main/docs","rel":["nofollow"]},"children":[{"type":"text","value":"documentation"}]},{"type":"text","value":" on setting up OAuth using Apple ID."}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-0e6b1b{color:#79C0FF}.ct-c658e4{color:#D2A8FF}.ct-69c1e5{color:#8B949E}.ct-9bf1e2{color:#79C0FF}.ct-069a1d{color:#FF7B72}.ct-bfb93a{color:#A5D6FF}.ct-beebff{color:#C9D1D9}.ct-62c49c{color:#C9D1D9}.ct-4522d3{color:#FF7B72}.light .ct-4522d3{color:#859900}.light .ct-62c49c{color:#657B83}.light .ct-beebff{color:#268BD2}.light .ct-bfb93a{color:#2AA198}.light .ct-069a1d{color:#073642}.light .ct-9bf1e2{color:#268BD2}.light .ct-69c1e5{color:#93A1A1}.light .ct-c658e4{color:#268BD2}.light .ct-0e6b1b{color:#B58900}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"common-oauth2-providers","depth":2,"text":"Common OAuth2 providers","children":[{"id":"example-for-google","depth":3,"text":"Example for #Google"},{"id":"example-for-yandex","depth":3,"text":"Example for #Yandex"}]},{"id":"apple-id-login","depth":2,"text":"Apple ID login"}]}},"_type":"markdown","_id":"content:Frontend:React Native:OAuth2 login.md","_source":"content","_file":"Frontend/React Native/OAuth2 login.md","_extension":"md"},{"_path":"/frontend/react-native/preserve-flatlist-scroll-position-in-react-native","_dir":"react-native","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Preserve FlatList Scroll Position In React Native","description":"Sometimes you need to keep scroll position of FlatList in React Native after some user interactions.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes you need to keep scroll position of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"FlatList"}]},{"type":"text","value":" in React Native after some user interactions."}]},{"type":"element","tag":"code","props":{"code":"// interact() is doing some stuff, that changes FlatList scroll size\ntype Props = { interact: () => void; }\n\nconst SomeList: FC<Props> = ({ interact }) => {\n const scrollPosition = useRef(0);\n const scrollHeight = useRef(0);\n \n // set it to `true` before interaction and back to `false` right after\n const shouldKeepScrollPosition = useRef(false);\n\n const onScroll = useCallback(\n (event: NativeSyntheticEvent<NativeScrollEvent>) => {\n scrollPosition.current = event.nativeEvent.contentOffset.y;\n },\n [],\n );\n\n const onContentSizeChange = useCallback((_: number, h: number) => {\n if (!shouldKeepScrollPosition.current) {\n scrollHeight.current = h;\n return;\n }\n\n ref.current?.scrollToOffset({\n offset: scrollPosition.current + (h - scrollHeight.current),\n animated: false,\n });\n\n scrollHeight.current = h;\n }, []);\n\n // onInteraction wraps interaction to preserve scroll position\n const onInteraction = useCallback(\n () => {\n shouldKeepScrollPosition.current = true;\n\n setTimeout(() => {\n interact();\n }, 0);\n\n setTimeout(() => {\n shouldKeepScrollPosition.current = false;\n }, 500);\n },\n [setSelectedSubThemes],\n );\n \n return (\n <FlatList\n // ...required FlatList options\n ref={ref}\n onContentSizeChange={onContentSizeChange}\n onRefresh={onRefresh}\n onScroll={onScroll}\n />\n )\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// interact() is doing some stuff, that changes FlatList scroll size\ntype Props = { interact: () => void; }\n\nconst SomeList: FC<Props> = ({ interact }) => {\n const scrollPosition = useRef(0);\n const scrollHeight = useRef(0);\n \n // set it to `true` before interaction and back to `false` right after\n const shouldKeepScrollPosition = useRef(false);\n\n const onScroll = useCallback(\n (event: NativeSyntheticEvent<NativeScrollEvent>) => {\n scrollPosition.current = event.nativeEvent.contentOffset.y;\n },\n [],\n );\n\n const onContentSizeChange = useCallback((_: number, h: number) => {\n if (!shouldKeepScrollPosition.current) {\n scrollHeight.current = h;\n return;\n }\n\n ref.current?.scrollToOffset({\n offset: scrollPosition.current + (h - scrollHeight.current),\n animated: false,\n });\n\n scrollHeight.current = h;\n }, []);\n\n // onInteraction wraps interaction to preserve scroll position\n const onInteraction = useCallback(\n () => {\n shouldKeepScrollPosition.current = true;\n\n setTimeout(() => {\n interact();\n }, 0);\n\n setTimeout(() => {\n shouldKeepScrollPosition.current = false;\n }, 500);\n },\n [setSelectedSubThemes],\n );\n \n return (\n <FlatList\n // ...required FlatList options\n ref={ref}\n onContentSizeChange={onContentSizeChange}\n onRefresh={onRefresh}\n onScroll={onScroll}\n />\n )\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes you need to keep scroll position of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"FlatList"}]},{"type":"text","value":" in React Native after some user interactions."}]},{"type":"element","tag":"code","props":{"code":"// interact() is doing some stuff, that changes FlatList scroll size\ntype Props = { interact: () => void; }\n\nconst SomeList: FC<Props> = ({ interact }) => {\n const scrollPosition = useRef(0);\n const scrollHeight = useRef(0);\n \n // set it to `true` before interaction and back to `false` right after\n const shouldKeepScrollPosition = useRef(false);\n\n const onScroll = useCallback(\n (event: NativeSyntheticEvent<NativeScrollEvent>) => {\n scrollPosition.current = event.nativeEvent.contentOffset.y;\n },\n [],\n );\n\n const onContentSizeChange = useCallback((_: number, h: number) => {\n if (!shouldKeepScrollPosition.current) {\n scrollHeight.current = h;\n return;\n }\n\n ref.current?.scrollToOffset({\n offset: scrollPosition.current + (h - scrollHeight.current),\n animated: false,\n });\n\n scrollHeight.current = h;\n }, []);\n\n // onInteraction wraps interaction to preserve scroll position\n const onInteraction = useCallback(\n () => {\n shouldKeepScrollPosition.current = true;\n\n setTimeout(() => {\n interact();\n }, 0);\n\n setTimeout(() => {\n shouldKeepScrollPosition.current = false;\n }, 500);\n },\n [setSelectedSubThemes],\n );\n \n return (\n <FlatList\n // ...required FlatList options\n ref={ref}\n onContentSizeChange={onContentSizeChange}\n onRefresh={onRefresh}\n onScroll={onScroll}\n />\n )\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-347b63"},"children":[{"type":"text","value":"// interact() is doing some stuff, that changes FlatList scroll size"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-eacfd3"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-43b17f"},"children":[{"type":"text","value":"Props"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-6ab075"},"children":[{"type":"text","value":"interact"}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-eacfd3"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f0e2c2"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"; }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-119c57"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6b0b8c"},"children":[{"type":"text","value":"SomeList"}]},{"type":"element","tag":"span","props":{"class":"ct-40962e"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f23ae9"},"children":[{"type":"text","value":"FC"}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-f23ae9"},"children":[{"type":"text","value":"Props"}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-40962e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":" ({ "}]},{"type":"element","tag":"span","props":{"class":"ct-a064f4"},"children":[{"type":"text","value":"interact"}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":" }) "}]},{"type":"element","tag":"span","props":{"class":"ct-119c57"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eacfd3"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4637ba"},"children":[{"type":"text","value":"scrollPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ab075"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-6a4963"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eacfd3"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4637ba"},"children":[{"type":"text","value":"scrollHeight"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ab075"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-6a4963"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-347b63"},"children":[{"type":"text","value":"// set it to `true` before interaction and back to `false` right after"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eacfd3"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4637ba"},"children":[{"type":"text","value":"shouldKeepScrollPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ab075"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7f0ff6"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eacfd3"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4637ba"},"children":[{"type":"text","value":"onScroll"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ab075"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-a064f4"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-40962e"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f23ae9"},"children":[{"type":"text","value":"NativeSyntheticEvent"}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-f23ae9"},"children":[{"type":"text","value":"NativeScrollEvent"}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":">) "}]},{"type":"element","tag":"span","props":{"class":"ct-119c57"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"scrollPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"nativeEvent"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"contentOffset"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"y"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" [],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-119c57"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-95ec99"},"children":[{"type":"text","value":"onContentSizeChange"}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-40962e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6b0b8c"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":"(("}]},{"type":"element","tag":"span","props":{"class":"ct-a064f4"},"children":[{"type":"text","value":"_"}]},{"type":"element","tag":"span","props":{"class":"ct-40962e"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-754b01"},"children":[{"type":"text","value":"number"}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a064f4"},"children":[{"type":"text","value":"h"}]},{"type":"element","tag":"span","props":{"class":"ct-40962e"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-754b01"},"children":[{"type":"text","value":"number"}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-119c57"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"shouldKeepScrollPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"scrollHeight"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"h"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"ref"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-6ab075"},"children":[{"type":"text","value":"scrollToOffset"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" offset: "}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"scrollPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"h"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"scrollHeight"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" animated: "}]},{"type":"element","tag":"span","props":{"class":"ct-7f0ff6"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"scrollHeight"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"h"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" }, []);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-347b63"},"children":[{"type":"text","value":"// onInteraction wraps interaction to preserve scroll position"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eacfd3"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4637ba"},"children":[{"type":"text","value":"onInteraction"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ab075"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-eacfd3"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"shouldKeepScrollPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7f0ff6"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4637ba"},"children":[{"type":"text","value":"setTimeout"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-eacfd3"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ab075"},"children":[{"type":"text","value":"interact"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" }, "}]},{"type":"element","tag":"span","props":{"class":"ct-6a4963"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4637ba"},"children":[{"type":"text","value":"setTimeout"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-eacfd3"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"shouldKeepScrollPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7f0ff6"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" }, "}]},{"type":"element","tag":"span","props":{"class":"ct-6a4963"},"children":[{"type":"text","value":"500"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"setSelectedSubThemes"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-f7ed9c"},"children":[{"type":"text","value":"FlatList"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-347b63"},"children":[{"type":"text","value":"// ...required FlatList options"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"ref"}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"ref"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"onContentSizeChange"}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"onContentSizeChange"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"onRefresh"}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"onRefresh"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"onScroll"}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"onScroll"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"/>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" )"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-f7ed9c{color:#FFA657}.ct-754b01{color:#79C0FF}.ct-95ec99{color:#79C0FF}.ct-7a1986{color:#C9D1D9}.ct-7f0ff6{color:#79C0FF}.ct-6a4963{color:#79C0FF}.ct-4637ba{color:#79C0FF}.ct-a064f4{color:#FFA657}.ct-f23ae9{color:#FFA657}.ct-40962e{color:#FF7B72}.ct-6b0b8c{color:#D2A8FF}.ct-173ddd{color:#C9D1D9}.ct-119c57{color:#FF7B72}.ct-f0e2c2{color:#79C0FF}.ct-6ab075{color:#D2A8FF}.ct-ae113b{color:#FF7B72}.ct-43b17f{color:#FFA657}.ct-2d0265{color:#C9D1D9}.ct-eacfd3{color:#FF7B72}.ct-347b63{color:#8B949E}.light .ct-347b63{color:#93A1A1}.light .ct-eacfd3{color:#073642}.light .ct-2d0265{color:#657B83}.light .ct-43b17f{color:#268BD2}.light .ct-ae113b{color:#859900}.light .ct-6ab075{color:#268BD2}.light .ct-f0e2c2{color:#859900}.light .ct-119c57{color:#073642}.light .ct-173ddd{color:#657B83}.light .ct-6b0b8c{color:#268BD2}.light .ct-40962e{color:#859900}.light .ct-f23ae9{color:#268BD2}.light .ct-a064f4{color:#657B83}.light .ct-4637ba{color:#268BD2}.light .ct-6a4963{color:#D33682}.light .ct-7f0ff6{color:#B58900}.light .ct-7a1986{color:#268BD2}.light .ct-95ec99{color:#268BD2}.light .ct-754b01{color:#859900}.light .ct-f7ed9c{color:#657B83}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Frontend:React Native:Preserve FlatList scroll position in React Native.md","_source":"content","_file":"Frontend/React Native/Preserve FlatList scroll position in React Native.md","_extension":"md"},{"_path":"/frontend/react-native/useful-comands","_dir":"react-native","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Useful Comands","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"show-android-logcat"},"children":[{"type":"text","value":"Show android logcat"}]},{"type":"element","tag":"code","props":{"code":"adb logcat com.application:I \"*:S\"\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"adb logcat com.application:I \"*:S\"\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"get-apks-sha-256"},"children":[{"type":"text","value":"Get .apk's SHA-256"}]},{"type":"element","tag":"code","props":{"code":"keytool -printcert -jarfile \"$1\"\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"keytool -printcert -jarfile \"$1\"\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"assemble-debug-release-on-android"},"children":[{"type":"text","value":"Assemble debug release on Android"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Packages release with bundled resources."}]},{"type":"element","tag":"code","props":{"code":"npx react-native bundle \\\n --platform android \\\n --dev false \\\n --entry-file index.js \\\n --bundle-output android/app/src/main/assets/index.android.bundle \\\n --assets-dest android/app/src/main/res/\n\ncd android && ./gradlew assembleDebug\n\n# do your stuff\n\n./gradlew clean\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npx react-native bundle \\\n --platform android \\\n --dev false \\\n --entry-file index.js \\\n --bundle-output android/app/src/main/assets/index.android.bundle \\\n --assets-dest android/app/src/main/res/\n\ncd android && ./gradlew assembleDebug\n\n# do your stuff\n\n./gradlew clean\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"send-release-to-android-device"},"children":[{"type":"text","value":"Send release to Android device"}]},{"type":"element","tag":"code","props":{"code":"cd ./android \\\n && ./gradlew assembleRelease \\\n && adb install ./app/build/outputs/apk/release/app-release.apk\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"cd ./android \\\n && ./gradlew assembleRelease \\\n && adb install ./app/build/outputs/apk/release/app-release.apk\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"deep-links"},"children":[{"type":"text","value":"Deep links"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://zarah.dev/2022/02/08/android12-deeplinks.html","rel":["nofollow"]},"children":[{"type":"text","value":"https://zarah.dev/2022/02/08/android12-deeplinks.html"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://developer.android.com/training/app-links/verify-site-associations#invoke-domain-verification","rel":["nofollow"]},"children":[{"type":"text","value":"https://developer.android.com/training/app-links/verify-site-associations#invoke-domain-verification"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://digitalassetlinks.googleapis.com/v1/statements:list?source.web.site=https://miin.ru&relation=delegate_permission/common.handle_all_urls","rel":["nofollow"]},"children":[{"type":"text","value":"https://digitalassetlinks.googleapis.com/v1/statements:list?source.web.site=https://miin.ru&relation=delegate_permission/common.handle_all_urls"}]}]}]},{"type":"element","tag":"h3","props":{"id":"open-deep-links"},"children":[{"type":"text","value":"Open deep links"}]},{"type":"element","tag":"code","props":{"code":"# ios \nxcrun simctl openurl booted $1\n\n# android\nadb shell am start -W -a android.intent.action.VIEW -d $1 \\\ncom.application\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"# ios \nxcrun simctl openurl booted $1\n\n# android\nadb shell am start -W -a android.intent.action.VIEW -d $1 \\\ncom.application\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"reverify-links-on-android"},"children":[{"type":"text","value":"Reverify links on Android"}]},{"type":"element","tag":"code","props":{"code":"PACKAGE=\"com.application\"\n\nadb shell pm set-app-links --package $PACKAGE 0 all && \\\n adb shell pm verify-app-links --re-verify $PACKAGE\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"PACKAGE=\"com.application\"\n\nadb shell pm set-app-links --package $PACKAGE 0 all && \\\n adb shell pm verify-app-links --re-verify $PACKAGE\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"show-android-logcat"},"children":[{"type":"text","value":"Show android logcat"}]},{"type":"element","tag":"code","props":{"code":"adb logcat com.application:I \"*:S\"\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":"adb logcat com.application:I "}]},{"type":"element","tag":"span","props":{"class":"ct-c1ff0c"},"children":[{"type":"text","value":"\"*:S\""}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"get-apks-sha-256"},"children":[{"type":"text","value":"Get .apk's SHA-256"}]},{"type":"element","tag":"code","props":{"code":"keytool -printcert -jarfile \"$1\"\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":"keytool -printcert -jarfile "}]},{"type":"element","tag":"span","props":{"class":"ct-c1ff0c"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-251e83"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-b7705e"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-c1ff0c"},"children":[{"type":"text","value":"\""}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"assemble-debug-release-on-android"},"children":[{"type":"text","value":"Assemble debug release on Android"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Packages release with bundled resources."}]},{"type":"element","tag":"code","props":{"code":"npx react-native bundle \\\n --platform android \\\n --dev false \\\n --entry-file index.js \\\n --bundle-output android/app/src/main/assets/index.android.bundle \\\n --assets-dest android/app/src/main/res/\n\ncd android && ./gradlew assembleDebug\n\n# do your stuff\n\n./gradlew clean\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":"npx react-native bundle \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":" --platform android \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":" --dev "}]},{"type":"element","tag":"span","props":{"class":"ct-46f2e1"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":" \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":" --entry-file index.js \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":" --bundle-output android/app/src/main/assets/index.android.bundle \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":" --assets-dest android/app/src/main/res/"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-46f2e1"},"children":[{"type":"text","value":"cd"}]},{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":" android "}]},{"type":"element","tag":"span","props":{"class":"ct-ea093a"},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":" ./gradlew assembleDebug"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1fb94"},"children":[{"type":"text","value":"# do your stuff"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":"./gradlew clean"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"send-release-to-android-device"},"children":[{"type":"text","value":"Send release to Android device"}]},{"type":"element","tag":"code","props":{"code":"cd ./android \\\n && ./gradlew assembleRelease \\\n && adb install ./app/build/outputs/apk/release/app-release.apk\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-46f2e1"},"children":[{"type":"text","value":"cd"}]},{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":" ./android \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea093a"},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":" ./gradlew assembleRelease \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea093a"},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":" adb install ./app/build/outputs/apk/release/app-release.apk"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"deep-links"},"children":[{"type":"text","value":"Deep links"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://zarah.dev/2022/02/08/android12-deeplinks.html","rel":["nofollow"]},"children":[{"type":"text","value":"https://zarah.dev/2022/02/08/android12-deeplinks.html"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://developer.android.com/training/app-links/verify-site-associations#invoke-domain-verification","rel":["nofollow"]},"children":[{"type":"text","value":"https://developer.android.com/training/app-links/verify-site-associations#invoke-domain-verification"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://digitalassetlinks.googleapis.com/v1/statements:list?source.web.site=https://miin.ru&relation=delegate_permission/common.handle_all_urls","rel":["nofollow"]},"children":[{"type":"text","value":"https://digitalassetlinks.googleapis.com/v1/statements:list?source.web.site=https://miin.ru&relation=delegate_permission/common.handle_all_urls"}]}]}]},{"type":"element","tag":"h3","props":{"id":"open-deep-links"},"children":[{"type":"text","value":"Open deep links"}]},{"type":"element","tag":"code","props":{"code":"# ios \nxcrun simctl openurl booted $1\n\n# android\nadb shell am start -W -a android.intent.action.VIEW -d $1 \\\ncom.application\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1fb94"},"children":[{"type":"text","value":"# ios "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":"xcrun simctl openurl booted "}]},{"type":"element","tag":"span","props":{"class":"ct-251e83"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-b7705e"},"children":[{"type":"text","value":"1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1fb94"},"children":[{"type":"text","value":"# android"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":"adb shell am start -W -a android.intent.action.VIEW -d "}]},{"type":"element","tag":"span","props":{"class":"ct-251e83"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-b7705e"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":" \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":"com.application"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"reverify-links-on-android"},"children":[{"type":"text","value":"Reverify links on Android"}]},{"type":"element","tag":"code","props":{"code":"PACKAGE=\"com.application\"\n\nadb shell pm set-app-links --package $PACKAGE 0 all && \\\n adb shell pm verify-app-links --re-verify $PACKAGE\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":"PACKAGE="}]},{"type":"element","tag":"span","props":{"class":"ct-c1ff0c"},"children":[{"type":"text","value":"\"com.application\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":"adb shell pm set-app-links --package "}]},{"type":"element","tag":"span","props":{"class":"ct-251e83"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-b7705e"},"children":[{"type":"text","value":"PACKAGE"}]},{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":" 0 all "}]},{"type":"element","tag":"span","props":{"class":"ct-ea093a"},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":" \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":" adb shell pm verify-app-links --re-verify "}]},{"type":"element","tag":"span","props":{"class":"ct-251e83"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-b7705e"},"children":[{"type":"text","value":"PACKAGE"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-b1fb94{color:#8B949E}.ct-ea093a{color:#FF7B72}.ct-46f2e1{color:#79C0FF}.ct-b7705e{color:#C9D1D9}.ct-251e83{color:#C9D1D9}.ct-c1ff0c{color:#A5D6FF}.ct-65fc6f{color:#C9D1D9}.light .ct-65fc6f{color:#657B83}.light .ct-c1ff0c{color:#2AA198}.light .ct-251e83{color:#859900}.light .ct-b7705e{color:#268BD2}.light .ct-46f2e1{color:#268BD2}.light .ct-ea093a{color:#859900}.light .ct-b1fb94{color:#93A1A1}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"show-android-logcat","depth":2,"text":"Show android logcat"},{"id":"get-apks-sha-256","depth":2,"text":"Get .apk's SHA-256"},{"id":"assemble-debug-release-on-android","depth":2,"text":"Assemble debug release on Android"},{"id":"send-release-to-android-device","depth":2,"text":"Send release to Android device"},{"id":"deep-links","depth":2,"text":"Deep links","children":[{"id":"open-deep-links","depth":3,"text":"Open deep links"},{"id":"reverify-links-on-android","depth":3,"text":"Reverify links on Android"}]}]}},"_type":"markdown","_id":"content:Frontend:React Native:Useful comands.md","_source":"content","_file":"Frontend/React Native/Useful comands.md","_extension":"md"},{"_path":"/frontend/react/axios-refresh-token-on-react","_dir":"react","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Axios Refresh Token On React","description":"<ApiProvider /> component, that will handle token refresh if needed. Refresh function should, probably, be passed through component props.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<ApiProvider />"}]},{"type":"text","value":" component, that will handle token refresh if needed. Refresh function should, probably, be passed through component props."}]},{"type":"element","tag":"code","props":{"code":"import axios from \"axios\";\nimport React, {\n createContext,\n FC,\n PropsWithChildren,\n useCallback,\n useContext,\n useEffect,\n useRef,\n} from \"react\";\n\ninterface APIProviderProps extends PropsWithChildren {\n tokens: {\n access: string;\n refresh: string;\n };\n logout: () => void;\n}\n\nconst APIContext = createContext({\n client: axios.create({\n baseURL: process.env.NEXT_PUBLIC_API_ENDPOINT,\n }),\n});\n\nconst APIProvider: FC<APIProviderProps> = ({ \n tokens, \n logout, \n children,\n}) => {\n const client = useRef(\n axios.create({\n baseURL: process.env.NEXT_PUBLIC_API_ENDPOINT,\n })\n ).current;\n\n const refreshTokens = useCallback<() => string>(() => {\n // TODO: implement me\n throw new Error(\"not implemented\");\n }, []);\n\n useEffect(() => {\n if (!tokens.access) {\n return;\n }\n\n // append `access` token to all requests\n const req = client.interceptors.request.use(\n async (config) => {\n config.headers = {\n Authorization: `Bearer ${tokens.access}`,\n };\n return config;\n },\n (error) => {\n Promise.reject(error);\n }\n );\n\n // refreshing interceptor\n const resp = client.interceptors.response.use(\n (response) => {\n return response;\n },\n async function (error) {\n const originalRequest = error.config;\n\n if (error.response.status === 401 && !originalRequest._retry) {\n originalRequest._retry = true;\n\n const newToken = refreshTokens;\n\n return axios({\n ...originalRequest,\n headers: {\n ...originalRequest.headers,\n Authorization: \"Bearer \" + newToken,\n },\n });\n }\n\n logout();\n return Promise.reject(error);\n }\n );\n\n return () => {\n axios.interceptors.request.eject(req);\n axios.interceptors.request.eject(resp);\n };\n }, [client, tokens.access, tokens.refresh, refreshTokens, logout]);\n\n return (\n <APIContext.Provider value={{ client }}>\n {children}\n </APIContext.Provider>\n );\n};\n\nexport const useAPI = () => useContext(APIContext).client;\n\nexport { APIProvider };\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import axios from \"axios\";\nimport React, {\n createContext,\n FC,\n PropsWithChildren,\n useCallback,\n useContext,\n useEffect,\n useRef,\n} from \"react\";\n\ninterface APIProviderProps extends PropsWithChildren {\n tokens: {\n access: string;\n refresh: string;\n };\n logout: () => void;\n}\n\nconst APIContext = createContext({\n client: axios.create({\n baseURL: process.env.NEXT_PUBLIC_API_ENDPOINT,\n }),\n});\n\nconst APIProvider: FC<APIProviderProps> = ({ \n tokens, \n logout, \n children,\n}) => {\n const client = useRef(\n axios.create({\n baseURL: process.env.NEXT_PUBLIC_API_ENDPOINT,\n })\n ).current;\n\n const refreshTokens = useCallback<() => string>(() => {\n // TODO: implement me\n throw new Error(\"not implemented\");\n }, []);\n\n useEffect(() => {\n if (!tokens.access) {\n return;\n }\n\n // append `access` token to all requests\n const req = client.interceptors.request.use(\n async (config) => {\n config.headers = {\n Authorization: `Bearer ${tokens.access}`,\n };\n return config;\n },\n (error) => {\n Promise.reject(error);\n }\n );\n\n // refreshing interceptor\n const resp = client.interceptors.response.use(\n (response) => {\n return response;\n },\n async function (error) {\n const originalRequest = error.config;\n\n if (error.response.status === 401 && !originalRequest._retry) {\n originalRequest._retry = true;\n\n const newToken = refreshTokens;\n\n return axios({\n ...originalRequest,\n headers: {\n ...originalRequest.headers,\n Authorization: \"Bearer \" + newToken,\n },\n });\n }\n\n logout();\n return Promise.reject(error);\n }\n );\n\n return () => {\n axios.interceptors.request.eject(req);\n axios.interceptors.request.eject(resp);\n };\n }, [client, tokens.access, tokens.refresh, refreshTokens, logout]);\n\n return (\n <APIContext.Provider value={{ client }}>\n {children}\n </APIContext.Provider>\n );\n};\n\nexport const useAPI = () => useContext(APIContext).client;\n\nexport { APIProvider };\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<ApiProvider />"}]},{"type":"text","value":" component, that will handle token refresh if needed. Refresh function should, probably, be passed through component props."}]},{"type":"element","tag":"code","props":{"code":"import axios from \"axios\";\nimport React, {\n createContext,\n FC,\n PropsWithChildren,\n useCallback,\n useContext,\n useEffect,\n useRef,\n} from \"react\";\n\ninterface APIProviderProps extends PropsWithChildren {\n tokens: {\n access: string;\n refresh: string;\n };\n logout: () => void;\n}\n\nconst APIContext = createContext({\n client: axios.create({\n baseURL: process.env.NEXT_PUBLIC_API_ENDPOINT,\n }),\n});\n\nconst APIProvider: FC<APIProviderProps> = ({ \n tokens, \n logout, \n children,\n}) => {\n const client = useRef(\n axios.create({\n baseURL: process.env.NEXT_PUBLIC_API_ENDPOINT,\n })\n ).current;\n\n const refreshTokens = useCallback<() => string>(() => {\n // TODO: implement me\n throw new Error(\"not implemented\");\n }, []);\n\n useEffect(() => {\n if (!tokens.access) {\n return;\n }\n\n // append `access` token to all requests\n const req = client.interceptors.request.use(\n async (config) => {\n config.headers = {\n Authorization: `Bearer ${tokens.access}`,\n };\n return config;\n },\n (error) => {\n Promise.reject(error);\n }\n );\n\n // refreshing interceptor\n const resp = client.interceptors.response.use(\n (response) => {\n return response;\n },\n async function (error) {\n const originalRequest = error.config;\n\n if (error.response.status === 401 && !originalRequest._retry) {\n originalRequest._retry = true;\n\n const newToken = refreshTokens;\n\n return axios({\n ...originalRequest,\n headers: {\n ...originalRequest.headers,\n Authorization: \"Bearer \" + newToken,\n },\n });\n }\n\n logout();\n return Promise.reject(error);\n }\n );\n\n return () => {\n axios.interceptors.request.eject(req);\n axios.interceptors.request.eject(resp);\n };\n }, [client, tokens.access, tokens.refresh, refreshTokens, logout]);\n\n return (\n <APIContext.Provider value={{ client }}>\n {children}\n </APIContext.Provider>\n );\n};\n\nexport const useAPI = () => useContext(APIContext).client;\n\nexport { APIProvider };\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ffccda"},"children":[{"type":"text","value":"\"axios\""}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"React"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":", {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"createContext"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"FC"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"PropsWithChildren"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"useContext"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"useEffect"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"} "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ffccda"},"children":[{"type":"text","value":"\"react\""}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d2feec"},"children":[{"type":"text","value":"interface"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c38e35"},"children":[{"type":"text","value":"APIProviderProps"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d2feec"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1c2886"},"children":[{"type":"text","value":"PropsWithChildren"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ed897c"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-b7492e"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ed897c"},"children":[{"type":"text","value":"access"}]},{"type":"element","tag":"span","props":{"class":"ct-b7492e"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f2f6ff"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ed897c"},"children":[{"type":"text","value":"refresh"}]},{"type":"element","tag":"span","props":{"class":"ct-b7492e"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f2f6ff"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-82accf"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-bfa659"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-694fc0"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bfa659"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-646245"},"children":[{"type":"text","value":"APIContext"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-82accf"},"children":[{"type":"text","value":"createContext"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" client: "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-82accf"},"children":[{"type":"text","value":"create"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" baseURL: "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-646245"},"children":[{"type":"text","value":"NEXT_PUBLIC_API_ENDPOINT"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"});"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bfa659"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-82accf"},"children":[{"type":"text","value":"APIProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-255c64"},"children":[{"type":"text","value":"FC"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-255c64"},"children":[{"type":"text","value":"APIProviderProps"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" ({ "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"children"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"}) "}]},{"type":"element","tag":"span","props":{"class":"ct-bfa659"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bfa659"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-646245"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-82accf"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-82accf"},"children":[{"type":"text","value":"create"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" baseURL: "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-646245"},"children":[{"type":"text","value":"NEXT_PUBLIC_API_ENDPOINT"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" )."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bfa659"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-646245"},"children":[{"type":"text","value":"refreshTokens"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-82accf"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"<() "}]},{"type":"element","tag":"span","props":{"class":"ct-bfa659"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-694fc0"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":">(() "}]},{"type":"element","tag":"span","props":{"class":"ct-bfa659"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b6b8f5"},"children":[{"type":"text","value":"// TODO: implement me"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-694fc0"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ffccda"},"children":[{"type":"text","value":"\"not implemented\""}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" }, []);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-82accf"},"children":[{"type":"text","value":"useEffect"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-bfa659"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"access"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b6b8f5"},"children":[{"type":"text","value":"// append `access` token to all requests"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bfa659"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-646245"},"children":[{"type":"text","value":"req"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"interceptors"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-82accf"},"children":[{"type":"text","value":"use"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d2feec"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ed897c"},"children":[{"type":"text","value":"config"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-d2feec"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"config"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" Authorization: "}]},{"type":"element","tag":"span","props":{"class":"ct-ffccda"},"children":[{"type":"text","value":"`Bearer ${"}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-57838d"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"access"}]},{"type":"element","tag":"span","props":{"class":"ct-ffccda"},"children":[{"type":"text","value":"}`"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"config"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ed897c"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-d2feec"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-694fc0"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-82accf"},"children":[{"type":"text","value":"reject"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b6b8f5"},"children":[{"type":"text","value":"// refreshing interceptor"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bfa659"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-646245"},"children":[{"type":"text","value":"resp"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"interceptors"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"response"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-82accf"},"children":[{"type":"text","value":"use"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ed897c"},"children":[{"type":"text","value":"response"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-d2feec"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"response"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d2feec"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d2feec"},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ed897c"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bfa659"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-646245"},"children":[{"type":"text","value":"originalRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"config"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"response"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"status"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"==="}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-68b8e3"},"children":[{"type":"text","value":"401"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"originalRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"_retry"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"originalRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"_retry"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-01fcd4"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bfa659"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-646245"},"children":[{"type":"text","value":"newToken"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"refreshTokens"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-82accf"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"originalRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" headers: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"originalRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" Authorization: "}]},{"type":"element","tag":"span","props":{"class":"ct-ffccda"},"children":[{"type":"text","value":"\"Bearer \""}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"newToken"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-82accf"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-694fc0"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-82accf"},"children":[{"type":"text","value":"reject"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-bfa659"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"interceptors"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-82accf"},"children":[{"type":"text","value":"eject"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"req"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"interceptors"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-82accf"},"children":[{"type":"text","value":"eject"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"resp"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" }, ["}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"access"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"refresh"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"refreshTokens"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"]);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"APIContext"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"Provider"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"{{ "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" }}"}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" {"}]},{"type":"element","tag":"span","props":{"class":"ct-ed897c"},"children":[{"type":"text","value":"children"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"APIContext"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"Provider"}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bfa659"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-82accf"},"children":[{"type":"text","value":"useAPI"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-bfa659"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-82accf"},"children":[{"type":"text","value":"useContext"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"APIContext"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"APIProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" };"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-01fcd4{color:#79C0FF}.ct-68b8e3{color:#79C0FF}.ct-57838d{color:#A5D6FF}.ct-b6b8f5{color:#8B949E}.ct-255c64{color:#FFA657}.ct-646245{color:#79C0FF}.ct-694fc0{color:#79C0FF}.ct-bfa659{color:#FF7B72}.ct-82accf{color:#D2A8FF}.ct-f2f6ff{color:#79C0FF}.ct-b7492e{color:#FF7B72}.ct-ed897c{color:#FFA657}.ct-1c2886{color:#79C0FF}.ct-c38e35{color:#FFA657}.ct-d6d1bd{color:#C9D1D9}.ct-d2feec{color:#FF7B72}.ct-ffccda{color:#A5D6FF}.ct-3427e6{color:#C9D1D9}.ct-9d2291{color:#C9D1D9}.ct-f402a3{color:#FF7B72}.light .ct-f402a3{color:#859900}.light .ct-9d2291{color:#657B83}.light .ct-3427e6{color:#268BD2}.light .ct-ffccda{color:#2AA198}.light .ct-d2feec{color:#073642}.light .ct-d6d1bd{color:#657B83}.light .ct-c38e35{color:#268BD2}.light .ct-1c2886{color:#657B83}.light .ct-ed897c{color:#657B83}.light .ct-b7492e{color:#859900}.light .ct-f2f6ff{color:#859900}.light .ct-82accf{color:#268BD2}.light .ct-bfa659{color:#073642}.light .ct-694fc0{color:#859900}.light .ct-646245{color:#268BD2}.light .ct-255c64{color:#268BD2}.light .ct-b6b8f5{color:#93A1A1}.light .ct-57838d{color:#657B83}.light .ct-68b8e3{color:#D33682}.light .ct-01fcd4{color:#B58900}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Frontend:React:Axios refresh token on React.md","_source":"content","_file":"Frontend/React/Axios refresh token on React.md","_extension":"md"},{"_path":"/frontend/react/axios-with-abortcontroller","_dir":"react","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Axios With AbortController","description":"If you need to cancel some request, use axios with AbortController. Previously axios used cancellation token, but now it's deprecated.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you need to cancel some request, use "},{"type":"element","tag":"a","props":{"href":"https://axios-http.com/docs/cancellation","rel":["nofollow"]},"children":[{"type":"text","value":"axios with AbortController"}]},{"type":"text","value":". Previously axios used cancellation token, but now it's deprecated."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"AbortController"}]},{"type":"text","value":" can be used with a multiple requests to cancel them at once."}]},{"type":"element","tag":"code","props":{"code":"import { useCallback, useRef } from \"react\";\nimport axios from 'axios';\n\nconst client = axios.create();\n\nexport const useGetUsers = () => {\n const controller = useRef(new AbortController());\n \n const get = useCallback(async () => {\n const result = await client.get(\"/\", {\n // params and props here\n signal: controller.current.signal,\n });\n\n return result.data;\n }, []);\n\n const cancel = useCallback(() => {\n controller.current.abort();\n \n // controller should be rewritten or all requests will fail\n controller.current = new AbortController();\n }, [controller]);\n\n return { get, cancel };\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { useCallback, useRef } from \"react\";\nimport axios from 'axios';\n\nconst client = axios.create();\n\nexport const useGetUsers = () => {\n const controller = useRef(new AbortController());\n \n const get = useCallback(async () => {\n const result = await client.get(\"/\", {\n // params and props here\n signal: controller.current.signal,\n });\n\n return result.data;\n }, []);\n\n const cancel = useCallback(() => {\n controller.current.abort();\n \n // controller should be rewritten or all requests will fail\n controller.current = new AbortController();\n }, [controller]);\n\n return { get, cancel };\n};\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you need to cancel some request, use "},{"type":"element","tag":"a","props":{"href":"https://axios-http.com/docs/cancellation","rel":["nofollow"]},"children":[{"type":"text","value":"axios with AbortController"}]},{"type":"text","value":". Previously axios used cancellation token, but now it's deprecated."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"AbortController"}]},{"type":"text","value":" can be used with a multiple requests to cancel them at once."}]},{"type":"element","tag":"code","props":{"code":"import { useCallback, useRef } from \"react\";\nimport axios from 'axios';\n\nconst client = axios.create();\n\nexport const useGetUsers = () => {\n const controller = useRef(new AbortController());\n \n const get = useCallback(async () => {\n const result = await client.get(\"/\", {\n // params and props here\n signal: controller.current.signal,\n });\n\n return result.data;\n }, []);\n\n const cancel = useCallback(() => {\n controller.current.abort();\n \n // controller should be rewritten or all requests will fail\n controller.current = new AbortController();\n }, [controller]);\n\n return { get, cancel };\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-189664"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-22d699"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-22d699"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-189664"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-76a571"},"children":[{"type":"text","value":"\"react\""}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-189664"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-22d699"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-189664"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-76a571"},"children":[{"type":"text","value":"'axios'"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a571a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-348230"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-189664"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-22d699"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-63c11c"},"children":[{"type":"text","value":"create"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-189664"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5a571a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63c11c"},"children":[{"type":"text","value":"useGetUsers"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-189664"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-5a571a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5a571a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-348230"},"children":[{"type":"text","value":"controller"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-189664"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63c11c"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-189664"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63c11c"},"children":[{"type":"text","value":"AbortController"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":"());"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5a571a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-348230"},"children":[{"type":"text","value":"get"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-189664"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63c11c"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-5a571a"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-5a571a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5a571a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-348230"},"children":[{"type":"text","value":"result"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-189664"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-189664"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-22d699"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-63c11c"},"children":[{"type":"text","value":"get"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-76a571"},"children":[{"type":"text","value":"\"/\""}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":", {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-39834c"},"children":[{"type":"text","value":"// params and props here"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" signal: "}]},{"type":"element","tag":"span","props":{"class":"ct-22d699"},"children":[{"type":"text","value":"controller"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-22d699"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-22d699"},"children":[{"type":"text","value":"signal"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-189664"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-22d699"},"children":[{"type":"text","value":"result"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-22d699"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" }, []);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5a571a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-348230"},"children":[{"type":"text","value":"cancel"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-189664"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63c11c"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-5a571a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-22d699"},"children":[{"type":"text","value":"controller"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-22d699"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-63c11c"},"children":[{"type":"text","value":"abort"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-39834c"},"children":[{"type":"text","value":"// controller should be rewritten or all requests will fail"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-22d699"},"children":[{"type":"text","value":"controller"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-22d699"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-189664"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-189664"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63c11c"},"children":[{"type":"text","value":"AbortController"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" }, ["}]},{"type":"element","tag":"span","props":{"class":"ct-22d699"},"children":[{"type":"text","value":"controller"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":"]);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-189664"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-22d699"},"children":[{"type":"text","value":"get"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-22d699"},"children":[{"type":"text","value":"cancel"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-39834c{color:#8B949E}.ct-63c11c{color:#D2A8FF}.ct-348230{color:#79C0FF}.ct-5a571a{color:#FF7B72}.ct-76a571{color:#A5D6FF}.ct-22d699{color:#C9D1D9}.ct-ccb8b9{color:#C9D1D9}.ct-189664{color:#FF7B72}.light .ct-189664{color:#859900}.light .ct-ccb8b9{color:#657B83}.light .ct-22d699{color:#268BD2}.light .ct-76a571{color:#2AA198}.light .ct-5a571a{color:#073642}.light .ct-348230{color:#268BD2}.light .ct-63c11c{color:#268BD2}.light .ct-39834c{color:#93A1A1}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Frontend:React:Axios with AbortController.md","_source":"content","_file":"Frontend/React/Axios with AbortController.md","_extension":"md"},{"_path":"/frontend/react/usewhatschanged","_dir":"react","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"UseWhatsChanged","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"code","props":{"code":"import { useEffect, useRef } from 'react';\n\n/** Pass dictionary of `props` as argument and it will\n * tell you, which one changed after rerender.\n * Use `prefix` to distinguish props of different components.\n */\n// eslint-disable-next-line import/no-unused-modules\nexport const useWhatsChanged = (\n props: Record<string, unknown>,\n prefix = '',\n) => {\n const prevProps = useRef(props);\n\n useEffect(() => {\n Object.entries(props).forEach(([key, value]) => {\n if (\n !Object.prototype.hasOwnProperty.call(prevProps.current, key) ||\n prevProps.current[key] !== value\n ) {\n // eslint-disable-next-line no-console\n console.log(`${prefix} ${key} has changed`);\n }\n });\n\n prevProps.current = props;\n }, [props, prefix]);\n};\n\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { useEffect, useRef } from 'react';\n\n/** Pass dictionary of `props` as argument and it will\n * tell you, which one changed after rerender.\n * Use `prefix` to distinguish props of different components.\n */\n// eslint-disable-next-line import/no-unused-modules\nexport const useWhatsChanged = (\n props: Record<string, unknown>,\n prefix = '',\n) => {\n const prevProps = useRef(props);\n\n useEffect(() => {\n Object.entries(props).forEach(([key, value]) => {\n if (\n !Object.prototype.hasOwnProperty.call(prevProps.current, key) ||\n prevProps.current[key] !== value\n ) {\n // eslint-disable-next-line no-console\n console.log(`${prefix} ${key} has changed`);\n }\n });\n\n prevProps.current = props;\n }, [props, prefix]);\n};\n\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"code","props":{"code":"import { useEffect, useRef } from 'react';\n\n/** Pass dictionary of `props` as argument and it will\n * tell you, which one changed after rerender.\n * Use `prefix` to distinguish props of different components.\n */\n// eslint-disable-next-line import/no-unused-modules\nexport const useWhatsChanged = (\n props: Record<string, unknown>,\n prefix = '',\n) => {\n const prevProps = useRef(props);\n\n useEffect(() => {\n Object.entries(props).forEach(([key, value]) => {\n if (\n !Object.prototype.hasOwnProperty.call(prevProps.current, key) ||\n prevProps.current[key] !== value\n ) {\n // eslint-disable-next-line no-console\n console.log(`${prefix} ${key} has changed`);\n }\n });\n\n prevProps.current = props;\n }, [props, prefix]);\n};\n\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-72bd24"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-802d67"},"children":[{"type":"text","value":"useEffect"}]},{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-802d67"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-72bd24"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-40ce70"},"children":[{"type":"text","value":"'react'"}]},{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0798ef"},"children":[{"type":"text","value":"/** Pass dictionary of `props` as argument and it will"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0798ef"},"children":[{"type":"text","value":" * tell you, which one changed after rerender."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0798ef"},"children":[{"type":"text","value":" * Use `prefix` to distinguish props of different components."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0798ef"},"children":[{"type":"text","value":" */"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0798ef"},"children":[{"type":"text","value":"// eslint-disable-next-line import/no-unused-modules"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-72bd24"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2faca4"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-131b26"},"children":[{"type":"text","value":"useWhatsChanged"}]},{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72bd24"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fefda7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba020e"},"children":[{"type":"text","value":"props"}]},{"type":"element","tag":"span","props":{"class":"ct-26e0d6"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-fefda7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8e5d2c"},"children":[{"type":"text","value":"Record"}]},{"type":"element","tag":"span","props":{"class":"ct-fefda7"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-60fd4b"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-fefda7"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-60fd4b"},"children":[{"type":"text","value":"unknown"}]},{"type":"element","tag":"span","props":{"class":"ct-fefda7"},"children":[{"type":"text","value":">,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-802d67"},"children":[{"type":"text","value":"prefix"}]},{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72bd24"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-40ce70"},"children":[{"type":"text","value":"''"}]},{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-2faca4"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2faca4"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0d0319"},"children":[{"type":"text","value":"prevProps"}]},{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72bd24"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-131b26"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-802d67"},"children":[{"type":"text","value":"props"}]},{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-131b26"},"children":[{"type":"text","value":"useEffect"}]},{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-2faca4"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fefda7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-60fd4b"},"children":[{"type":"text","value":"Object"}]},{"type":"element","tag":"span","props":{"class":"ct-fefda7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c9fe01"},"children":[{"type":"text","value":"entries"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72bd24"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-802d67"},"children":[{"type":"text","value":"prevProps"}]},{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-802d67"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"class":"ct-802d67"},"children":[{"type":"text","value":"key"}]},{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":"] "}]},{"type":"element","tag":"span","props":{"class":"ct-72bd24"},"children":[{"type":"text","value":"!=="}]},{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-802d67"},"children":[{"type":"text","value":"value"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":" ) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0798ef"},"children":[{"type":"text","value":"// eslint-disable-next-line no-console"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-802d67"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-131b26"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-40ce70"},"children":[{"type":"text","value":"`${"}]},{"type":"element","tag":"span","props":{"class":"ct-802d67"},"children":[{"type":"text","value":"prefix"}]},{"type":"element","tag":"span","props":{"class":"ct-40ce70"},"children":[{"type":"text","value":"} ${"}]},{"type":"element","tag":"span","props":{"class":"ct-802d67"},"children":[{"type":"text","value":"key"}]},{"type":"element","tag":"span","props":{"class":"ct-40ce70"},"children":[{"type":"text","value":"} has changed`"}]},{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-802d67"},"children":[{"type":"text","value":"prevProps"}]},{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-802d67"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72bd24"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-802d67"},"children":[{"type":"text","value":"props"}]},{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":" }, ["}]},{"type":"element","tag":"span","props":{"class":"ct-802d67"},"children":[{"type":"text","value":"props"}]},{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-802d67"},"children":[{"type":"text","value":"prefix"}]},{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":"]);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0cbef8"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-c9fe01{color:#D2A8FF}.ct-0d0319{color:#79C0FF}.ct-60fd4b{color:#79C0FF}.ct-8e5d2c{color:#FFA657}.ct-26e0d6{color:#FF7B72}.ct-ba020e{color:#FFA657}.ct-fefda7{color:#C9D1D9}.ct-131b26{color:#D2A8FF}.ct-2faca4{color:#FF7B72}.ct-0798ef{color:#8B949E}.ct-40ce70{color:#A5D6FF}.ct-802d67{color:#C9D1D9}.ct-0cbef8{color:#C9D1D9}.ct-72bd24{color:#FF7B72}.light .ct-72bd24{color:#859900}.light .ct-0cbef8{color:#657B83}.light .ct-802d67{color:#268BD2}.light .ct-40ce70{color:#2AA198}.light .ct-0798ef{color:#93A1A1}.light .ct-2faca4{color:#073642}.light .ct-131b26{color:#268BD2}.light .ct-fefda7{color:#657B83}.light .ct-ba020e{color:#657B83}.light .ct-26e0d6{color:#859900}.light .ct-8e5d2c{color:#268BD2}.light .ct-60fd4b{color:#859900}.light .ct-0d0319{color:#268BD2}.light .ct-c9fe01{color:#268BD2}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Frontend:React:useWhatsChanged.md","_source":"content","_file":"Frontend/React/useWhatsChanged.md","_extension":"md"},{"_path":"/frontend/vue/adding-global-properties-to-component","_dir":"vue","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Adding Global Properties To Component","description":"The topic's fully covered in the official documentation and in Add global variable to window.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The topic's fully covered in the "},{"type":"element","tag":"a","props":{"href":"https://vuejs.org/guide/typescript/options-api.html#augmenting-global-properties","rel":["nofollow"]},"children":[{"type":"text","value":"official documentation"}]},{"type":"text","value":" and in "},{"type":"element","tag":"a","props":{"href":"Add%20global%20variable%20to%20window"},"children":[{"type":"text","value":"Add global variable to window"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, you want to add global "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$http"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$translate"}]},{"type":"text","value":" services to all of project's components:"}]},{"type":"element","tag":"code","props":{"code":"// ~/index.d.ts or ~/custom.d.ts\n\nimport axios from 'axios'\n\ndeclare module 'vue' {\n interface ComponentCustomProperties {\n $http: typeof axios\n $translate: (key: string) => string\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// ~/index.d.ts or ~/custom.d.ts\n\nimport axios from 'axios'\n\ndeclare module 'vue' {\n interface ComponentCustomProperties {\n $http: typeof axios\n $translate: (key: string) => string\n }\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The topic's fully covered in the "},{"type":"element","tag":"a","props":{"href":"https://vuejs.org/guide/typescript/options-api.html#augmenting-global-properties","rel":["nofollow"]},"children":[{"type":"text","value":"official documentation"}]},{"type":"text","value":" and in "},{"type":"element","tag":"a","props":{"href":"Add%20global%20variable%20to%20window"},"children":[{"type":"text","value":"Add global variable to window"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, you want to add global "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$http"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$translate"}]},{"type":"text","value":" services to all of project's components:"}]},{"type":"element","tag":"code","props":{"code":"// ~/index.d.ts or ~/custom.d.ts\n\nimport axios from 'axios'\n\ndeclare module 'vue' {\n interface ComponentCustomProperties {\n $http: typeof axios\n $translate: (key: string) => string\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ada566"},"children":[{"type":"text","value":"// ~/index.d.ts or ~/custom.d.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b065a7"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-78ee38"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-406e37"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-78ee38"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b065a7"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-78ee38"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-56b8cc"},"children":[{"type":"text","value":"'axios'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-50c256"},"children":[{"type":"text","value":"declare"}]},{"type":"element","tag":"span","props":{"class":"ct-78ee38"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-50c256"},"children":[{"type":"text","value":"module"}]},{"type":"element","tag":"span","props":{"class":"ct-78ee38"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-56b8cc"},"children":[{"type":"text","value":"'vue'"}]},{"type":"element","tag":"span","props":{"class":"ct-78ee38"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-78ee38"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-50c256"},"children":[{"type":"text","value":"interface"}]},{"type":"element","tag":"span","props":{"class":"ct-78ee38"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42e974"},"children":[{"type":"text","value":"ComponentCustomProperties"}]},{"type":"element","tag":"span","props":{"class":"ct-78ee38"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-78ee38"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-78ee38"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39238e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d401b3"},"children":[{"type":"text","value":"$translate"}]},{"type":"element","tag":"span","props":{"class":"ct-249487"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-39238e"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-0bbf07"},"children":[{"type":"text","value":"key"}]},{"type":"element","tag":"span","props":{"class":"ct-249487"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-39238e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-49170c"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-39238e"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-1c5ec4"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-39238e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-49170c"},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-78ee38"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-78ee38"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-1c5ec4{color:#FF7B72}.ct-49170c{color:#79C0FF}.ct-0bbf07{color:#FFA657}.ct-249487{color:#FF7B72}.ct-d401b3{color:#D2A8FF}.ct-39238e{color:#C9D1D9}.ct-42e974{color:#FFA657}.ct-50c256{color:#FF7B72}.ct-56b8cc{color:#A5D6FF}.ct-406e37{color:#C9D1D9}.ct-78ee38{color:#C9D1D9}.ct-b065a7{color:#FF7B72}.ct-ada566{color:#8B949E}.light .ct-ada566{color:#93A1A1}.light .ct-b065a7{color:#859900}.light .ct-78ee38{color:#657B83}.light .ct-406e37{color:#268BD2}.light .ct-56b8cc{color:#2AA198}.light .ct-50c256{color:#073642}.light .ct-42e974{color:#268BD2}.light .ct-39238e{color:#657B83}.light .ct-d401b3{color:#268BD2}.light .ct-249487{color:#859900}.light .ct-0bbf07{color:#657B83}.light .ct-49170c{color:#859900}.light .ct-1c5ec4{color:#073642}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Frontend:Vue:Adding global properties to component.md","_source":"content","_file":"Frontend/Vue/Adding global properties to component.md","_extension":"md"},{"_path":"/frontend/vue/make-nuxt-handle-obsidian-highlights","_dir":"vue","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Make Nuxt Handle Obsidian Highlights","description":"By default Nuxt Content Plugin not handling <span class=\"highlight\">highlight</span> links. To fix that we will create Nitro plugin:","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default "},{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org","rel":["nofollow"]},"children":[{"type":"text","value":"Nuxt Content Plugin"}]},{"type":"text","value":" not handling "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<span class=\"highlight\">highlight</span>"}]},{"type":"text","value":" links. To fix that we will create "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Nitro"}]},{"type":"text","value":" plugin:"}]},{"type":"element","tag":"code","props":{"code":"// ~/server/plugins/highlight.ts\nexport default defineNitroPlugin((nitroApp) => {\n nitroApp.hooks.hook(\"content:file:beforeParse\", (file) => {\n if (file._id.endsWith(\".md\")) {\n file.body = file.body.replace(\n /==([^=]+)==/gs,\n `<span class=\"highlight\">$1</span>`\n );\n }\n });\n});\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// ~/server/plugins/highlight.ts\nexport default defineNitroPlugin((nitroApp) => {\n nitroApp.hooks.hook(\"content:file:beforeParse\", (file) => {\n if (file._id.endsWith(\".md\")) {\n file.body = file.body.replace(\n /==([^=]+)==/gs,\n `<span class=\"highlight\">$1</span>`\n );\n }\n });\n});\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default "},{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org","rel":["nofollow"]},"children":[{"type":"text","value":"Nuxt Content Plugin"}]},{"type":"text","value":" not handling "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<span class=\"highlight\">highlight</span>"}]},{"type":"text","value":" links. To fix that we will create "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Nitro"}]},{"type":"text","value":" plugin:"}]},{"type":"element","tag":"code","props":{"code":"// ~/server/plugins/highlight.ts\nexport default defineNitroPlugin((nitroApp) => {\n nitroApp.hooks.hook(\"content:file:beforeParse\", (file) => {\n if (file._id.endsWith(\".md\")) {\n file.body = file.body.replace(\n /==([^=]+)==/gs,\n `<span class=\"highlight\">$1</span>`\n );\n }\n });\n});\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c6123b"},"children":[{"type":"text","value":"// ~/server/plugins/highlight.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-263241"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-246539"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-263241"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-246539"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7463ea"},"children":[{"type":"text","value":"defineNitroPlugin"}]},{"type":"element","tag":"span","props":{"class":"ct-246539"},"children":[{"type":"text","value":"((nitroApp) "}]},{"type":"element","tag":"span","props":{"class":"ct-6bbaf8"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-246539"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d99189"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-844015"},"children":[{"type":"text","value":"nitroApp"}]},{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-844015"},"children":[{"type":"text","value":"hooks"}]},{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-34b2ba"},"children":[{"type":"text","value":"hook"}]},{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-b25756"},"children":[{"type":"text","value":"\"content:file:beforeParse\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2c63bf"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-844015"},"children":[{"type":"text","value":"file"}]},{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-844015"},"children":[{"type":"text","value":"_id"}]},{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-34b2ba"},"children":[{"type":"text","value":"endsWith"}]},{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-b25756"},"children":[{"type":"text","value":"\".md\""}]},{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":")) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-844015"},"children":[{"type":"text","value":"file"}]},{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-844015"},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2c63bf"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-844015"},"children":[{"type":"text","value":"file"}]},{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-844015"},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-34b2ba"},"children":[{"type":"text","value":"replace"}]},{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bbef30"},"children":[{"type":"text","value":"/==("}]},{"type":"element","tag":"span","props":{"class":"ct-2d19d9"},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"class":"ct-2c63bf"},"children":[{"type":"text","value":"^"}]},{"type":"element","tag":"span","props":{"class":"ct-2d19d9"},"children":[{"type":"text","value":"=]"}]},{"type":"element","tag":"span","props":{"class":"ct-2c63bf"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-bbef30"},"children":[{"type":"text","value":")==/"}]},{"type":"element","tag":"span","props":{"class":"ct-2c63bf"},"children":[{"type":"text","value":"gs"}]},{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b25756"},"children":[{"type":"text","value":"`<span class=\"highlight\">$1</span>`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d99189"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-246539"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-d99189"},"children":[{"type":"text","value":";"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-2d19d9{color:#79C0FF}.ct-bbef30{color:#A5D6FF}.ct-2c63bf{color:#FF7B72}.ct-b25756{color:#A5D6FF}.ct-34b2ba{color:#D2A8FF}.ct-844015{color:#C9D1D9}.ct-b3c5b8{color:#C9D1D9}.ct-d99189{color:#C9D1D9}.ct-6bbaf8{color:#FF7B72}.ct-7463ea{color:#D2A8FF}.ct-246539{color:#FFA657}.ct-263241{color:#FF7B72}.ct-c6123b{color:#8B949E}.light .ct-c6123b{color:#93A1A1}.light .ct-263241{color:#859900}.light .ct-246539{color:#657B83}.light .ct-7463ea{color:#268BD2}.light .ct-6bbaf8{color:#073642}.light .ct-d99189{color:#657B83}.light .ct-b3c5b8{color:#657B83}.light .ct-844015{color:#268BD2}.light .ct-34b2ba{color:#268BD2}.light .ct-b25756{color:#2AA198}.light .ct-2c63bf{color:#859900}.light .ct-bbef30{color:#D30102}.light .ct-2d19d9{color:#CB4B16}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Frontend:Vue:Make Nuxt handle Obsidian highlights.md","_source":"content","_file":"Frontend/Vue/Make Nuxt handle Obsidian highlights.md","_extension":"md"},{"_path":"/frontend/webgl/basics-of-webgl-(drawing-a-cube)","_dir":"webgl","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Basics Of WebGL (Drawing A Cube)","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"helpful-documentation"},"children":[{"type":"text","value":"Helpful documentation"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://open.gl/","rel":["nofollow"]},"children":[{"type":"text","value":"https://open.gl/"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"This youtube series: "},{"type":"element","tag":"a","props":{"href":"https://www.youtube.com/watch?v=kB0ZVUrI4Aw","rel":["nofollow"]},"children":[{"type":"text","value":"Basics"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://www.youtube.com/watch?v=3yLL9ADo-ko","rel":["nofollow"]},"children":[{"type":"text","value":"Making a cube, applying transformations"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://www.youtube.com/watch?v=hpnd11doMgc&t=52s","rel":["nofollow"]},"children":[{"type":"text","value":"Texturing"}]}]}]},{"type":"element","tag":"h2","props":{"id":"vertices-and-indices"},"children":[{"type":"text","value":"Vertices and Indices"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Vertices"}]},{"type":"text","value":" are points with specific coordinates "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{x,y,z}"}]},{"type":"text","value":" in a 3D-space. We can build any figure by connecting "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"vertices"}]},{"type":"text","value":" in triangles with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"indices"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"shaders"},"children":[{"type":"text","value":"Shaders"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Shaders are functions, written in C, which describe how to draw and color polygons to Graphic Card."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" describe "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"vertice"}]},{"type":"text","value":" positions, so Graphic Card can position them by connecting with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"indices"}]},{"type":"text","value":" and project to 2D canvas."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":" describe the way polygons should be colored by assigning colors to Vertices or by applying textures to polygons."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Shaders can have parameters passed from Javascript code ("},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"uniforms"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varyings"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"attributes"}]},{"type":"text","value":"). "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":" can also access data from "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" (that ones called "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varyings"}]},{"type":"text","value":")."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"https://open.gl/media/img/c2_pipeline.png"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"program"},"children":[{"type":"text","value":"Program"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Program, as far as I understand, is a scene, that's described with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Vertices"}]},{"type":"text","value":", "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Indices"}]},{"type":"text","value":", specific "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"applying-transformations"},"children":[{"type":"text","value":"Applying transformations"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The best way to change positions inside "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" or color in "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":" is to pass parameters (also called "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"uniforms"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varyings"}]},{"type":"text","value":")."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read about that at "},{"type":"element","tag":"a","props":{"href":"https://open.gl/transformations","rel":["nofollow"]},"children":[{"type":"text","value":"open.gl"}]},{"type":"text","value":" and at "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"source-code-with-explanations"},"children":[{"type":"text","value":"Source code with explanations"}]},{"type":"element","tag":"code","props":{"code":"// render-a-cube.ts\nimport { createShader } from \"./create-shader\";\nimport vxShader from \"./vertex.glsl?raw\";\nimport fgShader from \"./fragment.glsl?raw\";\n\nconst canvas = document.getElementyId('view');\nconst ctx = canvas.getRenderingContext('webgl');\n\n// should be put inside requestAnimationFrame\ndrawCube(ctx)(); \n\nfunction drawCube (\n gl: WebGL2RenderingContext, \n width: number,\n height: number\n) {\n // Initializing viewport\n gl.viewport(0, 0, width, height);\n gl.clearColor(0, 0, 0, 0);\n gl.clear(gl.COLOR_BUFFER_BIT);\n\n const prg = gl.createProgram();\n if (!prg) {\n throw new Error(\"Can't init programm\");\n }\n\n // Setting up VERTEX and FRAGMENT shaders\n const vx = createShader(gl, vxShader, gl.VERTEX_SHADER);\n gl.attachShader(prg, vx);\n const fx = createShader(gl, fgShader, gl.FRAGMENT_SHADER);\n gl.attachShader(prg, fx);\n gl.linkProgram(prg);\n if (!gl.getProgramParameter(prg, gl.LINK_STATUS)) {\n throw new Error(\"Could not initialise shaders\");\n }\n\n // Cube's vertices Array<[x,y,z]>, 8 items\n const vertices = [\n -1, -1, -1, // 0\n 1, -1, -1, // 1\n 1, 1, -1, // 2\n -1, 1, -1, // 3\n -1, -1, 1, // 4\n 1, -1, 1, // 5\n 1, 1, 1, // 6\n -1, 1, 1, // 7\n ];\n\n // indices, that form triangles, that form cube sides\n const indices = [\n 2, 1, 0, // side 0 (first triangle)\n 0, 3, 2, // side 0 (second triangle)\n 0, 4, 7, // side 1 (first triangle)\n 7, 3, 0, // side 1 (second triangle)\n 0, 1, 5, // ...\n 5, 4, 0, \n 1, 2, 6, \n 6, 5, 1, \n 2, 3, 7, \n 7, 6, 2, \n 4, 5, 6, \n 6, 7, 4,\n ];\n\n // createe a vertex buffer and bind vertices to it\n const squareVertexBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);\n gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);\n gl.bindBuffer(gl.ARRAY_BUFFER, null);\n\n // create a vertex buffer and bind indices to it\n const squareIndexBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, squareIndexBuffer);\n gl.bufferData(\n gl.ELEMENT_ARRAY_BUFFER,\n new Uint16Array(indices),\n gl.STATIC_DRAW\n );\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);\n\n // initial drawing\n gl.clearColor(0.0, 0.0, 0.0, 0.0);\n gl.enable(gl.DEPTH_TEST);\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n gl.viewport(0, 0, width, height);\n\n // bind squareVertexBuffer as vertex positions buffer\n gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);\n \n // send every 3 bytes from squareVertexBuffer as {x,y,z} for each verticle\n gl.vertexAttribPointer(\n gl.getAttribLocation(prg, \"aVertexPosition\"), \n 3, // 3 bytes-long\n gl.FLOAT,\n false, // don't normalize (int to float)\n 0, \n 0\n );\n // send vertice buffer as `aVertexPosition` attribute inside vertex shader\n gl.enableVertexAttribArray(\n gl.getAttribLocation(prg, \"aVertexPosition\")\n );\n\n let i = 0;\n let speed = 0.01;\n\n // that's the main rendering callback\n return () => {\n gl.useProgram(prg);\n\n const scale = i * 0.25 + 0.25;\n\n // used for scaling inside Vertex Shader\n gl.uniform1f(gl.getUniformLocation(prg, \"slide\"), scale);\n // GL Screen is square, so we need to fix it's aspect ration\n gl.uniform1f(gl.getUniformLocation(prg, \"aspect\"), height / width);\n\n gl.bindBuffer(\n gl.ELEMENT_ARRAY_BUFFER, \n squareIndexBuffer\n );\n \n gl.drawElements(\n gl.TRIANGLES, \n indices.length, \n gl.UNSIGNED_SHORT, \n 0,\n );\n\n if (i > 1 || i < 0) {\n speed = -speed;\n }\n\n i += speed;\n };\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// render-a-cube.ts\nimport { createShader } from \"./create-shader\";\nimport vxShader from \"./vertex.glsl?raw\";\nimport fgShader from \"./fragment.glsl?raw\";\n\nconst canvas = document.getElementyId('view');\nconst ctx = canvas.getRenderingContext('webgl');\n\n// should be put inside requestAnimationFrame\ndrawCube(ctx)(); \n\nfunction drawCube (\n gl: WebGL2RenderingContext, \n width: number,\n height: number\n) {\n // Initializing viewport\n gl.viewport(0, 0, width, height);\n gl.clearColor(0, 0, 0, 0);\n gl.clear(gl.COLOR_BUFFER_BIT);\n\n const prg = gl.createProgram();\n if (!prg) {\n throw new Error(\"Can't init programm\");\n }\n\n // Setting up VERTEX and FRAGMENT shaders\n const vx = createShader(gl, vxShader, gl.VERTEX_SHADER);\n gl.attachShader(prg, vx);\n const fx = createShader(gl, fgShader, gl.FRAGMENT_SHADER);\n gl.attachShader(prg, fx);\n gl.linkProgram(prg);\n if (!gl.getProgramParameter(prg, gl.LINK_STATUS)) {\n throw new Error(\"Could not initialise shaders\");\n }\n\n // Cube's vertices Array<[x,y,z]>, 8 items\n const vertices = [\n -1, -1, -1, // 0\n 1, -1, -1, // 1\n 1, 1, -1, // 2\n -1, 1, -1, // 3\n -1, -1, 1, // 4\n 1, -1, 1, // 5\n 1, 1, 1, // 6\n -1, 1, 1, // 7\n ];\n\n // indices, that form triangles, that form cube sides\n const indices = [\n 2, 1, 0, // side 0 (first triangle)\n 0, 3, 2, // side 0 (second triangle)\n 0, 4, 7, // side 1 (first triangle)\n 7, 3, 0, // side 1 (second triangle)\n 0, 1, 5, // ...\n 5, 4, 0, \n 1, 2, 6, \n 6, 5, 1, \n 2, 3, 7, \n 7, 6, 2, \n 4, 5, 6, \n 6, 7, 4,\n ];\n\n // createe a vertex buffer and bind vertices to it\n const squareVertexBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);\n gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);\n gl.bindBuffer(gl.ARRAY_BUFFER, null);\n\n // create a vertex buffer and bind indices to it\n const squareIndexBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, squareIndexBuffer);\n gl.bufferData(\n gl.ELEMENT_ARRAY_BUFFER,\n new Uint16Array(indices),\n gl.STATIC_DRAW\n );\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);\n\n // initial drawing\n gl.clearColor(0.0, 0.0, 0.0, 0.0);\n gl.enable(gl.DEPTH_TEST);\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n gl.viewport(0, 0, width, height);\n\n // bind squareVertexBuffer as vertex positions buffer\n gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);\n \n // send every 3 bytes from squareVertexBuffer as {x,y,z} for each verticle\n gl.vertexAttribPointer(\n gl.getAttribLocation(prg, \"aVertexPosition\"), \n 3, // 3 bytes-long\n gl.FLOAT,\n false, // don't normalize (int to float)\n 0, \n 0\n );\n // send vertice buffer as `aVertexPosition` attribute inside vertex shader\n gl.enableVertexAttribArray(\n gl.getAttribLocation(prg, \"aVertexPosition\")\n );\n\n let i = 0;\n let speed = 0.01;\n\n // that's the main rendering callback\n return () => {\n gl.useProgram(prg);\n\n const scale = i * 0.25 + 0.25;\n\n // used for scaling inside Vertex Shader\n gl.uniform1f(gl.getUniformLocation(prg, \"slide\"), scale);\n // GL Screen is square, so we need to fix it's aspect ration\n gl.uniform1f(gl.getUniformLocation(prg, \"aspect\"), height / width);\n\n gl.bindBuffer(\n gl.ELEMENT_ARRAY_BUFFER, \n squareIndexBuffer\n );\n \n gl.drawElements(\n gl.TRIANGLES, \n indices.length, \n gl.UNSIGNED_SHORT, \n 0,\n );\n\n if (i > 1 || i < 0) {\n speed = -speed;\n }\n\n i += speed;\n };\n};\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"shader-compiler"},"children":[{"type":"text","value":"Shader compiler"}]},{"type":"element","tag":"code","props":{"code":"// create-shader.ts\nexport const createShader = (\n gl: WebGL2RenderingContext,\n sourceCode: string,\n type: number, // gl.VERTEX_SHADER or gl.FRAGMENT_SHADER\n) => {\n const shader = gl.createShader(type);\n if (!shader) {\n throw new Error(`Can't init shader`);\n }\n\n gl.shaderSource(shader, sourceCode);\n gl.compileShader(shader);\n\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n const info = gl.getShaderInfoLog(shader);\n throw `Could not compile WebGL program. \\n\\n${info}`;\n }\n\n return shader;\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// create-shader.ts\nexport const createShader = (\n gl: WebGL2RenderingContext,\n sourceCode: string,\n type: number, // gl.VERTEX_SHADER or gl.FRAGMENT_SHADER\n) => {\n const shader = gl.createShader(type);\n if (!shader) {\n throw new Error(`Can't init shader`);\n }\n\n gl.shaderSource(shader, sourceCode);\n gl.compileShader(shader);\n\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n const info = gl.getShaderInfoLog(shader);\n throw `Could not compile WebGL program. \\n\\n${info}`;\n }\n\n return shader;\n};\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"vertex-shader-example"},"children":[{"type":"text","value":"Vertex Shader Example"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read more at "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]}]},{"type":"element","tag":"code","props":{"code":"// current vertice position {x,y,z,w}\nattribute vec4 aVertexPosition;\n// final vertice position with all transformations applied,\n// that will be passed to Fragment Shader\nvarying vec4 v_positionWithOffset;\n// Parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(){\n // float array of 4 elements, same as [slide,slide,slide,1]\n vec4 scale=vec4(vec3(slide),1);\n // float array of 4 elements, same as [aspect,1,1,1]\n vec4 aspectRatioFix=vec4(aspect,vec3(1));\n // vertice position, multiplied with matrices of scale and aspect ratio\n gl_Position=aVertexPosition*scale*aspectRatioFix,\n // vertice offset, that will be passed to fragment shader\n v_positionWithOffset=gl_Position+vec4(1,1,1,1);\n}\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// current vertice position {x,y,z,w}\nattribute vec4 aVertexPosition;\n// final vertice position with all transformations applied,\n// that will be passed to Fragment Shader\nvarying vec4 v_positionWithOffset;\n// Parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(){\n // float array of 4 elements, same as [slide,slide,slide,1]\n vec4 scale=vec4(vec3(slide),1);\n // float array of 4 elements, same as [aspect,1,1,1]\n vec4 aspectRatioFix=vec4(aspect,vec3(1));\n // vertice position, multiplied with matrices of scale and aspect ratio\n gl_Position=aVertexPosition*scale*aspectRatioFix,\n // vertice offset, that will be passed to fragment shader\n v_positionWithOffset=gl_Position+vec4(1,1,1,1);\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"fragment-shader-example"},"children":[{"type":"text","value":"Fragment Shader Example"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read more at "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"precision highp float;\n\n// parameter from Vertex Shader\nvarying vec4 v_positionWithOffset;\n\nvoid main(void){\n // color, attached to current verticle {r,g,b,alpha}\n // same a[\n // v_positionWithOffset.x,\n // v_positionWithOffset.y, \n // v_positionWithOffset.z, \n // 1\n // ]\n gl_FragColor=vec4(v_positionWithOffset.xyz,1);\n}\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"precision highp float;\n\n// parameter from Vertex Shader\nvarying vec4 v_positionWithOffset;\n\nvoid main(void){\n // color, attached to current verticle {r,g,b,alpha}\n // same a[\n // v_positionWithOffset.x,\n // v_positionWithOffset.y, \n // v_positionWithOffset.z, \n // 1\n // ]\n gl_FragColor=vec4(v_positionWithOffset.xyz,1);\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"helpful-documentation"},"children":[{"type":"text","value":"Helpful documentation"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://open.gl/","rel":["nofollow"]},"children":[{"type":"text","value":"https://open.gl/"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"This youtube series: "},{"type":"element","tag":"a","props":{"href":"https://www.youtube.com/watch?v=kB0ZVUrI4Aw","rel":["nofollow"]},"children":[{"type":"text","value":"Basics"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://www.youtube.com/watch?v=3yLL9ADo-ko","rel":["nofollow"]},"children":[{"type":"text","value":"Making a cube, applying transformations"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://www.youtube.com/watch?v=hpnd11doMgc&t=52s","rel":["nofollow"]},"children":[{"type":"text","value":"Texturing"}]}]}]},{"type":"element","tag":"h2","props":{"id":"vertices-and-indices"},"children":[{"type":"text","value":"Vertices and Indices"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Vertices"}]},{"type":"text","value":" are points with specific coordinates "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{x,y,z}"}]},{"type":"text","value":" in a 3D-space. We can build any figure by connecting "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"vertices"}]},{"type":"text","value":" in triangles with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"indices"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"shaders"},"children":[{"type":"text","value":"Shaders"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Shaders are functions, written in C, which describe how to draw and color polygons to Graphic Card."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" describe "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"vertice"}]},{"type":"text","value":" positions, so Graphic Card can position them by connecting with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"indices"}]},{"type":"text","value":" and project to 2D canvas."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":" describe the way polygons should be colored by assigning colors to Vertices or by applying textures to polygons."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Shaders can have parameters passed from Javascript code ("},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"uniforms"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varyings"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"attributes"}]},{"type":"text","value":"). "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":" can also access data from "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" (that ones called "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varyings"}]},{"type":"text","value":")."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"https://open.gl/media/img/c2_pipeline.png"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"program"},"children":[{"type":"text","value":"Program"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Program, as far as I understand, is a scene, that's described with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Vertices"}]},{"type":"text","value":", "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Indices"}]},{"type":"text","value":", specific "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"applying-transformations"},"children":[{"type":"text","value":"Applying transformations"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The best way to change positions inside "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" or color in "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":" is to pass parameters (also called "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"uniforms"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varyings"}]},{"type":"text","value":")."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read about that at "},{"type":"element","tag":"a","props":{"href":"https://open.gl/transformations","rel":["nofollow"]},"children":[{"type":"text","value":"open.gl"}]},{"type":"text","value":" and at "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"source-code-with-explanations"},"children":[{"type":"text","value":"Source code with explanations"}]},{"type":"element","tag":"code","props":{"code":"// render-a-cube.ts\nimport { createShader } from \"./create-shader\";\nimport vxShader from \"./vertex.glsl?raw\";\nimport fgShader from \"./fragment.glsl?raw\";\n\nconst canvas = document.getElementyId('view');\nconst ctx = canvas.getRenderingContext('webgl');\n\n// should be put inside requestAnimationFrame\ndrawCube(ctx)(); \n\nfunction drawCube (\n gl: WebGL2RenderingContext, \n width: number,\n height: number\n) {\n // Initializing viewport\n gl.viewport(0, 0, width, height);\n gl.clearColor(0, 0, 0, 0);\n gl.clear(gl.COLOR_BUFFER_BIT);\n\n const prg = gl.createProgram();\n if (!prg) {\n throw new Error(\"Can't init programm\");\n }\n\n // Setting up VERTEX and FRAGMENT shaders\n const vx = createShader(gl, vxShader, gl.VERTEX_SHADER);\n gl.attachShader(prg, vx);\n const fx = createShader(gl, fgShader, gl.FRAGMENT_SHADER);\n gl.attachShader(prg, fx);\n gl.linkProgram(prg);\n if (!gl.getProgramParameter(prg, gl.LINK_STATUS)) {\n throw new Error(\"Could not initialise shaders\");\n }\n\n // Cube's vertices Array<[x,y,z]>, 8 items\n const vertices = [\n -1, -1, -1, // 0\n 1, -1, -1, // 1\n 1, 1, -1, // 2\n -1, 1, -1, // 3\n -1, -1, 1, // 4\n 1, -1, 1, // 5\n 1, 1, 1, // 6\n -1, 1, 1, // 7\n ];\n\n // indices, that form triangles, that form cube sides\n const indices = [\n 2, 1, 0, // side 0 (first triangle)\n 0, 3, 2, // side 0 (second triangle)\n 0, 4, 7, // side 1 (first triangle)\n 7, 3, 0, // side 1 (second triangle)\n 0, 1, 5, // ...\n 5, 4, 0, \n 1, 2, 6, \n 6, 5, 1, \n 2, 3, 7, \n 7, 6, 2, \n 4, 5, 6, \n 6, 7, 4,\n ];\n\n // createe a vertex buffer and bind vertices to it\n const squareVertexBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);\n gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);\n gl.bindBuffer(gl.ARRAY_BUFFER, null);\n\n // create a vertex buffer and bind indices to it\n const squareIndexBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, squareIndexBuffer);\n gl.bufferData(\n gl.ELEMENT_ARRAY_BUFFER,\n new Uint16Array(indices),\n gl.STATIC_DRAW\n );\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);\n\n // initial drawing\n gl.clearColor(0.0, 0.0, 0.0, 0.0);\n gl.enable(gl.DEPTH_TEST);\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n gl.viewport(0, 0, width, height);\n\n // bind squareVertexBuffer as vertex positions buffer\n gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);\n \n // send every 3 bytes from squareVertexBuffer as {x,y,z} for each verticle\n gl.vertexAttribPointer(\n gl.getAttribLocation(prg, \"aVertexPosition\"), \n 3, // 3 bytes-long\n gl.FLOAT,\n false, // don't normalize (int to float)\n 0, \n 0\n );\n // send vertice buffer as `aVertexPosition` attribute inside vertex shader\n gl.enableVertexAttribArray(\n gl.getAttribLocation(prg, \"aVertexPosition\")\n );\n\n let i = 0;\n let speed = 0.01;\n\n // that's the main rendering callback\n return () => {\n gl.useProgram(prg);\n\n const scale = i * 0.25 + 0.25;\n\n // used for scaling inside Vertex Shader\n gl.uniform1f(gl.getUniformLocation(prg, \"slide\"), scale);\n // GL Screen is square, so we need to fix it's aspect ration\n gl.uniform1f(gl.getUniformLocation(prg, \"aspect\"), height / width);\n\n gl.bindBuffer(\n gl.ELEMENT_ARRAY_BUFFER, \n squareIndexBuffer\n );\n \n gl.drawElements(\n gl.TRIANGLES, \n indices.length, \n gl.UNSIGNED_SHORT, \n 0,\n );\n\n if (i > 1 || i < 0) {\n speed = -speed;\n }\n\n i += speed;\n };\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// render-a-cube.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"createShader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2e53f1"},"children":[{"type":"text","value":"\"./create-shader\""}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"vxShader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2e53f1"},"children":[{"type":"text","value":"\"./vertex.glsl?raw\""}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"fgShader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2e53f1"},"children":[{"type":"text","value":"\"./fragment.glsl?raw\""}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"document"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"getElementyId"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2e53f1"},"children":[{"type":"text","value":"'view'"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"getRenderingContext"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2e53f1"},"children":[{"type":"text","value":"'webgl'"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// should be put inside requestAnimationFrame"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"drawCube"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":")(); "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"drawCube"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8eb92a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6cdf8d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-80e1b8"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8eb92a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-feb2dc"},"children":[{"type":"text","value":"WebGL2RenderingContext"}]},{"type":"element","tag":"span","props":{"class":"ct-8eb92a"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8eb92a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6cdf8d"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-80e1b8"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8eb92a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-08630c"},"children":[{"type":"text","value":"number"}]},{"type":"element","tag":"span","props":{"class":"ct-8eb92a"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8eb92a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6cdf8d"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-80e1b8"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8eb92a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-08630c"},"children":[{"type":"text","value":"number"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// Initializing viewport"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"viewport"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"clearColor"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"clear"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"COLOR_BUFFER_BIT"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"createProgram"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-65a97f"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2e53f1"},"children":[{"type":"text","value":"\"Can't init programm\""}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// Setting up VERTEX and FRAGMENT shaders"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"vx"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"createShader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"vxShader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"VERTEX_SHADER"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"attachShader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"vx"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"fx"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"createShader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"fgShader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"FRAGMENT_SHADER"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"attachShader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"fx"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"linkProgram"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"getProgramParameter"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"LINK_STATUS"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":")) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-65a97f"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2e53f1"},"children":[{"type":"text","value":"\"Could not initialise shaders\""}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// Cube's vertices Array<[x,y,z]>, 8 items"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"vertices"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// 0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// 1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// 2"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// 3"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// 4"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// 5"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// 6"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// 7"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" ];"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// indices, that form triangles, that form cube sides"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"indices"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// side 0 (first triangle)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// side 0 (second triangle)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"7"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// side 1 (first triangle)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"7"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// side 1 (second triangle)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"6"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"6"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"7"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"7"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"6"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"6"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"6"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"7"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" ];"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// createe a vertex buffer and bind vertices to it"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"squareVertexBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"createBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"bindBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"squareVertexBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"bufferData"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-65a97f"},"children":[{"type":"text","value":"Float32Array"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"vertices"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"), "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"STATIC_DRAW"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"bindBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-336e7b"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// create a vertex buffer and bind indices to it"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"squareIndexBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"createBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"bindBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"ELEMENT_ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"squareIndexBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"bufferData"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"ELEMENT_ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-65a97f"},"children":[{"type":"text","value":"Uint16Array"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"indices"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"STATIC_DRAW"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"bindBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"ELEMENT_ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-336e7b"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// initial drawing"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"clearColor"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0.0"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0.0"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0.0"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"enable"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"DEPTH_TEST"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"clear"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"COLOR_BUFFER_BIT"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"DEPTH_BUFFER_BIT"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"viewport"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// bind squareVertexBuffer as vertex positions buffer"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"bindBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"squareVertexBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// send every 3 bytes from squareVertexBuffer as {x,y,z} for each verticle"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"vertexAttribPointer"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"getAttribLocation"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-2e53f1"},"children":[{"type":"text","value":"\"aVertexPosition\""}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"), "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// 3 bytes-long"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"FLOAT"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-336e7b"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// don't normalize (int to float)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// send vertice buffer as `aVertexPosition` attribute inside vertex shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"enableVertexAttribArray"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"getAttribLocation"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-2e53f1"},"children":[{"type":"text","value":"\"aVertexPosition\""}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"speed"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0.01"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// that's the main rendering callback"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"useProgram"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"scale"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0.25"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// used for scaling inside Vertex Shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"uniform1f"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"getUniformLocation"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-2e53f1"},"children":[{"type":"text","value":"\"slide\""}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"), "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"scale"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// GL Screen is square, so we need to fix it's aspect ration"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"uniform1f"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"getUniformLocation"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-2e53f1"},"children":[{"type":"text","value":"\"aspect\""}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"), "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"bindBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"ELEMENT_ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"squareIndexBuffer"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"drawElements"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"TRIANGLES"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"indices"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"UNSIGNED_SHORT"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"speed"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"speed"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"+="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"speed"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"shader-compiler"},"children":[{"type":"text","value":"Shader compiler"}]},{"type":"element","tag":"code","props":{"code":"// create-shader.ts\nexport const createShader = (\n gl: WebGL2RenderingContext,\n sourceCode: string,\n type: number, // gl.VERTEX_SHADER or gl.FRAGMENT_SHADER\n) => {\n const shader = gl.createShader(type);\n if (!shader) {\n throw new Error(`Can't init shader`);\n }\n\n gl.shaderSource(shader, sourceCode);\n gl.compileShader(shader);\n\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n const info = gl.getShaderInfoLog(shader);\n throw `Could not compile WebGL program. \\n\\n${info}`;\n }\n\n return shader;\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// create-shader.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"createShader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8eb92a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6cdf8d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-80e1b8"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8eb92a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-feb2dc"},"children":[{"type":"text","value":"WebGL2RenderingContext"}]},{"type":"element","tag":"span","props":{"class":"ct-8eb92a"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8eb92a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6cdf8d"},"children":[{"type":"text","value":"sourceCode"}]},{"type":"element","tag":"span","props":{"class":"ct-80e1b8"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8eb92a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-08630c"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-8eb92a"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8eb92a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6cdf8d"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-80e1b8"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8eb92a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-08630c"},"children":[{"type":"text","value":"number"}]},{"type":"element","tag":"span","props":{"class":"ct-8eb92a"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b23b27"},"children":[{"type":"text","value":"// gl.VERTEX_SHADER or gl.FRAGMENT_SHADER"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"createShader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-65a97f"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2e53f1"},"children":[{"type":"text","value":"`Can't init shader`"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"shaderSource"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"sourceCode"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"compileShader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"getShaderParameter"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"COMPILE_STATUS"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":")) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"info"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"getShaderInfoLog"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2e53f1"},"children":[{"type":"text","value":"`Could not compile WebGL program. "}]},{"type":"element","tag":"span","props":{"class":"ct-814214"},"children":[{"type":"text","value":"\\n\\n"}]},{"type":"element","tag":"span","props":{"class":"ct-2e53f1"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"info"}]},{"type":"element","tag":"span","props":{"class":"ct-2e53f1"},"children":[{"type":"text","value":"}`"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"vertex-shader-example"},"children":[{"type":"text","value":"Vertex Shader Example"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read more at "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]}]},{"type":"element","tag":"code","props":{"code":"// current vertice position {x,y,z,w}\nattribute vec4 aVertexPosition;\n// final vertice position with all transformations applied,\n// that will be passed to Fragment Shader\nvarying vec4 v_positionWithOffset;\n// Parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(){\n // float array of 4 elements, same as [slide,slide,slide,1]\n vec4 scale=vec4(vec3(slide),1);\n // float array of 4 elements, same as [aspect,1,1,1]\n vec4 aspectRatioFix=vec4(aspect,vec3(1));\n // vertice position, multiplied with matrices of scale and aspect ratio\n gl_Position=aVertexPosition*scale*aspectRatioFix,\n // vertice offset, that will be passed to fragment shader\n v_positionWithOffset=gl_Position+vec4(1,1,1,1);\n}\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// current vertice position {x,y,z,w}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"attribute vec4 aVertexPosition;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// final vertice position with all transformations applied,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// that will be passed to Fragment Shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"varying vec4 v_positionWithOffset;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// Parameters passed from Javascript loop"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"uniform "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" slide;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"uniform "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" aspect;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"main"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"(){"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// float array of 4 elements, same as [slide,slide,slide,1]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" vec4 scale"}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"vec3"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"(slide),"}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// float array of 4 elements, same as [aspect,1,1,1]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" vec4 aspectRatioFix"}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"(aspect,"}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"vec3"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"));"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// vertice position, multiplied with matrices of scale and aspect ratio"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" gl_Position"}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"aVertexPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"scale"}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"aspectRatioFix,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// vertice offset, that will be passed to fragment shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" v_positionWithOffset"}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"gl_Position"}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"fragment-shader-example"},"children":[{"type":"text","value":"Fragment Shader Example"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read more at "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"precision highp float;\n\n// parameter from Vertex Shader\nvarying vec4 v_positionWithOffset;\n\nvoid main(void){\n // color, attached to current verticle {r,g,b,alpha}\n // same a[\n // v_positionWithOffset.x,\n // v_positionWithOffset.y, \n // v_positionWithOffset.z, \n // 1\n // ]\n gl_FragColor=vec4(v_positionWithOffset.xyz,1);\n}\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"precision highp "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// parameter from Vertex Shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"varying vec4 v_positionWithOffset;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"main"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"){"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// color, attached to current verticle {r,g,b,alpha}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// same a["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// v_positionWithOffset.x,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// v_positionWithOffset.y, "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// v_positionWithOffset.z, "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// 1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// ]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" gl_FragColor"}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"v_positionWithOffset"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"xyz"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-814214{color:#79C0FF}.ct-b23b27{color:#8B949E}.ct-336e7b{color:#79C0FF}.ct-65a97f{color:#79C0FF}.ct-b68eea{color:#79C0FF}.ct-08630c{color:#79C0FF}.ct-feb2dc{color:#FFA657}.ct-80e1b8{color:#FF7B72}.ct-6cdf8d{color:#FFA657}.ct-8eb92a{color:#C9D1D9}.ct-2909a9{color:#D2A8FF}.ct-b321a9{color:#79C0FF}.ct-20ed3f{color:#FF7B72}.ct-2e53f1{color:#A5D6FF}.ct-a7c351{color:#C9D1D9}.ct-6c11ea{color:#C9D1D9}.ct-0c8b20{color:#FF7B72}.ct-337041{color:#8B949E}.light .ct-337041{color:#93A1A1}.light .ct-0c8b20{color:#859900}.light .ct-6c11ea{color:#657B83}.light .ct-a7c351{color:#268BD2}.light .ct-2e53f1{color:#2AA198}.light .ct-20ed3f{color:#073642}.light .ct-b321a9{color:#268BD2}.light .ct-2909a9{color:#268BD2}.light .ct-8eb92a{color:#657B83}.light .ct-6cdf8d{color:#657B83}.light .ct-80e1b8{color:#859900}.light .ct-feb2dc{color:#268BD2}.light .ct-08630c{color:#859900}.light .ct-b68eea{color:#D33682}.light .ct-65a97f{color:#859900}.light .ct-336e7b{color:#B58900}.light .ct-b23b27{color:#93A1A1}.light .ct-814214{color:#CB4B16}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"helpful-documentation","depth":2,"text":"Helpful documentation"},{"id":"vertices-and-indices","depth":2,"text":"Vertices and Indices"},{"id":"shaders","depth":2,"text":"Shaders"},{"id":"program","depth":2,"text":"Program"},{"id":"applying-transformations","depth":2,"text":"Applying transformations"},{"id":"source-code-with-explanations","depth":2,"text":"Source code with explanations"},{"id":"shader-compiler","depth":2,"text":"Shader compiler"},{"id":"vertex-shader-example","depth":2,"text":"Vertex Shader Example"},{"id":"fragment-shader-example","depth":2,"text":"Fragment Shader Example"}]}},"_type":"markdown","_id":"content:Frontend:WebGL:Basics of WebGL (Drawing a Cube).md","_source":"content","_file":"Frontend/WebGL/Basics of WebGL (Drawing a Cube).md","_extension":"md"},{"_path":"/frontend/webgl/fragment-shaders","_dir":"webgl","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Fragment Shaders","description":"Fragment shaders describe how polygons are painted (or textured). Read Basics of WebGL (Drawing a Cube) first.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Fragment shaders describe "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"how polygons are painted"}]},{"type":"text","value":" (or textured). Read "},{"type":"element","tag":"a","props":{"href":"Basics%20of%20WebGL%20(Drawing%20a%20Cube)"},"children":[{"type":"text","value":"Basics of WebGL (Drawing a Cube)"}]},{"type":"text","value":" first."}]},{"type":"element","tag":"h2","props":{"id":"sample-fragment-vertex"},"children":[{"type":"text","value":"Sample fragment vertex"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Parameters could be passed here as written at "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"precision highp float;\n\n// parameter from Vertex Shader\nvarying vec4 v_positionWithOffset;\n// parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(void){\n // color, attached to current verticle {r,g,b,alpha}\n // same a[\n // v_positionWithOffset.x,\n // v_positionWithOffset.y, \n // v_positionWithOffset.z, \n // 1\n // ]\n gl_FragColor=vec4(v_positionWithOffset.xyz,1);\n}```\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"precision highp float;\n\n// parameter from Vertex Shader\nvarying vec4 v_positionWithOffset;\n// parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(void){\n // color, attached to current verticle {r,g,b,alpha}\n // same a[\n // v_positionWithOffset.x,\n // v_positionWithOffset.y, \n // v_positionWithOffset.z, \n // 1\n // ]\n gl_FragColor=vec4(v_positionWithOffset.xyz,1);\n}```\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Fragment shaders describe "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"how polygons are painted"}]},{"type":"text","value":" (or textured). Read "},{"type":"element","tag":"a","props":{"href":"Basics%20of%20WebGL%20(Drawing%20a%20Cube)"},"children":[{"type":"text","value":"Basics of WebGL (Drawing a Cube)"}]},{"type":"text","value":" first."}]},{"type":"element","tag":"h2","props":{"id":"sample-fragment-vertex"},"children":[{"type":"text","value":"Sample fragment vertex"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Parameters could be passed here as written at "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"precision highp float;\n\n// parameter from Vertex Shader\nvarying vec4 v_positionWithOffset;\n// parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(void){\n // color, attached to current verticle {r,g,b,alpha}\n // same a[\n // v_positionWithOffset.x,\n // v_positionWithOffset.y, \n // v_positionWithOffset.z, \n // 1\n // ]\n gl_FragColor=vec4(v_positionWithOffset.xyz,1);\n}```\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":"precision highp "}]},{"type":"element","tag":"span","props":{"class":"ct-d2c18b"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c12f0"},"children":[{"type":"text","value":"// parameter from Vertex Shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":"varying vec4 v_positionWithOffset;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c12f0"},"children":[{"type":"text","value":"// parameters passed from Javascript loop"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":"uniform "}]},{"type":"element","tag":"span","props":{"class":"ct-d2c18b"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":" slide;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":"uniform "}]},{"type":"element","tag":"span","props":{"class":"ct-d2c18b"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":" aspect;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d2c18b"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-08fe9b"},"children":[{"type":"text","value":"main"}]},{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-d2c18b"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":"){"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c12f0"},"children":[{"type":"text","value":"// color, attached to current verticle {r,g,b,alpha}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c12f0"},"children":[{"type":"text","value":"// same a["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c12f0"},"children":[{"type":"text","value":"// v_positionWithOffset.x,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c12f0"},"children":[{"type":"text","value":"// v_positionWithOffset.y, "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c12f0"},"children":[{"type":"text","value":"// v_positionWithOffset.z, "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c12f0"},"children":[{"type":"text","value":"// 1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c12f0"},"children":[{"type":"text","value":"// ]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":" gl_FragColor"}]},{"type":"element","tag":"span","props":{"class":"ct-c82e83"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-08fe9b"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-f7e6d6"},"children":[{"type":"text","value":"v_positionWithOffset"}]},{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f7e6d6"},"children":[{"type":"text","value":"xyz"}]},{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-a2381f"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":"}```"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-a2381f{color:#79C0FF}.ct-f7e6d6{color:#C9D1D9}.ct-c82e83{color:#FF7B72}.ct-08fe9b{color:#D2A8FF}.ct-0c12f0{color:#8B949E}.ct-d2c18b{color:#FF7B72}.ct-d4727d{color:#C9D1D9}.light .ct-d4727d{color:#657B83}.light .ct-d2c18b{color:#073642}.light .ct-0c12f0{color:#93A1A1}.light .ct-08fe9b{color:#268BD2}.light .ct-c82e83{color:#859900}.light .ct-f7e6d6{color:#268BD2}.light .ct-a2381f{color:#D33682}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"sample-fragment-vertex","depth":2,"text":"Sample fragment vertex"}]}},"_type":"markdown","_id":"content:Frontend:WebGL:Fragment Shaders.md","_source":"content","_file":"Frontend/WebGL/Fragment Shaders.md","_extension":"md"},{"_path":"/frontend/webgl/rendering-without-blocking-in-a-worker","_dir":"webgl","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Rendering Without Blocking In A Worker","description":"Rendering items on #canvas in main loop might cause interface freezes, preventing render process from executing properly by flooding execution stack with operations.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Rendering items on #canvas in main loop "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"might cause interface freezes"}]},{"type":"text","value":", preventing render process from executing properly by flooding execution stack with operations."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To handle it properly, we can start separate #worker thread, that will handle rendering in its own event loop, so that won't affect the source tab's event loop."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Workers can have access to "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Glossary/Transferable_objects","rel":["nofollow"]},"children":[{"type":"text","value":"Transferrable Objects"}]},{"type":"text","value":" from main thread by receiving memory address. "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"That's a lot faster than cloning"}]},{"type":"text","value":". In this case "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap","rel":["nofollow"]},"children":[{"type":"text","value":"ImageBitmap"}]},{"type":"text","value":" is transferrable."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Code for the main thread component:"}]},{"type":"element","tag":"code","props":{"code":"// main.ts\nconst instance = new Worker('./render-worker.ts');\nconst canvas = document.getElementById('view');\n\n// attaching event listener to worker\ninstance.onmessage = (event: MessageEvent) => {\n const ctx = canvas?.getContext(\"2d\");\n if (!ctx) {\n throw new Error(`Can't get 2D context`);\n }\n \n ctx.drawImage(event.data as ImageBitmap, 0, 0);\n}\n\n// sending canvas contents to worker\nconst renderInCanvas = () => {\n if (!canvas.current) {\n return;\n }\n \n createImageBitmap(canvas.current).then(image => {\n instance.postMessage(image, { transfer: [image] })\n });\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// main.ts\nconst instance = new Worker('./render-worker.ts');\nconst canvas = document.getElementById('view');\n\n// attaching event listener to worker\ninstance.onmessage = (event: MessageEvent) => {\n const ctx = canvas?.getContext(\"2d\");\n if (!ctx) {\n throw new Error(`Can't get 2D context`);\n }\n \n ctx.drawImage(event.data as ImageBitmap, 0, 0);\n}\n\n// sending canvas contents to worker\nconst renderInCanvas = () => {\n if (!canvas.current) {\n return;\n }\n \n createImageBitmap(canvas.current).then(image => {\n instance.postMessage(image, { transfer: [image] })\n });\n};\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Worker code:"}]},{"type":"element","tag":"code","props":{"code":"// render-worker.ts\nexport default () => {\n self.onmessage = (message: MessageEvent) => {\n const data = message.data;\n\n if (!(data instanceof ImageBitmap)) {\n throw new Error('Received unknown data')\n }\n\n // OffscreenCanvas can be set up inside workers\n const canvas = new OffscreenCanvas(data.width, data.height);\n const ctx = canvas.getContext(\"2d\");\n\n if (!ctx) {\n throw new Error(`Can't get 2D context`);\n }\n\n ctx.drawImage(data, 0, 0);\n\n // That will block execution inside worker for \n // a couple of seconds\n doHardRenderingStuffHere(ctx, data.width, data.height);\n\n // Sending resulting image back to main thread\n createImageBitmap(canvas).then((image) => {\n self.postMessage(image, { transfer: [image] });\n });\n };\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// render-worker.ts\nexport default () => {\n self.onmessage = (message: MessageEvent) => {\n const data = message.data;\n\n if (!(data instanceof ImageBitmap)) {\n throw new Error('Received unknown data')\n }\n\n // OffscreenCanvas can be set up inside workers\n const canvas = new OffscreenCanvas(data.width, data.height);\n const ctx = canvas.getContext(\"2d\");\n\n if (!ctx) {\n throw new Error(`Can't get 2D context`);\n }\n\n ctx.drawImage(data, 0, 0);\n\n // That will block execution inside worker for \n // a couple of seconds\n doHardRenderingStuffHere(ctx, data.width, data.height);\n\n // Sending resulting image back to main thread\n createImageBitmap(canvas).then((image) => {\n self.postMessage(image, { transfer: [image] });\n });\n };\n};\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Rendering items on #canvas in main loop "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"might cause interface freezes"}]},{"type":"text","value":", preventing render process from executing properly by flooding execution stack with operations."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To handle it properly, we can start separate #worker thread, that will handle rendering in its own event loop, so that won't affect the source tab's event loop."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Workers can have access to "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Glossary/Transferable_objects","rel":["nofollow"]},"children":[{"type":"text","value":"Transferrable Objects"}]},{"type":"text","value":" from main thread by receiving memory address. "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"That's a lot faster than cloning"}]},{"type":"text","value":". In this case "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap","rel":["nofollow"]},"children":[{"type":"text","value":"ImageBitmap"}]},{"type":"text","value":" is transferrable."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Code for the main thread component:"}]},{"type":"element","tag":"code","props":{"code":"// main.ts\nconst instance = new Worker('./render-worker.ts');\nconst canvas = document.getElementById('view');\n\n// attaching event listener to worker\ninstance.onmessage = (event: MessageEvent) => {\n const ctx = canvas?.getContext(\"2d\");\n if (!ctx) {\n throw new Error(`Can't get 2D context`);\n }\n \n ctx.drawImage(event.data as ImageBitmap, 0, 0);\n}\n\n// sending canvas contents to worker\nconst renderInCanvas = () => {\n if (!canvas.current) {\n return;\n }\n \n createImageBitmap(canvas.current).then(image => {\n instance.postMessage(image, { transfer: [image] })\n });\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab36bf"},"children":[{"type":"text","value":"// main.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0bce60"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-13794f"},"children":[{"type":"text","value":"instance"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ed2a5b"},"children":[{"type":"text","value":"Worker"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-4c8dcb"},"children":[{"type":"text","value":"'./render-worker.ts'"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0bce60"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-13794f"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"document"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ed2a5b"},"children":[{"type":"text","value":"getElementById"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-4c8dcb"},"children":[{"type":"text","value":"'view'"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab36bf"},"children":[{"type":"text","value":"// attaching event listener to worker"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"instance"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ed2a5b"},"children":[{"type":"text","value":"onmessage"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-36f108"},"children":[{"type":"text","value":"MessageEvent"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-0bce60"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0bce60"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-13794f"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-ed2a5b"},"children":[{"type":"text","value":"getContext"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-4c8dcb"},"children":[{"type":"text","value":"\"2d\""}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a16a39"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-4c8dcb"},"children":[{"type":"text","value":"`Can't get 2D context`"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ed2a5b"},"children":[{"type":"text","value":"drawImage"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"as"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-36f108"},"children":[{"type":"text","value":"ImageBitmap"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-681bbd"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-681bbd"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab36bf"},"children":[{"type":"text","value":"// sending canvas contents to worker"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0bce60"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ed2a5b"},"children":[{"type":"text","value":"renderInCanvas"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-0bce60"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ed2a5b"},"children":[{"type":"text","value":"createImageBitmap"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"class":"ct-ed2a5b"},"children":[{"type":"text","value":"then"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"instance"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ed2a5b"},"children":[{"type":"text","value":"postMessage"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":", { transfer: ["}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"] })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Worker code:"}]},{"type":"element","tag":"code","props":{"code":"// render-worker.ts\nexport default () => {\n self.onmessage = (message: MessageEvent) => {\n const data = message.data;\n\n if (!(data instanceof ImageBitmap)) {\n throw new Error('Received unknown data')\n }\n\n // OffscreenCanvas can be set up inside workers\n const canvas = new OffscreenCanvas(data.width, data.height);\n const ctx = canvas.getContext(\"2d\");\n\n if (!ctx) {\n throw new Error(`Can't get 2D context`);\n }\n\n ctx.drawImage(data, 0, 0);\n\n // That will block execution inside worker for \n // a couple of seconds\n doHardRenderingStuffHere(ctx, data.width, data.height);\n\n // Sending resulting image back to main thread\n createImageBitmap(canvas).then((image) => {\n self.postMessage(image, { transfer: [image] });\n });\n };\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab36bf"},"children":[{"type":"text","value":"// render-worker.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-61807b"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-e85a8f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-61807b"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-e85a8f"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-cb6926"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-e85a8f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3db1bc"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"self"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ed2a5b"},"children":[{"type":"text","value":"onmessage"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0bce60"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-13794f"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"message"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"instanceof"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-36f108"},"children":[{"type":"text","value":"ImageBitmap"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":")) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a16a39"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-4c8dcb"},"children":[{"type":"text","value":"'Received unknown data'"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ab36bf"},"children":[{"type":"text","value":"// OffscreenCanvas can be set up inside workers"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0bce60"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-13794f"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ed2a5b"},"children":[{"type":"text","value":"OffscreenCanvas"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0bce60"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-13794f"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ed2a5b"},"children":[{"type":"text","value":"getContext"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-4c8dcb"},"children":[{"type":"text","value":"\"2d\""}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a16a39"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-4c8dcb"},"children":[{"type":"text","value":"`Can't get 2D context`"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ed2a5b"},"children":[{"type":"text","value":"drawImage"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-681bbd"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-681bbd"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ab36bf"},"children":[{"type":"text","value":"// That will block execution inside worker for "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ab36bf"},"children":[{"type":"text","value":"// a couple of seconds"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ed2a5b"},"children":[{"type":"text","value":"doHardRenderingStuffHere"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ab36bf"},"children":[{"type":"text","value":"// Sending resulting image back to main thread"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ed2a5b"},"children":[{"type":"text","value":"createImageBitmap"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"class":"ct-ed2a5b"},"children":[{"type":"text","value":"then"}]},{"type":"element","tag":"span","props":{"class":"ct-0bce60"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"self"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ed2a5b"},"children":[{"type":"text","value":"postMessage"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":", { transfer: ["}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"] });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-3db1bc{color:#C9D1D9}.ct-cb6926{color:#FF7B72}.ct-e85a8f{color:#FFA657}.ct-61807b{color:#FF7B72}.ct-681bbd{color:#79C0FF}.ct-a16a39{color:#79C0FF}.ct-36f108{color:#FFA657}.ct-74181d{color:#C9D1D9}.ct-4c8dcb{color:#A5D6FF}.ct-ed2a5b{color:#D2A8FF}.ct-6ca315{color:#FF7B72}.ct-13794f{color:#79C0FF}.ct-80dbaa{color:#C9D1D9}.ct-0bce60{color:#FF7B72}.ct-ab36bf{color:#8B949E}.light .ct-ab36bf{color:#93A1A1}.light .ct-0bce60{color:#073642}.light .ct-80dbaa{color:#657B83}.light .ct-13794f{color:#268BD2}.light .ct-6ca315{color:#859900}.light .ct-ed2a5b{color:#268BD2}.light .ct-4c8dcb{color:#2AA198}.light .ct-74181d{color:#268BD2}.light .ct-36f108{color:#268BD2}.light .ct-a16a39{color:#859900}.light .ct-681bbd{color:#D33682}.light .ct-61807b{color:#859900}.light .ct-e85a8f{color:#657B83}.light .ct-cb6926{color:#073642}.light .ct-3db1bc{color:#657B83}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Frontend:WebGL:Rendering without blocking in a Worker.md","_source":"content","_file":"Frontend/WebGL/Rendering without blocking in a Worker.md","_extension":"md"},{"_path":"/frontend/webgl/vertex-shaders","_dir":"webgl","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Vertex Shaders","description":"Read Basics of WebGL (Drawing a Cube) first.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read "},{"type":"element","tag":"a","props":{"href":"Basics%20of%20WebGL%20(Drawing%20a%20Cube)"},"children":[{"type":"text","value":"Basics of WebGL (Drawing a Cube)"}]},{"type":"text","value":" first."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" define vertice positions in 3D-space. That's just a function, that defines "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gl_Position"}]},{"type":"text","value":" value by applying different transformations to it."}]},{"type":"element","tag":"h2","props":{"id":"sample-code"},"children":[{"type":"text","value":"Sample code"}]},{"type":"element","tag":"code","props":{"code":"// current vertice position {x,y,z,w}\nattribute vec4 aVertexPosition;\n// final vertice position with all transformations applied,\n// that will be passed to Fragment Shader\nvarying vec4 v_positionWithOffset;\n// Parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(){\n // float array of 4 elements, same as [slide,slide,slide,1]\n vec4 scale=vec4(vec3(slide),1);\n // float array of 4 elements, same as [aspect,1,1,1]\n vec4 aspectRatioFix=vec4(aspect,vec3(1));\n // vertice position, multiplied with matrices of scale and aspect ratio\n gl_Position=aVertexPosition*scale*aspectRatioFix,\n // vertice offset, that will be passed to fragment shader\n v_positionWithOffset=gl_Position+vec4(1,1,1,1);\n}\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// current vertice position {x,y,z,w}\nattribute vec4 aVertexPosition;\n// final vertice position with all transformations applied,\n// that will be passed to Fragment Shader\nvarying vec4 v_positionWithOffset;\n// Parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(){\n // float array of 4 elements, same as [slide,slide,slide,1]\n vec4 scale=vec4(vec3(slide),1);\n // float array of 4 elements, same as [aspect,1,1,1]\n vec4 aspectRatioFix=vec4(aspect,vec3(1));\n // vertice position, multiplied with matrices of scale and aspect ratio\n gl_Position=aVertexPosition*scale*aspectRatioFix,\n // vertice offset, that will be passed to fragment shader\n v_positionWithOffset=gl_Position+vec4(1,1,1,1);\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"passing-parameters-to-vertexshader"},"children":[{"type":"text","value":"Passing parameters to VertexShader"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Search for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Uniforms"}]},{"type":"text","value":" "},{"type":"element","tag":"a","props":{"href":"https://open.gl/drawing","rel":["nofollow"]},"children":[{"type":"text","value":"at open.gl"}]},{"type":"text","value":" for further reading."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There're 3 ways to pass parameters."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"attribute"}]},{"type":"text","value":" are parameters, that won't change. Good for vertex buffers."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"uniform"}]},{"type":"text","value":" are meant to change over the time. Good for passing transformations."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varying"}]},{"type":"text","value":" are parameters, that's shared between Vertex and "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"h2","props":{"id":"applying-transformations"},"children":[{"type":"text","value":"Applying transformations"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Every vertice position is defined as "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{x,y,z,w}"}]},{"type":"text","value":", where "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"w"}]},{"type":"text","value":" is a common denominator, that's used to achieve fast coord transformations by multiplying number of square matrices with original vertice coordinates."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"We don't change vertice position buffer"}]},{"type":"text","value":", because it's slow when being run inside Javascript loop, we "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"pass transformation matrices"}]},{"type":"text","value":" instead and "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"multiply vertice positions with transformation matrices"}]},{"type":"text","value":" inside a Graphic Card's GPU, because that's what GPU made for."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Good explanation can be found here: "},{"type":"element","tag":"a","props":{"href":"https://open.gl/transformations","rel":["nofollow"]},"children":[{"type":"text","value":"open.gl"}]},{"type":"text","value":"."}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read "},{"type":"element","tag":"a","props":{"href":"Basics%20of%20WebGL%20(Drawing%20a%20Cube)"},"children":[{"type":"text","value":"Basics of WebGL (Drawing a Cube)"}]},{"type":"text","value":" first."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" define vertice positions in 3D-space. That's just a function, that defines "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gl_Position"}]},{"type":"text","value":" value by applying different transformations to it."}]},{"type":"element","tag":"h2","props":{"id":"sample-code"},"children":[{"type":"text","value":"Sample code"}]},{"type":"element","tag":"code","props":{"code":"// current vertice position {x,y,z,w}\nattribute vec4 aVertexPosition;\n// final vertice position with all transformations applied,\n// that will be passed to Fragment Shader\nvarying vec4 v_positionWithOffset;\n// Parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(){\n // float array of 4 elements, same as [slide,slide,slide,1]\n vec4 scale=vec4(vec3(slide),1);\n // float array of 4 elements, same as [aspect,1,1,1]\n vec4 aspectRatioFix=vec4(aspect,vec3(1));\n // vertice position, multiplied with matrices of scale and aspect ratio\n gl_Position=aVertexPosition*scale*aspectRatioFix,\n // vertice offset, that will be passed to fragment shader\n v_positionWithOffset=gl_Position+vec4(1,1,1,1);\n}\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf1472"},"children":[{"type":"text","value":"// current vertice position {x,y,z,w}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":"attribute vec4 aVertexPosition;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf1472"},"children":[{"type":"text","value":"// final vertice position with all transformations applied,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf1472"},"children":[{"type":"text","value":"// that will be passed to Fragment Shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":"varying vec4 v_positionWithOffset;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf1472"},"children":[{"type":"text","value":"// Parameters passed from Javascript loop"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":"uniform "}]},{"type":"element","tag":"span","props":{"class":"ct-439ac8"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":" slide;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":"uniform "}]},{"type":"element","tag":"span","props":{"class":"ct-439ac8"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":" aspect;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-439ac8"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6823c5"},"children":[{"type":"text","value":"main"}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":"(){"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bf1472"},"children":[{"type":"text","value":"// float array of 4 elements, same as [slide,slide,slide,1]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":" vec4 scale"}]},{"type":"element","tag":"span","props":{"class":"ct-f3cef3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6823c5"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-6823c5"},"children":[{"type":"text","value":"vec3"}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":"(slide),"}]},{"type":"element","tag":"span","props":{"class":"ct-5b280b"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bf1472"},"children":[{"type":"text","value":"// float array of 4 elements, same as [aspect,1,1,1]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":" vec4 aspectRatioFix"}]},{"type":"element","tag":"span","props":{"class":"ct-f3cef3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6823c5"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":"(aspect,"}]},{"type":"element","tag":"span","props":{"class":"ct-6823c5"},"children":[{"type":"text","value":"vec3"}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-5b280b"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":"));"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bf1472"},"children":[{"type":"text","value":"// vertice position, multiplied with matrices of scale and aspect ratio"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":" gl_Position"}]},{"type":"element","tag":"span","props":{"class":"ct-f3cef3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":"aVertexPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-f3cef3"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":"scale"}]},{"type":"element","tag":"span","props":{"class":"ct-f3cef3"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":"aspectRatioFix,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bf1472"},"children":[{"type":"text","value":"// vertice offset, that will be passed to fragment shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":" v_positionWithOffset"}]},{"type":"element","tag":"span","props":{"class":"ct-f3cef3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":"gl_Position"}]},{"type":"element","tag":"span","props":{"class":"ct-f3cef3"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-6823c5"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-5b280b"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-5b280b"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-5b280b"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-5b280b"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"passing-parameters-to-vertexshader"},"children":[{"type":"text","value":"Passing parameters to VertexShader"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Search for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Uniforms"}]},{"type":"text","value":" "},{"type":"element","tag":"a","props":{"href":"https://open.gl/drawing","rel":["nofollow"]},"children":[{"type":"text","value":"at open.gl"}]},{"type":"text","value":" for further reading."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There're 3 ways to pass parameters."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"attribute"}]},{"type":"text","value":" are parameters, that won't change. Good for vertex buffers."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"uniform"}]},{"type":"text","value":" are meant to change over the time. Good for passing transformations."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varying"}]},{"type":"text","value":" are parameters, that's shared between Vertex and "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"h2","props":{"id":"applying-transformations"},"children":[{"type":"text","value":"Applying transformations"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Every vertice position is defined as "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{x,y,z,w}"}]},{"type":"text","value":", where "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"w"}]},{"type":"text","value":" is a common denominator, that's used to achieve fast coord transformations by multiplying number of square matrices with original vertice coordinates."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"We don't change vertice position buffer"}]},{"type":"text","value":", because it's slow when being run inside Javascript loop, we "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"pass transformation matrices"}]},{"type":"text","value":" instead and "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"multiply vertice positions with transformation matrices"}]},{"type":"text","value":" inside a Graphic Card's GPU, because that's what GPU made for."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Good explanation can be found here: "},{"type":"element","tag":"a","props":{"href":"https://open.gl/transformations","rel":["nofollow"]},"children":[{"type":"text","value":"open.gl"}]},{"type":"text","value":"."}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-5b280b{color:#79C0FF}.ct-f3cef3{color:#FF7B72}.ct-6823c5{color:#D2A8FF}.ct-439ac8{color:#FF7B72}.ct-fda822{color:#C9D1D9}.ct-bf1472{color:#8B949E}.light .ct-bf1472{color:#93A1A1}.light .ct-fda822{color:#657B83}.light .ct-439ac8{color:#073642}.light .ct-6823c5{color:#268BD2}.light .ct-f3cef3{color:#859900}.light .ct-5b280b{color:#D33682}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"sample-code","depth":2,"text":"Sample code"},{"id":"passing-parameters-to-vertexshader","depth":2,"text":"Passing parameters to VertexShader"},{"id":"applying-transformations","depth":2,"text":"Applying transformations"}]}},"_type":"markdown","_id":"content:Frontend:WebGL:Vertex Shaders.md","_source":"content","_file":"Frontend/WebGL/Vertex Shaders.md","_extension":"md"},{"_path":"/git/force-git-to-use-https","_dir":"git","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Force Git To Use HTTPS","description":"Forces #git to use https even if remote url is #SSH. Useful for the networks with blocked #ssh protocol.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Forces #git to use https even if remote url is #SSH. Useful for the networks with blocked #ssh protocol."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Put this inside your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"~/.gitconfig"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"[url \"https://github.com\"]\n insteadOf = git://github.com\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"[url \"https://github.com\"]\n insteadOf = git://github.com\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Forces #git to use https even if remote url is #SSH. Useful for the networks with blocked #ssh protocol."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Put this inside your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"~/.gitconfig"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"[url \"https://github.com\"]\n insteadOf = git://github.com\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b3f4ac"},"children":[{"type":"text","value":"[url "}]},{"type":"element","tag":"span","props":{"class":"ct-e03aef"},"children":[{"type":"text","value":"\"https://github.com\""}]},{"type":"element","tag":"span","props":{"class":"ct-b3f4ac"},"children":[{"type":"text","value":"]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b3f4ac"},"children":[{"type":"text","value":" insteadOf "}]},{"type":"element","tag":"span","props":{"class":"ct-6c803e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b3f4ac"},"children":[{"type":"text","value":" git:"}]},{"type":"element","tag":"span","props":{"class":"ct-172751"},"children":[{"type":"text","value":"//github.com"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-172751{color:#8B949E}.ct-6c803e{color:#FF7B72}.ct-e03aef{color:#A5D6FF}.ct-b3f4ac{color:#C9D1D9}.light .ct-b3f4ac{color:#657B83}.light .ct-e03aef{color:#2AA198}.light .ct-6c803e{color:#859900}.light .ct-172751{color:#93A1A1}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Git:Force git to use HTTPS.md","_source":"content","_file":"Git/Force git to use HTTPS.md","_extension":"md"},{"_path":"/git/git-aliases-and-useful-commands","_dir":"git","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Git Aliases And Useful Commands","description":"Shorthands for #git commands can be specified. Should be placed at ~/.gitconfig.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Shorthands for #git commands can be specified. Should be placed at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"~/.gitconfig"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"[alias]\n flush = git clean-branches branch | grep -v master | xargs git branch -D\n lol = log --oneline --graph\n l = lol\n c = commit -am\n cv = commit --no-verify -am\n p = push\n pf = p --force-with-lease\n ignore-now = update-index --skip-worktree\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"[alias]\n flush = git clean-branches branch | grep -v master | xargs git branch -D\n lol = log --oneline --graph\n l = lol\n c = commit -am\n cv = commit --no-verify -am\n p = push\n pf = p --force-with-lease\n ignore-now = update-index --skip-worktree\n"}]}]}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"command"}]}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"description"}]}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git flush"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"drops all branches, except master"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git lol"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"shows log"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git c"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"commits with message"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git cv"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"commits without hooks"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git p"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"pushes"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git pf"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"push with --force and additional check"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git ignore-now"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"starts ignoring file from now on"}]}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Shorthands for #git commands can be specified. Should be placed at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"~/.gitconfig"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"[alias]\n flush = git clean-branches branch | grep -v master | xargs git branch -D\n lol = log --oneline --graph\n l = lol\n c = commit -am\n cv = commit --no-verify -am\n p = push\n pf = p --force-with-lease\n ignore-now = update-index --skip-worktree\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":"[alias]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":" flush "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":" git clean"}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":"branches branch "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":" grep "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":"v master "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":" xargs git branch "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":"D"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":" lol "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":" log "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"--"}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":"oneline "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"--"}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":"graph"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":" l "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":" lol"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":" c "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":" commit "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":"am"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":" cv "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":" commit "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"--"}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":"no"}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":"verify "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":"am"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":" p "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":" push"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":" pf "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":" p "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"--"}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":"force"}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":"with"}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":"lease"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":" ignore"}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":"now "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":" update"}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":"index "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"--"}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":"skip"}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":"worktree"}]}]}]}]}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"command"}]}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"description"}]}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git flush"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"drops all branches, except master"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git lol"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"shows log"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git c"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"commits with message"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git cv"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"commits without hooks"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git p"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"pushes"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git pf"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"push with --force and additional check"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git ignore-now"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"starts ignoring file from now on"}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-949382{color:#FF7B72}.ct-a2d84d{color:#C9D1D9}.light .ct-a2d84d{color:#657B83}.light .ct-949382{color:#859900}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Git:Git aliases and useful commands.md","_source":"content","_file":"Git/Git aliases and useful commands.md","_extension":"md"},{"_path":"/golang/i18n-in-golang","_dir":"golang","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"I18n In Golang","description":"There are no good examples of golang.org/x/text uses and description of how pluralization made. So, this is it.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are no good examples of "},{"type":"element","tag":"a","props":{"href":"https://golang.org/x/text","rel":["nofollow"]},"children":[{"type":"text","value":"golang.org/x/text"}]},{"type":"text","value":" uses and description of how pluralization made. So, this is it."}]},{"type":"element","tag":"h4","props":{"id":"generating-translations"},"children":[{"type":"text","value":"Generating translations"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You should specify valid "},{"type":"element","tag":"a","props":{"href":"https://www.iso.org/obp/ui/#iso:code:3166","rel":["nofollow"]},"children":[{"type":"text","value":"ISO-3166 locale code"}]},{"type":"text","value":" to get plurals working!"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Write your code:"}]},{"type":"element","tag":"code","props":{"code":"import (\n \"golang.org/x/text/language\"\n \"golang.org/x/text/message\"\n)\n\nlang := language.MustParse('ru-RU')\nprinter := message.NewPrinter(lang)\n\ncount := 1\nprinter.Sprintf(\"%d butterflies\", count)\n","language":"go"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import (\n \"golang.org/x/text/language\"\n \"golang.org/x/text/message\"\n)\n\nlang := language.MustParse('ru-RU')\nprinter := message.NewPrinter(lang)\n\ncount := 1\nprinter.Sprintf(\"%d butterflies\", count)\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then run generator for your locale (mine is "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ru-RU"}]},{"type":"text","value":"):"}]},{"type":"element","tag":"code","props":{"code":"gotext -srclang=en-GB update -lang=ru-RU \\\n -out=translations.go github.com/path/to-output-folder\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"gotext -srclang=en-GB update -lang=ru-RU \\\n -out=translations.go github.com/path/to-output-folder\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will generate "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"out.gotext.json"}]},{"type":"text","value":" in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/path/to-output-folder/ru-RU"}]},{"type":"text","value":" of your project. Copy it to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"messages.out.json"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h4","props":{"id":"translating-and-adding-plural-forms"},"children":[{"type":"text","value":"Translating and adding plural forms"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Change "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"\"translation\""}]},{"type":"text","value":" value in generated "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"messages.gotext.json"}]},{"type":"text","value":" to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"string"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"object"}]},{"type":"text","value":" of the form shown below if you want pluralize strings, "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"then run gotext command again"}]},{"type":"text","value":", it will generate "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".go files with translations"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"According to "},{"type":"element","tag":"a","props":{"href":"https://github.com/golang/text/blob/master/feature/plural/gen_common.go#L19","rel":["nofollow"]},"children":[{"type":"text","value":"source files of gen_common"}]},{"type":"text","value":", there's a couple of forms:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"=N"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"!=N"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"%N"}]},{"type":"text","value":" for exact matches"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"zero"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"one"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"two"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"few"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"many"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"other"}]},{"type":"text","value":" - they're different for each language, so,"}]}]},{"type":"element","tag":"code","props":{"code":"{\n \"id\": \"{Count} butterflies\",\n \"message\": \"{Count} butterflies\",\n \"translation\": {\n \"select\": {\n \"feature\": \"plural\",\n \"arg\": \"Count\",\n \"cases\": {\n \"one\": {\n \"msg\": \"{Count} бабочка\"\n },\n \"few\": {\n \"msg\": \"{Count} бабочки\"\n },\n \"many\": {\n \"msg\": \"{Count} бабочек\"\n },\n \"other\": {\n \"msg\": \"{Count} бабочуль\"\n }\n }\n }\n },\n \"placeholders\": [\n {\n \"id\": \"Count\",\n \"string\": \"%[1]d\",\n \"type\": \"int\",\n \"underlyingType\": \"int\",\n \"argNum\": 1,\n \"expr\": \"count\"\n }\n ]\n},\n","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"{\n \"id\": \"{Count} butterflies\",\n \"message\": \"{Count} butterflies\",\n \"translation\": {\n \"select\": {\n \"feature\": \"plural\",\n \"arg\": \"Count\",\n \"cases\": {\n \"one\": {\n \"msg\": \"{Count} бабочка\"\n },\n \"few\": {\n \"msg\": \"{Count} бабочки\"\n },\n \"many\": {\n \"msg\": \"{Count} бабочек\"\n },\n \"other\": {\n \"msg\": \"{Count} бабочуль\"\n }\n }\n }\n },\n \"placeholders\": [\n {\n \"id\": \"Count\",\n \"string\": \"%[1]d\",\n \"type\": \"int\",\n \"underlyingType\": \"int\",\n \"argNum\": 1,\n \"expr\": \"count\"\n }\n ]\n},\n"}]}]}]},{"type":"element","tag":"h4","props":{"id":"using-go-generate"},"children":[{"type":"text","value":"Using go-generate"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Write this at some "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".go"}]},{"type":"text","value":" file:"}]},{"type":"element","tag":"code","props":{"code":"//go:generate gotext -srclang=en-GB update -out=translations.go -lang=ru-RU github.com/muerwre/vault-golang/internal/api\n","language":"go"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"//go:generate gotext -srclang=en-GB update -out=translations.go -lang=ru-RU github.com/muerwre/vault-golang/internal/api\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then run go generation:"}]},{"type":"element","tag":"code","props":{"code":"go generate ./...\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"go generate ./...\n"}]}]}]},{"type":"element","tag":"h4","props":{"id":"useful-links"},"children":[{"type":"text","value":"Useful links"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/golang/text/blob/master/feature/plural/gen_common.go#L19","rel":["nofollow"]},"children":[{"type":"text","value":"All available forms in this .go file"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://community.crowdin.com/t/plurals-in-gotext-json-files/600","rel":["nofollow"]},"children":[{"type":"text","value":"Answer, that solved it for me"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are no good examples of "},{"type":"element","tag":"a","props":{"href":"https://golang.org/x/text","rel":["nofollow"]},"children":[{"type":"text","value":"golang.org/x/text"}]},{"type":"text","value":" uses and description of how pluralization made. So, this is it."}]},{"type":"element","tag":"h4","props":{"id":"generating-translations"},"children":[{"type":"text","value":"Generating translations"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You should specify valid "},{"type":"element","tag":"a","props":{"href":"https://www.iso.org/obp/ui/#iso:code:3166","rel":["nofollow"]},"children":[{"type":"text","value":"ISO-3166 locale code"}]},{"type":"text","value":" to get plurals working!"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Write your code:"}]},{"type":"element","tag":"code","props":{"code":"import (\n \"golang.org/x/text/language\"\n \"golang.org/x/text/message\"\n)\n\nlang := language.MustParse('ru-RU')\nprinter := message.NewPrinter(lang)\n\ncount := 1\nprinter.Sprintf(\"%d butterflies\", count)\n","language":"go"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f4481"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-04fd5c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-00c2ca"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-e35103"},"children":[{"type":"text","value":"golang.org/x/text/language"}]},{"type":"element","tag":"span","props":{"class":"ct-00c2ca"},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-04fd5c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-00c2ca"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-e35103"},"children":[{"type":"text","value":"golang.org/x/text/message"}]},{"type":"element","tag":"span","props":{"class":"ct-00c2ca"},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d136e8"},"children":[{"type":"text","value":"lang"}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1f4481"},"children":[{"type":"text","value":":="}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" language."}]},{"type":"element","tag":"span","props":{"class":"ct-cdbf83"},"children":[{"type":"text","value":"MustParse"}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-84260f"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-0a943a"},"children":[{"type":"text","value":"ru-RU"}]},{"type":"element","tag":"span","props":{"class":"ct-84260f"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d136e8"},"children":[{"type":"text","value":"printer"}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1f4481"},"children":[{"type":"text","value":":="}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" message."}]},{"type":"element","tag":"span","props":{"class":"ct-cdbf83"},"children":[{"type":"text","value":"NewPrinter"}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":"(lang)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d136e8"},"children":[{"type":"text","value":"count"}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1f4481"},"children":[{"type":"text","value":":="}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f726b6"},"children":[{"type":"text","value":"1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":"printer."}]},{"type":"element","tag":"span","props":{"class":"ct-cdbf83"},"children":[{"type":"text","value":"Sprintf"}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-84260f"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-b76416"},"children":[{"type":"text","value":"%d"}]},{"type":"element","tag":"span","props":{"class":"ct-84260f"},"children":[{"type":"text","value":" butterflies\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":", count)"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then run generator for your locale (mine is "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ru-RU"}]},{"type":"text","value":"):"}]},{"type":"element","tag":"code","props":{"code":"gotext -srclang=en-GB update -lang=ru-RU \\\n -out=translations.go github.com/path/to-output-folder\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":"gotext -srclang=en-GB update -lang=ru-RU \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" -out=translations.go github.com/path/to-output-folder"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will generate "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"out.gotext.json"}]},{"type":"text","value":" in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/path/to-output-folder/ru-RU"}]},{"type":"text","value":" of your project. Copy it to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"messages.out.json"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h4","props":{"id":"translating-and-adding-plural-forms"},"children":[{"type":"text","value":"Translating and adding plural forms"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Change "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"\"translation\""}]},{"type":"text","value":" value in generated "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"messages.gotext.json"}]},{"type":"text","value":" to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"string"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"object"}]},{"type":"text","value":" of the form shown below if you want pluralize strings, "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"then run gotext command again"}]},{"type":"text","value":", it will generate "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".go files with translations"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"According to "},{"type":"element","tag":"a","props":{"href":"https://github.com/golang/text/blob/master/feature/plural/gen_common.go#L19","rel":["nofollow"]},"children":[{"type":"text","value":"source files of gen_common"}]},{"type":"text","value":", there's a couple of forms:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"=N"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"!=N"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"%N"}]},{"type":"text","value":" for exact matches"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"zero"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"one"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"two"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"few"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"many"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"other"}]},{"type":"text","value":" - they're different for each language, so,"}]}]},{"type":"element","tag":"code","props":{"code":"{\n \"id\": \"{Count} butterflies\",\n \"message\": \"{Count} butterflies\",\n \"translation\": {\n \"select\": {\n \"feature\": \"plural\",\n \"arg\": \"Count\",\n \"cases\": {\n \"one\": {\n \"msg\": \"{Count} бабочка\"\n },\n \"few\": {\n \"msg\": \"{Count} бабочки\"\n },\n \"many\": {\n \"msg\": \"{Count} бабочек\"\n },\n \"other\": {\n \"msg\": \"{Count} бабочуль\"\n }\n }\n }\n },\n \"placeholders\": [\n {\n \"id\": \"Count\",\n \"string\": \"%[1]d\",\n \"type\": \"int\",\n \"underlyingType\": \"int\",\n \"argNum\": 1,\n \"expr\": \"count\"\n }\n ]\n},\n","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"id\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-84260f"},"children":[{"type":"text","value":"\"{Count} butterflies\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"message\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-84260f"},"children":[{"type":"text","value":"\"{Count} butterflies\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"translation\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"select\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"feature\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-84260f"},"children":[{"type":"text","value":"\"plural\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"arg\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-84260f"},"children":[{"type":"text","value":"\"Count\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"cases\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"one\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"msg\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-84260f"},"children":[{"type":"text","value":"\"{Count} бабочка\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"few\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"msg\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-84260f"},"children":[{"type":"text","value":"\"{Count} бабочки\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"many\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"msg\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-84260f"},"children":[{"type":"text","value":"\"{Count} бабочек\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"other\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"msg\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-84260f"},"children":[{"type":"text","value":"\"{Count} бабочуль\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"placeholders\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"id\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-84260f"},"children":[{"type":"text","value":"\"Count\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"string\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-84260f"},"children":[{"type":"text","value":"\"%[1]d\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"type\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-84260f"},"children":[{"type":"text","value":"\"int\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"underlyingType\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-84260f"},"children":[{"type":"text","value":"\"int\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"argNum\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f726b6"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"expr\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-84260f"},"children":[{"type":"text","value":"\"count\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" ]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":"},"}]}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"using-go-generate"},"children":[{"type":"text","value":"Using go-generate"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Write this at some "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".go"}]},{"type":"text","value":" file:"}]},{"type":"element","tag":"code","props":{"code":"//go:generate gotext -srclang=en-GB update -out=translations.go -lang=ru-RU github.com/muerwre/vault-golang/internal/api\n","language":"go"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cb8ea8"},"children":[{"type":"text","value":"//go:generate gotext -srclang=en-GB update -out=translations.go -lang=ru-RU github.com/muerwre/vault-golang/internal/api"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then run go generation:"}]},{"type":"element","tag":"code","props":{"code":"go generate ./...\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":"go generate ./..."}]}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"useful-links"},"children":[{"type":"text","value":"Useful links"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/golang/text/blob/master/feature/plural/gen_common.go#L19","rel":["nofollow"]},"children":[{"type":"text","value":"All available forms in this .go file"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://community.crowdin.com/t/plurals-in-gotext-json-files/600","rel":["nofollow"]},"children":[{"type":"text","value":"Answer, that solved it for me"}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-cb8ea8{color:#8B949E}.ct-525738{color:#79C0FF}.ct-b76416{color:#79C0FF}.ct-f726b6{color:#79C0FF}.ct-0a943a{color:#FFA198}.ct-84260f{color:#A5D6FF}.ct-cdbf83{color:#79C0FF}.ct-d136e8{color:#C9D1D9}.ct-e35103{color:#FFA657}.ct-00c2ca{color:#A5D6FF}.ct-04fd5c{color:#C9D1D9}.ct-7594fe{color:#C9D1D9}.ct-1f4481{color:#FF7B72}.light .ct-1f4481{color:#859900}.light .ct-7594fe{color:#657B83}.light .ct-04fd5c{color:#657B83}.light .ct-00c2ca{color:#2AA198}.light .ct-e35103{color:#2AA198}.light .ct-d136e8{color:#268BD2}.light .ct-cdbf83{color:#268BD2}.light .ct-84260f{color:#2AA198}.light .ct-0a943a{color:#CD3131}.light .ct-f726b6{color:#D33682}.light .ct-b76416{color:#CB4B16}.light .ct-525738{color:#859900}.light .ct-cb8ea8{color:#93A1A1}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Golang:i18n in golang.md","_source":"content","_file":"Golang/i18n in golang.md","_extension":"md"},{"_path":"/graphql/apollo-client-pagination","_dir":"graphql","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Apollo Client Pagination","description":"Say, we have gql response like this and we wan't to have pagination with it. Let's merge it as it specified in official documentation","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Say, we have "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gql"}]},{"type":"text","value":" response like this and we wan't to have pagination with it. Let's merge it as it specified in "},{"type":"element","tag":"a","props":{"href":"https://www.apollographql.com/docs/react/caching/cache-field-behavior/#the-merge-function","rel":["nofollow"]},"children":[{"type":"text","value":"official documentation"}]}]},{"type":"element","tag":"code","props":{"code":"query listItems(\n filter: Filter, \n sort: String,\n limit: Number,\n offset: Number,\n): ItemList!\n\ninput Filter {\n name: String!\n type: String!\n}\n\ntype ItemList {\n items: [Item!]!\n totalCount: Int!\n}\n","language":"graphql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"query listItems(\n filter: Filter, \n sort: String,\n limit: Number,\n offset: Number,\n): ItemList!\n\ninput Filter {\n name: String!\n type: String!\n}\n\ntype ItemList {\n items: [Item!]!\n totalCount: Int!\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We will setup "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ApolloClient"}]},{"type":"text","value":" with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"typePolicies"}]},{"type":"text","value":" to merge incoming data in cache:"}]},{"type":"element","tag":"code","props":{"code":"import { ApolloClient, InMemoryCache } from '@apollo/client';\n\nconst client = new ApolloClient({\n // ...\n cache: new InMemoryCache({ typePolicies }),\n // ...\n});\n\nexport const typePolicies: TypePolicies = {\n Query: {\n fields: {\n // query name\n listItems: {\n // apollo will serialize and use keyArgs as unique\n // identifier in cache for every query\n // consider choosing the right fields, \n // i.e. limit and offset won't work here\n keyArgs: [\n 'sort', // primitive type\n 'filter', ['name', 'type'] // nested fields of `filter`\n ],\n merge: mergeItemsWithTotalCount,\n },\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { ApolloClient, InMemoryCache } from '@apollo/client';\n\nconst client = new ApolloClient({\n // ...\n cache: new InMemoryCache({ typePolicies }),\n // ...\n});\n\nexport const typePolicies: TypePolicies = {\n Query: {\n fields: {\n // query name\n listItems: {\n // apollo will serialize and use keyArgs as unique\n // identifier in cache for every query\n // consider choosing the right fields, \n // i.e. limit and offset won't work here\n keyArgs: [\n 'sort', // primitive type\n 'filter', ['name', 'type'] // nested fields of `filter`\n ],\n merge: mergeItemsWithTotalCount,\n },\n }\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We will need merge function "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mergeItemsWithTotalCount"}]},{"type":"text","value":", which will join results of query and cached data for specific key:"}]},{"type":"element","tag":"code","props":{"code":"/** merges all sources with { items: unknown[], totalCount: number } */\nconst mergeItemsWithTotalCount = (existing, incoming, { args }) => {\n // no existing data\n if (!existing || !args?.offset || args.offset < existing.length) {\n return incoming || [];\n }\n\n // If hook was called multiple times\n if (existing?.items?.length && args?.offset < existing.items.length) {\n return existing || [];\n }\n\n // merge cache and incoming data\n const items = [...(existing?.items || []), ...(incoming?.items || [])];\n\n // apply latest result for totalCount\n const totalCount = incoming?.totalCount || existing?.totalCount;\n\n return {\n ...(incoming || existing || {}),\n items,\n totalCount,\n };\n };\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"/** merges all sources with { items: unknown[], totalCount: number } */\nconst mergeItemsWithTotalCount = (existing, incoming, { args }) => {\n // no existing data\n if (!existing || !args?.offset || args.offset < existing.length) {\n return incoming || [];\n }\n\n // If hook was called multiple times\n if (existing?.items?.length && args?.offset < existing.items.length) {\n return existing || [];\n }\n\n // merge cache and incoming data\n const items = [...(existing?.items || []), ...(incoming?.items || [])];\n\n // apply latest result for totalCount\n const totalCount = incoming?.totalCount || existing?.totalCount;\n\n return {\n ...(incoming || existing || {}),\n items,\n totalCount,\n };\n };\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Say, we have "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gql"}]},{"type":"text","value":" response like this and we wan't to have pagination with it. Let's merge it as it specified in "},{"type":"element","tag":"a","props":{"href":"https://www.apollographql.com/docs/react/caching/cache-field-behavior/#the-merge-function","rel":["nofollow"]},"children":[{"type":"text","value":"official documentation"}]}]},{"type":"element","tag":"code","props":{"code":"query listItems(\n filter: Filter, \n sort: String,\n limit: Number,\n offset: Number,\n): ItemList!\n\ninput Filter {\n name: String!\n type: String!\n}\n\ntype ItemList {\n items: [Item!]!\n totalCount: Int!\n}\n","language":"graphql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"query"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad782e"},"children":[{"type":"text","value":"listItems"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2ccaad"},"children":[{"type":"text","value":"filter"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b6a8d2"},"children":[{"type":"text","value":"Filter"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2ccaad"},"children":[{"type":"text","value":"sort"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b6a8d2"},"children":[{"type":"text","value":"String"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2ccaad"},"children":[{"type":"text","value":"limit"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b6a8d2"},"children":[{"type":"text","value":"Number"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2ccaad"},"children":[{"type":"text","value":"offset"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b6a8d2"},"children":[{"type":"text","value":"Number"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"): "}]},{"type":"element","tag":"span","props":{"class":"ct-ad782e"},"children":[{"type":"text","value":"ItemList"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"!"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"input"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1275"},"children":[{"type":"text","value":"Filter"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2ccaad"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b6a8d2"},"children":[{"type":"text","value":"String"}]},{"type":"element","tag":"span","props":{"class":"ct-8f48bb"},"children":[{"type":"text","value":"!"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2ccaad"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b6a8d2"},"children":[{"type":"text","value":"String"}]},{"type":"element","tag":"span","props":{"class":"ct-8f48bb"},"children":[{"type":"text","value":"!"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1275"},"children":[{"type":"text","value":"ItemList"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2ccaad"},"children":[{"type":"text","value":"items"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":": ["}]},{"type":"element","tag":"span","props":{"class":"ct-b6a8d2"},"children":[{"type":"text","value":"Item"}]},{"type":"element","tag":"span","props":{"class":"ct-8f48bb"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":"]"}]},{"type":"element","tag":"span","props":{"class":"ct-8f48bb"},"children":[{"type":"text","value":"!"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2ccaad"},"children":[{"type":"text","value":"totalCount"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b6a8d2"},"children":[{"type":"text","value":"Int"}]},{"type":"element","tag":"span","props":{"class":"ct-8f48bb"},"children":[{"type":"text","value":"!"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We will setup "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ApolloClient"}]},{"type":"text","value":" with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"typePolicies"}]},{"type":"text","value":" to merge incoming data in cache:"}]},{"type":"element","tag":"code","props":{"code":"import { ApolloClient, InMemoryCache } from '@apollo/client';\n\nconst client = new ApolloClient({\n // ...\n cache: new InMemoryCache({ typePolicies }),\n // ...\n});\n\nexport const typePolicies: TypePolicies = {\n Query: {\n fields: {\n // query name\n listItems: {\n // apollo will serialize and use keyArgs as unique\n // identifier in cache for every query\n // consider choosing the right fields, \n // i.e. limit and offset won't work here\n keyArgs: [\n 'sort', // primitive type\n 'filter', ['name', 'type'] // nested fields of `filter`\n ],\n merge: mergeItemsWithTotalCount,\n },\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"ApolloClient"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"InMemoryCache"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9cb4e4"},"children":[{"type":"text","value":"'@apollo/client'"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2e1fb9"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7982ff"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad782e"},"children":[{"type":"text","value":"ApolloClient"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5baecc"},"children":[{"type":"text","value":"// ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" cache: "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad782e"},"children":[{"type":"text","value":"InMemoryCache"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"({ "}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"typePolicies"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5baecc"},"children":[{"type":"text","value":"// ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"});"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2e1fb9"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7982ff"},"children":[{"type":"text","value":"typePolicies"}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4f2e82"},"children":[{"type":"text","value":"TypePolicies"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" Query: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" fields: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5baecc"},"children":[{"type":"text","value":"// query name"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" listItems: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5baecc"},"children":[{"type":"text","value":"// apollo will serialize and use keyArgs as unique"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5baecc"},"children":[{"type":"text","value":"// identifier in cache for every query"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5baecc"},"children":[{"type":"text","value":"// consider choosing the right fields, "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5baecc"},"children":[{"type":"text","value":"// i.e. limit and offset won't work here"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" keyArgs: ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9cb4e4"},"children":[{"type":"text","value":"'sort'"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-5baecc"},"children":[{"type":"text","value":"// primitive type"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9cb4e4"},"children":[{"type":"text","value":"'filter'"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":", ["}]},{"type":"element","tag":"span","props":{"class":"ct-9cb4e4"},"children":[{"type":"text","value":"'name'"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-9cb4e4"},"children":[{"type":"text","value":"'type'"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"] "}]},{"type":"element","tag":"span","props":{"class":"ct-5baecc"},"children":[{"type":"text","value":"// nested fields of `filter`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" ],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" merge: "}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"mergeItemsWithTotalCount"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We will need merge function "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mergeItemsWithTotalCount"}]},{"type":"text","value":", which will join results of query and cached data for specific key:"}]},{"type":"element","tag":"code","props":{"code":"/** merges all sources with { items: unknown[], totalCount: number } */\nconst mergeItemsWithTotalCount = (existing, incoming, { args }) => {\n // no existing data\n if (!existing || !args?.offset || args.offset < existing.length) {\n return incoming || [];\n }\n\n // If hook was called multiple times\n if (existing?.items?.length && args?.offset < existing.items.length) {\n return existing || [];\n }\n\n // merge cache and incoming data\n const items = [...(existing?.items || []), ...(incoming?.items || [])];\n\n // apply latest result for totalCount\n const totalCount = incoming?.totalCount || existing?.totalCount;\n\n return {\n ...(incoming || existing || {}),\n items,\n totalCount,\n };\n };\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5baecc"},"children":[{"type":"text","value":"/** merges all sources with { items: unknown[], totalCount: number } */"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9daaf1"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8487a"},"children":[{"type":"text","value":"mergeItemsWithTotalCount"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8f48bb"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-2ccaad"},"children":[{"type":"text","value":"existing"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-2ccaad"},"children":[{"type":"text","value":"incoming"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":", { "}]},{"type":"element","tag":"span","props":{"class":"ct-2ccaad"},"children":[{"type":"text","value":"args"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":" }) "}]},{"type":"element","tag":"span","props":{"class":"ct-9daaf1"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5baecc"},"children":[{"type":"text","value":"// no existing data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"existing"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"args"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"offset"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"args"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"offset"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"existing"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"incoming"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" [];"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5baecc"},"children":[{"type":"text","value":"// If hook was called multiple times"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"existing"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"items"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"?."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"existing"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" [];"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5baecc"},"children":[{"type":"text","value":"// merge cache and incoming data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2e1fb9"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7982ff"},"children":[{"type":"text","value":"items"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"existing"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"items"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5baecc"},"children":[{"type":"text","value":"// apply latest result for totalCount"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2e1fb9"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7982ff"},"children":[{"type":"text","value":"totalCount"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"incoming"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"totalCount"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"existing"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"totalCount"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"incoming"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"items"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"totalCount"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" };"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-d8487a{color:#D2A8FF}.ct-9daaf1{color:#FF7B72}.ct-4f2e82{color:#FFA657}.ct-5baecc{color:#8B949E}.ct-7982ff{color:#79C0FF}.ct-2e1fb9{color:#FF7B72}.ct-9cb4e4{color:#A5D6FF}.ct-6a8d9e{color:#C9D1D9}.ct-8f48bb{color:#FF7B72}.ct-cb1275{color:#79C0FF}.ct-b6a8d2{color:#79C0FF}.ct-2ccaad{color:#FFA657}.ct-237419{color:#C9D1D9}.ct-ad782e{color:#D2A8FF}.ct-654dd2{color:#C9D1D9}.ct-e9af43{color:#FF7B72}.light .ct-e9af43{color:#859900}.light .ct-654dd2{color:#657B83}.light .ct-ad782e{color:#268BD2}.light .ct-237419{color:#657B83}.light .ct-2ccaad{color:#657B83}.light .ct-b6a8d2{color:#859900}.light .ct-cb1275{color:#859900}.light .ct-8f48bb{color:#859900}.light .ct-6a8d9e{color:#268BD2}.light .ct-9cb4e4{color:#2AA198}.light .ct-2e1fb9{color:#073642}.light .ct-7982ff{color:#268BD2}.light .ct-5baecc{color:#93A1A1}.light .ct-4f2e82{color:#268BD2}.light .ct-9daaf1{color:#073642}.light .ct-d8487a{color:#268BD2}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:GraphQL:Apollo Client pagination.md","_source":"content","_file":"GraphQL/Apollo Client pagination.md","_extension":"md"},{"_path":"/graphql/refresh-token-in-apollo-client","_dir":"graphql","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Refresh Token In Apollo Client","description":"If your GraphQL api needs token refresh option, you can pass custom fetch function for Apollo Client.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If your GraphQL api needs token refresh option, you can pass custom fetch function for Apollo Client."}]},{"type":"element","tag":"code","props":{"code":"export const createApolloClient = (\n url: string,\n logout: () => void,\n getAuthorizationData: () => { authorization: string },\n refreshToken: () => Promise<\n { accessToken: string; refreshToken: string } | undefined\n >,\n) =>\n new ApolloClientBase({\n // ...other options\n link: ApolloLink.from([\n // ...other options\n setContext(async (_, { headers }) => {\n return {\n headers: {\n ...headers,\n ...getAuthorizationData(),\n },\n };\n }),\n new HttpLink({\n uri: url,\n fetch: fetchWithTokenRefresh(logout, refreshToken),\n }),\n ]),\n });\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export const createApolloClient = (\n url: string,\n logout: () => void,\n getAuthorizationData: () => { authorization: string },\n refreshToken: () => Promise<\n { accessToken: string; refreshToken: string } | undefined\n >,\n) =>\n new ApolloClientBase({\n // ...other options\n link: ApolloLink.from([\n // ...other options\n setContext(async (_, { headers }) => {\n return {\n headers: {\n ...headers,\n ...getAuthorizationData(),\n },\n };\n }),\n new HttpLink({\n uri: url,\n fetch: fetchWithTokenRefresh(logout, refreshToken),\n }),\n ]),\n });\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Custom fetch function for this request. You should tune "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"hasUnauthorizedError"}]},{"type":"text","value":" and\n"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"isRefreshRequestOptions"}]},{"type":"text","value":" to match your api."}]},{"type":"element","tag":"code","props":{"code":"/** Global singleton for refreshing promise */\nlet refreshingPromise: Promise<string> | null = null;\n\n/** Checks if GraphQl errors has unauthenticated error */\nconst hasUnauthorizedError = (errors: Array<{ code?: ErrorCode }>): boolean =>\n Array.isArray(errors) &&\n errors.some(error => {\n return error.status === 401; // Distinguish unauthorized error here\n });\n\n/** Detects if customFetch is sending refresh request */\nconst isRefreshRequestOptions = (options: RequestInit) => {\n try {\n const body = JSON.parse(options?.body as string);\n return body.operationName === 'RefreshToken';\n } catch (e) {\n return false;\n }\n};\n\n/** fetchWithTokenRefresh is a custom fetch function with token refresh for apollo */\nexport const fetchWithTokenRefresh =\n (\n logout: () => void,\n refreshToken: () => Promise<\n { accessToken: string; refreshToken: string } | undefined\n >,\n ) =>\n async (uri: string, options: RequestInit): Promise<Response> => {\n // already refreshing token, wait for it and then use refreshed token\n // or use empty authorization if refreshing failed\n if (\n !isRefreshRequestOptions(options) &&\n refreshingPromise &&\n (options.headers as Record<string, string>)?.authorization\n ) {\n const newAccessToken = await refreshingPromise\n .catch(() => {\n // refreshing token from other request failed, retry without authorization\n return '';\n });\n \n options.headers = {\n ...(options.headers || {}),\n authorization: newAccessToken,\n };\n }\n\n return fetch(uri, options).then(async response => {\n const text = await response.text();\n const json = JSON.parse(text);\n\n // check for unauthorized errors, if not present, just return result\n if (\n isRefreshRequestOptions(options) ||\n !json?.errors ||\n !Array.isArray(json.errors) ||\n !hasUnauthorizedError(json.errors)\n ) {\n return {\n ...response,\n ok: true,\n json: async () =>\n new Promise<unknown>(resolve => {\n resolve(json);\n }),\n text: async () =>\n new Promise<string>(resolve => {\n resolve(text);\n }),\n };\n }\n\n // If unauthorized, refresh token and try again\n if (!refreshingPromise) {\n refreshingPromise = refreshToken()\n .then(async (tokens): Promise<string> => {\n refreshingPromise = null;\n\n if (!tokens?.accessToken) {\n throw new Error('Session expired');\n }\n\n return tokens?.accessToken;\n })\n .catch(() => {\n refreshingPromise = null;\n\n // can't refresh token. logging out\n logout();\n throw new Error('Session expired');\n });\n }\n\n // success or any non-auth error\n return refreshingPromise\n .then(async (newAccessToken: string) => {\n // wait for other request's refreshing query to finish, when retry\n\n return fetch(uri, {\n ...options,\n headers: {\n ...(options.headers || {}),\n authorization: newAccessToken,\n },\n });\n })\n .catch(async () => {\n // refreshing token from other request failed, retry without authorization\n\n return fetch(uri, {\n ...options,\n headers: {\n ...(options.headers || {}),\n authorization: '',\n },\n });\n });\n });\n };\n\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"/** Global singleton for refreshing promise */\nlet refreshingPromise: Promise<string> | null = null;\n\n/** Checks if GraphQl errors has unauthenticated error */\nconst hasUnauthorizedError = (errors: Array<{ code?: ErrorCode }>): boolean =>\n Array.isArray(errors) &&\n errors.some(error => {\n return error.status === 401; // Distinguish unauthorized error here\n });\n\n/** Detects if customFetch is sending refresh request */\nconst isRefreshRequestOptions = (options: RequestInit) => {\n try {\n const body = JSON.parse(options?.body as string);\n return body.operationName === 'RefreshToken';\n } catch (e) {\n return false;\n }\n};\n\n/** fetchWithTokenRefresh is a custom fetch function with token refresh for apollo */\nexport const fetchWithTokenRefresh =\n (\n logout: () => void,\n refreshToken: () => Promise<\n { accessToken: string; refreshToken: string } | undefined\n >,\n ) =>\n async (uri: string, options: RequestInit): Promise<Response> => {\n // already refreshing token, wait for it and then use refreshed token\n // or use empty authorization if refreshing failed\n if (\n !isRefreshRequestOptions(options) &&\n refreshingPromise &&\n (options.headers as Record<string, string>)?.authorization\n ) {\n const newAccessToken = await refreshingPromise\n .catch(() => {\n // refreshing token from other request failed, retry without authorization\n return '';\n });\n \n options.headers = {\n ...(options.headers || {}),\n authorization: newAccessToken,\n };\n }\n\n return fetch(uri, options).then(async response => {\n const text = await response.text();\n const json = JSON.parse(text);\n\n // check for unauthorized errors, if not present, just return result\n if (\n isRefreshRequestOptions(options) ||\n !json?.errors ||\n !Array.isArray(json.errors) ||\n !hasUnauthorizedError(json.errors)\n ) {\n return {\n ...response,\n ok: true,\n json: async () =>\n new Promise<unknown>(resolve => {\n resolve(json);\n }),\n text: async () =>\n new Promise<string>(resolve => {\n resolve(text);\n }),\n };\n }\n\n // If unauthorized, refresh token and try again\n if (!refreshingPromise) {\n refreshingPromise = refreshToken()\n .then(async (tokens): Promise<string> => {\n refreshingPromise = null;\n\n if (!tokens?.accessToken) {\n throw new Error('Session expired');\n }\n\n return tokens?.accessToken;\n })\n .catch(() => {\n refreshingPromise = null;\n\n // can't refresh token. logging out\n logout();\n throw new Error('Session expired');\n });\n }\n\n // success or any non-auth error\n return refreshingPromise\n .then(async (newAccessToken: string) => {\n // wait for other request's refreshing query to finish, when retry\n\n return fetch(uri, {\n ...options,\n headers: {\n ...(options.headers || {}),\n authorization: newAccessToken,\n },\n });\n })\n .catch(async () => {\n // refreshing token from other request failed, retry without authorization\n\n return fetch(uri, {\n ...options,\n headers: {\n ...(options.headers || {}),\n authorization: '',\n },\n });\n });\n });\n };\n\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If your GraphQL api needs token refresh option, you can pass custom fetch function for Apollo Client."}]},{"type":"element","tag":"code","props":{"code":"export const createApolloClient = (\n url: string,\n logout: () => void,\n getAuthorizationData: () => { authorization: string },\n refreshToken: () => Promise<\n { accessToken: string; refreshToken: string } | undefined\n >,\n) =>\n new ApolloClientBase({\n // ...other options\n link: ApolloLink.from([\n // ...other options\n setContext(async (_, { headers }) => {\n return {\n headers: {\n ...headers,\n ...getAuthorizationData(),\n },\n };\n }),\n new HttpLink({\n uri: url,\n fetch: fetchWithTokenRefresh(logout, refreshToken),\n }),\n ]),\n });\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"createApolloClient"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ccde27"},"children":[{"type":"text","value":"url"}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b1d52"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a52df4"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-448587"},"children":[{"type":"text","value":"getAuthorizationData"}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-b4fcca"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-ccde27"},"children":[{"type":"text","value":"authorization"}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b1d52"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"refreshToken"}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d2ac08"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"<"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-ccde27"},"children":[{"type":"text","value":"accessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b1d52"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":"; "}]},{"type":"element","tag":"span","props":{"class":"ct-ccde27"},"children":[{"type":"text","value":"refreshToken"}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b1d52"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b1d52"},"children":[{"type":"text","value":"undefined"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" >,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"=>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"ApolloClientBase"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c48f8"},"children":[{"type":"text","value":"// ...other options"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" link: "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"ApolloLink"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"(["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c48f8"},"children":[{"type":"text","value":"// ...other options"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-448587"},"children":[{"type":"text","value":"setContext"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-b4fcca"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ccde27"},"children":[{"type":"text","value":"_"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":", { "}]},{"type":"element","tag":"span","props":{"class":"ct-ccde27"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" }) "}]},{"type":"element","tag":"span","props":{"class":"ct-b4fcca"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" headers: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"getAuthorizationData"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"(),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"HttpLink"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" uri: "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"url"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" fetch: "}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"fetchWithTokenRefresh"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"refreshToken"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" ]),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" });"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Custom fetch function for this request. You should tune "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"hasUnauthorizedError"}]},{"type":"text","value":" and\n"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"isRefreshRequestOptions"}]},{"type":"text","value":" to match your api."}]},{"type":"element","tag":"code","props":{"code":"/** Global singleton for refreshing promise */\nlet refreshingPromise: Promise<string> | null = null;\n\n/** Checks if GraphQl errors has unauthenticated error */\nconst hasUnauthorizedError = (errors: Array<{ code?: ErrorCode }>): boolean =>\n Array.isArray(errors) &&\n errors.some(error => {\n return error.status === 401; // Distinguish unauthorized error here\n });\n\n/** Detects if customFetch is sending refresh request */\nconst isRefreshRequestOptions = (options: RequestInit) => {\n try {\n const body = JSON.parse(options?.body as string);\n return body.operationName === 'RefreshToken';\n } catch (e) {\n return false;\n }\n};\n\n/** fetchWithTokenRefresh is a custom fetch function with token refresh for apollo */\nexport const fetchWithTokenRefresh =\n (\n logout: () => void,\n refreshToken: () => Promise<\n { accessToken: string; refreshToken: string } | undefined\n >,\n ) =>\n async (uri: string, options: RequestInit): Promise<Response> => {\n // already refreshing token, wait for it and then use refreshed token\n // or use empty authorization if refreshing failed\n if (\n !isRefreshRequestOptions(options) &&\n refreshingPromise &&\n (options.headers as Record<string, string>)?.authorization\n ) {\n const newAccessToken = await refreshingPromise\n .catch(() => {\n // refreshing token from other request failed, retry without authorization\n return '';\n });\n \n options.headers = {\n ...(options.headers || {}),\n authorization: newAccessToken,\n };\n }\n\n return fetch(uri, options).then(async response => {\n const text = await response.text();\n const json = JSON.parse(text);\n\n // check for unauthorized errors, if not present, just return result\n if (\n isRefreshRequestOptions(options) ||\n !json?.errors ||\n !Array.isArray(json.errors) ||\n !hasUnauthorizedError(json.errors)\n ) {\n return {\n ...response,\n ok: true,\n json: async () =>\n new Promise<unknown>(resolve => {\n resolve(json);\n }),\n text: async () =>\n new Promise<string>(resolve => {\n resolve(text);\n }),\n };\n }\n\n // If unauthorized, refresh token and try again\n if (!refreshingPromise) {\n refreshingPromise = refreshToken()\n .then(async (tokens): Promise<string> => {\n refreshingPromise = null;\n\n if (!tokens?.accessToken) {\n throw new Error('Session expired');\n }\n\n return tokens?.accessToken;\n })\n .catch(() => {\n refreshingPromise = null;\n\n // can't refresh token. logging out\n logout();\n throw new Error('Session expired');\n });\n }\n\n // success or any non-auth error\n return refreshingPromise\n .then(async (newAccessToken: string) => {\n // wait for other request's refreshing query to finish, when retry\n\n return fetch(uri, {\n ...options,\n headers: {\n ...(options.headers || {}),\n authorization: newAccessToken,\n },\n });\n })\n .catch(async () => {\n // refreshing token from other request failed, retry without authorization\n\n return fetch(uri, {\n ...options,\n headers: {\n ...(options.headers || {}),\n authorization: '',\n },\n });\n });\n });\n };\n\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c48f8"},"children":[{"type":"text","value":"/** Global singleton for refreshing promise */"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"refreshingPromise"}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d2ac08"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-a52df4"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a52df4"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d14a0c"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c48f8"},"children":[{"type":"text","value":"/** Checks if GraphQl errors has unauthenticated error */"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b4fcca"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-448587"},"children":[{"type":"text","value":"hasUnauthorizedError"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ccde27"},"children":[{"type":"text","value":"errors"}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a8c405"},"children":[{"type":"text","value":"Array"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":"<{ "}]},{"type":"element","tag":"span","props":{"class":"ct-ccde27"},"children":[{"type":"text","value":"code"}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":"?:"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a8c405"},"children":[{"type":"text","value":"ErrorCode"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" }>)"}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b4fcca"},"children":[{"type":"text","value":"=>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a52df4"},"children":[{"type":"text","value":"Array"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"isArray"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"errors"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"&&"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"errors"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"some"}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"status"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"==="}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86c70f"},"children":[{"type":"text","value":"401"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"; "}]},{"type":"element","tag":"span","props":{"class":"ct-0c48f8"},"children":[{"type":"text","value":"// Distinguish unauthorized error here"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c48f8"},"children":[{"type":"text","value":"/** Detects if customFetch is sending refresh request */"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b4fcca"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-448587"},"children":[{"type":"text","value":"isRefreshRequestOptions"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ccde27"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a8c405"},"children":[{"type":"text","value":"RequestInit"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-b4fcca"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"try"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e8360"},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a52df4"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"operationName"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"==="}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-529b21"},"children":[{"type":"text","value":"'RefreshToken'"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"e"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d14a0c"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c48f8"},"children":[{"type":"text","value":"/** fetchWithTokenRefresh is a custom fetch function with token refresh for apollo */"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e8360"},"children":[{"type":"text","value":"fetchWithTokenRefresh"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"="}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":": () "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"refreshToken"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":": () "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" { accessToken: "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"; "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"refreshToken"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d14a0c"},"children":[{"type":"text","value":"undefined"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" ) "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"=>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b4fcca"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ccde27"},"children":[{"type":"text","value":"uri"}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b1d52"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-ccde27"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a8c405"},"children":[{"type":"text","value":"RequestInit"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a8c405"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-a8c405"},"children":[{"type":"text","value":"Response"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-b4fcca"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c48f8"},"children":[{"type":"text","value":"// already refreshing token, wait for it and then use refreshed token"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c48f8"},"children":[{"type":"text","value":"// or use empty authorization if refreshing failed"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"isRefreshRequestOptions"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"&&"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"refreshingPromise"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"&&"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"as"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d2ac08"},"children":[{"type":"text","value":"Record"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-a52df4"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52df4"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":">)?."}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"authorization"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" ) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e8360"},"children":[{"type":"text","value":"newAccessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"refreshingPromise"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c48f8"},"children":[{"type":"text","value":"// refreshing token from other request failed, retry without authorization"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-529b21"},"children":[{"type":"text","value":"''"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" {}),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" authorization: "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"newAccessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"fetch"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"uri"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"then"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"async"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e8360"},"children":[{"type":"text","value":"text"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"response"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"text"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e8360"},"children":[{"type":"text","value":"json"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"="}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c48f8"},"children":[{"type":"text","value":"// check for unauthorized errors, if not present, just return result"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"isRefreshRequestOptions"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"||"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"json"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"errors"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"||"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"hasUnauthorizedError"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"json"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"errors"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" ) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"response"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" ok: "}]},{"type":"element","tag":"span","props":{"class":"ct-d14a0c"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"json"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"=>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b1d52"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-1b1d52"},"children":[{"type":"text","value":"unknown"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":">("}]},{"type":"element","tag":"span","props":{"class":"ct-ccde27"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b4fcca"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"json"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"text"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"=>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b1d52"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-1b1d52"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":">("}]},{"type":"element","tag":"span","props":{"class":"ct-ccde27"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b4fcca"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"text"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c48f8"},"children":[{"type":"text","value":"// If unauthorized, refresh token and try again"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"refreshingPromise"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"refreshingPromise"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"refreshToken"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-448587"},"children":[{"type":"text","value":"then"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-b4fcca"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ccde27"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a8c405"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-1b1d52"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-b4fcca"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"refreshingPromise"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d14a0c"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"accessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a52df4"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-529b21"},"children":[{"type":"text","value":"'Session expired'"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"accessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"refreshingPromise"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d14a0c"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c48f8"},"children":[{"type":"text","value":"// can't refresh token. logging out"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a52df4"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-529b21"},"children":[{"type":"text","value":"'Session expired'"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c48f8"},"children":[{"type":"text","value":"// success or any non-auth error"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"refreshingPromise"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-448587"},"children":[{"type":"text","value":"then"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-b4fcca"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ccde27"},"children":[{"type":"text","value":"newAccessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b1d52"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-b4fcca"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c48f8"},"children":[{"type":"text","value":"// wait for other request's refreshing query to finish, when retry"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"fetch"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"uri"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":", {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" headers: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" {}),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" authorization: "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"newAccessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c48f8"},"children":[{"type":"text","value":"// refreshing token from other request failed, retry without authorization"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"fetch"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"uri"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":", {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" headers: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" {}),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" authorization: "}]},{"type":"element","tag":"span","props":{"class":"ct-529b21"},"children":[{"type":"text","value":"''"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" };"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-529b21{color:#A5D6FF}.ct-6e8360{color:#79C0FF}.ct-86c70f{color:#79C0FF}.ct-a8c405{color:#FFA657}.ct-d14a0c{color:#79C0FF}.ct-ad26cc{color:#C9D1D9}.ct-0c48f8{color:#8B949E}.ct-d2ac08{color:#FFA657}.ct-b4fcca{color:#FF7B72}.ct-448587{color:#D2A8FF}.ct-a52df4{color:#79C0FF}.ct-1b1d52{color:#79C0FF}.ct-9b0fbf{color:#FF7B72}.ct-ccde27{color:#FFA657}.ct-e3bda2{color:#C9D1D9}.ct-fffc71{color:#D2A8FF}.ct-5f37b9{color:#FF7B72}.ct-1fdfa4{color:#C9D1D9}.ct-882cc3{color:#FF7B72}.light .ct-882cc3{color:#859900}.light .ct-1fdfa4{color:#657B83}.light .ct-5f37b9{color:#073642}.light .ct-fffc71{color:#268BD2}.light .ct-e3bda2{color:#657B83}.light .ct-ccde27{color:#657B83}.light .ct-9b0fbf{color:#859900}.light .ct-1b1d52{color:#859900}.light .ct-a52df4{color:#859900}.light .ct-448587{color:#268BD2}.light .ct-b4fcca{color:#073642}.light .ct-d2ac08{color:#268BD2}.light .ct-0c48f8{color:#93A1A1}.light .ct-ad26cc{color:#268BD2}.light .ct-d14a0c{color:#B58900}.light .ct-a8c405{color:#268BD2}.light .ct-86c70f{color:#D33682}.light .ct-6e8360{color:#268BD2}.light .ct-529b21{color:#2AA198}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:GraphQL:Refresh token in Apollo client.md","_source":"content","_file":"GraphQL/Refresh token in Apollo client.md","_extension":"md"},{"_path":"/linux/find-out-who-uses-swap","_dir":"linux","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Find Out Who Uses Swap","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"code","props":{"code":"for file in /proc/*/status ; do awk '/VmSwap|Name/{printf $2 \" \" $3}END{ print \"\"}' $file; done | sort -k 2 -n -r | less\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"for file in /proc/*/status ; do awk '/VmSwap|Name/{printf $2 \" \" $3}END{ print \"\"}' $file; done | sort -k 2 -n -r | less\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"code","props":{"code":"for file in /proc/*/status ; do awk '/VmSwap|Name/{printf $2 \" \" $3}END{ print \"\"}' $file; done | sort -k 2 -n -r | less\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b91087"},"children":[{"type":"text","value":"for"}]},{"type":"element","tag":"span","props":{"class":"ct-bbbdc4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8ee681"},"children":[{"type":"text","value":"file"}]},{"type":"element","tag":"span","props":{"class":"ct-bbbdc4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b91087"},"children":[{"type":"text","value":"in"}]},{"type":"element","tag":"span","props":{"class":"ct-bbbdc4"},"children":[{"type":"text","value":" /proc/"}]},{"type":"element","tag":"span","props":{"class":"ct-b91087"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-bbbdc4"},"children":[{"type":"text","value":"/status "}]},{"type":"element","tag":"span","props":{"class":"ct-b91087"},"children":[{"type":"text","value":";"}]},{"type":"element","tag":"span","props":{"class":"ct-bbbdc4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b91087"},"children":[{"type":"text","value":"do"}]},{"type":"element","tag":"span","props":{"class":"ct-bbbdc4"},"children":[{"type":"text","value":" awk "}]},{"type":"element","tag":"span","props":{"class":"ct-1d7396"},"children":[{"type":"text","value":"'/VmSwap|Name/{printf $2 \" \" $3}END{ print \"\"}'"}]},{"type":"element","tag":"span","props":{"class":"ct-bbbdc4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b91087"},"children":[{"type":"text","value":"done"}]},{"type":"element","tag":"span","props":{"class":"ct-bbbdc4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b91087"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-bbbdc4"},"children":[{"type":"text","value":" sort -k 2 -n -r "}]},{"type":"element","tag":"span","props":{"class":"ct-b91087"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-bbbdc4"},"children":[{"type":"text","value":" less"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-1d7396{color:#A5D6FF}.ct-8ee681{color:#C9D1D9}.ct-bbbdc4{color:#C9D1D9}.ct-b91087{color:#FF7B72}.light .ct-b91087{color:#859900}.light .ct-bbbdc4{color:#657B83}.light .ct-8ee681{color:#268BD2}.light .ct-1d7396{color:#2AA198}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Linux:Find out who uses swap.md","_source":"content","_file":"Linux/Find out who uses swap.md","_extension":"md"},{"_path":"/linux/fixing-lagging-usb-headphones","_dir":"linux","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Fixing Lagging USB Headphones","description":"When receiving messages like this:","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When receiving messages like this:"}]},{"type":"element","tag":"code","props":{"code":"Bluetooth: hci0: ACL packet for unknown connection handle 256\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"Bluetooth: hci0: ACL packet for unknown connection handle 256\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Create "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/modprobe.d/disable_btusb_autosuspend.conf"}]},{"type":"text","value":" with following content:"}]},{"type":"element","tag":"code","props":{"code":"# Disable autosuspend for btusb to make the bluetooth keyboard work again\noptions btusb enable_autosuspend=n\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"# Disable autosuspend for btusb to make the bluetooth keyboard work again\noptions btusb enable_autosuspend=n\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then run"}]},{"type":"element","tag":"code","props":{"code":"mkinitcpio -P\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"mkinitcpio -P\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Reboot and debug with"}]},{"type":"element","tag":"code","props":{"code":"$ systool -v -m btusb | grep autosuspend\n enable_autosuspend = \"N\" # should be \"N\"\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"$ systool -v -m btusb | grep autosuspend\n enable_autosuspend = \"N\" # should be \"N\"\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"also"},"children":[{"type":"text","value":"Also"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"That could be either "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"btusb.enable_autosuspend=n"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"usbcore.autosuspend=-1"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"TLP has settings for BTUSB, check it to exclude your device from autosuspend"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"There's a guy on ubuntuforums, who wrote "},{"type":"element","tag":"a","props":{"href":"https://ubuntuforums.org/showthread.php?t=2159645&page=6&p=12926730#post12926730","rel":["nofollow"]},"children":[{"type":"text","value":"solution"}]},{"type":"text","value":", which disables autosuspend manually"}]}]},{"type":"element","tag":"h2","props":{"id":"refs"},"children":[{"type":"text","value":"Refs"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://bbs.archlinux.org/viewtopic.php?id=236479","rel":["nofollow"]},"children":[{"type":"text","value":"Bluetooth keyboard disconnects randomly"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://bbs.archlinux.org/viewtopic.php?id=275962","rel":["nofollow"]},"children":[{"type":"text","value":"Bluetooth keeps turning off"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://wiki.archlinux.org/title/Bluetooth#Device_connects,_then_disconnects_after_a_few_moments","rel":["nofollow"]},"children":[{"type":"text","value":"ArchWiki: Device connects, then disconnects after a few moments"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://ubuntuforums.org/showthread.php?t=2159645&page=6&p=12926730#post12926730","rel":["nofollow"]},"children":[{"type":"text","value":"Said solution with a script in rc.local"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When receiving messages like this:"}]},{"type":"element","tag":"code","props":{"code":"Bluetooth: hci0: ACL packet for unknown connection handle 256\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-44b0c7"},"children":[{"type":"text","value":"Bluetooth: hci0: ACL packet "}]},{"type":"element","tag":"span","props":{"class":"ct-538076"},"children":[{"type":"text","value":"for"}]},{"type":"element","tag":"span","props":{"class":"ct-44b0c7"},"children":[{"type":"text","value":" unknown connection handle 256"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Create "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/modprobe.d/disable_btusb_autosuspend.conf"}]},{"type":"text","value":" with following content:"}]},{"type":"element","tag":"code","props":{"code":"# Disable autosuspend for btusb to make the bluetooth keyboard work again\noptions btusb enable_autosuspend=n\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bbfceb"},"children":[{"type":"text","value":"# Disable autosuspend for btusb to make the bluetooth keyboard work again"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-44b0c7"},"children":[{"type":"text","value":"options btusb enable_autosuspend=n"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then run"}]},{"type":"element","tag":"code","props":{"code":"mkinitcpio -P\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-44b0c7"},"children":[{"type":"text","value":"mkinitcpio -P"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Reboot and debug with"}]},{"type":"element","tag":"code","props":{"code":"$ systool -v -m btusb | grep autosuspend\n enable_autosuspend = \"N\" # should be \"N\"\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-44b0c7"},"children":[{"type":"text","value":"$ systool -v -m btusb "}]},{"type":"element","tag":"span","props":{"class":"ct-538076"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-44b0c7"},"children":[{"type":"text","value":" grep autosuspend"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-44b0c7"},"children":[{"type":"text","value":" enable_autosuspend = "}]},{"type":"element","tag":"span","props":{"class":"ct-7b78b9"},"children":[{"type":"text","value":"\"N\""}]},{"type":"element","tag":"span","props":{"class":"ct-44b0c7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bbfceb"},"children":[{"type":"text","value":"# should be \"N\""}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"also"},"children":[{"type":"text","value":"Also"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"That could be either "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"btusb.enable_autosuspend=n"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"usbcore.autosuspend=-1"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"TLP has settings for BTUSB, check it to exclude your device from autosuspend"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"There's a guy on ubuntuforums, who wrote "},{"type":"element","tag":"a","props":{"href":"https://ubuntuforums.org/showthread.php?t=2159645&page=6&p=12926730#post12926730","rel":["nofollow"]},"children":[{"type":"text","value":"solution"}]},{"type":"text","value":", which disables autosuspend manually"}]}]},{"type":"element","tag":"h2","props":{"id":"refs"},"children":[{"type":"text","value":"Refs"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://bbs.archlinux.org/viewtopic.php?id=236479","rel":["nofollow"]},"children":[{"type":"text","value":"Bluetooth keyboard disconnects randomly"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://bbs.archlinux.org/viewtopic.php?id=275962","rel":["nofollow"]},"children":[{"type":"text","value":"Bluetooth keeps turning off"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://wiki.archlinux.org/title/Bluetooth#Device_connects,_then_disconnects_after_a_few_moments","rel":["nofollow"]},"children":[{"type":"text","value":"ArchWiki: Device connects, then disconnects after a few moments"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://ubuntuforums.org/showthread.php?t=2159645&page=6&p=12926730#post12926730","rel":["nofollow"]},"children":[{"type":"text","value":"Said solution with a script in rc.local"}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-7b78b9{color:#A5D6FF}.ct-bbfceb{color:#8B949E}.ct-538076{color:#FF7B72}.ct-44b0c7{color:#C9D1D9}.light .ct-44b0c7{color:#657B83}.light .ct-538076{color:#859900}.light .ct-bbfceb{color:#93A1A1}.light .ct-7b78b9{color:#2AA198}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"also","depth":2,"text":"Also"},{"id":"refs","depth":2,"text":"Refs"}]}},"_type":"markdown","_id":"content:Linux:Fixing lagging USB Headphones.md","_source":"content","_file":"Linux/Fixing lagging USB Headphones.md","_extension":"md"},{"_path":"/linux/gitea-for-git-hosting","_dir":"linux","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Gitea For Git Hosting","description":"Self-hosted #git repositories with gitea and #docker.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Self-hosted #git repositories with "},{"type":"element","tag":"a","props":{"href":"https://gitea.io/ru-ru/","rel":["nofollow"]},"children":[{"type":"text","value":"gitea"}]},{"type":"text","value":" and #docker."}]},{"type":"element","tag":"h2","props":{"id":"setting-up-with-docker-compose"},"children":[{"type":"text","value":"Setting up with docker-compose"}]},{"type":"element","tag":"code","props":{"code":"version: \"3\"\n\nnetworks:\n gitea:\n external: false\nservices:\n server:\n image: gitea/gitea:latest\n container_name: gitea\n environment:\n - USER_UID=1000\n - USER_GID=1000\n restart: always\n networks:\n - gitea\n volumes:\n - ./var/lib/gitea:/data\n - ./etc/gitea:/etc/gitea\n - /etc/timezone:/etc/timezone:ro\n - /etc/localtime:/etc/localtime:ro\n ports:\n - \"3000:3000\"\n - \"222:22\"\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"version: \"3\"\n\nnetworks:\n gitea:\n external: false\nservices:\n server:\n image: gitea/gitea:latest\n container_name: gitea\n environment:\n - USER_UID=1000\n - USER_GID=1000\n restart: always\n networks:\n - gitea\n volumes:\n - ./var/lib/gitea:/data\n - ./etc/gitea:/etc/gitea\n - /etc/timezone:/etc/timezone:ro\n - /etc/localtime:/etc/localtime:ro\n ports:\n - \"3000:3000\"\n - \"222:22\"\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Self-hosted #git repositories with "},{"type":"element","tag":"a","props":{"href":"https://gitea.io/ru-ru/","rel":["nofollow"]},"children":[{"type":"text","value":"gitea"}]},{"type":"text","value":" and #docker."}]},{"type":"element","tag":"h2","props":{"id":"setting-up-with-docker-compose"},"children":[{"type":"text","value":"Setting up with docker-compose"}]},{"type":"element","tag":"code","props":{"code":"version: \"3\"\n\nnetworks:\n gitea:\n external: false\nservices:\n server:\n image: gitea/gitea:latest\n container_name: gitea\n environment:\n - USER_UID=1000\n - USER_GID=1000\n restart: always\n networks:\n - gitea\n volumes:\n - ./var/lib/gitea:/data\n - ./etc/gitea:/etc/gitea\n - /etc/timezone:/etc/timezone:ro\n - /etc/localtime:/etc/localtime:ro\n ports:\n - \"3000:3000\"\n - \"222:22\"\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a3922c"},"children":[{"type":"text","value":"version"}]},{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ec9e62"},"children":[{"type":"text","value":"\"3\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a3922c"},"children":[{"type":"text","value":"networks"}]},{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a3922c"},"children":[{"type":"text","value":"gitea"}]},{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a3922c"},"children":[{"type":"text","value":"external"}]},{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-c29822"},"children":[{"type":"text","value":"false"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a3922c"},"children":[{"type":"text","value":"services"}]},{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a3922c"},"children":[{"type":"text","value":"server"}]},{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a3922c"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ec9e62"},"children":[{"type":"text","value":"gitea/gitea:latest"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a3922c"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ec9e62"},"children":[{"type":"text","value":"gitea"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a3922c"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-ec9e62"},"children":[{"type":"text","value":"USER_UID=1000"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-ec9e62"},"children":[{"type":"text","value":"USER_GID=1000"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a3922c"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ec9e62"},"children":[{"type":"text","value":"always"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a3922c"},"children":[{"type":"text","value":"networks"}]},{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-ec9e62"},"children":[{"type":"text","value":"gitea"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a3922c"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-ec9e62"},"children":[{"type":"text","value":"./var/lib/gitea:/data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-ec9e62"},"children":[{"type":"text","value":"./etc/gitea:/etc/gitea"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-ec9e62"},"children":[{"type":"text","value":"/etc/timezone:/etc/timezone:ro"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-ec9e62"},"children":[{"type":"text","value":"/etc/localtime:/etc/localtime:ro"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a3922c"},"children":[{"type":"text","value":"ports"}]},{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-ec9e62"},"children":[{"type":"text","value":"\"3000:3000\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-ec9e62"},"children":[{"type":"text","value":"\"222:22\""}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-c29822{color:#79C0FF}.ct-ec9e62{color:#A5D6FF}.ct-32bc1d{color:#C9D1D9}.ct-a3922c{color:#7EE787}.light .ct-a3922c{color:#268BD2}.light .ct-32bc1d{color:#657B83}.light .ct-ec9e62{color:#2AA198}.light .ct-c29822{color:#B58900}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"setting-up-with-docker-compose","depth":2,"text":"Setting up with docker-compose"}]}},"_type":"markdown","_id":"content:Linux:Gitea for git hosting.md","_source":"content","_file":"Linux/Gitea for git hosting.md","_extension":"md"},{"_path":"/linux/google-photos-alternative-with-photoprism","_dir":"linux","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Google Photos Alternative With Photoprism","description":"Photo Prism is a free alternative to Google photos, can be set up with #docker.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://photoprism.app/","rel":["nofollow"]},"children":[{"type":"text","value":"Photo Prism"}]},{"type":"text","value":" is a free alternative to Google photos, can be set up with #docker."}]},{"type":"element","tag":"h2","props":{"id":"docker-compose-file-to-run-it"},"children":[{"type":"text","value":"Docker compose file to run it"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check out current "},{"type":"element","tag":"a","props":{"href":"https://dl.photoprism.app/docker/docker-compose.yml","rel":["nofollow"]},"children":[{"type":"text","value":"example"}]},{"type":"text","value":" at photoprism's "},{"type":"element","tag":"a","props":{"href":"https://docs.photoprism.app/getting-started/docker-compose/","rel":["nofollow"]},"children":[{"type":"text","value":"documentation"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"version: '3.5'\n\nservices:\n photoprism:\n container_name: photoprism__app\n image: photoprism/photoprism:latest\n depends_on:\n - mariadb\n restart: unless-stopped\n security_opt:\n - seccomp:unconfined\n - apparmor:unconfined\n ports:\n - 2342:2342 # HTTP port (host:container)\n environment:\n PHOTOPRISM_ADMIN_PASSWORD: \"password\"\n PHOTOPRISM_SITE_URL: \"https://service.url/\"\n PHOTOPRISM_ORIGINALS_LIMIT: 5000\n PHOTOPRISM_HTTP_COMPRESSION: \"gzip\"\n PHOTOPRISM_DEBUG: \"false\" \n PHOTOPRISM_PUBLIC: \"false\" \n PHOTOPRISM_READONLY: \"false\" \n PHOTOPRISM_EXPERIMENTAL: \"false\"\n PHOTOPRISM_DISABLE_CHOWN: \"false\"\n PHOTOPRISM_DISABLE_WEBDAV: \"false\" \n PHOTOPRISM_DISABLE_SETTINGS: \"false\"\n PHOTOPRISM_DISABLE_TENSORFLOW: \"false\"\n PHOTOPRISM_DISABLE_FACES: \"false\" \n PHOTOPRISM_DISABLE_CLASSIFICATION: \"false\"\n PHOTOPRISM_DARKTABLE_PRESETS: \"false\" \n PHOTOPRISM_DETECT_NSFW: \"false\" \n PHOTOPRISM_UPLOAD_NSFW: \"true\" \n PHOTOPRISM_DATABASE_DRIVER: \"mysql\" \n PHOTOPRISM_DATABASE_SERVER: \"mariadb:3306\"\n PHOTOPRISM_DATABASE_NAME: \"photoprism\" \n PHOTOPRISM_DATABASE_USER: \"root\" \n PHOTOPRISM_DATABASE_PASSWORD: \"insecure\" \n PHOTOPRISM_SITE_TITLE: \"PhotoPrism\"\n PHOTOPRISM_SITE_CAPTION: \"Browse Your Life\"\n PHOTOPRISM_SITE_DESCRIPTION: \"\"\n PHOTOPRISM_SITE_AUTHOR: \"\"\n HOME: \"/photoprism\"\n working_dir: \"/photoprism\"\n volumes:\n - \"./data/originals:/photoprism/originals\" \n - \"./data/imports:/photoprism/import\"\n - \"./data/storage:/photoprism/storage\"\n mariadb:\n container_name: photoprism__db\n restart: unless-stopped\n image: mariadb:10.6\n security_opt:\n - seccomp:unconfined\n - apparmor:unconfined\n command: mysqld --innodb-buffer-pool-size=128M --transaction-isolation=READ-COMMITTED --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci --max-connections=512 --innodb-rollback-on-timeout=OFF --innodb-lock-wait-timeout=120\n volumes:\n - \"./database:/var/lib/mysql\" # Important, don't remove\n environment:\n MYSQL_ROOT_PASSWORD: insecure\n MYSQL_DATABASE: photoprism\n MYSQL_USER: photoprism\n MYSQL_PASSWORD: insecure\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"version: '3.5'\n\nservices:\n photoprism:\n container_name: photoprism__app\n image: photoprism/photoprism:latest\n depends_on:\n - mariadb\n restart: unless-stopped\n security_opt:\n - seccomp:unconfined\n - apparmor:unconfined\n ports:\n - 2342:2342 # HTTP port (host:container)\n environment:\n PHOTOPRISM_ADMIN_PASSWORD: \"password\"\n PHOTOPRISM_SITE_URL: \"https://service.url/\"\n PHOTOPRISM_ORIGINALS_LIMIT: 5000\n PHOTOPRISM_HTTP_COMPRESSION: \"gzip\"\n PHOTOPRISM_DEBUG: \"false\" \n PHOTOPRISM_PUBLIC: \"false\" \n PHOTOPRISM_READONLY: \"false\" \n PHOTOPRISM_EXPERIMENTAL: \"false\"\n PHOTOPRISM_DISABLE_CHOWN: \"false\"\n PHOTOPRISM_DISABLE_WEBDAV: \"false\" \n PHOTOPRISM_DISABLE_SETTINGS: \"false\"\n PHOTOPRISM_DISABLE_TENSORFLOW: \"false\"\n PHOTOPRISM_DISABLE_FACES: \"false\" \n PHOTOPRISM_DISABLE_CLASSIFICATION: \"false\"\n PHOTOPRISM_DARKTABLE_PRESETS: \"false\" \n PHOTOPRISM_DETECT_NSFW: \"false\" \n PHOTOPRISM_UPLOAD_NSFW: \"true\" \n PHOTOPRISM_DATABASE_DRIVER: \"mysql\" \n PHOTOPRISM_DATABASE_SERVER: \"mariadb:3306\"\n PHOTOPRISM_DATABASE_NAME: \"photoprism\" \n PHOTOPRISM_DATABASE_USER: \"root\" \n PHOTOPRISM_DATABASE_PASSWORD: \"insecure\" \n PHOTOPRISM_SITE_TITLE: \"PhotoPrism\"\n PHOTOPRISM_SITE_CAPTION: \"Browse Your Life\"\n PHOTOPRISM_SITE_DESCRIPTION: \"\"\n PHOTOPRISM_SITE_AUTHOR: \"\"\n HOME: \"/photoprism\"\n working_dir: \"/photoprism\"\n volumes:\n - \"./data/originals:/photoprism/originals\" \n - \"./data/imports:/photoprism/import\"\n - \"./data/storage:/photoprism/storage\"\n mariadb:\n container_name: photoprism__db\n restart: unless-stopped\n image: mariadb:10.6\n security_opt:\n - seccomp:unconfined\n - apparmor:unconfined\n command: mysqld --innodb-buffer-pool-size=128M --transaction-isolation=READ-COMMITTED --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci --max-connections=512 --innodb-rollback-on-timeout=OFF --innodb-lock-wait-timeout=120\n volumes:\n - \"./database:/var/lib/mysql\" # Important, don't remove\n environment:\n MYSQL_ROOT_PASSWORD: insecure\n MYSQL_DATABASE: photoprism\n MYSQL_USER: photoprism\n MYSQL_PASSWORD: insecure\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://photoprism.app/","rel":["nofollow"]},"children":[{"type":"text","value":"Photo Prism"}]},{"type":"text","value":" is a free alternative to Google photos, can be set up with #docker."}]},{"type":"element","tag":"h2","props":{"id":"docker-compose-file-to-run-it"},"children":[{"type":"text","value":"Docker compose file to run it"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check out current "},{"type":"element","tag":"a","props":{"href":"https://dl.photoprism.app/docker/docker-compose.yml","rel":["nofollow"]},"children":[{"type":"text","value":"example"}]},{"type":"text","value":" at photoprism's "},{"type":"element","tag":"a","props":{"href":"https://docs.photoprism.app/getting-started/docker-compose/","rel":["nofollow"]},"children":[{"type":"text","value":"documentation"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"version: '3.5'\n\nservices:\n photoprism:\n container_name: photoprism__app\n image: photoprism/photoprism:latest\n depends_on:\n - mariadb\n restart: unless-stopped\n security_opt:\n - seccomp:unconfined\n - apparmor:unconfined\n ports:\n - 2342:2342 # HTTP port (host:container)\n environment:\n PHOTOPRISM_ADMIN_PASSWORD: \"password\"\n PHOTOPRISM_SITE_URL: \"https://service.url/\"\n PHOTOPRISM_ORIGINALS_LIMIT: 5000\n PHOTOPRISM_HTTP_COMPRESSION: \"gzip\"\n PHOTOPRISM_DEBUG: \"false\" \n PHOTOPRISM_PUBLIC: \"false\" \n PHOTOPRISM_READONLY: \"false\" \n PHOTOPRISM_EXPERIMENTAL: \"false\"\n PHOTOPRISM_DISABLE_CHOWN: \"false\"\n PHOTOPRISM_DISABLE_WEBDAV: \"false\" \n PHOTOPRISM_DISABLE_SETTINGS: \"false\"\n PHOTOPRISM_DISABLE_TENSORFLOW: \"false\"\n PHOTOPRISM_DISABLE_FACES: \"false\" \n PHOTOPRISM_DISABLE_CLASSIFICATION: \"false\"\n PHOTOPRISM_DARKTABLE_PRESETS: \"false\" \n PHOTOPRISM_DETECT_NSFW: \"false\" \n PHOTOPRISM_UPLOAD_NSFW: \"true\" \n PHOTOPRISM_DATABASE_DRIVER: \"mysql\" \n PHOTOPRISM_DATABASE_SERVER: \"mariadb:3306\"\n PHOTOPRISM_DATABASE_NAME: \"photoprism\" \n PHOTOPRISM_DATABASE_USER: \"root\" \n PHOTOPRISM_DATABASE_PASSWORD: \"insecure\" \n PHOTOPRISM_SITE_TITLE: \"PhotoPrism\"\n PHOTOPRISM_SITE_CAPTION: \"Browse Your Life\"\n PHOTOPRISM_SITE_DESCRIPTION: \"\"\n PHOTOPRISM_SITE_AUTHOR: \"\"\n HOME: \"/photoprism\"\n working_dir: \"/photoprism\"\n volumes:\n - \"./data/originals:/photoprism/originals\" \n - \"./data/imports:/photoprism/import\"\n - \"./data/storage:/photoprism/storage\"\n mariadb:\n container_name: photoprism__db\n restart: unless-stopped\n image: mariadb:10.6\n security_opt:\n - seccomp:unconfined\n - apparmor:unconfined\n command: mysqld --innodb-buffer-pool-size=128M --transaction-isolation=READ-COMMITTED --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci --max-connections=512 --innodb-rollback-on-timeout=OFF --innodb-lock-wait-timeout=120\n volumes:\n - \"./database:/var/lib/mysql\" # Important, don't remove\n environment:\n MYSQL_ROOT_PASSWORD: insecure\n MYSQL_DATABASE: photoprism\n MYSQL_USER: photoprism\n MYSQL_PASSWORD: insecure\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"version"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"'3.5'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"services"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"photoprism"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"photoprism__app"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"photoprism/photoprism:latest"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"depends_on"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"mariadb"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"unless-stopped"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"security_opt"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"seccomp:unconfined"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"apparmor:unconfined"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"ports"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"2342:2342"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4ca57e"},"children":[{"type":"text","value":"# HTTP port (host:container)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_ADMIN_PASSWORD"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"password\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_SITE_URL"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"https://service.url/\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_ORIGINALS_LIMIT"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-6faff2"},"children":[{"type":"text","value":"5000"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_HTTP_COMPRESSION"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"gzip\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_DEBUG"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_PUBLIC"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_READONLY"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_EXPERIMENTAL"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"false\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_DISABLE_CHOWN"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"false\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_DISABLE_WEBDAV"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_DISABLE_SETTINGS"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"false\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_DISABLE_TENSORFLOW"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"false\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_DISABLE_FACES"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_DISABLE_CLASSIFICATION"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"false\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_DARKTABLE_PRESETS"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_DETECT_NSFW"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_UPLOAD_NSFW"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"true\""}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_DATABASE_DRIVER"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"mysql\""}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_DATABASE_SERVER"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"mariadb:3306\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_DATABASE_NAME"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"photoprism\""}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_DATABASE_USER"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"root\""}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_DATABASE_PASSWORD"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"insecure\""}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_SITE_TITLE"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"PhotoPrism\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_SITE_CAPTION"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"Browse Your Life\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_SITE_DESCRIPTION"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_SITE_AUTHOR"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"HOME"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"/photoprism\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"working_dir"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"/photoprism\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"./data/originals:/photoprism/originals\""}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"./data/imports:/photoprism/import\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"./data/storage:/photoprism/storage\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"mariadb"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"photoprism__db"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"unless-stopped"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"mariadb:10.6"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"security_opt"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"seccomp:unconfined"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"apparmor:unconfined"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"command"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"mysqld --innodb-buffer-pool-size=128M --transaction-isolation=READ-COMMITTED --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci --max-connections=512 --innodb-rollback-on-timeout=OFF --innodb-lock-wait-timeout=120"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"./database:/var/lib/mysql\""}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4ca57e"},"children":[{"type":"text","value":"# Important, don't remove"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"MYSQL_ROOT_PASSWORD"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"insecure"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"MYSQL_DATABASE"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"photoprism"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"MYSQL_USER"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"photoprism"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"MYSQL_PASSWORD"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"insecure"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-6faff2{color:#79C0FF}.ct-4ca57e{color:#8B949E}.ct-762dce{color:#A5D6FF}.ct-02f0b9{color:#C9D1D9}.ct-611b86{color:#7EE787}.light .ct-611b86{color:#268BD2}.light .ct-02f0b9{color:#657B83}.light .ct-762dce{color:#2AA198}.light .ct-4ca57e{color:#93A1A1}.light .ct-6faff2{color:#D33682}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"docker-compose-file-to-run-it","depth":2,"text":"Docker compose file to run it"}]}},"_type":"markdown","_id":"content:Linux:Google photos alternative with Photoprism.md","_source":"content","_file":"Linux/Google photos alternative with Photoprism.md","_extension":"md"},{"_path":"/linux/linux-on-asus-zenbook-um3402-ya","_dir":"linux","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Linux On Asus Zenbook UM3402 YA","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"installing-linux-with-dualboot-alongside-windows-11"},"children":[{"type":"text","value":"Installing Linux with DualBoot alongside Windows 11"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.asus.com/support/FAQ/1047461/","rel":["nofollow"]},"children":[{"type":"text","value":"Disable BitLocker in Windows"}]},{"type":"text","value":", don't forget to backup your key"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.asus.com/me-en/support/FAQ/1044688/#Win11","rel":["nofollow"]},"children":[{"type":"text","value":"Shrink system partition"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Disable Secure Boot in Bios:"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Pressing F2 while booting"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Then F7 in bios"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Select \"Security\" -> \"Secure Boot\" -> Disable."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Press F10 to save and reboot"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Boot in windows, check that everything's wotking"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Burn image with "},{"type":"element","tag":"a","props":{"href":"https://rufus.ie/","rel":["nofollow"]},"children":[{"type":"text","value":"rufus"}]},{"type":"text","value":", reboot, press F2, choose your USB drive as first boot option"}]}]},{"type":"element","tag":"h2","props":{"id":"getting-bluetooth-working-with-mediatek-7921e"},"children":[{"type":"text","value":"Getting bluetooth working with Mediatek 7921e"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Problem"}]},{"type":"text","value":": WiFi is working on Zenbook UM3402-YA, but bluetooth doesn't."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"According to this "},{"type":"element","tag":"a","props":{"href":"https://www.linux.org/threads/solved-wifi-adaptator-not-found-mediatek-wi-fi-6-mt7921-wireless-lan-card.37699/page-2#post-143291","rel":["nofollow"]},"children":[{"type":"text","value":"answer"}]},{"type":"text","value":" you should just turn your laptop off, disconnect power supply and "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"hold power key for 60 seconds"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"After that press Power key again and wait for about 10-20sec for asus logo to appear. Then "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"press F2 and disable secure boot again"}]},{"type":"text","value":", that's the necessary part."}]},{"type":"element","tag":"h2","props":{"id":"power-usage-optimizations"},"children":[{"type":"text","value":"Power usage optimizations"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Install "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"tlp"}]},{"type":"text","value":" and enable it with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"systemctl enable --now tlp"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"installing-linux-with-dualboot-alongside-windows-11"},"children":[{"type":"text","value":"Installing Linux with DualBoot alongside Windows 11"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.asus.com/support/FAQ/1047461/","rel":["nofollow"]},"children":[{"type":"text","value":"Disable BitLocker in Windows"}]},{"type":"text","value":", don't forget to backup your key"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.asus.com/me-en/support/FAQ/1044688/#Win11","rel":["nofollow"]},"children":[{"type":"text","value":"Shrink system partition"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Disable Secure Boot in Bios:"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Pressing F2 while booting"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Then F7 in bios"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Select \"Security\" -> \"Secure Boot\" -> Disable."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Press F10 to save and reboot"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Boot in windows, check that everything's wotking"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Burn image with "},{"type":"element","tag":"a","props":{"href":"https://rufus.ie/","rel":["nofollow"]},"children":[{"type":"text","value":"rufus"}]},{"type":"text","value":", reboot, press F2, choose your USB drive as first boot option"}]}]},{"type":"element","tag":"h2","props":{"id":"getting-bluetooth-working-with-mediatek-7921e"},"children":[{"type":"text","value":"Getting bluetooth working with Mediatek 7921e"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Problem"}]},{"type":"text","value":": WiFi is working on Zenbook UM3402-YA, but bluetooth doesn't."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"According to this "},{"type":"element","tag":"a","props":{"href":"https://www.linux.org/threads/solved-wifi-adaptator-not-found-mediatek-wi-fi-6-mt7921-wireless-lan-card.37699/page-2#post-143291","rel":["nofollow"]},"children":[{"type":"text","value":"answer"}]},{"type":"text","value":" you should just turn your laptop off, disconnect power supply and "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"hold power key for 60 seconds"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"After that press Power key again and wait for about 10-20sec for asus logo to appear. Then "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"press F2 and disable secure boot again"}]},{"type":"text","value":", that's the necessary part."}]},{"type":"element","tag":"h2","props":{"id":"power-usage-optimizations"},"children":[{"type":"text","value":"Power usage optimizations"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Install "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"tlp"}]},{"type":"text","value":" and enable it with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"systemctl enable --now tlp"}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"installing-linux-with-dualboot-alongside-windows-11","depth":2,"text":"Installing Linux with DualBoot alongside Windows 11"},{"id":"getting-bluetooth-working-with-mediatek-7921e","depth":2,"text":"Getting bluetooth working with Mediatek 7921e"},{"id":"power-usage-optimizations","depth":2,"text":"Power usage optimizations"}]}},"_type":"markdown","_id":"content:Linux:Linux on Asus Zenbook UM3402-YA.md","_source":"content","_file":"Linux/Linux on Asus Zenbook UM3402-YA.md","_extension":"md"},{"_path":"/linux/resume-or-start-screen-session","_dir":"linux","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Resume Or Start Screen Session","description":"Running this script will enter currently running screen session or will start new one.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Running this script will enter currently running "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"screen"}]},{"type":"text","value":" session or will start new one."}]},{"type":"element","tag":"code","props":{"code":"( screen -r bash || ( screen -d bash && screen -r bash || screen -SAm bash bash ) )\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"( screen -r bash || ( screen -d bash && screen -r bash || screen -SAm bash bash ) )\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Running this script will enter currently running "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"screen"}]},{"type":"text","value":" session or will start new one."}]},{"type":"element","tag":"code","props":{"code":"( screen -r bash || ( screen -d bash && screen -r bash || screen -SAm bash bash ) )\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4eae5e"},"children":[{"type":"text","value":"( screen -r bash "}]},{"type":"element","tag":"span","props":{"class":"ct-ef58d3"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-4eae5e"},"children":[{"type":"text","value":" ( screen -d bash "}]},{"type":"element","tag":"span","props":{"class":"ct-ef58d3"},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"class":"ct-4eae5e"},"children":[{"type":"text","value":" screen -r bash "}]},{"type":"element","tag":"span","props":{"class":"ct-ef58d3"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-4eae5e"},"children":[{"type":"text","value":" screen -SAm bash bash ) )"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-ef58d3{color:#FF7B72}.ct-4eae5e{color:#C9D1D9}.light .ct-4eae5e{color:#657B83}.light .ct-ef58d3{color:#859900}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Linux:Resume or start screen session.md","_source":"content","_file":"Linux/Resume or start screen session.md","_extension":"md"},{"_path":"/linux/rsync-file-with-ssh","_dir":"linux","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Rsync File With SSH","description":"Downloads file from #SSH with rsync and puts it in current folder.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Downloads file from #SSH with rsync and puts it in current folder."}]},{"type":"element","tag":"code","props":{"code":"#!/bin/bash\n\nPORT=22\nUSER=user\nHOST=example.com\nREMOTE_PATH=/tmp\nREMOTE_FILE=sample.text\nDEST_PATH=./\n\nrsync -a -e \"ssh -p $PORT\" -P -v \\\n \"$USER@$HOST:$REMOTE_PATH/$REMOTE_FILE\" \\\n \"$DEST_PATH\"\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"#!/bin/bash\n\nPORT=22\nUSER=user\nHOST=example.com\nREMOTE_PATH=/tmp\nREMOTE_FILE=sample.text\nDEST_PATH=./\n\nrsync -a -e \"ssh -p $PORT\" -P -v \\\n \"$USER@$HOST:$REMOTE_PATH/$REMOTE_FILE\" \\\n \"$DEST_PATH\"\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Downloads file from #SSH with rsync and puts it in current folder."}]},{"type":"element","tag":"code","props":{"code":"#!/bin/bash\n\nPORT=22\nUSER=user\nHOST=example.com\nREMOTE_PATH=/tmp\nREMOTE_FILE=sample.text\nDEST_PATH=./\n\nrsync -a -e \"ssh -p $PORT\" -P -v \\\n \"$USER@$HOST:$REMOTE_PATH/$REMOTE_FILE\" \\\n \"$DEST_PATH\"\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c320ca"},"children":[{"type":"text","value":"#!/bin/bash"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef0bb"},"children":[{"type":"text","value":"PORT=22"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef0bb"},"children":[{"type":"text","value":"USER=user"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef0bb"},"children":[{"type":"text","value":"HOST=example.com"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef0bb"},"children":[{"type":"text","value":"REMOTE_PATH=/tmp"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef0bb"},"children":[{"type":"text","value":"REMOTE_FILE=sample.text"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef0bb"},"children":[{"type":"text","value":"DEST_PATH=./"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef0bb"},"children":[{"type":"text","value":"rsync -a -e "}]},{"type":"element","tag":"span","props":{"class":"ct-905a71"},"children":[{"type":"text","value":"\"ssh -p "}]},{"type":"element","tag":"span","props":{"class":"ct-5cf3ba"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-aea61c"},"children":[{"type":"text","value":"PORT"}]},{"type":"element","tag":"span","props":{"class":"ct-905a71"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-8ef0bb"},"children":[{"type":"text","value":" -P -v \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef0bb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-905a71"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-5cf3ba"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-aea61c"},"children":[{"type":"text","value":"USER"}]},{"type":"element","tag":"span","props":{"class":"ct-905a71"},"children":[{"type":"text","value":"@"}]},{"type":"element","tag":"span","props":{"class":"ct-5cf3ba"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-aea61c"},"children":[{"type":"text","value":"HOST"}]},{"type":"element","tag":"span","props":{"class":"ct-905a71"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-5cf3ba"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-aea61c"},"children":[{"type":"text","value":"REMOTE_PATH"}]},{"type":"element","tag":"span","props":{"class":"ct-905a71"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-5cf3ba"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-aea61c"},"children":[{"type":"text","value":"REMOTE_FILE"}]},{"type":"element","tag":"span","props":{"class":"ct-905a71"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-8ef0bb"},"children":[{"type":"text","value":" \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef0bb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-905a71"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-5cf3ba"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-aea61c"},"children":[{"type":"text","value":"DEST_PATH"}]},{"type":"element","tag":"span","props":{"class":"ct-905a71"},"children":[{"type":"text","value":"\""}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-aea61c{color:#C9D1D9}.ct-5cf3ba{color:#C9D1D9}.ct-905a71{color:#A5D6FF}.ct-8ef0bb{color:#C9D1D9}.ct-c320ca{color:#8B949E}.light .ct-c320ca{color:#93A1A1}.light .ct-8ef0bb{color:#657B83}.light .ct-905a71{color:#2AA198}.light .ct-5cf3ba{color:#859900}.light .ct-aea61c{color:#268BD2}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Linux:Rsync file with SSH.md","_source":"content","_file":"Linux/Rsync file with SSH.md","_extension":"md"},{"_path":"/linux/setting-up-nginx","_dir":"linux","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Setting Up NGINX","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"fallback-url-for-spa-s"},"children":[{"type":"text","value":"Fallback url for SPA-s"}]},{"type":"element","tag":"code","props":{"code":"server {\n # ...\n location / {\n # First attempt to serve request as file, then\n # as directory, then fall back to displaying a 404.\n try_files $uri $uri/ =404;\n }\n # ...\n}\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"server {\n # ...\n location / {\n # First attempt to serve request as file, then\n # as directory, then fall back to displaying a 404.\n try_files $uri $uri/ =404;\n }\n # ...\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"set-up-for-uploads"},"children":[{"type":"text","value":"Set up for uploads"}]},{"type":"element","tag":"code","props":{"code":"server {\n # ...\n client_max_body_size 200M;\n # ...\n}\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"server {\n # ...\n client_max_body_size 200M;\n # ...\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"reverse-proxy-for-https"},"children":[{"type":"text","value":"Reverse proxy for https"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Given config forwards "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"https"}]},{"type":"text","value":" traffic to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"http"}]},{"type":"text","value":" on port "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"8080"}]},{"type":"text","value":" for "},{"type":"element","tag":"a","props":{"href":"https://next.vault48.org","rel":["nofollow"]},"children":[{"type":"text","value":"https://next.vault48.org"}]},{"type":"text","value":"\nwith http2 support if possible."}]},{"type":"element","tag":"code","props":{"code":"server {\n listen 80;\n server_name next.vault48.org;\n return 301 https://next.vault48.org$request_uri;\n}\n\nserver {\n listen 443 ssl http2;\n listen [::]:443 ssl http2;\n \n # managed by Certbot\n ssl_certificate /etc/letsencrypt/live/vault48.org/fullchain.pem; \n ssl_certificate_key /etc/letsencrypt/live/vault48.org/privkey.pem; \n ssl_trusted_certificate /etc/letsencrypt/live/vault48.org/chain.pem;\n \n server_name next.vault48.org;\n \n location / {\n proxy_redirect off;\n proxy_set_header Host $host;\n proxy_set_header X-Real-IP $remote_addr;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n \n proxy_pass http://127.0.0.1:8080;\n }\n}\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"server {\n listen 80;\n server_name next.vault48.org;\n return 301 https://next.vault48.org$request_uri;\n}\n\nserver {\n listen 443 ssl http2;\n listen [::]:443 ssl http2;\n \n # managed by Certbot\n ssl_certificate /etc/letsencrypt/live/vault48.org/fullchain.pem; \n ssl_certificate_key /etc/letsencrypt/live/vault48.org/privkey.pem; \n ssl_trusted_certificate /etc/letsencrypt/live/vault48.org/chain.pem;\n \n server_name next.vault48.org;\n \n location / {\n proxy_redirect off;\n proxy_set_header Host $host;\n proxy_set_header X-Real-IP $remote_addr;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n \n proxy_pass http://127.0.0.1:8080;\n }\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"fallback-url-for-spa-s"},"children":[{"type":"text","value":"Fallback url for SPA-s"}]},{"type":"element","tag":"code","props":{"code":"server {\n # ...\n location / {\n # First attempt to serve request as file, then\n # as directory, then fall back to displaying a 404.\n try_files $uri $uri/ =404;\n }\n # ...\n}\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fa5e82"},"children":[{"type":"text","value":"server"}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-31233e"},"children":[{"type":"text","value":"# ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6f5a8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ce83bc"},"children":[{"type":"text","value":"location"}]},{"type":"element","tag":"span","props":{"class":"ct-f6f5a8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7fc9b0"},"children":[{"type":"text","value":"/ "}]},{"type":"element","tag":"span","props":{"class":"ct-f6f5a8"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-31233e"},"children":[{"type":"text","value":"# First attempt to serve request as file, then"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-31233e"},"children":[{"type":"text","value":"# as directory, then fall back to displaying a 404."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bab19a"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-31233e"},"children":[{"type":"text","value":"# ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"set-up-for-uploads"},"children":[{"type":"text","value":"Set up for uploads"}]},{"type":"element","tag":"code","props":{"code":"server {\n # ...\n client_max_body_size 200M;\n # ...\n}\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fa5e82"},"children":[{"type":"text","value":"server"}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-31233e"},"children":[{"type":"text","value":"# ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26cf0f"},"children":[{"type":"text","value":" client_max_body_size "}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":"200M;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-31233e"},"children":[{"type":"text","value":"# ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"reverse-proxy-for-https"},"children":[{"type":"text","value":"Reverse proxy for https"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Given config forwards "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"https"}]},{"type":"text","value":" traffic to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"http"}]},{"type":"text","value":" on port "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"8080"}]},{"type":"text","value":" for "},{"type":"element","tag":"a","props":{"href":"https://next.vault48.org","rel":["nofollow"]},"children":[{"type":"text","value":"https://next.vault48.org"}]},{"type":"text","value":"\nwith http2 support if possible."}]},{"type":"element","tag":"code","props":{"code":"server {\n listen 80;\n server_name next.vault48.org;\n return 301 https://next.vault48.org$request_uri;\n}\n\nserver {\n listen 443 ssl http2;\n listen [::]:443 ssl http2;\n \n # managed by Certbot\n ssl_certificate /etc/letsencrypt/live/vault48.org/fullchain.pem; \n ssl_certificate_key /etc/letsencrypt/live/vault48.org/privkey.pem; \n ssl_trusted_certificate /etc/letsencrypt/live/vault48.org/chain.pem;\n \n server_name next.vault48.org;\n \n location / {\n proxy_redirect off;\n proxy_set_header Host $host;\n proxy_set_header X-Real-IP $remote_addr;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n \n proxy_pass http://127.0.0.1:8080;\n }\n}\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fa5e82"},"children":[{"type":"text","value":"server"}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26cf0f"},"children":[{"type":"text","value":" listen "}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":"80;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26cf0f"},"children":[{"type":"text","value":" server_name "}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":"next.vault48.org;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26cf0f"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a505ca"},"children":[{"type":"text","value":"301"}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" https://next.vault48.org"}]},{"type":"element","tag":"span","props":{"class":"ct-07bbf5"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-f93802"},"children":[{"type":"text","value":"request_uri"}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fa5e82"},"children":[{"type":"text","value":"server"}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26cf0f"},"children":[{"type":"text","value":" listen "}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":"443 ssl http2;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26cf0f"},"children":[{"type":"text","value":" listen "}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":"[::]:443 ssl http2;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-31233e"},"children":[{"type":"text","value":"# managed by Certbot"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26cf0f"},"children":[{"type":"text","value":" ssl_certificate "}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":"/etc/letsencrypt/live/vault48.org/fullchain.pem; "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26cf0f"},"children":[{"type":"text","value":" ssl_certificate_key "}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":"/etc/letsencrypt/live/vault48.org/privkey.pem; "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26cf0f"},"children":[{"type":"text","value":" ssl_trusted_certificate "}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":"/etc/letsencrypt/live/vault48.org/chain.pem;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26cf0f"},"children":[{"type":"text","value":" server_name "}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":"next.vault48.org;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6f5a8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ce83bc"},"children":[{"type":"text","value":"location"}]},{"type":"element","tag":"span","props":{"class":"ct-f6f5a8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7fc9b0"},"children":[{"type":"text","value":"/ "}]},{"type":"element","tag":"span","props":{"class":"ct-f6f5a8"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26cf0f"},"children":[{"type":"text","value":" proxy_redirect "}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":"off;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26cf0f"},"children":[{"type":"text","value":" proxy_set_header "}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":"Host "}]},{"type":"element","tag":"span","props":{"class":"ct-07bbf5"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-f93802"},"children":[{"type":"text","value":"host"}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26cf0f"},"children":[{"type":"text","value":" proxy_set_header "}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":"X-Real-IP "}]},{"type":"element","tag":"span","props":{"class":"ct-07bbf5"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-f93802"},"children":[{"type":"text","value":"remote_addr"}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26cf0f"},"children":[{"type":"text","value":" proxy_set_header "}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":"X-Forwarded-For "}]},{"type":"element","tag":"span","props":{"class":"ct-07bbf5"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-f93802"},"children":[{"type":"text","value":"proxy_add_x_forwarded_for"}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26cf0f"},"children":[{"type":"text","value":" proxy_pass "}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":"http://127.0.0.1:8080;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-f93802{color:#C9D1D9}.ct-07bbf5{color:#C9D1D9}.ct-a505ca{color:#79C0FF}.ct-26cf0f{color:#FF7B72}.ct-bab19a{color:#FF7B72}.ct-7fc9b0{color:#FFA657}.ct-ce83bc{color:#FF7B72}.ct-f6f5a8{color:#C9D1D9}.ct-31233e{color:#8B949E}.ct-92caed{color:#C9D1D9}.ct-fa5e82{color:#FF7B72}.light .ct-fa5e82{color:#073642}.light .ct-92caed{color:#657B83}.light .ct-31233e{color:#93A1A1}.light .ct-f6f5a8{color:#657B83}.light .ct-ce83bc{color:#073642}.light .ct-7fc9b0{color:#657B83}.light .ct-bab19a{color:#657B83}.light .ct-26cf0f{color:#859900}.light .ct-a505ca{color:#D33682}.light .ct-07bbf5{color:#859900}.light .ct-f93802{color:#268BD2}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"fallback-url-for-spa-s","depth":2,"text":"Fallback url for SPA-s"},{"id":"set-up-for-uploads","depth":2,"text":"Set up for uploads"},{"id":"reverse-proxy-for-https","depth":2,"text":"Reverse proxy for https"}]}},"_type":"markdown","_id":"content:Linux:Setting up NGINX.md","_source":"content","_file":"Linux/Setting up NGINX.md","_extension":"md"},{"_path":"/linux/ssh","_dir":"linux","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"SSH","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"config-aliases-for-ssh-hosts"},"children":[{"type":"text","value":"Config aliases for #SSH hosts"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"#SSH config can be used to made aliases for different hosts. Should be put at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"~/.ssh/config"}]},{"type":"text","value":". To simply call "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ssh router"}]},{"type":"text","value":" without parameters, use this:"}]},{"type":"element","tag":"code","props":{"code":"Host router\n HostName 192.168.0.1\n IdentityFile ~/.ssh/id_rsa\n User root\n Port 22522\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"Host router\n HostName 192.168.0.1\n IdentityFile ~/.ssh/id_rsa\n User root\n Port 22522\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"config-aliases-for-ssh-hosts"},"children":[{"type":"text","value":"Config aliases for #SSH hosts"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"#SSH config can be used to made aliases for different hosts. Should be put at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"~/.ssh/config"}]},{"type":"text","value":". To simply call "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ssh router"}]},{"type":"text","value":" without parameters, use this:"}]},{"type":"element","tag":"code","props":{"code":"Host router\n HostName 192.168.0.1\n IdentityFile ~/.ssh/id_rsa\n User root\n Port 22522\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"Host router\n HostName 192.168.0.1\n IdentityFile ~/.ssh/id_rsa\n User root\n Port 22522"}]}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"config-aliases-for-ssh-hosts","depth":2,"text":"Config aliases for #SSH hosts"}]}},"_type":"markdown","_id":"content:Linux:SSH.md","_source":"content","_file":"Linux/SSH.md","_extension":"md"},{"_path":"/obsidian/self-hosted-obsidian-sync-with-couchdb","_dir":"obsidian","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Self Hosted Obsidian Sync With CouchDB","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/vrtmrz/obsidian-livesync","rel":["nofollow"]},"children":[{"type":"text","value":"Main documentation"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/vrtmrz/obsidian-livesync/blob/main/docs/setup_own_server.md","rel":["nofollow"]},"children":[{"type":"text","value":"Setting up couchdb"}]}]}]},{"type":"element","tag":"h2","props":{"id":"setting-up-environment"},"children":[{"type":"text","value":"Setting up environment"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"First, you should create "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docker-compose.yml"}]},{"type":"text","value":" with the following contents:"}]},{"type":"element","tag":"code","props":{"code":"version: '3'\nservices:\n couchserver:\n container_name: obsidian__database\n image: couchdb\n restart: always\n ports:\n - \"5984:5984\"\n environment:\n - COUCHDB_USER=user\n - COUCHDB_PASSWORD=somepassword\n volumes:\n - ./couchdb/dbdata:/opt/couchdb/data\n - ./couchdb/local.ini:/opt/couchdb/etc/local.ini\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"version: '3'\nservices:\n couchserver:\n container_name: obsidian__database\n image: couchdb\n restart: always\n ports:\n - \"5984:5984\"\n environment:\n - COUCHDB_USER=user\n - COUCHDB_PASSWORD=somepassword\n volumes:\n - ./couchdb/dbdata:/opt/couchdb/data\n - ./couchdb/local.ini:/opt/couchdb/etc/local.ini\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then create initial config at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"./couchdb/local.ini"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"[couchdb]\nsingle_node=true\nmax_document_size=50000000\nmax_http_request_size=4294967296\n\n[chttpd]\nrequire_valid_user = true\n\n[chttpd_auth]\nrequire_valid_user = true\nauthentication_redirect = /_utils/session.html\n\n[httpd]\nWWW-Authenticate = Basic realm=\"couchdb\"\nenable_cors = true\n\n[cors]\norigins = app://obsidian.md,capacitor://localhost,http://localhost\ncredentials = true\nheaders = accept, authorization, content-type, origin, referer\nmethods = GET, PUT, POST, HEAD, DELETE\nmax_age = 3600\n","language":"ini"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"[couchdb]\nsingle_node=true\nmax_document_size=50000000\nmax_http_request_size=4294967296\n\n[chttpd]\nrequire_valid_user = true\n\n[chttpd_auth]\nrequire_valid_user = true\nauthentication_redirect = /_utils/session.html\n\n[httpd]\nWWW-Authenticate = Basic realm=\"couchdb\"\nenable_cors = true\n\n[cors]\norigins = app://obsidian.md,capacitor://localhost,http://localhost\ncredentials = true\nheaders = accept, authorization, content-type, origin, referer\nmethods = GET, PUT, POST, HEAD, DELETE\nmax_age = 3600\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then, in order to have sync on mobile devices, we will need a reverse proxy with nginx at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/nginx/sites-enabled/obsidian-couchdb"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"server {\n listen 80;\n listen [::]:80;\n server_name couchdb.yourhost.com;\n return 301 https://$host$request_uri;\n}\n\nserver {\n listen 443 ssl http2;\n listen [::]:443 ssl http2;\n\n ssl_certificate /etc/letsencrypt/live/yourhost.com/fullchain.pem; # managed by Certbot\n ssl_certificate_key /etc/letsencrypt/live/yourhost.com/privkey.pem; # managed by Certbot\n ssl_trusted_certificate /etc/letsencrypt/live/yourhost.com/chain.pem;\n\n server_name couchdb.yourhost.com;\n client_max_body_size 200M;\n\n location / {\n proxy_redirect off;\n proxy_set_header Host $host;\n proxy_set_header X-Real-IP $remote_addr;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n\n proxy_pass http://127.0.0.1:5984;\n }\n}\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"server {\n listen 80;\n listen [::]:80;\n server_name couchdb.yourhost.com;\n return 301 https://$host$request_uri;\n}\n\nserver {\n listen 443 ssl http2;\n listen [::]:443 ssl http2;\n\n ssl_certificate /etc/letsencrypt/live/yourhost.com/fullchain.pem; # managed by Certbot\n ssl_certificate_key /etc/letsencrypt/live/yourhost.com/privkey.pem; # managed by Certbot\n ssl_trusted_certificate /etc/letsencrypt/live/yourhost.com/chain.pem;\n\n server_name couchdb.yourhost.com;\n client_max_body_size 200M;\n\n location / {\n proxy_redirect off;\n proxy_set_header Host $host;\n proxy_set_header X-Real-IP $remote_addr;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n\n proxy_pass http://127.0.0.1:5984;\n }\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"setting-up-obsidian"},"children":[{"type":"text","value":"Setting up Obsidian"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Install "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Self-hosted LiveSync"}]},{"type":"text","value":" plugin"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Change host to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"https://yourhost.com"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Specify username and password"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Press "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"test"}]},{"type":"text","value":", then "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fetch database"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/vrtmrz/obsidian-livesync","rel":["nofollow"]},"children":[{"type":"text","value":"Main documentation"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/vrtmrz/obsidian-livesync/blob/main/docs/setup_own_server.md","rel":["nofollow"]},"children":[{"type":"text","value":"Setting up couchdb"}]}]}]},{"type":"element","tag":"h2","props":{"id":"setting-up-environment"},"children":[{"type":"text","value":"Setting up environment"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"First, you should create "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docker-compose.yml"}]},{"type":"text","value":" with the following contents:"}]},{"type":"element","tag":"code","props":{"code":"version: '3'\nservices:\n couchserver:\n container_name: obsidian__database\n image: couchdb\n restart: always\n ports:\n - \"5984:5984\"\n environment:\n - COUCHDB_USER=user\n - COUCHDB_PASSWORD=somepassword\n volumes:\n - ./couchdb/dbdata:/opt/couchdb/data\n - ./couchdb/local.ini:/opt/couchdb/etc/local.ini\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1391ae"},"children":[{"type":"text","value":"version"}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-8c9f43"},"children":[{"type":"text","value":"'3'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1391ae"},"children":[{"type":"text","value":"services"}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1391ae"},"children":[{"type":"text","value":"couchserver"}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1391ae"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-8c9f43"},"children":[{"type":"text","value":"obsidian__database"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1391ae"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-8c9f43"},"children":[{"type":"text","value":"couchdb"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1391ae"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-8c9f43"},"children":[{"type":"text","value":"always"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1391ae"},"children":[{"type":"text","value":"ports"}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-8c9f43"},"children":[{"type":"text","value":"\"5984:5984\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1391ae"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-8c9f43"},"children":[{"type":"text","value":"COUCHDB_USER=user"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-8c9f43"},"children":[{"type":"text","value":"COUCHDB_PASSWORD=somepassword"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1391ae"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-8c9f43"},"children":[{"type":"text","value":"./couchdb/dbdata:/opt/couchdb/data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-8c9f43"},"children":[{"type":"text","value":"./couchdb/local.ini:/opt/couchdb/etc/local.ini"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then create initial config at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"./couchdb/local.ini"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"[couchdb]\nsingle_node=true\nmax_document_size=50000000\nmax_http_request_size=4294967296\n\n[chttpd]\nrequire_valid_user = true\n\n[chttpd_auth]\nrequire_valid_user = true\nauthentication_redirect = /_utils/session.html\n\n[httpd]\nWWW-Authenticate = Basic realm=\"couchdb\"\nenable_cors = true\n\n[cors]\norigins = app://obsidian.md,capacitor://localhost,http://localhost\ncredentials = true\nheaders = accept, authorization, content-type, origin, referer\nmethods = GET, PUT, POST, HEAD, DELETE\nmax_age = 3600\n","language":"ini"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"[couchdb]\nsingle_node=true\nmax_document_size=50000000\nmax_http_request_size=4294967296\n\n[chttpd]\nrequire_valid_user = true\n\n[chttpd_auth]\nrequire_valid_user = true\nauthentication_redirect = /_utils/session.html\n\n[httpd]\nWWW-Authenticate = Basic realm=\"couchdb\"\nenable_cors = true\n\n[cors]\norigins = app://obsidian.md,capacitor://localhost,http://localhost\ncredentials = true\nheaders = accept, authorization, content-type, origin, referer\nmethods = GET, PUT, POST, HEAD, DELETE\nmax_age = 3600"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then, in order to have sync on mobile devices, we will need a reverse proxy with nginx at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/nginx/sites-enabled/obsidian-couchdb"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"server {\n listen 80;\n listen [::]:80;\n server_name couchdb.yourhost.com;\n return 301 https://$host$request_uri;\n}\n\nserver {\n listen 443 ssl http2;\n listen [::]:443 ssl http2;\n\n ssl_certificate /etc/letsencrypt/live/yourhost.com/fullchain.pem; # managed by Certbot\n ssl_certificate_key /etc/letsencrypt/live/yourhost.com/privkey.pem; # managed by Certbot\n ssl_trusted_certificate /etc/letsencrypt/live/yourhost.com/chain.pem;\n\n server_name couchdb.yourhost.com;\n client_max_body_size 200M;\n\n location / {\n proxy_redirect off;\n proxy_set_header Host $host;\n proxy_set_header X-Real-IP $remote_addr;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n\n proxy_pass http://127.0.0.1:5984;\n }\n}\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e355da"},"children":[{"type":"text","value":"server"}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b38421"},"children":[{"type":"text","value":" listen "}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":"80;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b38421"},"children":[{"type":"text","value":" listen "}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":"[::]:80;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b38421"},"children":[{"type":"text","value":" server_name "}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":"couchdb.yourhost.com;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b38421"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-54acd4"},"children":[{"type":"text","value":"301"}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" https://"}]},{"type":"element","tag":"span","props":{"class":"ct-f0f5d8"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-6433f1"},"children":[{"type":"text","value":"host"}]},{"type":"element","tag":"span","props":{"class":"ct-f0f5d8"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-6433f1"},"children":[{"type":"text","value":"request_uri"}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e355da"},"children":[{"type":"text","value":"server"}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b38421"},"children":[{"type":"text","value":" listen "}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":"443 ssl http2;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b38421"},"children":[{"type":"text","value":" listen "}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":"[::]:443 ssl http2;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b38421"},"children":[{"type":"text","value":" ssl_certificate "}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":"/etc/letsencrypt/live/yourhost.com/fullchain.pem; "}]},{"type":"element","tag":"span","props":{"class":"ct-18e5d9"},"children":[{"type":"text","value":"# managed by Certbot"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b38421"},"children":[{"type":"text","value":" ssl_certificate_key "}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":"/etc/letsencrypt/live/yourhost.com/privkey.pem; "}]},{"type":"element","tag":"span","props":{"class":"ct-18e5d9"},"children":[{"type":"text","value":"# managed by Certbot"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b38421"},"children":[{"type":"text","value":" ssl_trusted_certificate "}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":"/etc/letsencrypt/live/yourhost.com/chain.pem;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b38421"},"children":[{"type":"text","value":" server_name "}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":"couchdb.yourhost.com;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b38421"},"children":[{"type":"text","value":" client_max_body_size "}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":"200M;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9e8f85"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0804f5"},"children":[{"type":"text","value":"location"}]},{"type":"element","tag":"span","props":{"class":"ct-9e8f85"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0734bb"},"children":[{"type":"text","value":"/ "}]},{"type":"element","tag":"span","props":{"class":"ct-9e8f85"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b38421"},"children":[{"type":"text","value":" proxy_redirect "}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":"off;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b38421"},"children":[{"type":"text","value":" proxy_set_header "}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":"Host "}]},{"type":"element","tag":"span","props":{"class":"ct-f0f5d8"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-6433f1"},"children":[{"type":"text","value":"host"}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b38421"},"children":[{"type":"text","value":" proxy_set_header "}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":"X-Real-IP "}]},{"type":"element","tag":"span","props":{"class":"ct-f0f5d8"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-6433f1"},"children":[{"type":"text","value":"remote_addr"}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b38421"},"children":[{"type":"text","value":" proxy_set_header "}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":"X-Forwarded-For "}]},{"type":"element","tag":"span","props":{"class":"ct-f0f5d8"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-6433f1"},"children":[{"type":"text","value":"proxy_add_x_forwarded_for"}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b38421"},"children":[{"type":"text","value":" proxy_pass "}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":"http://127.0.0.1:5984;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"setting-up-obsidian"},"children":[{"type":"text","value":"Setting up Obsidian"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Install "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Self-hosted LiveSync"}]},{"type":"text","value":" plugin"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Change host to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"https://yourhost.com"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Specify username and password"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Press "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"test"}]},{"type":"text","value":", then "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fetch database"}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-0734bb{color:#FFA657}.ct-0804f5{color:#FF7B72}.ct-9e8f85{color:#C9D1D9}.ct-18e5d9{color:#8B949E}.ct-6433f1{color:#C9D1D9}.ct-f0f5d8{color:#C9D1D9}.ct-54acd4{color:#79C0FF}.ct-b38421{color:#FF7B72}.ct-e355da{color:#FF7B72}.ct-8c9f43{color:#A5D6FF}.ct-39845b{color:#C9D1D9}.ct-1391ae{color:#7EE787}.light .ct-1391ae{color:#268BD2}.light .ct-39845b{color:#657B83}.light .ct-8c9f43{color:#2AA198}.light .ct-e355da{color:#073642}.light .ct-b38421{color:#859900}.light .ct-54acd4{color:#D33682}.light .ct-f0f5d8{color:#859900}.light .ct-6433f1{color:#268BD2}.light .ct-18e5d9{color:#93A1A1}.light .ct-9e8f85{color:#657B83}.light .ct-0804f5{color:#073642}.light .ct-0734bb{color:#657B83}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"setting-up-environment","depth":2,"text":"Setting up environment"},{"id":"setting-up-obsidian","depth":2,"text":"Setting up Obsidian"}]}},"_type":"markdown","_id":"content:Obsidian:Self-hosted Obsidian sync with CouchDB.md","_source":"content","_file":"Obsidian/Self-hosted Obsidian sync with CouchDB.md","_extension":"md"},{"_path":"/sql/mysql-and-mariadb-setup","_dir":"sql","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"MySQL And MariaDB Setup","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"install-mariadb-on-ubuntu-2004-lts"},"children":[{"type":"text","value":"Install MariaDB on Ubuntu 20.04 LTS"}]},{"type":"element","tag":"code","props":{"code":"sudo apt update\nsudo apt install mariadb-server\nsudo mysql_secure_installation\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"sudo apt update\nsudo apt install mariadb-server\nsudo mysql_secure_installation\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"access-database-from-outside"},"children":[{"type":"text","value":"Access Database from outside"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Open "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/mysql/mariadb.conf.d/50-server.cnf"}]},{"type":"text","value":" and change the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"bind-address"}]},{"type":"text","value":" to:"}]},{"type":"element","tag":"code","props":{"code":"...\nbind-address = 0.0.0.0\n...\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"...\nbind-address = 0.0.0.0\n...\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"create-administrative-user"},"children":[{"type":"text","value":"Create Administrative User"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Create a new user "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"newuser"}]},{"type":"text","value":" for the host "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"localhost"}]},{"type":"text","value":" with a new "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"password"}]},{"type":"text","value":":"}]}]},{"type":"element","tag":"code","props":{"code":"CREATE USER 'newuser'@'localhost' IDENTIFIED BY 'password';\n","language":"mysql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"CREATE USER 'newuser'@'localhost' IDENTIFIED BY 'password';\n"}]}]}]},{"type":"element","tag":"ol","props":{"start":2},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Grant all permissions to the new user"}]}]},{"type":"element","tag":"code","props":{"code":"GRANT ALL PRIVILEGES ON * . * TO 'newuser'@'localhost';\n","language":"mysql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"GRANT ALL PRIVILEGES ON * . * TO 'newuser'@'localhost';\n"}]}]}]},{"type":"element","tag":"ol","props":{"start":3},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Update permissions"}]}]},{"type":"element","tag":"code","props":{"code":"FLUSH PRIVILEGES;\n","language":"mysql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"FLUSH PRIVILEGES;\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"install-mariadb-on-ubuntu-2004-lts"},"children":[{"type":"text","value":"Install MariaDB on Ubuntu 20.04 LTS"}]},{"type":"element","tag":"code","props":{"code":"sudo apt update\nsudo apt install mariadb-server\nsudo mysql_secure_installation\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-90435d"},"children":[{"type":"text","value":"sudo apt update"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-90435d"},"children":[{"type":"text","value":"sudo apt install mariadb-server"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-90435d"},"children":[{"type":"text","value":"sudo mysql_secure_installation"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"access-database-from-outside"},"children":[{"type":"text","value":"Access Database from outside"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Open "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/mysql/mariadb.conf.d/50-server.cnf"}]},{"type":"text","value":" and change the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"bind-address"}]},{"type":"text","value":" to:"}]},{"type":"element","tag":"code","props":{"code":"...\nbind-address = 0.0.0.0\n...\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-90435d"},"children":[{"type":"text","value":"..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-90435d"},"children":[{"type":"text","value":"bind-"}]},{"type":"element","tag":"span","props":{"class":"ct-dc41b2"},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"span","props":{"class":"ct-90435d"},"children":[{"type":"text","value":" = 0.0.0.0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-90435d"},"children":[{"type":"text","value":"..."}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"create-administrative-user"},"children":[{"type":"text","value":"Create Administrative User"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Create a new user "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"newuser"}]},{"type":"text","value":" for the host "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"localhost"}]},{"type":"text","value":" with a new "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"password"}]},{"type":"text","value":":"}]}]},{"type":"element","tag":"code","props":{"code":"CREATE USER 'newuser'@'localhost' IDENTIFIED BY 'password';\n","language":"mysql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"CREATE USER 'newuser'@'localhost' IDENTIFIED BY 'password';"}]}]}]}]}]},{"type":"element","tag":"ol","props":{"start":2},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Grant all permissions to the new user"}]}]},{"type":"element","tag":"code","props":{"code":"GRANT ALL PRIVILEGES ON * . * TO 'newuser'@'localhost';\n","language":"mysql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"GRANT ALL PRIVILEGES ON * . * TO 'newuser'@'localhost';"}]}]}]}]}]},{"type":"element","tag":"ol","props":{"start":3},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Update permissions"}]}]},{"type":"element","tag":"code","props":{"code":"FLUSH PRIVILEGES;\n","language":"mysql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"FLUSH PRIVILEGES;"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-dc41b2{color:#FF7B72}.ct-90435d{color:#C9D1D9}.light .ct-90435d{color:#657B83}.light .ct-dc41b2{color:#859900}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"install-mariadb-on-ubuntu-2004-lts","depth":2,"text":"Install MariaDB on Ubuntu 20.04 LTS"},{"id":"access-database-from-outside","depth":2,"text":"Access Database from outside"},{"id":"create-administrative-user","depth":2,"text":"Create Administrative User"}]}},"_type":"markdown","_id":"content:SQL:MySQL and MariaDB setup.md","_source":"content","_file":"SQL/MySQL and MariaDB setup.md","_extension":"md"},{"_path":"/sql/postgress-setup","_dir":"sql","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Postgress Setup","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"install-postgresql-12-on-ubuntu-2004-lts"},"children":[{"type":"text","value":"Install PostgreSQL 12 on Ubuntu 20.04 LTS"}]},{"type":"element","tag":"code","props":{"code":"sudo apt update\nsudo apt install -y postgresql postgresql-contrib postgresql-client\nsudo systemctl status postgresql.service\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"sudo apt update\nsudo apt install -y postgresql postgresql-contrib postgresql-client\nsudo systemctl status postgresql.service\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"initial-database-connection"},"children":[{"type":"text","value":"Initial database connection"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A local connection (from the database server) can be done by the following command:"}]},{"type":"element","tag":"code","props":{"code":"sudo -u postgres psql\n\npsql (12.12 (Ubuntu 12.12-0ubuntu0.20.04.1))\nType \"help\" for help.\n\npostgres=#\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"sudo -u postgres psql\n\npsql (12.12 (Ubuntu 12.12-0ubuntu0.20.04.1))\nType \"help\" for help.\n\npostgres=#\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"set-password-for-postgres-database-user"},"children":[{"type":"text","value":"Set password for postgres database user"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The password for the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"postgres"}]},{"type":"text","value":" database user can be set the the quick command "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"\\password"}]},{"type":"text","value":"\nor by "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"alter user postgres password 'Supersecret'"}]},{"type":"text","value":". A connection using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"postgres"}]},{"type":"text","value":" user\nis still not possible from the \"outside\" hence to the default settings in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pg_hba.conf"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"update-pg_hbaconf-to-allow-postgres-user-connections-with-password"},"children":[{"type":"text","value":"Update pg_hba.conf to allow postgres user connections with password"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In order to allow connections of the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"postgres"}]},{"type":"text","value":" database user not using OS user\nauthentication, you have to update the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pg_hba.conf"}]},{"type":"text","value":" which can be found under\n"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/postgresql/12/main/pg_hba.conf"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"sudo vi /etc/postgresql/12/main/pg_hba.conf\n\n...\nlocal all postgres peer\n...\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"sudo vi /etc/postgresql/12/main/pg_hba.conf\n\n...\nlocal all postgres peer\n...\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Change the last section of the above line to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"md5"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"local all postgres md5\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"local all postgres md5\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A restart is required in order to apply the new configuration:"}]},{"type":"element","tag":"code","props":{"code":"sudo systemctl restart postgresql\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"sudo systemctl restart postgresql\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Now a connection from outside the database host is possible e.g."}]},{"type":"element","tag":"code","props":{"code":"psql -U postgres -d postgres -h databasehostname\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"psql -U postgres -d postgres -h databasehostname\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"creation-of-additional-database-users"},"children":[{"type":"text","value":"Creation of additional database users"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A database user can be created by the following command:"}]},{"type":"element","tag":"code","props":{"code":"create user myuser with encrypted password 'Supersecret';\nCREATE ROLE\n\npostgres=# \\du\n List of roles\n Role name | Attributes | Member of\n-----------+------------------------------------------------------------+-----------\n myuser | | {}\n postgres | Superuser, Create role, Create DB, Replication, Bypass RLS | {}\n","language":"sql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"create user myuser with encrypted password 'Supersecret';\nCREATE ROLE\n\npostgres=# \\du\n List of roles\n Role name | Attributes | Member of\n-----------+------------------------------------------------------------+-----------\n myuser | | {}\n postgres | Superuser, Create role, Create DB, Replication, Bypass RLS | {}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"creation-of-additional-databases"},"children":[{"type":"text","value":"Creation of additional databases"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"One can create new Postgres databases within an instance. Therefore you can use the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"psql"}]},{"type":"text","value":"\ncommand to login (see above)."}]},{"type":"element","tag":"code","props":{"code":"CREATE DATABASE dbname OWNER myuser;\nCREATE DATABASE\n\npostgres=# \\l\n List of databases\n Name | Owner | Encoding | Collate | Ctype | Access privileges\n-----------+----------+----------+-------------+-------------+-----------------------\n dbname | myuser | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n postgres | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n template0 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c/postgres +\n | | | | | postgres=CTc/postgres\n template1 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c/postgres +\n | | | | | postgres=CTc/postgres\n","language":"sql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"CREATE DATABASE dbname OWNER myuser;\nCREATE DATABASE\n\npostgres=# \\l\n List of databases\n Name | Owner | Encoding | Collate | Ctype | Access privileges\n-----------+----------+----------+-------------+-------------+-----------------------\n dbname | myuser | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n postgres | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n template0 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c/postgres +\n | | | | | postgres=CTc/postgres\n template1 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c/postgres +\n | | | | | postgres=CTc/postgres\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can leave the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"OWNER"}]},{"type":"text","value":" section of the command, when doing so, the current user will become\nowner of the newly created database."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To change the owner of an existing database later, you can use the following command:"}]},{"type":"element","tag":"code","props":{"code":"postgres=# alter database dbname owner to myuser;\nALTER DATABASE\n","language":"sql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"postgres=# alter database dbname owner to myuser;\nALTER DATABASE\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"install-postgresql-12-on-ubuntu-2004-lts"},"children":[{"type":"text","value":"Install PostgreSQL 12 on Ubuntu 20.04 LTS"}]},{"type":"element","tag":"code","props":{"code":"sudo apt update\nsudo apt install -y postgresql postgresql-contrib postgresql-client\nsudo systemctl status postgresql.service\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b382d3"},"children":[{"type":"text","value":"sudo apt update"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b382d3"},"children":[{"type":"text","value":"sudo apt install -y postgresql postgresql-contrib postgresql-client"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b382d3"},"children":[{"type":"text","value":"sudo systemctl status postgresql.service"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"initial-database-connection"},"children":[{"type":"text","value":"Initial database connection"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A local connection (from the database server) can be done by the following command:"}]},{"type":"element","tag":"code","props":{"code":"sudo -u postgres psql\n\npsql (12.12 (Ubuntu 12.12-0ubuntu0.20.04.1))\nType \"help\" for help.\n\npostgres=#\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b382d3"},"children":[{"type":"text","value":"sudo -u postgres psql"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b382d3"},"children":[{"type":"text","value":"psql (12.12 (Ubuntu 12.12-0ubuntu0.20.04.1))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b382d3"},"children":[{"type":"text","value":"Type "}]},{"type":"element","tag":"span","props":{"class":"ct-3c3be0"},"children":[{"type":"text","value":"\"help\""}]},{"type":"element","tag":"span","props":{"class":"ct-b382d3"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-99cc06"},"children":[{"type":"text","value":"for"}]},{"type":"element","tag":"span","props":{"class":"ct-b382d3"},"children":[{"type":"text","value":" help."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b382d3"},"children":[{"type":"text","value":"postgres="}]},{"type":"element","tag":"span","props":{"class":"ct-6808e5"},"children":[{"type":"text","value":"#"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"set-password-for-postgres-database-user"},"children":[{"type":"text","value":"Set password for postgres database user"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The password for the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"postgres"}]},{"type":"text","value":" database user can be set the the quick command "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"\\password"}]},{"type":"text","value":"\nor by "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"alter user postgres password 'Supersecret'"}]},{"type":"text","value":". A connection using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"postgres"}]},{"type":"text","value":" user\nis still not possible from the \"outside\" hence to the default settings in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pg_hba.conf"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"update-pg_hbaconf-to-allow-postgres-user-connections-with-password"},"children":[{"type":"text","value":"Update pg_hba.conf to allow postgres user connections with password"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In order to allow connections of the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"postgres"}]},{"type":"text","value":" database user not using OS user\nauthentication, you have to update the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pg_hba.conf"}]},{"type":"text","value":" which can be found under\n"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/postgresql/12/main/pg_hba.conf"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"sudo vi /etc/postgresql/12/main/pg_hba.conf\n\n...\nlocal all postgres peer\n...\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b382d3"},"children":[{"type":"text","value":"sudo vi /etc/postgresql/12/main/pg_hba.conf"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b382d3"},"children":[{"type":"text","value":"..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-51dc37"},"children":[{"type":"text","value":"local"}]},{"type":"element","tag":"span","props":{"class":"ct-b382d3"},"children":[{"type":"text","value":" all postgres peer"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b382d3"},"children":[{"type":"text","value":"..."}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Change the last section of the above line to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"md5"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"local all postgres md5\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"local all postgres md5"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A restart is required in order to apply the new configuration:"}]},{"type":"element","tag":"code","props":{"code":"sudo systemctl restart postgresql\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b382d3"},"children":[{"type":"text","value":"sudo systemctl restart postgresql"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Now a connection from outside the database host is possible e.g."}]},{"type":"element","tag":"code","props":{"code":"psql -U postgres -d postgres -h databasehostname\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b382d3"},"children":[{"type":"text","value":"psql -U postgres -d postgres -h databasehostname"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"creation-of-additional-database-users"},"children":[{"type":"text","value":"Creation of additional database users"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A database user can be created by the following command:"}]},{"type":"element","tag":"code","props":{"code":"create user myuser with encrypted password 'Supersecret';\nCREATE ROLE\n\npostgres=# \\du\n List of roles\n Role name | Attributes | Member of\n-----------+------------------------------------------------------------+-----------\n myuser | | {}\n postgres | Superuser, Create role, Create DB, Replication, Bypass RLS | {}\n","language":"sql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"create user myuser with encrypted password 'Supersecret';\nCREATE ROLE\n\npostgres=# \\du\n List of roles\n Role name | Attributes | Member of\n-----------+------------------------------------------------------------+-----------\n myuser | | {}\n postgres | Superuser, Create role, Create DB, Replication, Bypass RLS | {}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"creation-of-additional-databases"},"children":[{"type":"text","value":"Creation of additional databases"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"One can create new Postgres databases within an instance. Therefore you can use the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"psql"}]},{"type":"text","value":"\ncommand to login (see above)."}]},{"type":"element","tag":"code","props":{"code":"CREATE DATABASE dbname OWNER myuser;\nCREATE DATABASE\n\npostgres=# \\l\n List of databases\n Name | Owner | Encoding | Collate | Ctype | Access privileges\n-----------+----------+----------+-------------+-------------+-----------------------\n dbname | myuser | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n postgres | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n template0 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c/postgres +\n | | | | | postgres=CTc/postgres\n template1 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c/postgres +\n | | | | | postgres=CTc/postgres\n","language":"sql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"CREATE DATABASE dbname OWNER myuser;\nCREATE DATABASE\n\npostgres=# \\l\n List of databases\n Name | Owner | Encoding | Collate | Ctype | Access privileges\n-----------+----------+----------+-------------+-------------+-----------------------\n dbname | myuser | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n postgres | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n template0 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c/postgres +\n | | | | | postgres=CTc/postgres\n template1 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c/postgres +\n | | | | | postgres=CTc/postgres"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can leave the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"OWNER"}]},{"type":"text","value":" section of the command, when doing so, the current user will become\nowner of the newly created database."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To change the owner of an existing database later, you can use the following command:"}]},{"type":"element","tag":"code","props":{"code":"postgres=# alter database dbname owner to myuser;\nALTER DATABASE\n","language":"sql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"postgres=# alter database dbname owner to myuser;\nALTER DATABASE"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-51dc37{color:#FF7B72}.ct-6808e5{color:#8B949E}.ct-99cc06{color:#FF7B72}.ct-3c3be0{color:#A5D6FF}.ct-b382d3{color:#C9D1D9}.light .ct-b382d3{color:#657B83}.light .ct-3c3be0{color:#2AA198}.light .ct-99cc06{color:#859900}.light .ct-6808e5{color:#93A1A1}.light .ct-51dc37{color:#073642}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"install-postgresql-12-on-ubuntu-2004-lts","depth":2,"text":"Install PostgreSQL 12 on Ubuntu 20.04 LTS"},{"id":"initial-database-connection","depth":2,"text":"Initial database connection"},{"id":"set-password-for-postgres-database-user","depth":2,"text":"Set password for postgres database user","children":[{"id":"update-pg_hbaconf-to-allow-postgres-user-connections-with-password","depth":3,"text":"Update pg_hba.conf to allow postgres user connections with password"}]},{"id":"creation-of-additional-database-users","depth":2,"text":"Creation of additional database users"},{"id":"creation-of-additional-databases","depth":2,"text":"Creation of additional databases"}]}},"_type":"markdown","_id":"content:SQL:Postgress setup.md","_source":"content","_file":"SQL/Postgress setup.md","_extension":"md"},{"_path":"/typescript/add-global-variable-to-window","_dir":"typescript","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Add Global Variable To Window","description":"Sometimes you want to add global variable to your window. That thing's called global module augmentation.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes you want to add global variable to your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window"}]},{"type":"text","value":". That thing's called "},{"type":"element","tag":"a","props":{"href":"https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation","rel":["nofollow"]},"children":[{"type":"text","value":"global module augmentation"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Say you need to call "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window.doFancyThings()"}]},{"type":"text","value":". For that you should augment global "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window"}]},{"type":"text","value":" interface in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"*.d.ts"}]},{"type":"text","value":" file:"}]},{"type":"element","tag":"code","props":{"code":"declare global {\n interface Window {\n doFancyThings: () => void;\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"declare global {\n interface Window {\n doFancyThings: () => void;\n }\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is useful for declaring global "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window.ethereum"}]},{"type":"text","value":" (or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window.web3"}]},{"type":"text","value":") in "},{"type":"element","tag":"a","props":{"href":"/blockchain/Common%20typescript%20examples"},"children":[{"type":"text","value":"blockchain"}]},{"type":"text","value":" projects with typescript, which use wallet browser extensions."}]},{"type":"element","tag":"h2","props":{"id":"augmenting-existing-interface"},"children":[{"type":"text","value":"Augmenting existing interface"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, you have class "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Sample"}]},{"type":"text","value":" without any functionality:"}]},{"type":"element","tag":"code","props":{"code":"// Sample.ts\n\nexport class Sample {\n // nothing :-)\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// Sample.ts\n\nexport class Sample {\n // nothing :-)\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then you want extend it with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"doFancyThings()"}]},{"type":"text","value":" method. That can be achieved with said "},{"type":"element","tag":"a","props":{"href":"https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation","rel":["nofollow"]},"children":[{"type":"text","value":"module augmentation"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"// fancyThings.ts\nimport { Sample } from \"./Sample\";\n\ndeclare module \"./Sample\" {\n interface Sample {\n doFancyThings: () => void;\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// fancyThings.ts\nimport { Sample } from \"./Sample\";\n\ndeclare module \"./Sample\" {\n interface Sample {\n doFancyThings: () => void;\n }\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Now you can call "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sample.doFancyThings()"}]},{"type":"text","value":" by importing both "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".ts"}]},{"type":"text","value":" files:"}]},{"type":"element","tag":"code","props":{"code":"import { Sample } from \"./sample\";\nimport \"./fancyThings\";\n\nconst sample = new Sample();\nsample.doFancyThings(); // ok\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { Sample } from \"./sample\";\nimport \"./fancyThings\";\n\nconst sample = new Sample();\nsample.doFancyThings(); // ok\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This example is useful for "},{"type":"element","tag":"a","props":{"href":"./Frontend/Vue/Adding%20global%20properties%20to%20component"},"children":[{"type":"text","value":"adding global properties to component"}]},{"type":"text","value":" in vue.js."}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes you want to add global variable to your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window"}]},{"type":"text","value":". That thing's called "},{"type":"element","tag":"a","props":{"href":"https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation","rel":["nofollow"]},"children":[{"type":"text","value":"global module augmentation"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Say you need to call "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window.doFancyThings()"}]},{"type":"text","value":". For that you should augment global "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window"}]},{"type":"text","value":" interface in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"*.d.ts"}]},{"type":"text","value":" file:"}]},{"type":"element","tag":"code","props":{"code":"declare global {\n interface Window {\n doFancyThings: () => void;\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-05d7fc"},"children":[{"type":"text","value":"declare"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4278e1"},"children":[{"type":"text","value":"global"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-05d7fc"},"children":[{"type":"text","value":"interface"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-24d477"},"children":[{"type":"text","value":"Window"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-233ec4"},"children":[{"type":"text","value":"doFancyThings"}]},{"type":"element","tag":"span","props":{"class":"ct-c7b69f"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-05d7fc"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0b4a2b"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is useful for declaring global "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window.ethereum"}]},{"type":"text","value":" (or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window.web3"}]},{"type":"text","value":") in "},{"type":"element","tag":"a","props":{"href":"/blockchain/Common%20typescript%20examples"},"children":[{"type":"text","value":"blockchain"}]},{"type":"text","value":" projects with typescript, which use wallet browser extensions."}]},{"type":"element","tag":"h2","props":{"id":"augmenting-existing-interface"},"children":[{"type":"text","value":"Augmenting existing interface"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, you have class "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Sample"}]},{"type":"text","value":" without any functionality:"}]},{"type":"element","tag":"code","props":{"code":"// Sample.ts\n\nexport class Sample {\n // nothing :-)\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-efa672"},"children":[{"type":"text","value":"// Sample.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c7b69f"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-05d7fc"},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-24d477"},"children":[{"type":"text","value":"Sample"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-efa672"},"children":[{"type":"text","value":"// nothing :-)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then you want extend it with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"doFancyThings()"}]},{"type":"text","value":" method. That can be achieved with said "},{"type":"element","tag":"a","props":{"href":"https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation","rel":["nofollow"]},"children":[{"type":"text","value":"module augmentation"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"// fancyThings.ts\nimport { Sample } from \"./Sample\";\n\ndeclare module \"./Sample\" {\n interface Sample {\n doFancyThings: () => void;\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-efa672"},"children":[{"type":"text","value":"// fancyThings.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c7b69f"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-4278e1"},"children":[{"type":"text","value":"Sample"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-c7b69f"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d12e32"},"children":[{"type":"text","value":"\"./Sample\""}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-05d7fc"},"children":[{"type":"text","value":"declare"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-05d7fc"},"children":[{"type":"text","value":"module"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d12e32"},"children":[{"type":"text","value":"\"./Sample\""}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-05d7fc"},"children":[{"type":"text","value":"interface"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-24d477"},"children":[{"type":"text","value":"Sample"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-233ec4"},"children":[{"type":"text","value":"doFancyThings"}]},{"type":"element","tag":"span","props":{"class":"ct-c7b69f"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-05d7fc"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0b4a2b"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Now you can call "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sample.doFancyThings()"}]},{"type":"text","value":" by importing both "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".ts"}]},{"type":"text","value":" files:"}]},{"type":"element","tag":"code","props":{"code":"import { Sample } from \"./sample\";\nimport \"./fancyThings\";\n\nconst sample = new Sample();\nsample.doFancyThings(); // ok\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c7b69f"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-4278e1"},"children":[{"type":"text","value":"Sample"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-c7b69f"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d12e32"},"children":[{"type":"text","value":"\"./sample\""}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c7b69f"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d12e32"},"children":[{"type":"text","value":"\"./fancyThings\""}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-05d7fc"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f10d77"},"children":[{"type":"text","value":"sample"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7b69f"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7b69f"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-233ec4"},"children":[{"type":"text","value":"Sample"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4278e1"},"children":[{"type":"text","value":"sample"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-233ec4"},"children":[{"type":"text","value":"doFancyThings"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":"(); "}]},{"type":"element","tag":"span","props":{"class":"ct-efa672"},"children":[{"type":"text","value":"// ok"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This example is useful for "},{"type":"element","tag":"a","props":{"href":"./Frontend/Vue/Adding%20global%20properties%20to%20component"},"children":[{"type":"text","value":"adding global properties to component"}]},{"type":"text","value":" in vue.js."}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-f10d77{color:#79C0FF}.ct-d12e32{color:#A5D6FF}.ct-efa672{color:#8B949E}.ct-0b4a2b{color:#79C0FF}.ct-c7b69f{color:#FF7B72}.ct-233ec4{color:#D2A8FF}.ct-24d477{color:#FFA657}.ct-4278e1{color:#C9D1D9}.ct-b2c08f{color:#C9D1D9}.ct-05d7fc{color:#FF7B72}.light .ct-05d7fc{color:#073642}.light .ct-b2c08f{color:#657B83}.light .ct-4278e1{color:#268BD2}.light .ct-24d477{color:#268BD2}.light .ct-233ec4{color:#268BD2}.light .ct-c7b69f{color:#859900}.light .ct-0b4a2b{color:#859900}.light .ct-efa672{color:#93A1A1}.light .ct-d12e32{color:#2AA198}.light .ct-f10d77{color:#268BD2}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"augmenting-existing-interface","depth":2,"text":"Augmenting existing interface"}]}},"_type":"markdown","_id":"content:Typescript:Add global variable to window.md","_source":"content","_file":"Typescript/Add global variable to window.md","_extension":"md"},{"_path":"/typescript/flatten-object-with-periods","_dir":"typescript","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Flatten Object With Periods","description":"This helper generates Typescript types for i18n dictionary json\nfiles by flattening it with period delimiter. Supports plural forms.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This helper generates Typescript types for i18n dictionary json\nfiles by flattening it with period delimiter. Supports plural forms."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Used for typing "},{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/i18n-js","rel":["nofollow"]},"children":[{"type":"text","value":"i18n.js"}]},{"type":"text","value":" dictionaries;"}]},{"type":"element","tag":"code","props":{"code":"import en from './en.json';\ntype TranslationPath = Flatten<typeof en>;\n\nconst t = (key: TranslationPath, options?: TranslateOptions) =>\n I18nLib.t(key, options);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import en from './en.json';\ntype TranslationPath = Flatten<typeof en>;\n\nconst t = (key: TranslationPath, options?: TranslateOptions) =>\n I18nLib.t(key, options);\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Flatten type defined here:"}]},{"type":"element","tag":"code","props":{"code":"// This one based on answer from StackOverflow:\n// https://stackoverflow.com/questions/58434389/typescript-deep-keyof-of-a-nested-object\n\nexport type Flatten<T, D extends number = 5> = [D] extends [never]\n ? never\n : T extends PluralForm // plural object\n ? ''\n : T extends object\n ? { [K in keyof T]-?: Join<K, Flatten<T[K], Prev[D]>> }[keyof T]\n : '';\n\n// Fix it for you plural form\ntype PluralForm = Record<'one' | 'few' | 'many', string>;\n\ntype Join<K, P> = K extends string | number\n ? P extends string | number\n ? `${K}${'' extends P ? '' : '.'}${P}`\n : never\n : never;\n\ntype Prev = [never, 0, 1, 2, 3, 4, 5, ...Array<0>];\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// This one based on answer from StackOverflow:\n// https://stackoverflow.com/questions/58434389/typescript-deep-keyof-of-a-nested-object\n\nexport type Flatten<T, D extends number = 5> = [D] extends [never]\n ? never\n : T extends PluralForm // plural object\n ? ''\n : T extends object\n ? { [K in keyof T]-?: Join<K, Flatten<T[K], Prev[D]>> }[keyof T]\n : '';\n\n// Fix it for you plural form\ntype PluralForm = Record<'one' | 'few' | 'many', string>;\n\ntype Join<K, P> = K extends string | number\n ? P extends string | number\n ? `${K}${'' extends P ? '' : '.'}${P}`\n : never\n : never;\n\ntype Prev = [never, 0, 1, 2, 3, 4, 5, ...Array<0>];\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This helper generates Typescript types for i18n dictionary json\nfiles by flattening it with period delimiter. Supports plural forms."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Used for typing "},{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/i18n-js","rel":["nofollow"]},"children":[{"type":"text","value":"i18n.js"}]},{"type":"text","value":" dictionaries;"}]},{"type":"element","tag":"code","props":{"code":"import en from './en.json';\ntype TranslationPath = Flatten<typeof en>;\n\nconst t = (key: TranslationPath, options?: TranslateOptions) =>\n I18nLib.t(key, options);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3f0312"},"children":[{"type":"text","value":"en"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74c656"},"children":[{"type":"text","value":"'./en.json'"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c090db"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"TranslationPath"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"Flatten"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"typeof"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3f0312"},"children":[{"type":"text","value":"en"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":">;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d264cd"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-5dcb62"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c6ad8a"},"children":[{"type":"text","value":"t"}]},{"type":"element","tag":"span","props":{"class":"ct-5dcb62"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5fbc13"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5dcb62"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-e22ae2"},"children":[{"type":"text","value":"key"}]},{"type":"element","tag":"span","props":{"class":"ct-5fbc13"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-5dcb62"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4d3d51"},"children":[{"type":"text","value":"TranslationPath"}]},{"type":"element","tag":"span","props":{"class":"ct-5dcb62"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-e22ae2"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-5fbc13"},"children":[{"type":"text","value":"?:"}]},{"type":"element","tag":"span","props":{"class":"ct-5dcb62"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4d3d51"},"children":[{"type":"text","value":"TranslateOptions"}]},{"type":"element","tag":"span","props":{"class":"ct-5dcb62"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-d264cd"},"children":[{"type":"text","value":"=>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3f0312"},"children":[{"type":"text","value":"I18nLib"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8a9924"},"children":[{"type":"text","value":"t"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-3f0312"},"children":[{"type":"text","value":"key"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-3f0312"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":");"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Flatten type defined here:"}]},{"type":"element","tag":"code","props":{"code":"// This one based on answer from StackOverflow:\n// https://stackoverflow.com/questions/58434389/typescript-deep-keyof-of-a-nested-object\n\nexport type Flatten<T, D extends number = 5> = [D] extends [never]\n ? never\n : T extends PluralForm // plural object\n ? ''\n : T extends object\n ? { [K in keyof T]-?: Join<K, Flatten<T[K], Prev[D]>> }[keyof T]\n : '';\n\n// Fix it for you plural form\ntype PluralForm = Record<'one' | 'few' | 'many', string>;\n\ntype Join<K, P> = K extends string | number\n ? P extends string | number\n ? `${K}${'' extends P ? '' : '.'}${P}`\n : never\n : never;\n\ntype Prev = [never, 0, 1, 2, 3, 4, 5, ...Array<0>];\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a6611a"},"children":[{"type":"text","value":"// This one based on answer from StackOverflow:"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a6611a"},"children":[{"type":"text","value":"// https://stackoverflow.com/questions/58434389/typescript-deep-keyof-of-a-nested-object"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c090db"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"Flatten"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"T"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"D"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c090db"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63cd70"},"children":[{"type":"text","value":"number"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8a38d6"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"D"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"] "}]},{"type":"element","tag":"span","props":{"class":"ct-c090db"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"class":"ct-63cd70"},"children":[{"type":"text","value":"never"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63cd70"},"children":[{"type":"text","value":"never"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"T"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c090db"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"PluralForm"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a6611a"},"children":[{"type":"text","value":"// plural object"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74c656"},"children":[{"type":"text","value":"''"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"T"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c090db"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63cd70"},"children":[{"type":"text","value":"object"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" { ["}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"K"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"in"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"keyof"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"T"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"]"}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"-?:"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"Join"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"K"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"Flatten"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"T"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"K"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"], "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"Prev"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"D"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"]>> }["}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"keyof"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"T"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74c656"},"children":[{"type":"text","value":"''"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a6611a"},"children":[{"type":"text","value":"// Fix it for you plural form"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c090db"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"PluralForm"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"Record"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-74c656"},"children":[{"type":"text","value":"'one'"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74c656"},"children":[{"type":"text","value":"'few'"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74c656"},"children":[{"type":"text","value":"'many'"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-63cd70"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":">;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c090db"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"Join"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"K"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"P"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"K"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c090db"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63cd70"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63cd70"},"children":[{"type":"text","value":"number"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"P"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c090db"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63cd70"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63cd70"},"children":[{"type":"text","value":"number"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74c656"},"children":[{"type":"text","value":"`${"}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"K"}]},{"type":"element","tag":"span","props":{"class":"ct-74c656"},"children":[{"type":"text","value":"}${''"}]},{"type":"element","tag":"span","props":{"class":"ct-efb878"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c090db"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-efb878"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"P"}]},{"type":"element","tag":"span","props":{"class":"ct-efb878"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"class":"ct-efb878"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74c656"},"children":[{"type":"text","value":"''"}]},{"type":"element","tag":"span","props":{"class":"ct-efb878"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-efb878"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74c656"},"children":[{"type":"text","value":"'.'}${"}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"P"}]},{"type":"element","tag":"span","props":{"class":"ct-74c656"},"children":[{"type":"text","value":"}`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63cd70"},"children":[{"type":"text","value":"never"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63cd70"},"children":[{"type":"text","value":"never"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c090db"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"Prev"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"class":"ct-63cd70"},"children":[{"type":"text","value":"never"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-8a38d6"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-8a38d6"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-8a38d6"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-8a38d6"},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-8a38d6"},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-8a38d6"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"Array"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-8a38d6"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":">];"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-efb878{color:#A5D6FF}.ct-8a38d6{color:#79C0FF}.ct-63cd70{color:#79C0FF}.ct-a6611a{color:#8B949E}.ct-8a9924{color:#D2A8FF}.ct-4d3d51{color:#FFA657}.ct-e22ae2{color:#FFA657}.ct-5fbc13{color:#FF7B72}.ct-c6ad8a{color:#D2A8FF}.ct-5dcb62{color:#C9D1D9}.ct-d264cd{color:#FF7B72}.ct-e066a0{color:#FFA657}.ct-c090db{color:#FF7B72}.ct-74c656{color:#A5D6FF}.ct-3f0312{color:#C9D1D9}.ct-045bab{color:#C9D1D9}.ct-27117c{color:#FF7B72}.light .ct-27117c{color:#859900}.light .ct-045bab{color:#657B83}.light .ct-3f0312{color:#268BD2}.light .ct-74c656{color:#2AA198}.light .ct-c090db{color:#073642}.light .ct-e066a0{color:#268BD2}.light .ct-d264cd{color:#073642}.light .ct-5dcb62{color:#657B83}.light .ct-c6ad8a{color:#268BD2}.light .ct-5fbc13{color:#859900}.light .ct-e22ae2{color:#657B83}.light .ct-4d3d51{color:#268BD2}.light .ct-8a9924{color:#268BD2}.light .ct-a6611a{color:#93A1A1}.light .ct-63cd70{color:#859900}.light .ct-8a38d6{color:#D33682}.light .ct-efb878{color:#657B83}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Typescript:Flatten object with periods.md","_source":"content","_file":"Typescript/Flatten object with periods.md","_extension":"md"},{"_path":"/typescript/type-guards","_dir":"typescript","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Type Guards","description":"Useful for type checking at compile and run time:","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Useful for type checking at compile and run time:"}]},{"type":"element","tag":"code","props":{"code":"function isFish(pet: Fish | Bird): pet is Fish {\n return (pet as Fish).swim !== undefined;\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"function isFish(pet: Fish | Bird): pet is Fish {\n return (pet as Fish).swim !== undefined;\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Usage:"}]},{"type":"element","tag":"code","props":{"code":"const pet = getSmallPet();\n \nif (isFish(pet)) {\n pet.swim();\n} else {\n pet.fly();\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const pet = getSmallPet();\n \nif (isFish(pet)) {\n pet.swim();\n} else {\n pet.fly();\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Useful for type checking at compile and run time:"}]},{"type":"element","tag":"code","props":{"code":"function isFish(pet: Fish | Bird): pet is Fish {\n return (pet as Fish).swim !== undefined;\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bfd8bd"},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"class":"ct-290d98"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9d85c0"},"children":[{"type":"text","value":"isFish"}]},{"type":"element","tag":"span","props":{"class":"ct-290d98"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7b800"},"children":[{"type":"text","value":"pet"}]},{"type":"element","tag":"span","props":{"class":"ct-0b2270"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-290d98"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3da1c5"},"children":[{"type":"text","value":"Fish"}]},{"type":"element","tag":"span","props":{"class":"ct-290d98"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0b2270"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-290d98"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3da1c5"},"children":[{"type":"text","value":"Bird"}]},{"type":"element","tag":"span","props":{"class":"ct-290d98"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-0b2270"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-290d98"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7b800"},"children":[{"type":"text","value":"pet"}]},{"type":"element","tag":"span","props":{"class":"ct-290d98"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0b2270"},"children":[{"type":"text","value":"is"}]},{"type":"element","tag":"span","props":{"class":"ct-290d98"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3da1c5"},"children":[{"type":"text","value":"Fish"}]},{"type":"element","tag":"span","props":{"class":"ct-290d98"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0d6f0f"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-3c6b43"},"children":[{"type":"text","value":"pet"}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0d6f0f"},"children":[{"type":"text","value":"as"}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8dc141"},"children":[{"type":"text","value":"Fish"}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"class":"ct-3c6b43"},"children":[{"type":"text","value":"swim"}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0d6f0f"},"children":[{"type":"text","value":"!=="}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d9c4d"},"children":[{"type":"text","value":"undefined"}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Usage:"}]},{"type":"element","tag":"code","props":{"code":"const pet = getSmallPet();\n \nif (isFish(pet)) {\n pet.swim();\n} else {\n pet.fly();\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1cc30b"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b63305"},"children":[{"type":"text","value":"pet"}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0d6f0f"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0e947f"},"children":[{"type":"text","value":"getSmallPet"}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0d6f0f"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-0e947f"},"children":[{"type":"text","value":"isFish"}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-3c6b43"},"children":[{"type":"text","value":"pet"}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":")) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3c6b43"},"children":[{"type":"text","value":"pet"}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-0e947f"},"children":[{"type":"text","value":"swim"}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":"} "}]},{"type":"element","tag":"span","props":{"class":"ct-0d6f0f"},"children":[{"type":"text","value":"else"}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3c6b43"},"children":[{"type":"text","value":"pet"}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-0e947f"},"children":[{"type":"text","value":"fly"}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-0e947f{color:#D2A8FF}.ct-b63305{color:#79C0FF}.ct-1cc30b{color:#FF7B72}.ct-7d9c4d{color:#79C0FF}.ct-8dc141{color:#FFA657}.ct-3c6b43{color:#C9D1D9}.ct-0d6f0f{color:#FF7B72}.ct-9b249b{color:#C9D1D9}.ct-3da1c5{color:#FFA657}.ct-0b2270{color:#FF7B72}.ct-a7b800{color:#FFA657}.ct-9d85c0{color:#D2A8FF}.ct-290d98{color:#C9D1D9}.ct-bfd8bd{color:#FF7B72}.light .ct-bfd8bd{color:#073642}.light .ct-290d98{color:#657B83}.light .ct-9d85c0{color:#268BD2}.light .ct-a7b800{color:#657B83}.light .ct-0b2270{color:#859900}.light .ct-3da1c5{color:#268BD2}.light .ct-9b249b{color:#657B83}.light .ct-0d6f0f{color:#859900}.light .ct-3c6b43{color:#268BD2}.light .ct-8dc141{color:#268BD2}.light .ct-7d9c4d{color:#B58900}.light .ct-1cc30b{color:#073642}.light .ct-b63305{color:#268BD2}.light .ct-0e947f{color:#268BD2}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Typescript:Type guards.md","_source":"content","_file":"Typescript/Type guards.md","_extension":"md"}],"navigation":[{"title":"Blockchain","_path":"/blockchain","children":[{"title":"Common Typescript Examples","_path":"/blockchain/common-typescript-examples"},{"title":"Smart Contracts","_path":"/blockchain/smart-contracts"}]},{"title":"Css","_path":"/css","children":[{"title":"Automatic Grid Like Masonry With Pure CSS","_path":"/css/automatic-grid-like-masonry-with-pure-css"},{"title":"Sass Nth Child Iterate Mixin","_path":"/css/sass-nth-child-iterate-mixin"},{"title":"Test If Browser Supports CSS Rules","_path":"/css/test-if-browser-supports-css-rules"}]},{"title":"Docker","_path":"/docker","children":[{"title":"Building Static Pages With Docker","_path":"/docker/building-static-pages-with-docker"},{"title":"Drone Ci","_path":"/docker/drone-ci"},{"title":"Github Pages With Drone Ci","_path":"/docker/github-pages-with-drone-ci"},{"title":"Private Docker Registry","_path":"/docker/private-docker-registry"},{"title":"Refresh Containers On Pull","_path":"/docker/refresh-containers-on-pull"},{"title":"Seed Dump Inside Docker","_path":"/docker/seed-dump-inside-docker"},{"title":"Wait For Mysql","_path":"/docker/wait-for-mysql"},{"title":"Wait For Redis","_path":"/docker/wait-for-redis"}]},{"title":"Frontend","_path":"/frontend","children":[{"title":"React Native","_path":"/frontend/react-native","children":[{"title":"OAuth2 Login","_path":"/frontend/react-native/oauth2-login"},{"title":"Preserve FlatList Scroll Position In React Native","_path":"/frontend/react-native/preserve-flatlist-scroll-position-in-react-native"},{"title":"Useful Comands","_path":"/frontend/react-native/useful-comands"}]},{"title":"React","_path":"/frontend/react","children":[{"title":"Axios Refresh Token On React","_path":"/frontend/react/axios-refresh-token-on-react"},{"title":"Axios With AbortController","_path":"/frontend/react/axios-with-abortcontroller"},{"title":"UseWhatsChanged","_path":"/frontend/react/usewhatschanged"}]},{"title":"Vue","_path":"/frontend/vue","children":[{"title":"Adding Global Properties To Component","_path":"/frontend/vue/adding-global-properties-to-component"},{"title":"Make Nuxt Handle Obsidian Highlights","_path":"/frontend/vue/make-nuxt-handle-obsidian-highlights"}]},{"title":"Webgl","_path":"/frontend/webgl","children":[{"title":"Basics Of WebGL (Drawing A Cube)","_path":"/frontend/webgl/basics-of-webgl-(drawing-a-cube)"},{"title":"Fragment Shaders","_path":"/frontend/webgl/fragment-shaders"},{"title":"Rendering Without Blocking In A Worker","_path":"/frontend/webgl/rendering-without-blocking-in-a-worker"},{"title":"Vertex Shaders","_path":"/frontend/webgl/vertex-shaders"}]}]},{"title":"Git","_path":"/git","children":[{"title":"Force Git To Use HTTPS","_path":"/git/force-git-to-use-https"},{"title":"Git Aliases And Useful Commands","_path":"/git/git-aliases-and-useful-commands"}]},{"title":"Golang","_path":"/golang","children":[{"title":"I18n In Golang","_path":"/golang/i18n-in-golang"}]},{"title":"Graphql","_path":"/graphql","children":[{"title":"Apollo Client Pagination","_path":"/graphql/apollo-client-pagination"},{"title":"Refresh Token In Apollo Client","_path":"/graphql/refresh-token-in-apollo-client"}]},{"title":"Linux","_path":"/linux","children":[{"title":"Find Out Who Uses Swap","_path":"/linux/find-out-who-uses-swap"},{"title":"Fixing Lagging USB Headphones","_path":"/linux/fixing-lagging-usb-headphones"},{"title":"Gitea For Git Hosting","_path":"/linux/gitea-for-git-hosting"},{"title":"Google Photos Alternative With Photoprism","_path":"/linux/google-photos-alternative-with-photoprism"},{"title":"Linux On Asus Zenbook UM3402 YA","_path":"/linux/linux-on-asus-zenbook-um3402-ya"},{"title":"Resume Or Start Screen Session","_path":"/linux/resume-or-start-screen-session"},{"title":"Rsync File With SSH","_path":"/linux/rsync-file-with-ssh"},{"title":"Setting Up NGINX","_path":"/linux/setting-up-nginx"},{"title":"SSH","_path":"/linux/ssh"}]},{"title":"Obsidian","_path":"/obsidian","children":[{"title":"Self Hosted Obsidian Sync With CouchDB","_path":"/obsidian/self-hosted-obsidian-sync-with-couchdb"}]},{"title":"Sql","_path":"/sql","children":[{"title":"MySQL And MariaDB Setup","_path":"/sql/mysql-and-mariadb-setup"},{"title":"Postgress Setup","_path":"/sql/postgress-setup"}]},{"title":"Typescript","_path":"/typescript","children":[{"title":"Add Global Variable To Window","_path":"/typescript/add-global-variable-to-window"},{"title":"Flatten Object With Periods","_path":"/typescript/flatten-object-with-periods"},{"title":"Type Guards","_path":"/typescript/type-guards"}]}]}
\ No newline at end of file
+{"generatedAt":1703697989765,"generateTime":123,"contents":[{"_path":"/blockchain/common-typescript-examples","_dir":"blockchain","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Common Typescript Examples","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Simple #dapp example for tests: "},{"type":"element","tag":"a","props":{"href":"https://metamask.github.io/test-dapp/","rel":["nofollow"]},"children":[{"type":"text","value":"https://metamask.github.io/test-dapp/"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Interaction with smart contracts described in "},{"type":"element","tag":"a","props":{"href":"Smart%20contracts"},"children":[{"type":"text","value":"Smart contracts"}]}]}]},{"type":"element","tag":"h2","props":{"id":"connecting-to-node"},"children":[{"type":"text","value":"Connecting to node"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If #Metamask extension installed, "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Web3.givenProvider"}]},{"type":"text","value":" is available in global window. You can use "},{"type":"element","tag":"a","props":{"href":"https://infura.io","rel":["nofollow"]},"children":[{"type":"text","value":"Infura"}]},{"type":"text","value":" or your node instead:"}]},{"type":"element","tag":"code","props":{"code":"import Web3 from 'web3';\n\n// URL of your node\nconst PROVIDER_URL = 'https://...';\n\nexport const web3 = new Web3(Web3.givenProvider || PROVIDER_URL);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import Web3 from 'web3';\n\n// URL of your node\nconst PROVIDER_URL = 'https://...';\n\nexport const web3 = new Web3(Web3.givenProvider || PROVIDER_URL);\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"getting-wallet-balance"},"children":[{"type":"text","value":"Getting wallet balance"}]},{"type":"element","tag":"code","props":{"code":"const getBalance = async (address: string) => {\n return await web3.eth.getBalance(address);\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const getBalance = async (address: string) => {\n return await web3.eth.getBalance(address);\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"getting-wallet-address"},"children":[{"type":"text","value":"Getting wallet address"}]},{"type":"element","tag":"code","props":{"code":"// first we need to authorize\nconst authorize = async () => {\n await web3.currentProvider.request({ method: 'eth_requestAccounts' });\n}\n\n// then we can get wallet address\nconst getCurrentAddressUser = () => {\n return web3.currentProvider.selectedAddress;\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// first we need to authorize\nconst authorize = async () => {\n await web3.currentProvider.request({ method: 'eth_requestAccounts' });\n}\n\n// then we can get wallet address\nconst getCurrentAddressUser = () => {\n return web3.currentProvider.selectedAddress;\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"sending-transaction"},"children":[{"type":"text","value":"Sending transaction"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sending "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"value"}]},{"type":"text","value":" tokens with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"memo"}]},{"type":"text","value":" as value:"}]},{"type":"element","tag":"code","props":{"code":"\nconst transfer = async ({ \n from, \n to, \n value, \n memo, \n privateKey, \n gasLimit = 44000 \n}) => {\n const nonce = await web3.eth.getTransactionCount(from);\n const gasPrice = await web3.eth.getGasPrice();\n \n const rawTx = {\n from,\n to,\n value: web3.utils.toHex(Web3.utils.toWei(value, 'ether')),\n gasLimit: web3.utils.toHex(gasLimit),\n gasPrice: web3.utils.toHex(gasPrice),\n nonce: web3.utils.toHex(nonce),\n data: memo,\n };\n \n const privateKeyBuffer = EthUtil.toBuffer(privateKey);\n \n const tx = new Transaction(rawTx);\n \n tx.sign(privateKeyBuffer);\n const serializedTx = tx.serialize();\n \n return this.web3.eth.sendSignedTransaction(\n `0x${serializedTx.toString('hex')}`\n );\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\nconst transfer = async ({ \n from, \n to, \n value, \n memo, \n privateKey, \n gasLimit = 44000 \n}) => {\n const nonce = await web3.eth.getTransactionCount(from);\n const gasPrice = await web3.eth.getGasPrice();\n \n const rawTx = {\n from,\n to,\n value: web3.utils.toHex(Web3.utils.toWei(value, 'ether')),\n gasLimit: web3.utils.toHex(gasLimit),\n gasPrice: web3.utils.toHex(gasPrice),\n nonce: web3.utils.toHex(nonce),\n data: memo,\n };\n \n const privateKeyBuffer = EthUtil.toBuffer(privateKey);\n \n const tx = new Transaction(rawTx);\n \n tx.sign(privateKeyBuffer);\n const serializedTx = tx.serialize();\n \n return this.web3.eth.sendSignedTransaction(\n `0x${serializedTx.toString('hex')}`\n );\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"estimating-transaction-fee"},"children":[{"type":"text","value":"Estimating transaction FEE"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Useful to get fixed amount of tokens from user with pre-estimated fee."}]},{"type":"element","tag":"code","props":{"code":"import { web3 } from '.';\n\nconst estimateFee = async ({\n from,\n to,\n value,\n memo,\n}) => {\n const gasPrice = await web3.eth.getGasPrice();\n const gasLimit = await web3.eth.estimateGas({\n from,\n to,\n value: web3.utils.toHex(web3.utils.toWei(value, 'ether')),\n data: web3.utils.asciiToHex(memo),\n }).call();\n \n return web3.utils.fromWei(\n BigInt(gasPrice.toString())\n .multiply(BigInt(gasLimit.toString()))\n .toString()\n );\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { web3 } from '.';\n\nconst estimateFee = async ({\n from,\n to,\n value,\n memo,\n}) => {\n const gasPrice = await web3.eth.getGasPrice();\n const gasLimit = await web3.eth.estimateGas({\n from,\n to,\n value: web3.utils.toHex(web3.utils.toWei(value, 'ether')),\n data: web3.utils.asciiToHex(memo),\n }).call();\n \n return web3.utils.fromWei(\n BigInt(gasPrice.toString())\n .multiply(BigInt(gasLimit.toString()))\n .toString()\n );\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"subscribing-to-wallet-address-change"},"children":[{"type":"text","value":"Subscribing to wallet address change"}]},{"type":"element","tag":"code","props":{"code":"import { web3 } from '.';\n\nweb3.currentProvider.on('accountsChanged', callback);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { web3 } from '.';\n\nweb3.currentProvider.on('accountsChanged', callback);\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"watching-network-change"},"children":[{"type":"text","value":"Watching network change"}]},{"type":"element","tag":"code","props":{"code":"ethereum.on('chainChanged', handler: (chainId: string) => void);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"ethereum.on('chainChanged', handler: (chainId: string) => void);\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"adding-custom-token-to-wallet"},"children":[{"type":"text","value":"Adding custom token to wallet"}]},{"type":"element","tag":"code","props":{"code":"window.ethereum\n .request({\n method: 'wallet_watchAsset',\n params: {\n type: 'ERC20',\n options: {\n address: '0xb60e8dd61c5d32be8058bb8eb970870f07233155',\n symbol: 'FOO',\n decimals: 18,\n image: 'https://foo.io/token-image.svg',\n },\n },\n })\n .then((success) => {\n if (success) {\n console.log('FOO successfully added to wallet!')\n } else {\n throw new Error('Something went wrong.')\n }\n })\n .catch(console.error)\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"window.ethereum\n .request({\n method: 'wallet_watchAsset',\n params: {\n type: 'ERC20',\n options: {\n address: '0xb60e8dd61c5d32be8058bb8eb970870f07233155',\n symbol: 'FOO',\n decimals: 18,\n image: 'https://foo.io/token-image.svg',\n },\n },\n })\n .then((success) => {\n if (success) {\n console.log('FOO successfully added to wallet!')\n } else {\n throw new Error('Something went wrong.')\n }\n })\n .catch(console.error)\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"changing-network-to-custom"},"children":[{"type":"text","value":"Changing network to custom"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Checking current chainId:"}]},{"type":"element","tag":"code","props":{"code":"const getChainID = async () => {\n return ethereum.request({ method: 'eth_chainId' })\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const getChainID = async () => {\n return ethereum.request({ method: 'eth_chainId' })\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Asking wallet to change current network:"}]},{"type":"element","tag":"code","props":{"code":"try {\n await window.ethereum.request({\n method: 'wallet_switchEthereumChain',\n params: [{ chainId: '0x03' }], // ropsten chainID (3) in hex\n });\n} catch (switchError) {\n // This error code indicates that the chain has not been added to MetaMask.\n if (error.code === 4902) {\n try {\n await window.ethereum.request({\n method: 'wallet_addEthereumChain',\n params: [{ \n chainId: '0x03', // ropsten chainID (3) in hex\n chainName: 'Ropsten Test Network', \n nativeCurrency: { \n name: 'ETH',\n symbol: 'ETH',\n decimals: 18\n }, \n rpcUrls: ['https://ropsten.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161'], \n blockExplorerUrls: ['https://ropsten.etherscan.io'] \n }] ,\n });\n } catch (addError) {\n // handle \"add\" error\n }\n }\n // handle other \"switch\" errors\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"try {\n await window.ethereum.request({\n method: 'wallet_switchEthereumChain',\n params: [{ chainId: '0x03' }], // ropsten chainID (3) in hex\n });\n} catch (switchError) {\n // This error code indicates that the chain has not been added to MetaMask.\n if (error.code === 4902) {\n try {\n await window.ethereum.request({\n method: 'wallet_addEthereumChain',\n params: [{ \n chainId: '0x03', // ropsten chainID (3) in hex\n chainName: 'Ropsten Test Network', \n nativeCurrency: { \n name: 'ETH',\n symbol: 'ETH',\n decimals: 18\n }, \n rpcUrls: ['https://ropsten.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161'], \n blockExplorerUrls: ['https://ropsten.etherscan.io'] \n }] ,\n });\n } catch (addError) {\n // handle \"add\" error\n }\n }\n // handle other \"switch\" errors\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Simple #dapp example for tests: "},{"type":"element","tag":"a","props":{"href":"https://metamask.github.io/test-dapp/","rel":["nofollow"]},"children":[{"type":"text","value":"https://metamask.github.io/test-dapp/"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Interaction with smart contracts described in "},{"type":"element","tag":"a","props":{"href":"Smart%20contracts"},"children":[{"type":"text","value":"Smart contracts"}]}]}]},{"type":"element","tag":"h2","props":{"id":"connecting-to-node"},"children":[{"type":"text","value":"Connecting to node"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If #Metamask extension installed, "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Web3.givenProvider"}]},{"type":"text","value":" is available in global window. You can use "},{"type":"element","tag":"a","props":{"href":"https://infura.io","rel":["nofollow"]},"children":[{"type":"text","value":"Infura"}]},{"type":"text","value":" or your node instead:"}]},{"type":"element","tag":"code","props":{"code":"import Web3 from 'web3';\n\n// URL of your node\nconst PROVIDER_URL = 'https://...';\n\nexport const web3 = new Web3(Web3.givenProvider || PROVIDER_URL);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'web3'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-178967"},"children":[{"type":"text","value":"// URL of your node"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6a4a5"},"children":[{"type":"text","value":"PROVIDER_URL"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'https://...'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6a4a5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"givenProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6a4a5"},"children":[{"type":"text","value":"PROVIDER_URL"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":");"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"getting-wallet-balance"},"children":[{"type":"text","value":"Getting wallet balance"}]},{"type":"element","tag":"code","props":{"code":"const getBalance = async (address: string) => {\n return await web3.eth.getBalance(address);\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-839cc0"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-56d6bf"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bc1a9e"},"children":[{"type":"text","value":"getBalance"}]},{"type":"element","tag":"span","props":{"class":"ct-56d6bf"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-17069f"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-56d6bf"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-839cc0"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-56d6bf"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-3b06ef"},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"span","props":{"class":"ct-17069f"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-56d6bf"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2bc6be"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-56d6bf"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-839cc0"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-56d6bf"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"getBalance"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"getting-wallet-address"},"children":[{"type":"text","value":"Getting wallet address"}]},{"type":"element","tag":"code","props":{"code":"// first we need to authorize\nconst authorize = async () => {\n await web3.currentProvider.request({ method: 'eth_requestAccounts' });\n}\n\n// then we can get wallet address\nconst getCurrentAddressUser = () => {\n return web3.currentProvider.selectedAddress;\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-178967"},"children":[{"type":"text","value":"// first we need to authorize"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"authorize"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"currentProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"({ method: "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'eth_requestAccounts'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-178967"},"children":[{"type":"text","value":"// then we can get wallet address"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"getCurrentAddressUser"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"currentProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"selectedAddress"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"sending-transaction"},"children":[{"type":"text","value":"Sending transaction"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sending "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"value"}]},{"type":"text","value":" tokens with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"memo"}]},{"type":"text","value":" as value:"}]},{"type":"element","tag":"code","props":{"code":"\nconst transfer = async ({ \n from, \n to, \n value, \n memo, \n privateKey, \n gasLimit = 44000 \n}) => {\n const nonce = await web3.eth.getTransactionCount(from);\n const gasPrice = await web3.eth.getGasPrice();\n \n const rawTx = {\n from,\n to,\n value: web3.utils.toHex(Web3.utils.toWei(value, 'ether')),\n gasLimit: web3.utils.toHex(gasLimit),\n gasPrice: web3.utils.toHex(gasPrice),\n nonce: web3.utils.toHex(nonce),\n data: memo,\n };\n \n const privateKeyBuffer = EthUtil.toBuffer(privateKey);\n \n const tx = new Transaction(rawTx);\n \n tx.sign(privateKeyBuffer);\n const serializedTx = tx.serialize();\n \n return this.web3.eth.sendSignedTransaction(\n `0x${serializedTx.toString('hex')}`\n );\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"transfer"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" ({ "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"to"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"memo"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"privateKey"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"gasLimit"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"}) "}]},{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6a4a5"},"children":[{"type":"text","value":"nonce"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"getTransactionCount"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6a4a5"},"children":[{"type":"text","value":"gasPrice"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"getGasPrice"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6a4a5"},"children":[{"type":"text","value":"rawTx"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"to"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" value: "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"toHex"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"toWei"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'ether'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":")),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" gasLimit: "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"toHex"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"gasLimit"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" gasPrice: "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"toHex"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"gasPrice"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" nonce: "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"toHex"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"nonce"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" data: "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"memo"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6a4a5"},"children":[{"type":"text","value":"privateKeyBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"EthUtil"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"toBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"privateKey"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6a4a5"},"children":[{"type":"text","value":"tx"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"Transaction"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"rawTx"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"tx"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"sign"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"privateKeyBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6a4a5"},"children":[{"type":"text","value":"serializedTx"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"tx"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"serialize"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6a4a5"},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"sendSignedTransaction"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"`0x${"}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"serializedTx"}]},{"type":"element","tag":"span","props":{"class":"ct-5229fc"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"toString"}]},{"type":"element","tag":"span","props":{"class":"ct-5229fc"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'hex'"}]},{"type":"element","tag":"span","props":{"class":"ct-5229fc"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"}`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"estimating-transaction-fee"},"children":[{"type":"text","value":"Estimating transaction FEE"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Useful to get fixed amount of tokens from user with pre-estimated fee."}]},{"type":"element","tag":"code","props":{"code":"import { web3 } from '.';\n\nconst estimateFee = async ({\n from,\n to,\n value,\n memo,\n}) => {\n const gasPrice = await web3.eth.getGasPrice();\n const gasLimit = await web3.eth.estimateGas({\n from,\n to,\n value: web3.utils.toHex(web3.utils.toWei(value, 'ether')),\n data: web3.utils.asciiToHex(memo),\n }).call();\n \n return web3.utils.fromWei(\n BigInt(gasPrice.toString())\n .multiply(BigInt(gasLimit.toString()))\n .toString()\n );\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'.'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"estimateFee"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" ({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"to"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"memo"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"}) "}]},{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6a4a5"},"children":[{"type":"text","value":"gasPrice"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"getGasPrice"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6a4a5"},"children":[{"type":"text","value":"gasLimit"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"estimateGas"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"to"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" value: "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"toHex"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"toWei"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'ether'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":")),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" data: "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"asciiToHex"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"memo"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" })."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"call"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"fromWei"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-254526"},"children":[{"type":"text","value":"BigInt"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"gasPrice"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"toString"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"())"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"multiply"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-254526"},"children":[{"type":"text","value":"BigInt"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"gasLimit"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"toString"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"()))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"toString"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"subscribing-to-wallet-address-change"},"children":[{"type":"text","value":"Subscribing to wallet address change"}]},{"type":"element","tag":"code","props":{"code":"import { web3 } from '.';\n\nweb3.currentProvider.on('accountsChanged', callback);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'.'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"currentProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'accountsChanged'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"callback"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":");"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"watching-network-change"},"children":[{"type":"text","value":"Watching network change"}]},{"type":"element","tag":"code","props":{"code":"ethereum.on('chainChanged', handler: (chainId: string) => void);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"ethereum"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'chainChanged'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"handler"}]},{"type":"element","tag":"span","props":{"class":"ct-21a018"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"adding-custom-token-to-wallet"},"children":[{"type":"text","value":"Adding custom token to wallet"}]},{"type":"element","tag":"code","props":{"code":"window.ethereum\n .request({\n method: 'wallet_watchAsset',\n params: {\n type: 'ERC20',\n options: {\n address: '0xb60e8dd61c5d32be8058bb8eb970870f07233155',\n symbol: 'FOO',\n decimals: 18,\n image: 'https://foo.io/token-image.svg',\n },\n },\n })\n .then((success) => {\n if (success) {\n console.log('FOO successfully added to wallet!')\n } else {\n throw new Error('Something went wrong.')\n }\n })\n .catch(console.error)\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"window"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"ethereum"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" method: "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'wallet_watchAsset'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" params: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" type: "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'ERC20'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" options: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" address: "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'0xb60e8dd61c5d32be8058bb8eb970870f07233155'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" symbol: "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'FOO'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" decimals: "}]},{"type":"element","tag":"span","props":{"class":"ct-814f05"},"children":[{"type":"text","value":"18"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" image: "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'https://foo.io/token-image.svg'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56d6bf"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-bc1a9e"},"children":[{"type":"text","value":"then"}]},{"type":"element","tag":"span","props":{"class":"ct-56d6bf"},"children":[{"type":"text","value":"(("}]},{"type":"element","tag":"span","props":{"class":"ct-3b06ef"},"children":[{"type":"text","value":"success"}]},{"type":"element","tag":"span","props":{"class":"ct-56d6bf"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-839cc0"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-56d6bf"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"success"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'FOO successfully added to wallet!'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"else"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-254526"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'Something went wrong.'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":")"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"changing-network-to-custom"},"children":[{"type":"text","value":"Changing network to custom"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Checking current chainId:"}]},{"type":"element","tag":"code","props":{"code":"const getChainID = async () => {\n return ethereum.request({ method: 'eth_chainId' })\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"getChainID"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"ethereum"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"({ method: "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'eth_chainId'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Asking wallet to change current network:"}]},{"type":"element","tag":"code","props":{"code":"try {\n await window.ethereum.request({\n method: 'wallet_switchEthereumChain',\n params: [{ chainId: '0x03' }], // ropsten chainID (3) in hex\n });\n} catch (switchError) {\n // This error code indicates that the chain has not been added to MetaMask.\n if (error.code === 4902) {\n try {\n await window.ethereum.request({\n method: 'wallet_addEthereumChain',\n params: [{ \n chainId: '0x03', // ropsten chainID (3) in hex\n chainName: 'Ropsten Test Network', \n nativeCurrency: { \n name: 'ETH',\n symbol: 'ETH',\n decimals: 18\n }, \n rpcUrls: ['https://ropsten.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161'], \n blockExplorerUrls: ['https://ropsten.etherscan.io'] \n }] ,\n });\n } catch (addError) {\n // handle \"add\" error\n }\n }\n // handle other \"switch\" errors\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"try"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"window"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"ethereum"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" method: "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'wallet_switchEthereumChain'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" params: [{ chainId: "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'0x03'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" }], "}]},{"type":"element","tag":"span","props":{"class":"ct-178967"},"children":[{"type":"text","value":"// ropsten chainID (3) in hex"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"} "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"switchError"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-178967"},"children":[{"type":"text","value":"// This error code indicates that the chain has not been added to MetaMask."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"code"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"==="}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-814f05"},"children":[{"type":"text","value":"4902"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"try"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"window"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"ethereum"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" method: "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'wallet_addEthereumChain'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" params: [{ "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" chainId: "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'0x03'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-178967"},"children":[{"type":"text","value":"// ropsten chainID (3) in hex"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" chainName: "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'Ropsten Test Network'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" nativeCurrency: { "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" name: "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'ETH'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" symbol: "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'ETH'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" decimals: "}]},{"type":"element","tag":"span","props":{"class":"ct-814f05"},"children":[{"type":"text","value":"18"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" }, "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" rpcUrls: ["}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'https://ropsten.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"], "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" blockExplorerUrls: ["}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'https://ropsten.etherscan.io'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"] "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" }] ,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"addError"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-178967"},"children":[{"type":"text","value":"// handle \"add\" error"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-178967"},"children":[{"type":"text","value":"// handle other \"switch\" errors"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-814f05{color:#79C0FF}.ct-21a018{color:#C9D1D9}.ct-254526{color:#79C0FF}.ct-5229fc{color:#A5D6FF}.ct-2bc6be{color:#79C0FF}.ct-3b06ef{color:#FFA657}.ct-17069f{color:#FF7B72}.ct-bc1a9e{color:#D2A8FF}.ct-56d6bf{color:#C9D1D9}.ct-839cc0{color:#FF7B72}.ct-1119a1{color:#D2A8FF}.ct-f6a4a5{color:#79C0FF}.ct-1bac9e{color:#FF7B72}.ct-178967{color:#8B949E}.ct-7a16c5{color:#A5D6FF}.ct-ac9394{color:#C9D1D9}.ct-2d4545{color:#C9D1D9}.ct-d8c97c{color:#FF7B72}.light .ct-d8c97c{color:#859900}.light .ct-2d4545{color:#657B83}.light .ct-ac9394{color:#268BD2}.light .ct-7a16c5{color:#2AA198}.light .ct-178967{color:#93A1A1}.light .ct-1bac9e{color:#073642}.light .ct-f6a4a5{color:#268BD2}.light .ct-1119a1{color:#268BD2}.light .ct-839cc0{color:#073642}.light .ct-56d6bf{color:#657B83}.light .ct-bc1a9e{color:#268BD2}.light .ct-17069f{color:#859900}.light .ct-3b06ef{color:#657B83}.light .ct-2bc6be{color:#859900}.light .ct-5229fc{color:#657B83}.light .ct-254526{color:#859900}.light .ct-21a018{color:#859900}.light .ct-814f05{color:#D33682}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"connecting-to-node","depth":2,"text":"Connecting to node"},{"id":"getting-wallet-balance","depth":2,"text":"Getting wallet balance"},{"id":"getting-wallet-address","depth":2,"text":"Getting wallet address"},{"id":"sending-transaction","depth":2,"text":"Sending transaction"},{"id":"estimating-transaction-fee","depth":2,"text":"Estimating transaction FEE"},{"id":"subscribing-to-wallet-address-change","depth":2,"text":"Subscribing to wallet address change"},{"id":"watching-network-change","depth":2,"text":"Watching network change"},{"id":"adding-custom-token-to-wallet","depth":2,"text":"Adding custom token to wallet"},{"id":"changing-network-to-custom","depth":2,"text":"Changing network to custom"}]}},"_type":"markdown","_id":"content:Blockchain:Common typescript examples.md","_source":"content","_file":"Blockchain/Common typescript examples.md","_extension":"md"},{"_path":"/blockchain/smart-contracts","_dir":"blockchain","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Smart Contracts","description":"For common functions see Common typescript examples.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For common functions see "},{"type":"element","tag":"a","props":{"href":"Common%20typescript%20examples"},"children":[{"type":"text","value":"Common typescript examples"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"getting-smart-contract-instance"},"children":[{"type":"text","value":"Getting smart contract instance"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Useful for calling smart contract methods:"}]},{"type":"element","tag":"code","props":{"code":"import { Contract } from 'web3-eth-contract';\nimport { web3 } from '.';\n\nconst getContract = (abi: object, address?: string): Contract => {\n const abiFromJson = JSON.parse(JSON.stringify(abi));\n return new web3.eth.Contract(abiFromJson, address);\n};\n\nexport default getContract;\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { Contract } from 'web3-eth-contract';\nimport { web3 } from '.';\n\nconst getContract = (abi: object, address?: string): Contract => {\n const abiFromJson = JSON.parse(JSON.stringify(abi));\n return new web3.eth.Contract(abiFromJson, address);\n};\n\nexport default getContract;\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"executing-contract-method"},"children":[{"type":"text","value":"Executing contract method"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Contract has "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"read"}]},{"type":"text","value":" and "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"write"}]},{"type":"text","value":" methods. To get a list of methods, you can paste contract address on "},{"type":"element","tag":"a","props":{"href":"https://etherscan.io/token/0xdac17f958d2ee523a2206206994597c13d831ec7#readContract","rel":["nofollow"]},"children":[{"type":"text","value":"https://etherscan.io/ ETH"}]},{"type":"text","value":" or any other service."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Read"}]},{"type":"text","value":" methods doesn't require spending "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"gas"}]},{"type":"text","value":". "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Write"}]},{"type":"text","value":" methods cost some amount of "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"gas"}]},{"type":"text","value":", hence they will be executed with confirmation from user."}]},{"type":"element","tag":"h3","props":{"id":"example-for-metamask-without-private-key"},"children":[{"type":"text","value":"Example for #Metamask without private key"}]},{"type":"element","tag":"code","props":{"code":"// see example below\nimport { getContract } from '.';\n\n// ABI of contract\nconst CONTRACT_ABI = { /* ... */ };\n // address for contract\nconst CONTRACT_ADDRESS = '0xdea164f67df4dbfe675d5271c9d404e0260f33bb';\n\nexport const executeContractMethod = async ({}) => {\n // getting contract\n const contract = getContract(CONTRACT_ABI, CONTRACT_ADDRESS);\n \n // Calling write method\n try {\n // authorizing with Metamask\n await web3.currentProvider.request({ method: 'eth_requestAccounts' });\n // getting wallet address\n const addressUser = web3.currentProvider.selectedAddress;\n // calling \"store\" store method for contract\n // payload should include `from` address, that matches\n // current user's wallet\n await contract.methods.store(0, 'Parameter').send({\n from: addressUser,\n });\n } catch (e) {\n throw new Error(e);\n }\n \n // calling read method\n try {\n // this method can return data\n const result = await contract.methods.retrieve().call();\n } catch (e) {\n throw new Error(e);\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// see example below\nimport { getContract } from '.';\n\n// ABI of contract\nconst CONTRACT_ABI = { /* ... */ };\n // address for contract\nconst CONTRACT_ADDRESS = '0xdea164f67df4dbfe675d5271c9d404e0260f33bb';\n\nexport const executeContractMethod = async ({}) => {\n // getting contract\n const contract = getContract(CONTRACT_ABI, CONTRACT_ADDRESS);\n \n // Calling write method\n try {\n // authorizing with Metamask\n await web3.currentProvider.request({ method: 'eth_requestAccounts' });\n // getting wallet address\n const addressUser = web3.currentProvider.selectedAddress;\n // calling \"store\" store method for contract\n // payload should include `from` address, that matches\n // current user's wallet\n await contract.methods.store(0, 'Parameter').send({\n from: addressUser,\n });\n } catch (e) {\n throw new Error(e);\n }\n \n // calling read method\n try {\n // this method can return data\n const result = await contract.methods.retrieve().call();\n } catch (e) {\n throw new Error(e);\n }\n}\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"nodejs-and-react-native-example"},"children":[{"type":"text","value":"Node.js and React Native example"}]},{"type":"element","tag":"code","props":{"code":"// see example below\nimport { getContract } from '.';\n\n// ABI контракта\nconst CONTRACT_ABI = { /* ... */ };\n// contract address\nconst CONTRACT_ADDRESS = '0xdea164f67df4dbfe675d5271c9d404e0260f33bb';\n// getting contract\nconst contract = getContract(CONTRACT_ABI, CONTRACT_ADDRESS);\n// account's private key\nconst privateKey = '...';\n\n// write-methods requires private key\nconst executeContractMethod = async (val: number) => {\n const transaction = contract.methods.store(val);\n const account = web3.eth.accounts.privateKeyToAccount(privateKey);\n const options = {\n to: CONTRACT_ADDRESS,\n data: transaction.encodeABI(),\n gas: await transaction.estimateGas({ from: account.address }),\n gasPrice: await web3.eth.getGasPrice(),\n };\n const signed = await web3.eth.accounts.signTransaction(\n options,\n privateKey,\n );\n await web3.eth.sendSignedTransaction(signed.rawTransaction!);\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// see example below\nimport { getContract } from '.';\n\n// ABI контракта\nconst CONTRACT_ABI = { /* ... */ };\n// contract address\nconst CONTRACT_ADDRESS = '0xdea164f67df4dbfe675d5271c9d404e0260f33bb';\n// getting contract\nconst contract = getContract(CONTRACT_ABI, CONTRACT_ADDRESS);\n// account's private key\nconst privateKey = '...';\n\n// write-methods requires private key\nconst executeContractMethod = async (val: number) => {\n const transaction = contract.methods.store(val);\n const account = web3.eth.accounts.privateKeyToAccount(privateKey);\n const options = {\n to: CONTRACT_ADDRESS,\n data: transaction.encodeABI(),\n gas: await transaction.estimateGas({ from: account.address }),\n gasPrice: await web3.eth.getGasPrice(),\n };\n const signed = await web3.eth.accounts.signTransaction(\n options,\n privateKey,\n );\n await web3.eth.sendSignedTransaction(signed.rawTransaction!);\n};\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"calling-a-batch-of-contracts-methods"},"children":[{"type":"text","value":"Calling a batch of contract's methods"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Function calls batch of requests, returning array of results. For example:"}]},{"type":"element","tag":"code","props":{"code":" const requests = [\n contract.method.balanceOf().call,\n contract.method.getStaked().call\n ]\n\n const result = await makeBatchRequest(request);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":" const requests = [\n contract.method.balanceOf().call,\n contract.method.getStaked().call\n ]\n\n const result = await makeBatchRequest(request);\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"const web3 = new Web3(Web3.givenProvider || PROVIDER_URL);\n\nconst makeBatchRequest = (calls: any[]) => {\n try {\n const web3 = getWeb3NoAccount();\n const batch = new web3.BatchRequest();\n\n const promises = calls.map((call) => {\n return new Promise((resolve, reject) => {\n batch.add(\n call.request({}, (err, result) => {\n if (err) {\n reject(err);\n } else {\n resolve(result);\n }\n })\n );\n });\n });\n\n batch.execute();\n\n return Promise.all(promises);\n } catch {\n return null;\n }\n};\n\nexport default makeBatchRequest;\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const web3 = new Web3(Web3.givenProvider || PROVIDER_URL);\n\nconst makeBatchRequest = (calls: any[]) => {\n try {\n const web3 = getWeb3NoAccount();\n const batch = new web3.BatchRequest();\n\n const promises = calls.map((call) => {\n return new Promise((resolve, reject) => {\n batch.add(\n call.request({}, (err, result) => {\n if (err) {\n reject(err);\n } else {\n resolve(result);\n }\n })\n );\n });\n });\n\n batch.execute();\n\n return Promise.all(promises);\n } catch {\n return null;\n }\n};\n\nexport default makeBatchRequest;\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"subscribing-to-smart-contract-events"},"children":[{"type":"text","value":"Subscribing to smart contract events"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There're different ways to subscribe for contract events. For all of them you will need following variables:"}]},{"type":"element","tag":"code","props":{"code":" import Web3 from 'web3';\n const web3 = new Web3('YOUR_RPC_ENDPOINT_HERE');\n const ABI = 'YOUR ABI HERE';\n const CONTRACT_ADDRESS = 'YOUR CONTRACT ADDRESS HERE';\n const myContract = new Web3.Contract(ABI, CONTRACT_ADDRESS);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":" import Web3 from 'web3';\n const web3 = new Web3('YOUR_RPC_ENDPOINT_HERE');\n const ABI = 'YOUR ABI HERE';\n const CONTRACT_ADDRESS = 'YOUR CONTRACT ADDRESS HERE';\n const myContract = new Web3.Contract(ABI, CONTRACT_ADDRESS);\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"by-accessing-contractevents"},"children":[{"type":"text","value":"By accessing contract.events"}]},{"type":"element","tag":"code","props":{"code":"referralProgramContract.events\n .RegisterUser()\n .on('connected', (subscriptionId: string) => {\n console.log(`| UserRegistered | events | ${subscriptionId}`);\n })\n .on(\n 'data',\n async (event: {\n removed: boolean;\n returnValues: RegisterUserResponseInterface;\n }) => {\n try {\n if (event.removed) {\n return;\n }\n const { user, referrer } = event.returnValues;\n console.log(user, referrer);\n } catch (e) {\n console.log(`| ONCE | ${e}`);\n }\n },\n )\n .on('error', (error: ErrnoException) => {\n console.log(error);\n });\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"referralProgramContract.events\n .RegisterUser()\n .on('connected', (subscriptionId: string) => {\n console.log(`| UserRegistered | events | ${subscriptionId}`);\n })\n .on(\n 'data',\n async (event: {\n removed: boolean;\n returnValues: RegisterUserResponseInterface;\n }) => {\n try {\n if (event.removed) {\n return;\n }\n const { user, referrer } = event.returnValues;\n console.log(user, referrer);\n } catch (e) {\n console.log(`| ONCE | ${e}`);\n }\n },\n )\n .on('error', (error: ErrnoException) => {\n console.log(error);\n });\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"with-filtering"},"children":[{"type":"text","value":"With filtering"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We're listening to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Transfer"}]},{"type":"text","value":" event here:"}]},{"type":"element","tag":"code","props":{"code":" let options = {\n filter: {\n value: [],\n },\n fromBlock: 0\n };\n\n myContract.events.Transfer(options)\n .on('data', event => console.log(event))\n .on('changed', changed => console.log(changed))\n .on('error', err => throw err)\n .on('connected', str => console.log(str))\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":" let options = {\n filter: {\n value: [],\n },\n fromBlock: 0\n };\n\n myContract.events.Transfer(options)\n .on('data', event => console.log(event))\n .on('changed', changed => console.log(changed))\n .on('error', err => throw err)\n .on('connected', str => console.log(str))\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"common-subscribe-method"},"children":[{"type":"text","value":"Common Subscribe method"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Filtering options can also be specified:"}]},{"type":"element","tag":"code","props":{"code":" let options = {\n fromBlock: 0,\n address: ['address-1', 'address-2'], //Only get events from specific addresses\n topics: [] //What topics to subscribe to\n };\n\n let subscription = ('logs', options, (err,event) => {\n if (!err)\n console.log(event)\n });\n\n subscription.on('data', event => console.log(event))\n subscription.on('changed', changed => console.log(changed))\n subscription.on('error', err => { throw err })\n subscription.on('connected', nr => console.log(nr))\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":" let options = {\n fromBlock: 0,\n address: ['address-1', 'address-2'], //Only get events from specific addresses\n topics: [] //What topics to subscribe to\n };\n\n let subscription = ('logs', options, (err,event) => {\n if (!err)\n console.log(event)\n });\n\n subscription.on('data', event => console.log(event))\n subscription.on('changed', changed => console.log(changed))\n subscription.on('error', err => { throw err })\n subscription.on('connected', nr => console.log(nr))\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"getting-event-history"},"children":[{"type":"text","value":"Getting event history"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Getting history for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Transfer"}]},{"type":"text","value":" events for specific values. More info can be found "},{"type":"element","tag":"a","props":{"href":"https://web3js.readthedocs.io/en/v1.2.11/web3-eth-subscribe.html#","rel":["nofollow"]},"children":[{"type":"text","value":"here"}]}]},{"type":"element","tag":"code","props":{"code":" //example options(optional)\n let options = {\n filter: {\n // only get events where transfer value was 1000 or 1337\n value: ['1000', '1337'] \n },\n // number | \"earliest\" | \"pending\" | \"latest\"\n fromBlock: 0, \n toBlock: 'latest'\n };\n\n myContract.getPastEvents('Transfer', options)\n .then(results => console.log(results))\n .catch(err => throw err);\n\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":" //example options(optional)\n let options = {\n filter: {\n // only get events where transfer value was 1000 or 1337\n value: ['1000', '1337'] \n },\n // number | \"earliest\" | \"pending\" | \"latest\"\n fromBlock: 0, \n toBlock: 'latest'\n };\n\n myContract.getPastEvents('Transfer', options)\n .then(results => console.log(results))\n .catch(err => throw err);\n\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For common functions see "},{"type":"element","tag":"a","props":{"href":"Common%20typescript%20examples"},"children":[{"type":"text","value":"Common typescript examples"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"getting-smart-contract-instance"},"children":[{"type":"text","value":"Getting smart contract instance"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Useful for calling smart contract methods:"}]},{"type":"element","tag":"code","props":{"code":"import { Contract } from 'web3-eth-contract';\nimport { web3 } from '.';\n\nconst getContract = (abi: object, address?: string): Contract => {\n const abiFromJson = JSON.parse(JSON.stringify(abi));\n return new web3.eth.Contract(abiFromJson, address);\n};\n\nexport default getContract;\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"Contract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'web3-eth-contract'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'.'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c29147"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-011e68"},"children":[{"type":"text","value":"getContract"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4075f5"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-6edc38"},"children":[{"type":"text","value":"abi"}]},{"type":"element","tag":"span","props":{"class":"ct-4075f5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-66877e"},"children":[{"type":"text","value":"object"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6edc38"},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"span","props":{"class":"ct-4075f5"},"children":[{"type":"text","value":"?:"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-66877e"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-4075f5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c29147"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c29147"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2c18b2"},"children":[{"type":"text","value":"abiFromJson"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4075f5"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-55e18c"},"children":[{"type":"text","value":"JSON"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2c18b2"},"children":[{"type":"text","value":"parse"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"Contract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"abiFromJson"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-84aa9a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-84aa9a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"getContract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":";"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"executing-contract-method"},"children":[{"type":"text","value":"Executing contract method"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Contract has "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"read"}]},{"type":"text","value":" and "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"write"}]},{"type":"text","value":" methods. To get a list of methods, you can paste contract address on "},{"type":"element","tag":"a","props":{"href":"https://etherscan.io/token/0xdac17f958d2ee523a2206206994597c13d831ec7#readContract","rel":["nofollow"]},"children":[{"type":"text","value":"https://etherscan.io/ ETH"}]},{"type":"text","value":" or any other service."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Read"}]},{"type":"text","value":" methods doesn't require spending "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"gas"}]},{"type":"text","value":". "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Write"}]},{"type":"text","value":" methods cost some amount of "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"gas"}]},{"type":"text","value":", hence they will be executed with confirmation from user."}]},{"type":"element","tag":"h3","props":{"id":"example-for-metamask-without-private-key"},"children":[{"type":"text","value":"Example for #Metamask without private key"}]},{"type":"element","tag":"code","props":{"code":"// see example below\nimport { getContract } from '.';\n\n// ABI of contract\nconst CONTRACT_ABI = { /* ... */ };\n // address for contract\nconst CONTRACT_ADDRESS = '0xdea164f67df4dbfe675d5271c9d404e0260f33bb';\n\nexport const executeContractMethod = async ({}) => {\n // getting contract\n const contract = getContract(CONTRACT_ABI, CONTRACT_ADDRESS);\n \n // Calling write method\n try {\n // authorizing with Metamask\n await web3.currentProvider.request({ method: 'eth_requestAccounts' });\n // getting wallet address\n const addressUser = web3.currentProvider.selectedAddress;\n // calling \"store\" store method for contract\n // payload should include `from` address, that matches\n // current user's wallet\n await contract.methods.store(0, 'Parameter').send({\n from: addressUser,\n });\n } catch (e) {\n throw new Error(e);\n }\n \n // calling read method\n try {\n // this method can return data\n const result = await contract.methods.retrieve().call();\n } catch (e) {\n throw new Error(e);\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// see example below"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"getContract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'.'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// ABI of contract"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"CONTRACT_ABI"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"/* ... */"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// address for contract"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"CONTRACT_ADDRESS"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'0xdea164f67df4dbfe675d5271c9d404e0260f33bb'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"executeContractMethod"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" ({}) "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// getting contract"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"contract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"getContract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"CONTRACT_ABI"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"CONTRACT_ADDRESS"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// Calling write method"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"try"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// authorizing with Metamask"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"currentProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"({ method: "}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'eth_requestAccounts'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// getting wallet address"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"addressUser"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"currentProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"selectedAddress"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// calling \"store\" store method for contract"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// payload should include `from` address, that matches"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// current user's wallet"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"contract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"methods"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"store"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-38e3ec"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'Parameter'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"send"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" from: "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"addressUser"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"e"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba447c"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"e"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// calling read method"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"try"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// this method can return data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"result"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"contract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"methods"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"retrieve"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"()."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"call"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"e"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba447c"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"e"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"nodejs-and-react-native-example"},"children":[{"type":"text","value":"Node.js and React Native example"}]},{"type":"element","tag":"code","props":{"code":"// see example below\nimport { getContract } from '.';\n\n// ABI контракта\nconst CONTRACT_ABI = { /* ... */ };\n// contract address\nconst CONTRACT_ADDRESS = '0xdea164f67df4dbfe675d5271c9d404e0260f33bb';\n// getting contract\nconst contract = getContract(CONTRACT_ABI, CONTRACT_ADDRESS);\n// account's private key\nconst privateKey = '...';\n\n// write-methods requires private key\nconst executeContractMethod = async (val: number) => {\n const transaction = contract.methods.store(val);\n const account = web3.eth.accounts.privateKeyToAccount(privateKey);\n const options = {\n to: CONTRACT_ADDRESS,\n data: transaction.encodeABI(),\n gas: await transaction.estimateGas({ from: account.address }),\n gasPrice: await web3.eth.getGasPrice(),\n };\n const signed = await web3.eth.accounts.signTransaction(\n options,\n privateKey,\n );\n await web3.eth.sendSignedTransaction(signed.rawTransaction!);\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// see example below"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"getContract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'.'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// ABI контракта"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"CONTRACT_ABI"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"/* ... */"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// contract address"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"CONTRACT_ADDRESS"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'0xdea164f67df4dbfe675d5271c9d404e0260f33bb'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// getting contract"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"contract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"getContract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"CONTRACT_ABI"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"CONTRACT_ADDRESS"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// account's private key"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"privateKey"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'...'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// write-methods requires private key"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c29147"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-011e68"},"children":[{"type":"text","value":"executeContractMethod"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4075f5"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c29147"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-6edc38"},"children":[{"type":"text","value":"val"}]},{"type":"element","tag":"span","props":{"class":"ct-4075f5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-66877e"},"children":[{"type":"text","value":"number"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-c29147"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"transaction"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"contract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"methods"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"store"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"val"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"account"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"accounts"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"privateKeyToAccount"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"privateKey"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" to: "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"CONTRACT_ADDRESS"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" data: "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"transaction"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"encodeABI"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"(),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" gas: "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"transaction"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"estimateGas"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"({ from: "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"account"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" gasPrice: "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"getGasPrice"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"(),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"signed"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"accounts"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"signTransaction"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"privateKey"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"sendSignedTransaction"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"signed"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"rawTransaction"}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"calling-a-batch-of-contracts-methods"},"children":[{"type":"text","value":"Calling a batch of contract's methods"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Function calls batch of requests, returning array of results. For example:"}]},{"type":"element","tag":"code","props":{"code":" const requests = [\n contract.method.balanceOf().call,\n contract.method.getStaked().call\n ]\n\n const result = await makeBatchRequest(request);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"requests"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"contract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"method"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"balanceOf"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"()."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"call"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"contract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"method"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"getStaked"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"()."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"call"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" ]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"result"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"makeBatchRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"const web3 = new Web3(Web3.givenProvider || PROVIDER_URL);\n\nconst makeBatchRequest = (calls: any[]) => {\n try {\n const web3 = getWeb3NoAccount();\n const batch = new web3.BatchRequest();\n\n const promises = calls.map((call) => {\n return new Promise((resolve, reject) => {\n batch.add(\n call.request({}, (err, result) => {\n if (err) {\n reject(err);\n } else {\n resolve(result);\n }\n })\n );\n });\n });\n\n batch.execute();\n\n return Promise.all(promises);\n } catch {\n return null;\n }\n};\n\nexport default makeBatchRequest;\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"givenProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"PROVIDER_URL"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c29147"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-011e68"},"children":[{"type":"text","value":"makeBatchRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4075f5"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-6edc38"},"children":[{"type":"text","value":"calls"}]},{"type":"element","tag":"span","props":{"class":"ct-4075f5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-66877e"},"children":[{"type":"text","value":"any"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":"[]) "}]},{"type":"element","tag":"span","props":{"class":"ct-c29147"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"try"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"getWeb3NoAccount"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"batch"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"BatchRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"promises"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"calls"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"map"}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4075f5"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4075f5"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-66877e"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":"(("}]},{"type":"element","tag":"span","props":{"class":"ct-6edc38"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6edc38"},"children":[{"type":"text","value":"reject"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-c29147"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"batch"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"add"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"err"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"reject"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"err"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"else"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"result"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"batch"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"execute"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba447c"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"all"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"promises"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5e1c9b"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-84aa9a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-84aa9a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"makeBatchRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":";"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"subscribing-to-smart-contract-events"},"children":[{"type":"text","value":"Subscribing to smart contract events"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There're different ways to subscribe for contract events. For all of them you will need following variables:"}]},{"type":"element","tag":"code","props":{"code":" import Web3 from 'web3';\n const web3 = new Web3('YOUR_RPC_ENDPOINT_HERE');\n const ABI = 'YOUR ABI HERE';\n const CONTRACT_ADDRESS = 'YOUR CONTRACT ADDRESS HERE';\n const myContract = new Web3.Contract(ABI, CONTRACT_ADDRESS);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'web3'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'YOUR_RPC_ENDPOINT_HERE'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"ABI"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'YOUR ABI HERE'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"CONTRACT_ADDRESS"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'YOUR CONTRACT ADDRESS HERE'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"myContract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"Contract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"ABI"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"CONTRACT_ADDRESS"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"by-accessing-contractevents"},"children":[{"type":"text","value":"By accessing contract.events"}]},{"type":"element","tag":"code","props":{"code":"referralProgramContract.events\n .RegisterUser()\n .on('connected', (subscriptionId: string) => {\n console.log(`| UserRegistered | events | ${subscriptionId}`);\n })\n .on(\n 'data',\n async (event: {\n removed: boolean;\n returnValues: RegisterUserResponseInterface;\n }) => {\n try {\n if (event.removed) {\n return;\n }\n const { user, referrer } = event.returnValues;\n console.log(user, referrer);\n } catch (e) {\n console.log(`| ONCE | ${e}`);\n }\n },\n )\n .on('error', (error: ErrnoException) => {\n console.log(error);\n });\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"referralProgramContract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"events"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"RegisterUser"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-011e68"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-f141aa"},"children":[{"type":"text","value":"'connected'"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":", ("}]},{"type":"element","tag":"span","props":{"class":"ct-6edc38"},"children":[{"type":"text","value":"subscriptionId"}]},{"type":"element","tag":"span","props":{"class":"ct-4075f5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-66877e"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-c29147"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"`| UserRegistered | events | ${"}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"subscriptionId"}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"}`"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'data'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c29147"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-6edc38"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-4075f5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6edc38"},"children":[{"type":"text","value":"removed"}]},{"type":"element","tag":"span","props":{"class":"ct-4075f5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-66877e"},"children":[{"type":"text","value":"boolean"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6edc38"},"children":[{"type":"text","value":"returnValues"}]},{"type":"element","tag":"span","props":{"class":"ct-4075f5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6baa6"},"children":[{"type":"text","value":"RegisterUserResponseInterface"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" }) "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"try"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"removed"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"user"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"referrer"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"returnValues"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"user"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"referrer"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"e"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"`| ONCE | ${"}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"e"}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"}`"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" )"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-011e68"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-f141aa"},"children":[{"type":"text","value":"'error'"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":", ("}]},{"type":"element","tag":"span","props":{"class":"ct-6edc38"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-4075f5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6baa6"},"children":[{"type":"text","value":"ErrnoException"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-c29147"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" });"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"with-filtering"},"children":[{"type":"text","value":"With filtering"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We're listening to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Transfer"}]},{"type":"text","value":" event here:"}]},{"type":"element","tag":"code","props":{"code":" let options = {\n filter: {\n value: [],\n },\n fromBlock: 0\n };\n\n myContract.events.Transfer(options)\n .on('data', event => console.log(event))\n .on('changed', changed => console.log(changed))\n .on('error', err => throw err)\n .on('connected', str => console.log(str))\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" filter: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" value: [],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" fromBlock: "}]},{"type":"element","tag":"span","props":{"class":"ct-38e3ec"},"children":[{"type":"text","value":"0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"myContract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"events"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"Transfer"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'data'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'changed'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"changed"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'error'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'connected'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"str"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"))"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"common-subscribe-method"},"children":[{"type":"text","value":"Common Subscribe method"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Filtering options can also be specified:"}]},{"type":"element","tag":"code","props":{"code":" let options = {\n fromBlock: 0,\n address: ['address-1', 'address-2'], //Only get events from specific addresses\n topics: [] //What topics to subscribe to\n };\n\n let subscription = ('logs', options, (err,event) => {\n if (!err)\n console.log(event)\n });\n\n subscription.on('data', event => console.log(event))\n subscription.on('changed', changed => console.log(changed))\n subscription.on('error', err => { throw err })\n subscription.on('connected', nr => console.log(nr))\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" fromBlock: "}]},{"type":"element","tag":"span","props":{"class":"ct-38e3ec"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" address: ["}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'address-1'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'address-2'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"], "}]},{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"//Only get events from specific addresses"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" topics: [] "}]},{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"//What topics to subscribe to"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"subscription"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'logs'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"options"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"err"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"subscription"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'data'"}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"subscription"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'changed'"}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"changed"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"subscription"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'error'"}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"err"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"subscription"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'connected'"}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"nr"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"))"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"getting-event-history"},"children":[{"type":"text","value":"Getting event history"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Getting history for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Transfer"}]},{"type":"text","value":" events for specific values. More info can be found "},{"type":"element","tag":"a","props":{"href":"https://web3js.readthedocs.io/en/v1.2.11/web3-eth-subscribe.html#","rel":["nofollow"]},"children":[{"type":"text","value":"here"}]}]},{"type":"element","tag":"code","props":{"code":" //example options(optional)\n let options = {\n filter: {\n // only get events where transfer value was 1000 or 1337\n value: ['1000', '1337'] \n },\n // number | \"earliest\" | \"pending\" | \"latest\"\n fromBlock: 0, \n toBlock: 'latest'\n };\n\n myContract.getPastEvents('Transfer', options)\n .then(results => console.log(results))\n .catch(err => throw err);\n\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"//example options(optional)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" filter: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// only get events where transfer value was 1000 or 1337"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" value: ["}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'1000'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'1337'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"] "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// number | \"earliest\" | \"pending\" | \"latest\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" fromBlock: "}]},{"type":"element","tag":"span","props":{"class":"ct-38e3ec"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" toBlock: "}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'latest'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"myContract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"getPastEvents"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'Transfer'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"then"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"results"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-f6baa6{color:#FFA657}.ct-f141aa{color:#A5D6FF}.ct-5e1c9b{color:#79C0FF}.ct-ba447c{color:#79C0FF}.ct-38e3ec{color:#79C0FF}.ct-86670b{color:#79C0FF}.ct-c7a0e7{color:#FF7B72}.ct-89bed9{color:#8B949E}.ct-84aa9a{color:#FFA657}.ct-8d27c1{color:#D2A8FF}.ct-55e18c{color:#79C0FF}.ct-2c18b2{color:#79C0FF}.ct-66877e{color:#79C0FF}.ct-6edc38{color:#FFA657}.ct-4075f5{color:#FF7B72}.ct-011e68{color:#D2A8FF}.ct-a86e1f{color:#C9D1D9}.ct-c29147{color:#FF7B72}.ct-a09c09{color:#A5D6FF}.ct-de2679{color:#C9D1D9}.ct-d70533{color:#C9D1D9}.ct-8b4f62{color:#FF7B72}.light .ct-8b4f62{color:#859900}.light .ct-d70533{color:#657B83}.light .ct-de2679{color:#268BD2}.light .ct-a09c09{color:#2AA198}.light .ct-c29147{color:#073642}.light .ct-a86e1f{color:#657B83}.light .ct-011e68{color:#268BD2}.light .ct-4075f5{color:#859900}.light .ct-6edc38{color:#657B83}.light .ct-66877e{color:#859900}.light .ct-2c18b2{color:#268BD2}.light .ct-55e18c{color:#657B83}.light .ct-8d27c1{color:#268BD2}.light .ct-84aa9a{color:#657B83}.light .ct-89bed9{color:#93A1A1}.light .ct-c7a0e7{color:#073642}.light .ct-86670b{color:#268BD2}.light .ct-38e3ec{color:#D33682}.light .ct-ba447c{color:#859900}.light .ct-5e1c9b{color:#B58900}.light .ct-f141aa{color:#2AA198}.light .ct-f6baa6{color:#268BD2}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"getting-smart-contract-instance","depth":2,"text":"Getting smart contract instance"},{"id":"executing-contract-method","depth":2,"text":"Executing contract method","children":[{"id":"example-for-metamask-without-private-key","depth":3,"text":"Example for #Metamask without private key"},{"id":"nodejs-and-react-native-example","depth":3,"text":"Node.js and React Native example"},{"id":"calling-a-batch-of-contracts-methods","depth":3,"text":"Calling a batch of contract's methods"}]},{"id":"subscribing-to-smart-contract-events","depth":2,"text":"Subscribing to smart contract events","children":[{"id":"by-accessing-contractevents","depth":3,"text":"By accessing contract.events"},{"id":"with-filtering","depth":3,"text":"With filtering"},{"id":"common-subscribe-method","depth":3,"text":"Common Subscribe method"},{"id":"getting-event-history","depth":3,"text":"Getting event history"}]}]}},"_type":"markdown","_id":"content:Blockchain:Smart contracts.md","_source":"content","_file":"Blockchain/Smart contracts.md","_extension":"md"},{"_path":"/css/automatic-grid-like-masonry-with-pure-css","_dir":"css","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Automatic Grid Like Masonry With Pure CSS","description":"Grid, that places items by density. Pure #css solution. Can be used with items, that take different amount of rows/columns.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Grid, that places items by density. Pure #css solution. Can be used with items, that take different amount of rows/columns."}]},{"type":"element","tag":"code","props":{"code":"$cell: 250px;\n$gap: 20px;\n\n.grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax($cell, 1fr));\n grid-auto-rows: 256px;\n grid-auto-flow: row dense;\n grid-column-gap: $gap;\n grid-row-gap: $gap;\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"$cell: 250px;\n$gap: 20px;\n\n.grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax($cell, 1fr));\n grid-auto-rows: 256px;\n grid-auto-flow: row dense;\n grid-column-gap: $gap;\n grid-row-gap: $gap;\n}\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"basic-elements-with-double-height-or-width"},"children":[{"type":"text","value":"Basic elements with double height or width"}]},{"type":"element","tag":"code","props":{"code":".h-2 { // takes 2 columns\n grid-column-end: span 2;\n}\n\n.v-2 { // takes 2 rows\n grid-row-end: span 2;\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":".h-2 { // takes 2 columns\n grid-column-end: span 2;\n}\n\n.v-2 { // takes 2 rows\n grid-row-end: span 2;\n}\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"header-that-fills-all-columns"},"children":[{"type":"text","value":"Header, that fills all columns"}]},{"type":"element","tag":"code","props":{"code":".full-width {\n grid-row: 1 / 2; // height: 1 row\n grid-column: 1 / -1;\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":".full-width {\n grid-row: 1 / 2; // height: 1 row\n grid-column: 1 / -1;\n}\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"stamp-element-that-takes-3-rows-in-the-top-right-corner"},"children":[{"type":"text","value":"Stamp element, that takes 3 rows in the top right corner"}]},{"type":"element","tag":"code","props":{"code":".top-right {\n grid-row: 1 / 3; // height here\n grid-column: -2 / -1; // width here\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":".top-right {\n grid-row: 1 / 3; // height here\n grid-column: -2 / -1; // width here\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Grid, that places items by density. Pure #css solution. Can be used with items, that take different amount of rows/columns."}]},{"type":"element","tag":"code","props":{"code":"$cell: 250px;\n$gap: 20px;\n\n.grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax($cell, 1fr));\n grid-auto-rows: 256px;\n grid-auto-flow: row dense;\n grid-column-gap: $gap;\n grid-row-gap: $gap;\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0a7911"},"children":[{"type":"text","value":"$cell: "}]},{"type":"element","tag":"span","props":{"class":"ct-64f3a7"},"children":[{"type":"text","value":"250"}]},{"type":"element","tag":"span","props":{"class":"ct-7d5daa"},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0a7911"},"children":[{"type":"text","value":"$gap: "}]},{"type":"element","tag":"span","props":{"class":"ct-64f3a7"},"children":[{"type":"text","value":"20"}]},{"type":"element","tag":"span","props":{"class":"ct-7d5daa"},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-810bae"},"children":[{"type":"text","value":".grid"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aa8a5"},"children":[{"type":"text","value":"display"}]},{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-8d33fd"},"children":[{"type":"text","value":"grid"}]},{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aa8a5"},"children":[{"type":"text","value":"grid-template-columns"}]},{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-d8b9cf"},"children":[{"type":"text","value":"repeat"}]},{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-9e6b01"},"children":[{"type":"text","value":"auto-fit"}]},{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-d8b9cf"},"children":[{"type":"text","value":"minmax"}]},{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-9e6b01"},"children":[{"type":"text","value":"$cell"}]},{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a29ed9"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-c55733"},"children":[{"type":"text","value":"fr"}]},{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":"));"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-db8cc5"},"children":[{"type":"text","value":"grid-auto-rows"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-64f3a7"},"children":[{"type":"text","value":"256"}]},{"type":"element","tag":"span","props":{"class":"ct-7d5daa"},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aa8a5"},"children":[{"type":"text","value":"grid-auto-flow"}]},{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-8d33fd"},"children":[{"type":"text","value":"row"}]},{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d33fd"},"children":[{"type":"text","value":"dense"}]},{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aa8a5"},"children":[{"type":"text","value":"grid-column-gap"}]},{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9e6b01"},"children":[{"type":"text","value":"$gap"}]},{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aa8a5"},"children":[{"type":"text","value":"grid-row-gap"}]},{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9e6b01"},"children":[{"type":"text","value":"$gap"}]},{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"basic-elements-with-double-height-or-width"},"children":[{"type":"text","value":"Basic elements with double height or width"}]},{"type":"element","tag":"code","props":{"code":".h-2 { // takes 2 columns\n grid-column-end: span 2;\n}\n\n.v-2 { // takes 2 rows\n grid-row-end: span 2;\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-810bae"},"children":[{"type":"text","value":".h-2"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-0f60fc"},"children":[{"type":"text","value":"// takes 2 columns"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-db8cc5"},"children":[{"type":"text","value":"grid-column-end"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-db8cc5"},"children":[{"type":"text","value":"span"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-64f3a7"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-810bae"},"children":[{"type":"text","value":".v-2"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-0f60fc"},"children":[{"type":"text","value":"// takes 2 rows"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-db8cc5"},"children":[{"type":"text","value":"grid-row-end"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-db8cc5"},"children":[{"type":"text","value":"span"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-64f3a7"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"header-that-fills-all-columns"},"children":[{"type":"text","value":"Header, that fills all columns"}]},{"type":"element","tag":"code","props":{"code":".full-width {\n grid-row: 1 / 2; // height: 1 row\n grid-column: 1 / -1;\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-810bae"},"children":[{"type":"text","value":".full-width"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-db8cc5"},"children":[{"type":"text","value":"grid-row"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-64f3a7"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d5daa"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-64f3a7"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":"; "}]},{"type":"element","tag":"span","props":{"class":"ct-0f60fc"},"children":[{"type":"text","value":"// height: 1 row"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-db8cc5"},"children":[{"type":"text","value":"grid-column"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-64f3a7"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" / "}]},{"type":"element","tag":"span","props":{"class":"ct-64f3a7"},"children":[{"type":"text","value":"-1"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"stamp-element-that-takes-3-rows-in-the-top-right-corner"},"children":[{"type":"text","value":"Stamp element, that takes 3 rows in the top right corner"}]},{"type":"element","tag":"code","props":{"code":".top-right {\n grid-row: 1 / 3; // height here\n grid-column: -2 / -1; // width here\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-810bae"},"children":[{"type":"text","value":".top-right"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-db8cc5"},"children":[{"type":"text","value":"grid-row"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-64f3a7"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d5daa"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-64f3a7"},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":"; "}]},{"type":"element","tag":"span","props":{"class":"ct-0f60fc"},"children":[{"type":"text","value":"// height here"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-db8cc5"},"children":[{"type":"text","value":"grid-column"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-64f3a7"},"children":[{"type":"text","value":"-2"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" / "}]},{"type":"element","tag":"span","props":{"class":"ct-64f3a7"},"children":[{"type":"text","value":"-1"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":"; "}]},{"type":"element","tag":"span","props":{"class":"ct-0f60fc"},"children":[{"type":"text","value":"// width here"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-0f60fc{color:#8B949E}.ct-db8cc5{color:#79C0FF}.ct-c55733{color:#FF7B72}.ct-a29ed9{color:#79C0FF}.ct-9e6b01{color:#FFA657}.ct-d8b9cf{color:#79C0FF}.ct-8d33fd{color:#79C0FF}.ct-9aa8a5{color:#79C0FF}.ct-ed4939{color:#C9D1D9}.ct-810bae{color:#79C0FF}.ct-d93ca5{color:#C9D1D9}.ct-7d5daa{color:#FF7B72}.ct-64f3a7{color:#79C0FF}.ct-0a7911{color:#FFA657}.light .ct-0a7911{color:#657B83}.light .ct-64f3a7{color:#D33682}.light .ct-7d5daa{color:#859900}.light .ct-d93ca5{color:#657B83}.light .ct-810bae{color:#93A1A1}.light .ct-ed4939{color:#657B83}.light .ct-9aa8a5{color:#859900}.light .ct-8d33fd{color:#657B83}.light .ct-d8b9cf{color:#268BD2}.light .ct-9e6b01{color:#657B83}.light .ct-a29ed9{color:#D33682}.light .ct-c55733{color:#859900}.light .ct-db8cc5{color:#859900}.light .ct-0f60fc{color:#93A1A1}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"basic-elements-with-double-height-or-width","depth":3,"text":"Basic elements with double height or width"},{"id":"header-that-fills-all-columns","depth":3,"text":"Header, that fills all columns"},{"id":"stamp-element-that-takes-3-rows-in-the-top-right-corner","depth":3,"text":"Stamp element, that takes 3 rows in the top right corner"}]}},"_type":"markdown","_id":"content:CSS:Automatic Grid like Masonry with pure CSS.md","_source":"content","_file":"CSS/Automatic Grid like Masonry with pure CSS.md","_extension":"md"},{"_path":"/css/sass-nth-child-iterate-mixin","_dir":"css","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Sass Nth Child Iterate Mixin","description":"Say, we need to color n items by specific colors, which depend on its position. #SCSS supports iteration over lists for that purposes:","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Say, we need to color "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"n"}]},{"type":"text","value":" items by specific colors, which depend on its position. #SCSS supports "},{"type":"element","tag":"a","props":{"href":"https://sass-lang.com/documentation/at-rules/control/each","rel":["nofollow"]},"children":[{"type":"text","value":"iteration over lists"}]},{"type":"text","value":" for that purposes:"}]},{"type":"element","tag":"code","props":{"code":"@mixin color-per-child($colors) {\n @each $color in $colors {\n &:nth-child(#{index(($colors), ($color))}) {\n color: $color;\n }\n }\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"@mixin color-per-child($colors) {\n @each $color in $colors {\n &:nth-child(#{index(($colors), ($color))}) {\n color: $color;\n }\n }\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Usage is simple:"}]},{"type":"element","tag":"code","props":{"code":".item {\n @include color_per_child((#ded187, #dbde87, #bade87, #9cde87, #87deaa));\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":".item {\n @include color_per_child((#ded187, #dbde87, #bade87, #9cde87, #87deaa));\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Say, we need to color "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"n"}]},{"type":"text","value":" items by specific colors, which depend on its position. #SCSS supports "},{"type":"element","tag":"a","props":{"href":"https://sass-lang.com/documentation/at-rules/control/each","rel":["nofollow"]},"children":[{"type":"text","value":"iteration over lists"}]},{"type":"text","value":" for that purposes:"}]},{"type":"element","tag":"code","props":{"code":"@mixin color-per-child($colors) {\n @each $color in $colors {\n &:nth-child(#{index(($colors), ($color))}) {\n color: $color;\n }\n }\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f2cade"},"children":[{"type":"text","value":"@mixin"}]},{"type":"element","tag":"span","props":{"class":"ct-c632ae"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f9af5d"},"children":[{"type":"text","value":"color-per-child"}]},{"type":"element","tag":"span","props":{"class":"ct-c632ae"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-c602c5"},"children":[{"type":"text","value":"$colors"}]},{"type":"element","tag":"span","props":{"class":"ct-c632ae"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c632ae"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f2cade"},"children":[{"type":"text","value":"@each"}]},{"type":"element","tag":"span","props":{"class":"ct-c632ae"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c602c5"},"children":[{"type":"text","value":"$color"}]},{"type":"element","tag":"span","props":{"class":"ct-c632ae"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f2cade"},"children":[{"type":"text","value":"in"}]},{"type":"element","tag":"span","props":{"class":"ct-c632ae"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c602c5"},"children":[{"type":"text","value":"$colors"}]},{"type":"element","tag":"span","props":{"class":"ct-c632ae"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c632ae"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cb522"},"children":[{"type":"text","value":"&"}]},{"type":"element","tag":"span","props":{"class":"ct-c6ad1e"},"children":[{"type":"text","value":":nth-child"}]},{"type":"element","tag":"span","props":{"class":"ct-c632ae"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-c602c5"},"children":[{"type":"text","value":"#{"}]},{"type":"element","tag":"span","props":{"class":"ct-673c53"},"children":[{"type":"text","value":"index"}]},{"type":"element","tag":"span","props":{"class":"ct-c602c5"},"children":[{"type":"text","value":"(($colors), ($color))}"}]},{"type":"element","tag":"span","props":{"class":"ct-c632ae"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c632ae"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2c3b25"},"children":[{"type":"text","value":"color"}]},{"type":"element","tag":"span","props":{"class":"ct-c632ae"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-c602c5"},"children":[{"type":"text","value":"$color"}]},{"type":"element","tag":"span","props":{"class":"ct-c632ae"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-81d937"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-81d937"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-81d937"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Usage is simple:"}]},{"type":"element","tag":"code","props":{"code":".item {\n @include color_per_child((#ded187, #dbde87, #bade87, #9cde87, #87deaa));\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-16cb29"},"children":[{"type":"text","value":".item"}]},{"type":"element","tag":"span","props":{"class":"ct-81d937"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-81d937"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b9d1fe"},"children":[{"type":"text","value":"@include"}]},{"type":"element","tag":"span","props":{"class":"ct-81d937"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-09f479"},"children":[{"type":"text","value":"color_per_child"}]},{"type":"element","tag":"span","props":{"class":"ct-81d937"},"children":[{"type":"text","value":"(("}]},{"type":"element","tag":"span","props":{"class":"ct-9ce1dc"},"children":[{"type":"text","value":"#ded187"}]},{"type":"element","tag":"span","props":{"class":"ct-81d937"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-9ce1dc"},"children":[{"type":"text","value":"#dbde87"}]},{"type":"element","tag":"span","props":{"class":"ct-81d937"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-9ce1dc"},"children":[{"type":"text","value":"#bade87"}]},{"type":"element","tag":"span","props":{"class":"ct-81d937"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-9ce1dc"},"children":[{"type":"text","value":"#9cde87"}]},{"type":"element","tag":"span","props":{"class":"ct-81d937"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-9ce1dc"},"children":[{"type":"text","value":"#87deaa"}]},{"type":"element","tag":"span","props":{"class":"ct-81d937"},"children":[{"type":"text","value":"));"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-81d937"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-9ce1dc{color:#79C0FF}.ct-09f479{color:#D2A8FF}.ct-b9d1fe{color:#FF7B72}.ct-16cb29{color:#79C0FF}.ct-81d937{color:#C9D1D9}.ct-2c3b25{color:#79C0FF}.ct-673c53{color:#79C0FF}.ct-c6ad1e{color:#79C0FF}.ct-7cb522{color:#7EE787}.ct-c602c5{color:#FFA657}.ct-f9af5d{color:#D2A8FF}.ct-c632ae{color:#C9D1D9}.ct-f2cade{color:#FF7B72}.light .ct-f2cade{color:#859900}.light .ct-c632ae{color:#657B83}.light .ct-f9af5d{color:#268BD2}.light .ct-c602c5{color:#657B83}.light .ct-7cb522{color:#268BD2}.light .ct-c6ad1e{color:#93A1A1}.light .ct-673c53{color:#268BD2}.light .ct-2c3b25{color:#859900}.light .ct-81d937{color:#657B83}.light .ct-16cb29{color:#93A1A1}.light .ct-b9d1fe{color:#859900}.light .ct-09f479{color:#268BD2}.light .ct-9ce1dc{color:#CB4B16}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:CSS:Sass nth-child iterate mixin.md","_source":"content","_file":"CSS/Sass nth-child iterate mixin.md","_extension":"md"},{"_path":"/css/test-if-browser-supports-css-rules","_dir":"css","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Test If Browser Supports CSS Rules","description":"To test if browser supports some #CSS rules, do following:","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To test if browser supports some #CSS rules, do following:"}]},{"type":"element","tag":"code","props":{"code":"@supports (backdrop-filter: blur(5px)) {\n backdrop-filter: blur(5px);\n}\n","language":"css"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"@supports (backdrop-filter: blur(5px)) {\n backdrop-filter: blur(5px);\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@mixin"}]},{"type":"text","value":" will only apply rule if browser support backdrop filtering:"}]},{"type":"element","tag":"code","props":{"code":"@mixin can_backdrop {\n @supports (\n (-webkit-backdrop-filter: blur(5px)) or \n (backdrop-filter: blur(5px))\n ) {\n @content;\n }\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"@mixin can_backdrop {\n @supports (\n (-webkit-backdrop-filter: blur(5px)) or \n (backdrop-filter: blur(5px))\n ) {\n @content;\n }\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To test if browser supports some #CSS rules, do following:"}]},{"type":"element","tag":"code","props":{"code":"@supports (backdrop-filter: blur(5px)) {\n backdrop-filter: blur(5px);\n}\n","language":"css"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7302b2"},"children":[{"type":"text","value":"@supports"}]},{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-cfcc41"},"children":[{"type":"text","value":"backdrop-filter"}]},{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-2bd9f1"},"children":[{"type":"text","value":"blur"}]},{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-1352cd"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-7302b2"},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":")) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b1b623"},"children":[{"type":"text","value":"backdrop-filter"}]},{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":": blur(5px);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@mixin"}]},{"type":"text","value":" will only apply rule if browser support backdrop filtering:"}]},{"type":"element","tag":"code","props":{"code":"@mixin can_backdrop {\n @supports (\n (-webkit-backdrop-filter: blur(5px)) or \n (backdrop-filter: blur(5px))\n ) {\n @content;\n }\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7302b2"},"children":[{"type":"text","value":"@mixin"}]},{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-32ba5f"},"children":[{"type":"text","value":"can_backdrop"}]},{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7302b2"},"children":[{"type":"text","value":"@supports"}]},{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65b5bb"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-414602"},"children":[{"type":"text","value":"-webkit-backdrop-filter"}]},{"type":"element","tag":"span","props":{"class":"ct-65b5bb"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-5bfb02"},"children":[{"type":"text","value":"blur"}]},{"type":"element","tag":"span","props":{"class":"ct-65b5bb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-b3a8ef"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-352265"},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"class":"ct-65b5bb"},"children":[{"type":"text","value":")) "}]},{"type":"element","tag":"span","props":{"class":"ct-7c4f33"},"children":[{"type":"text","value":"or"}]},{"type":"element","tag":"span","props":{"class":"ct-65b5bb"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-cfcc41"},"children":[{"type":"text","value":"backdrop-filter"}]},{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-2bd9f1"},"children":[{"type":"text","value":"blur"}]},{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-1352cd"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-7302b2"},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":" ) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7302b2"},"children":[{"type":"text","value":"@content"}]},{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-7c4f33{color:#79C0FF}.ct-352265{color:#FF7B72}.ct-b3a8ef{color:#79C0FF}.ct-5bfb02{color:#79C0FF}.ct-414602{color:#79C0FF}.ct-65b5bb{color:#C9D1D9}.ct-32ba5f{color:#D2A8FF}.ct-b1b623{color:#7EE787}.ct-1352cd{color:#79C0FF}.ct-2bd9f1{color:#79C0FF}.ct-cfcc41{color:#79C0FF}.ct-3d885b{color:#C9D1D9}.ct-7302b2{color:#FF7B72}.light .ct-7302b2{color:#859900}.light .ct-3d885b{color:#657B83}.light .ct-cfcc41{color:#859900}.light .ct-2bd9f1{color:#268BD2}.light .ct-1352cd{color:#D33682}.light .ct-b1b623{color:#268BD2}.light .ct-32ba5f{color:#268BD2}.light .ct-65b5bb{color:#657B83}.light .ct-414602{color:#859900}.light .ct-5bfb02{color:#268BD2}.light .ct-b3a8ef{color:#D33682}.light .ct-352265{color:#859900}.light .ct-7c4f33{color:#657B83}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:CSS:Test if browser supports CSS rules.md","_source":"content","_file":"CSS/Test if browser supports CSS rules.md","_extension":"md"},{"_path":"/docker/building-static-pages-with-docker","_dir":"docker","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Building Static Pages With Docker","description":"Sample #Dockerfile for static Typescript builds such a #nextjs, #gatsby or #nuxt:","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sample #Dockerfile for static Typescript builds such a #nextjs, #gatsby or #nuxt:"}]},{"type":"element","tag":"code","props":{"code":"FROM node:16-alpine as builder\nWORKDIR /app\nCOPY package.json yarn.lock ./\nRUN yarn\nCOPY . .\n\n# your generate command here\nRUN yarn generate\n\nFROM nginx\nCOPY --from=builder /app/dist /usr/share/nginx/html\n","language":"Dockerfile"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"FROM node:16-alpine as builder\nWORKDIR /app\nCOPY package.json yarn.lock ./\nRUN yarn\nCOPY . .\n\n# your generate command here\nRUN yarn generate\n\nFROM nginx\nCOPY --from=builder /app/dist /usr/share/nginx/html\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sample #Dockerfile for static Typescript builds such a #nextjs, #gatsby or #nuxt:"}]},{"type":"element","tag":"code","props":{"code":"FROM node:16-alpine as builder\nWORKDIR /app\nCOPY package.json yarn.lock ./\nRUN yarn\nCOPY . .\n\n# your generate command here\nRUN yarn generate\n\nFROM nginx\nCOPY --from=builder /app/dist /usr/share/nginx/html\n","language":"Dockerfile"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"FROM node:16-alpine as builder\nWORKDIR /app\nCOPY package.json yarn.lock ./\nRUN yarn\nCOPY . .\n\n# your generate command here\nRUN yarn generate\n\nFROM nginx\nCOPY --from=builder /app/dist /usr/share/nginx/html"}]}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Docker:Building static pages with Docker.md","_source":"content","_file":"Docker/Building static pages with Docker.md","_extension":"md"},{"_path":"/docker/common-things-with-docker-mailserver","_dir":"docker","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Common Things With Docker Mailserver","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"1-docker-mailserver-ssl-alert-number-42"},"children":[{"type":"text","value":"1. docker-mailserver SSL alert number 42"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"I was getting following error after setting up TLS certificates in docker-mailserver after setting it up with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"letsencrypt"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"TLS handshaking: SSL_accept() failed: error:14094412:SSL routines:ssl3_read_bytes:sslv3 alert bad certificate: SSL alert number 42\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"TLS handshaking: SSL_accept() failed: error:14094412:SSL routines:ssl3_read_bytes:sslv3 alert bad certificate: SSL alert number 42\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The problem was caused by two reasons"}]},{"type":"element","tag":"h3","props":{"id":"11-letsencrypt-and-wildcard-domains"},"children":[{"type":"text","value":"1.1. Letsencrypt and wildcard domains"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"My "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"MX"}]},{"type":"text","value":" domain was "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"example.com"}]},{"type":"text","value":", bu "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"letsencrypt"}]},{"type":"text","value":" have been set up with wildcard certificate on "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"*.example.com"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"So, specifying "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"SSL_MODE=letsencrypt"}]},{"type":"text","value":" made it searching for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/letsencrypt/mail.example.com"}]},{"type":"text","value":", when it was just "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/letsencrypt/example.com"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"SOLUTION"}]},{"type":"text","value":":"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Change .env file to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"SSL_MODE=manual"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"SSL_KEY_PATH=/etc/letsencrypt/example.com/fullchain.pem"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"SSL_KEY_PATH=/etc/letsencrypt/example.com/privkey.pem"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don't forget to modify "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docker-compose"}]},{"type":"text","value":" volumes and pass certs from host filesystem. Note: they're not "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mail.example.com"}]},{"type":"text","value":", they're just "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"example.com"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This "},{"type":"element","tag":"a","props":{"href":"https://github.com/docker-mailserver/docker-mailserver/issues/1607","rel":["nofollow"]},"children":[{"type":"text","value":"ticket"}]},{"type":"text","value":" describes it well."}]},{"type":"element","tag":"h3","props":{"id":"12-docker-was-using-internal-hostname-of-docker-mailserver"},"children":[{"type":"text","value":"1.2. Docker was using internal hostname of docker-mailserver"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Internal hostname for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docker-mailserver"}]},{"type":"text","value":" was just "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mail"}]},{"type":"text","value":", and other container tried to send emails to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mail:25"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"SOLUTION:"}]},{"type":"text","value":" change internal hostname in your app settings to actual, specified in your certificates and MX record."}]},{"type":"element","tag":"h3","props":{"id":"2-docker-mailserver-not-listening-on-25-port-smtp"},"children":[{"type":"text","value":"2. docker-mailserver not listening on 25 port (SMTP)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Solution was to add quotes in your docker compose, just like that:"}]},{"type":"element","tag":"code","props":{"code":" ports:\n - \"25:25\"\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":" ports:\n - \"25:25\"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This "},{"type":"element","tag":"a","props":{"href":"https://github.com/docker-mailserver/docker-mailserver/issues/684#issuecomment-322029794","rel":["nofollow"]},"children":[{"type":"text","value":"ticket"}]},{"type":"text","value":" solved it"}]},{"type":"element","tag":"h3","props":{"id":"3-connect-to-docker-mailserver-from-other-docker-compose"},"children":[{"type":"text","value":"3. Connect to docker-mailserver from other docker-compose"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"I've had "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mailserver/compose.yaml"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"application/compose.yaml"}]},{"type":"text","value":" and needed to connect "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"application"}]},{"type":"text","value":" to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mailserver"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"// application/compose.yaml\napp:\n networks:\n - shared\nnetworks:\n shared:\n driver: bridge\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// application/compose.yaml\napp:\n networks:\n - shared\nnetworks:\n shared:\n driver: bridge\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"/// mailserver/compose.yaml\nmail:\n networks:\n - \"application_shared\"\nnetworks:\n application_shared:\n external: true\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"/// mailserver/compose.yaml\nmail:\n networks:\n - \"application_shared\"\nnetworks:\n application_shared:\n external: true\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"4-how-to-convert-dkim-mailtxt-to-dns-record"},"children":[{"type":"text","value":"4. How to convert DKIM mail.txt to DNS record"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"My "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mail.txt"}]},{"type":"text","value":" was like:"}]},{"type":"element","tag":"code","props":{"code":"mail._domainkey IN TXT ( \"v=DKIM1; h=sha256; k=rsa; \"\n \"p=sOmEJuNkLiKeRaNdOmOrLikeThat\"\n \"eVeNmOrERANdOmStuFf\" ) ; ----- DKIM key mail for example.com\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"mail._domainkey IN TXT ( \"v=DKIM1; h=sha256; k=rsa; \"\n \"p=sOmEJuNkLiKeRaNdOmOrLikeThat\"\n \"eVeNmOrERANdOmStuFf\" ) ; ----- DKIM key mail for example.com\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"SOLUTION"}]},{"type":"text","value":": concatenate all strings inside round brackets:"}]},{"type":"element","tag":"code","props":{"code":"v=DKIM1; h=sha256; k=rsa; p=sOmEJuNkLiKeRaNdOmOrLikeThateVeNmOrERANdOmStuFf\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"v=DKIM1; h=sha256; k=rsa; p=sOmEJuNkLiKeRaNdOmOrLikeThateVeNmOrERANdOmStuFf\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"And add them as a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"TXT"}]},{"type":"text","value":" record on my DNS provider control panel under "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mail._domainkey"}]},{"type":"text","value":" record."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Solution was right in "},{"type":"element","tag":"a","props":{"href":"https://docker-mailserver.github.io/docker-mailserver/edge/config/best-practices/dkim_dmarc_spf/#dkim-dns","rel":["nofollow"]},"children":[{"type":"text","value":"official documentation"}]},{"type":"text","value":", just hidden a little bit."}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"1-docker-mailserver-ssl-alert-number-42"},"children":[{"type":"text","value":"1. docker-mailserver SSL alert number 42"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"I was getting following error after setting up TLS certificates in docker-mailserver after setting it up with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"letsencrypt"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"TLS handshaking: SSL_accept() failed: error:14094412:SSL routines:ssl3_read_bytes:sslv3 alert bad certificate: SSL alert number 42\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"TLS handshaking: SSL_accept() failed: error:14094412:SSL routines:ssl3_read_bytes:sslv3 alert bad certificate: SSL alert number 42"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The problem was caused by two reasons"}]},{"type":"element","tag":"h3","props":{"id":"11-letsencrypt-and-wildcard-domains"},"children":[{"type":"text","value":"1.1. Letsencrypt and wildcard domains"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"My "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"MX"}]},{"type":"text","value":" domain was "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"example.com"}]},{"type":"text","value":", bu "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"letsencrypt"}]},{"type":"text","value":" have been set up with wildcard certificate on "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"*.example.com"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"So, specifying "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"SSL_MODE=letsencrypt"}]},{"type":"text","value":" made it searching for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/letsencrypt/mail.example.com"}]},{"type":"text","value":", when it was just "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/letsencrypt/example.com"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"SOLUTION"}]},{"type":"text","value":":"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Change .env file to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"SSL_MODE=manual"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"SSL_KEY_PATH=/etc/letsencrypt/example.com/fullchain.pem"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"SSL_KEY_PATH=/etc/letsencrypt/example.com/privkey.pem"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don't forget to modify "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docker-compose"}]},{"type":"text","value":" volumes and pass certs from host filesystem. Note: they're not "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mail.example.com"}]},{"type":"text","value":", they're just "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"example.com"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This "},{"type":"element","tag":"a","props":{"href":"https://github.com/docker-mailserver/docker-mailserver/issues/1607","rel":["nofollow"]},"children":[{"type":"text","value":"ticket"}]},{"type":"text","value":" describes it well."}]},{"type":"element","tag":"h3","props":{"id":"12-docker-was-using-internal-hostname-of-docker-mailserver"},"children":[{"type":"text","value":"1.2. Docker was using internal hostname of docker-mailserver"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Internal hostname for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docker-mailserver"}]},{"type":"text","value":" was just "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mail"}]},{"type":"text","value":", and other container tried to send emails to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mail:25"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"SOLUTION:"}]},{"type":"text","value":" change internal hostname in your app settings to actual, specified in your certificates and MX record."}]},{"type":"element","tag":"h3","props":{"id":"2-docker-mailserver-not-listening-on-25-port-smtp"},"children":[{"type":"text","value":"2. docker-mailserver not listening on 25 port (SMTP)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Solution was to add quotes in your docker compose, just like that:"}]},{"type":"element","tag":"code","props":{"code":" ports:\n - \"25:25\"\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-da08ce"},"children":[{"type":"text","value":"ports"}]},{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-5d2a12"},"children":[{"type":"text","value":"\"25:25\""}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This "},{"type":"element","tag":"a","props":{"href":"https://github.com/docker-mailserver/docker-mailserver/issues/684#issuecomment-322029794","rel":["nofollow"]},"children":[{"type":"text","value":"ticket"}]},{"type":"text","value":" solved it"}]},{"type":"element","tag":"h3","props":{"id":"3-connect-to-docker-mailserver-from-other-docker-compose"},"children":[{"type":"text","value":"3. Connect to docker-mailserver from other docker-compose"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"I've had "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mailserver/compose.yaml"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"application/compose.yaml"}]},{"type":"text","value":" and needed to connect "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"application"}]},{"type":"text","value":" to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mailserver"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"// application/compose.yaml\napp:\n networks:\n - shared\nnetworks:\n shared:\n driver: bridge\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5d2a12"},"children":[{"type":"text","value":"// application/compose.yaml"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-da08ce"},"children":[{"type":"text","value":"app"}]},{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-da08ce"},"children":[{"type":"text","value":"networks"}]},{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-5d2a12"},"children":[{"type":"text","value":"shared"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-da08ce"},"children":[{"type":"text","value":"networks"}]},{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-da08ce"},"children":[{"type":"text","value":"shared"}]},{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-da08ce"},"children":[{"type":"text","value":"driver"}]},{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-5d2a12"},"children":[{"type":"text","value":"bridge"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"/// mailserver/compose.yaml\nmail:\n networks:\n - \"application_shared\"\nnetworks:\n application_shared:\n external: true\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5d2a12"},"children":[{"type":"text","value":"/// mailserver/compose.yaml"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-da08ce"},"children":[{"type":"text","value":"mail"}]},{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-da08ce"},"children":[{"type":"text","value":"networks"}]},{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-5d2a12"},"children":[{"type":"text","value":"\"application_shared\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-da08ce"},"children":[{"type":"text","value":"networks"}]},{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-da08ce"},"children":[{"type":"text","value":"application_shared"}]},{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-da08ce"},"children":[{"type":"text","value":"external"}]},{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-c5561e"},"children":[{"type":"text","value":"true"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"4-how-to-convert-dkim-mailtxt-to-dns-record"},"children":[{"type":"text","value":"4. How to convert DKIM mail.txt to DNS record"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"My "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mail.txt"}]},{"type":"text","value":" was like:"}]},{"type":"element","tag":"code","props":{"code":"mail._domainkey IN TXT ( \"v=DKIM1; h=sha256; k=rsa; \"\n \"p=sOmEJuNkLiKeRaNdOmOrLikeThat\"\n \"eVeNmOrERANdOmStuFf\" ) ; ----- DKIM key mail for example.com\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"mail._domainkey IN TXT ( \"v=DKIM1; h=sha256; k=rsa; \"\n \"p=sOmEJuNkLiKeRaNdOmOrLikeThat\"\n \"eVeNmOrERANdOmStuFf\" ) ; ----- DKIM key mail for example.com"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"SOLUTION"}]},{"type":"text","value":": concatenate all strings inside round brackets:"}]},{"type":"element","tag":"code","props":{"code":"v=DKIM1; h=sha256; k=rsa; p=sOmEJuNkLiKeRaNdOmOrLikeThateVeNmOrERANdOmStuFf\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"v=DKIM1; h=sha256; k=rsa; p=sOmEJuNkLiKeRaNdOmOrLikeThateVeNmOrERANdOmStuFf"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"And add them as a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"TXT"}]},{"type":"text","value":" record on my DNS provider control panel under "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mail._domainkey"}]},{"type":"text","value":" record."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Solution was right in "},{"type":"element","tag":"a","props":{"href":"https://docker-mailserver.github.io/docker-mailserver/edge/config/best-practices/dkim_dmarc_spf/#dkim-dns","rel":["nofollow"]},"children":[{"type":"text","value":"official documentation"}]},{"type":"text","value":", just hidden a little bit."}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-c5561e{color:#79C0FF}.ct-5d2a12{color:#A5D6FF}.ct-da08ce{color:#7EE787}.ct-fe4aeb{color:#C9D1D9}.light .ct-fe4aeb{color:#657B83}.light .ct-da08ce{color:#268BD2}.light .ct-5d2a12{color:#2AA198}.light .ct-c5561e{color:#B58900}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"1-docker-mailserver-ssl-alert-number-42","depth":2,"text":"1. docker-mailserver SSL alert number 42","children":[{"id":"11-letsencrypt-and-wildcard-domains","depth":3,"text":"1.1. Letsencrypt and wildcard domains"},{"id":"12-docker-was-using-internal-hostname-of-docker-mailserver","depth":3,"text":"1.2. Docker was using internal hostname of docker-mailserver"},{"id":"2-docker-mailserver-not-listening-on-25-port-smtp","depth":3,"text":"2. docker-mailserver not listening on 25 port (SMTP)"},{"id":"3-connect-to-docker-mailserver-from-other-docker-compose","depth":3,"text":"3. Connect to docker-mailserver from other docker-compose"},{"id":"4-how-to-convert-dkim-mailtxt-to-dns-record","depth":3,"text":"4. How to convert DKIM mail.txt to DNS record"}]}]}},"_type":"markdown","_id":"content:Docker:Common things with docker-mailserver.md","_source":"content","_file":"Docker/Common things with docker-mailserver.md","_extension":"md"},{"_path":"/docker/drone-ci","_dir":"docker","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Drone Ci","description":"Can be used with Private docker registry to deploy things using #docker.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Can be used with "},{"type":"element","tag":"a","props":{"href":"Private%20docker%20registry"},"children":[{"type":"text","value":"Private docker registry"}]},{"type":"text","value":" to deploy things using #docker."}]},{"type":"element","tag":"h2","props":{"id":"pushing-to-private-docker_registry"},"children":[{"type":"text","value":"Pushing to private docker_registry"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You should specify "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"global_docker_login"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"global_docker_password"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"global_docker_registry"}]},{"type":"text","value":" organizations variables in your "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"drone"}]},{"type":"text","value":". And "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docker_repo"}]},{"type":"text","value":" variable for your repo as "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docker.yourdomain.com/your-image"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is example of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".droneci"}]},{"type":"text","value":" for "},{"type":"element","tag":"a","props":{"href":"Private%20docker%20registry"},"children":[{"type":"text","value":"private docker registry"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"kind: pipeline\nname: build\ntype: docker\n\nplatform:\n os: linux\n arch: amd64\n\nsteps:\n - name: build-master\n image: plugins/docker\n when:\n branch:\n - master\n settings:\n dockerfile: Dockerfile\n tag:\n - ${DRONE_BRANCH}\n username:\n from_secret: global_docker_login\n password:\n from_secret: global_docker_password\n registry:\n from_secret: global_docker_registry\n repo:\n from_secret: docker_repo\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"kind: pipeline\nname: build\ntype: docker\n\nplatform:\n os: linux\n arch: amd64\n\nsteps:\n - name: build-master\n image: plugins/docker\n when:\n branch:\n - master\n settings:\n dockerfile: Dockerfile\n tag:\n - ${DRONE_BRANCH}\n username:\n from_secret: global_docker_login\n password:\n from_secret: global_docker_password\n registry:\n from_secret: global_docker_registry\n repo:\n from_secret: docker_repo\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"docker-compose-file-for-drone-ci"},"children":[{"type":"text","value":"Docker-compose file for drone-ci"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"drone"}]},{"type":"text","value":" service is ui itself and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"drone-agent"}]},{"type":"text","value":" is runner for builds, that can be started on different machine (or machines)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Change "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"secret_id"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"rpc_secret"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"drone.url"}]},{"type":"text","value":" to something you like."}]},{"type":"element","tag":"code","props":{"code":"version: \"3\"\n\nservices:\n drone:\n container_name: drone\n image: drone/drone:latest\n environment:\n - DRONE_GITHUB_CLIENT_ID=secret_id\n - DRONE_GITHUB_CLIENT_SECRET=client_secret\n - DRONE_RPC_SECRET=rpc_secret\n - DRONE_SERVER_HOST=drone.url\n - DRONE_USER_CREATE=\"username:user,admin:true\"\n - DRONE_SERVER_PROTO=https\n - DRONE_TLS_AUTOCERT=false\n - DRONE_GIT_ALWAYS_AUTH=false\n - DRONE_LOGS_DEBUG=true\n - DRONE_LOGS_TRACE=true\n restart: always\n volumes:\n - ./data:/data\n ports:\n - 8090:80\n drone-agent:\n container_name: drone__agent\n image: drone/agent:latest\n command: agent\n restart: always\n volumes:\n - /var/run/docker.sock:/var/run/docker.sock\n environment:\n - DRONE_RPC_SERVER=https://drone.url\n - DRONE_RPC_SECRET=rpc_secret\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"version: \"3\"\n\nservices:\n drone:\n container_name: drone\n image: drone/drone:latest\n environment:\n - DRONE_GITHUB_CLIENT_ID=secret_id\n - DRONE_GITHUB_CLIENT_SECRET=client_secret\n - DRONE_RPC_SECRET=rpc_secret\n - DRONE_SERVER_HOST=drone.url\n - DRONE_USER_CREATE=\"username:user,admin:true\"\n - DRONE_SERVER_PROTO=https\n - DRONE_TLS_AUTOCERT=false\n - DRONE_GIT_ALWAYS_AUTH=false\n - DRONE_LOGS_DEBUG=true\n - DRONE_LOGS_TRACE=true\n restart: always\n volumes:\n - ./data:/data\n ports:\n - 8090:80\n drone-agent:\n container_name: drone__agent\n image: drone/agent:latest\n command: agent\n restart: always\n volumes:\n - /var/run/docker.sock:/var/run/docker.sock\n environment:\n - DRONE_RPC_SERVER=https://drone.url\n - DRONE_RPC_SECRET=rpc_secret\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"caching-builds"},"children":[{"type":"text","value":"Caching builds"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Haven't checked that yet, but there's a "},{"type":"element","tag":"a","props":{"href":"https://laszlo.cloud/the-ultimate-droneci-caching-guide","rel":["nofollow"]},"children":[{"type":"text","value":"manual"}]},{"type":"text","value":" from "},{"type":"element","tag":"a","props":{"href":"https://laszlo.cloud/","rel":["nofollow"]},"children":[{"type":"text","value":"Laszlo Fogas"}]},{"type":"text","value":" about that."}]},{"type":"element","tag":"h2","props":{"id":"get-user-info"},"children":[{"type":"text","value":"Get user info"}]},{"type":"element","tag":"code","props":{"code":"export DRONE_SERVER=https://drone.url\nexport DRONE_TOKEN=password\ndrone info\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export DRONE_SERVER=https://drone.url\nexport DRONE_TOKEN=password\ndrone info\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"mark-user-as-trusted"},"children":[{"type":"text","value":"Mark user as trusted"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes it won't help, then connect to drone database with sqlite and change user's trusted flag to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"1"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"drone repo update $1 --trusted=true && drone repo info $1\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"drone repo update $1 --trusted=true && drone repo info $1\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Can be used with "},{"type":"element","tag":"a","props":{"href":"Private%20docker%20registry"},"children":[{"type":"text","value":"Private docker registry"}]},{"type":"text","value":" to deploy things using #docker."}]},{"type":"element","tag":"h2","props":{"id":"pushing-to-private-docker_registry"},"children":[{"type":"text","value":"Pushing to private docker_registry"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You should specify "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"global_docker_login"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"global_docker_password"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"global_docker_registry"}]},{"type":"text","value":" organizations variables in your "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"drone"}]},{"type":"text","value":". And "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docker_repo"}]},{"type":"text","value":" variable for your repo as "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docker.yourdomain.com/your-image"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is example of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".droneci"}]},{"type":"text","value":" for "},{"type":"element","tag":"a","props":{"href":"Private%20docker%20registry"},"children":[{"type":"text","value":"private docker registry"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"kind: pipeline\nname: build\ntype: docker\n\nplatform:\n os: linux\n arch: amd64\n\nsteps:\n - name: build-master\n image: plugins/docker\n when:\n branch:\n - master\n settings:\n dockerfile: Dockerfile\n tag:\n - ${DRONE_BRANCH}\n username:\n from_secret: global_docker_login\n password:\n from_secret: global_docker_password\n registry:\n from_secret: global_docker_registry\n repo:\n from_secret: docker_repo\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"kind"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"pipeline"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"build"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"docker"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"platform"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"os"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"linux"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"arch"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"amd64"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"steps"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"build-master"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"plugins/docker"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"when"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"branch"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"master"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"settings"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"dockerfile"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"Dockerfile"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"tag"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"${DRONE_BRANCH}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"username"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"from_secret"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"global_docker_login"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"password"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"from_secret"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"global_docker_password"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"registry"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"from_secret"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"global_docker_registry"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"repo"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"from_secret"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"docker_repo"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"docker-compose-file-for-drone-ci"},"children":[{"type":"text","value":"Docker-compose file for drone-ci"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"drone"}]},{"type":"text","value":" service is ui itself and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"drone-agent"}]},{"type":"text","value":" is runner for builds, that can be started on different machine (or machines)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Change "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"secret_id"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"rpc_secret"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"drone.url"}]},{"type":"text","value":" to something you like."}]},{"type":"element","tag":"code","props":{"code":"version: \"3\"\n\nservices:\n drone:\n container_name: drone\n image: drone/drone:latest\n environment:\n - DRONE_GITHUB_CLIENT_ID=secret_id\n - DRONE_GITHUB_CLIENT_SECRET=client_secret\n - DRONE_RPC_SECRET=rpc_secret\n - DRONE_SERVER_HOST=drone.url\n - DRONE_USER_CREATE=\"username:user,admin:true\"\n - DRONE_SERVER_PROTO=https\n - DRONE_TLS_AUTOCERT=false\n - DRONE_GIT_ALWAYS_AUTH=false\n - DRONE_LOGS_DEBUG=true\n - DRONE_LOGS_TRACE=true\n restart: always\n volumes:\n - ./data:/data\n ports:\n - 8090:80\n drone-agent:\n container_name: drone__agent\n image: drone/agent:latest\n command: agent\n restart: always\n volumes:\n - /var/run/docker.sock:/var/run/docker.sock\n environment:\n - DRONE_RPC_SERVER=https://drone.url\n - DRONE_RPC_SECRET=rpc_secret\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"version"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"\"3\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"services"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"drone"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"drone"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"drone/drone:latest"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"DRONE_GITHUB_CLIENT_ID=secret_id"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"DRONE_GITHUB_CLIENT_SECRET=client_secret"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"DRONE_RPC_SECRET=rpc_secret"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"DRONE_SERVER_HOST=drone.url"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"DRONE_USER_CREATE=\"username:user,admin:true\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"DRONE_SERVER_PROTO=https"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"DRONE_TLS_AUTOCERT=false"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"DRONE_GIT_ALWAYS_AUTH=false"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"DRONE_LOGS_DEBUG=true"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"DRONE_LOGS_TRACE=true"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"always"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"./data:/data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"ports"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"8090:80"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"drone-agent"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"drone__agent"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"drone/agent:latest"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"command"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"agent"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"always"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"/var/run/docker.sock:/var/run/docker.sock"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"DRONE_RPC_SERVER=https://drone.url"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"DRONE_RPC_SECRET=rpc_secret"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"caching-builds"},"children":[{"type":"text","value":"Caching builds"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Haven't checked that yet, but there's a "},{"type":"element","tag":"a","props":{"href":"https://laszlo.cloud/the-ultimate-droneci-caching-guide","rel":["nofollow"]},"children":[{"type":"text","value":"manual"}]},{"type":"text","value":" from "},{"type":"element","tag":"a","props":{"href":"https://laszlo.cloud/","rel":["nofollow"]},"children":[{"type":"text","value":"Laszlo Fogas"}]},{"type":"text","value":" about that."}]},{"type":"element","tag":"h2","props":{"id":"get-user-info"},"children":[{"type":"text","value":"Get user info"}]},{"type":"element","tag":"code","props":{"code":"export DRONE_SERVER=https://drone.url\nexport DRONE_TOKEN=password\ndrone info\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2ef772"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" DRONE_SERVER=https://drone.url"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2ef772"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" DRONE_TOKEN=password"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":"drone info"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"mark-user-as-trusted"},"children":[{"type":"text","value":"Mark user as trusted"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes it won't help, then connect to drone database with sqlite and change user's trusted flag to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"1"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"drone repo update $1 --trusted=true && drone repo info $1\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":"drone repo update "}]},{"type":"element","tag":"span","props":{"class":"ct-84c07e"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-305369"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" --trusted=true "}]},{"type":"element","tag":"span","props":{"class":"ct-ade66c"},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" drone repo info "}]},{"type":"element","tag":"span","props":{"class":"ct-84c07e"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-305369"},"children":[{"type":"text","value":"1"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-ade66c{color:#FF7B72}.ct-305369{color:#C9D1D9}.ct-84c07e{color:#C9D1D9}.ct-2ef772{color:#FF7B72}.ct-9adcae{color:#A5D6FF}.ct-dd895a{color:#C9D1D9}.ct-5897b9{color:#7EE787}.light .ct-5897b9{color:#268BD2}.light .ct-dd895a{color:#657B83}.light .ct-9adcae{color:#2AA198}.light .ct-2ef772{color:#073642}.light .ct-84c07e{color:#859900}.light .ct-305369{color:#268BD2}.light .ct-ade66c{color:#859900}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"pushing-to-private-docker_registry","depth":2,"text":"Pushing to private docker_registry"},{"id":"docker-compose-file-for-drone-ci","depth":2,"text":"Docker-compose file for drone-ci"},{"id":"caching-builds","depth":2,"text":"Caching builds"},{"id":"get-user-info","depth":2,"text":"Get user info"},{"id":"mark-user-as-trusted","depth":2,"text":"Mark user as trusted"}]}},"_type":"markdown","_id":"content:Docker:Drone-ci.md","_source":"content","_file":"Docker/Drone-ci.md","_extension":"md"},{"_path":"/docker/github-pages-with-drone-ci","_dir":"docker","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Github Pages With Drone Ci","description":"To deploy github pages with Drone-ci you will need .drone.yml as specified below. You also should define secrets github_username and github_token (get it here) in your drone's repository setup.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To deploy github pages with "},{"type":"element","tag":"a","props":{"href":"Drone-ci"},"children":[{"type":"text","value":"Drone-ci"}]},{"type":"text","value":" you will need "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".drone.yml"}]},{"type":"text","value":" as specified below. You also should define secrets "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"github_username"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"github_token"}]},{"type":"text","value":" (get it "},{"type":"element","tag":"a","props":{"href":"https://github.com/settings/tokens","rel":["nofollow"]},"children":[{"type":"text","value":"here"}]},{"type":"text","value":") in your drone's repository setup."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Github repository should be named as "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"yourname.github.io"}]},{"type":"text","value":" and it could be accessed at "},{"type":"element","tag":"a","props":{"href":"https://yourname.github.io/","rel":["nofollow"]},"children":[{"type":"text","value":"https://yourname.github.io/"}]},{"type":"text","value":". Otherwise it'll be available at "},{"type":"element","tag":"a","props":{"href":"https://yourname.github.io/repo-name/","rel":["nofollow"]},"children":[{"type":"text","value":"https://yourname.github.io/repo-name/"}]},{"type":"text","value":", what you might not like."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You should create branch named "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gh-pages"}]},{"type":"text","value":" in that repo and setup GH Pages at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"https://github.com/<yourusername>/<yourusername>.github.io/settings/pages"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This config will update "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gh-pages"}]},{"type":"text","value":" branch in your project, which will contain only generated content. I know, that's bad, but there's no better way to do that with generic drone plugins."}]},{"type":"element","tag":"code","props":{"code":"kind: pipeline\nname: build\ntype: docker\n\nplatform:\n os: linux\n arch: amd64\n\nsteps:\n - name: build\n image: node:16\n commands:\n - yarn\n - yarn generate\n - rm -rf ./docs\n - mv ./.output/public ./docs\n - touch ./docs/.nojekyll\n - name: publish\n image: plugins/gh-pages\n settings:\n target_branch: gh-pages\n username:\n from_secret: github_username\n password:\n from_secret: github_token\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"kind: pipeline\nname: build\ntype: docker\n\nplatform:\n os: linux\n arch: amd64\n\nsteps:\n - name: build\n image: node:16\n commands:\n - yarn\n - yarn generate\n - rm -rf ./docs\n - mv ./.output/public ./docs\n - touch ./docs/.nojekyll\n - name: publish\n image: plugins/gh-pages\n settings:\n target_branch: gh-pages\n username:\n from_secret: github_username\n password:\n from_secret: github_token\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here we're moving "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"./.output/public"}]},{"type":"text","value":" to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"./docs"}]},{"type":"text","value":", because #nuxt creates symlink for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docs"}]},{"type":"text","value":" and git can't work with that."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Also we create "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".nojekyll"}]},{"type":"text","value":" at the root of repo, so github's internal engine won't "},{"type":"element","tag":"a","props":{"href":"https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/","rel":["nofollow"]},"children":[{"type":"text","value":"ignore files that start with underscore"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"additional-reading"},"children":[{"type":"text","value":"Additional reading"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://plugins.drone.io/plugins/gh-pages","rel":["nofollow"]},"children":[{"type":"text","value":"Drone Github Pages Documentation"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/","rel":["nofollow"]},"children":[{"type":"text","value":"Bypassing Jekyll on GitHub Pages"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To deploy github pages with "},{"type":"element","tag":"a","props":{"href":"Drone-ci"},"children":[{"type":"text","value":"Drone-ci"}]},{"type":"text","value":" you will need "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".drone.yml"}]},{"type":"text","value":" as specified below. You also should define secrets "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"github_username"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"github_token"}]},{"type":"text","value":" (get it "},{"type":"element","tag":"a","props":{"href":"https://github.com/settings/tokens","rel":["nofollow"]},"children":[{"type":"text","value":"here"}]},{"type":"text","value":") in your drone's repository setup."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Github repository should be named as "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"yourname.github.io"}]},{"type":"text","value":" and it could be accessed at "},{"type":"element","tag":"a","props":{"href":"https://yourname.github.io/","rel":["nofollow"]},"children":[{"type":"text","value":"https://yourname.github.io/"}]},{"type":"text","value":". Otherwise it'll be available at "},{"type":"element","tag":"a","props":{"href":"https://yourname.github.io/repo-name/","rel":["nofollow"]},"children":[{"type":"text","value":"https://yourname.github.io/repo-name/"}]},{"type":"text","value":", what you might not like."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You should create branch named "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gh-pages"}]},{"type":"text","value":" in that repo and setup GH Pages at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"https://github.com/<yourusername>/<yourusername>.github.io/settings/pages"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This config will update "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gh-pages"}]},{"type":"text","value":" branch in your project, which will contain only generated content. I know, that's bad, but there's no better way to do that with generic drone plugins."}]},{"type":"element","tag":"code","props":{"code":"kind: pipeline\nname: build\ntype: docker\n\nplatform:\n os: linux\n arch: amd64\n\nsteps:\n - name: build\n image: node:16\n commands:\n - yarn\n - yarn generate\n - rm -rf ./docs\n - mv ./.output/public ./docs\n - touch ./docs/.nojekyll\n - name: publish\n image: plugins/gh-pages\n settings:\n target_branch: gh-pages\n username:\n from_secret: github_username\n password:\n from_secret: github_token\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-95ec6a"},"children":[{"type":"text","value":"kind"}]},{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ec86cd"},"children":[{"type":"text","value":"pipeline"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-95ec6a"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ec86cd"},"children":[{"type":"text","value":"build"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-95ec6a"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ec86cd"},"children":[{"type":"text","value":"docker"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-95ec6a"},"children":[{"type":"text","value":"platform"}]},{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-95ec6a"},"children":[{"type":"text","value":"os"}]},{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ec86cd"},"children":[{"type":"text","value":"linux"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-95ec6a"},"children":[{"type":"text","value":"arch"}]},{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ec86cd"},"children":[{"type":"text","value":"amd64"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-95ec6a"},"children":[{"type":"text","value":"steps"}]},{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-95ec6a"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ec86cd"},"children":[{"type":"text","value":"build"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-95ec6a"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ec86cd"},"children":[{"type":"text","value":"node:16"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-95ec6a"},"children":[{"type":"text","value":"commands"}]},{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-ec86cd"},"children":[{"type":"text","value":"yarn"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-ec86cd"},"children":[{"type":"text","value":"yarn generate"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-ec86cd"},"children":[{"type":"text","value":"rm -rf ./docs"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-ec86cd"},"children":[{"type":"text","value":"mv ./.output/public ./docs"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-ec86cd"},"children":[{"type":"text","value":"touch ./docs/.nojekyll"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-95ec6a"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ec86cd"},"children":[{"type":"text","value":"publish"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-95ec6a"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ec86cd"},"children":[{"type":"text","value":"plugins/gh-pages"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-95ec6a"},"children":[{"type":"text","value":"settings"}]},{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-95ec6a"},"children":[{"type":"text","value":"target_branch"}]},{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ec86cd"},"children":[{"type":"text","value":"gh-pages"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-95ec6a"},"children":[{"type":"text","value":"username"}]},{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-95ec6a"},"children":[{"type":"text","value":"from_secret"}]},{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ec86cd"},"children":[{"type":"text","value":"github_username"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-95ec6a"},"children":[{"type":"text","value":"password"}]},{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-95ec6a"},"children":[{"type":"text","value":"from_secret"}]},{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ec86cd"},"children":[{"type":"text","value":"github_token"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here we're moving "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"./.output/public"}]},{"type":"text","value":" to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"./docs"}]},{"type":"text","value":", because #nuxt creates symlink for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docs"}]},{"type":"text","value":" and git can't work with that."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Also we create "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".nojekyll"}]},{"type":"text","value":" at the root of repo, so github's internal engine won't "},{"type":"element","tag":"a","props":{"href":"https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/","rel":["nofollow"]},"children":[{"type":"text","value":"ignore files that start with underscore"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"additional-reading"},"children":[{"type":"text","value":"Additional reading"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://plugins.drone.io/plugins/gh-pages","rel":["nofollow"]},"children":[{"type":"text","value":"Drone Github Pages Documentation"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/","rel":["nofollow"]},"children":[{"type":"text","value":"Bypassing Jekyll on GitHub Pages"}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-ec86cd{color:#A5D6FF}.ct-bf5097{color:#C9D1D9}.ct-95ec6a{color:#7EE787}.light .ct-95ec6a{color:#268BD2}.light .ct-bf5097{color:#657B83}.light .ct-ec86cd{color:#2AA198}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"additional-reading","depth":2,"text":"Additional reading"}]}},"_type":"markdown","_id":"content:Docker:Github pages with drone-ci.md","_source":"content","_file":"Docker/Github pages with drone-ci.md","_extension":"md"},{"_path":"/docker/private-docker-registry","_dir":"docker","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Private Docker Registry","description":"Suitable to work with Drone-ci for hosting private #docker images.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Suitable to work with "},{"type":"element","tag":"a","props":{"href":"Drone-ci"},"children":[{"type":"text","value":"Drone-ci"}]},{"type":"text","value":" for hosting private #docker images."}]},{"type":"element","tag":"h2","props":{"id":"sample-docker-compose-for-custom-docker-registry"},"children":[{"type":"text","value":"Sample docker-compose for custom docker registry"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This one brings up private docker registry with ui. First you'll need to generate password for it:"}]},{"type":"element","tag":"code","props":{"code":"docker run \\\n --entrypoint htpasswd registry:2 \\\n -Bbn user mypassword > auth/registry.password\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"docker run \\\n --entrypoint htpasswd registry:2 \\\n -Bbn user mypassword > auth/registry.password\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"version: \"3\"\nservices:\n registry:\n container_name: docker__registry\n image: registry:2\n ports:\n - 5000:5000\n restart: always\n environment:\n - REGISTRY_STORAGE_FILESYSTEM_ROOTDIRECTORY=/data\n - REGISTRY_AUTH=htpasswd\n - REGISTRY_AUTH_HTPASSWD_REALM=Registry\n - REGISTRY_AUTH_HTPASSWD_PATH=/auth/registry.password\n - REGISTRY_HTTP_SECRET=password\n - REGISTRY_STORAGE_DELETE_ENABLED=true\n volumes:\n - ./registry/auth:/auth\n - ./registry/data:/data\n ui:\n container_name: docker__ui\n image: parabuzzle/craneoperator:latest\n ports:\n - 80:80\n restart: always\n environment:\n - REGISTRY_HOST=registry\n - REGISTRY_PORT=5000\n - REGISTRY_PROTOCOL=http\n - ALLOW_REGISTRY_LOGIN=true\n - REGISTRY_ALLOW_DELETE=true\n - USERNAME=registry\n - PASSWORD=password\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"version: \"3\"\nservices:\n registry:\n container_name: docker__registry\n image: registry:2\n ports:\n - 5000:5000\n restart: always\n environment:\n - REGISTRY_STORAGE_FILESYSTEM_ROOTDIRECTORY=/data\n - REGISTRY_AUTH=htpasswd\n - REGISTRY_AUTH_HTPASSWD_REALM=Registry\n - REGISTRY_AUTH_HTPASSWD_PATH=/auth/registry.password\n - REGISTRY_HTTP_SECRET=password\n - REGISTRY_STORAGE_DELETE_ENABLED=true\n volumes:\n - ./registry/auth:/auth\n - ./registry/data:/data\n ui:\n container_name: docker__ui\n image: parabuzzle/craneoperator:latest\n ports:\n - 80:80\n restart: always\n environment:\n - REGISTRY_HOST=registry\n - REGISTRY_PORT=5000\n - REGISTRY_PROTOCOL=http\n - ALLOW_REGISTRY_LOGIN=true\n - REGISTRY_ALLOW_DELETE=true\n - USERNAME=registry\n - PASSWORD=password\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"squash-layers-on-registry"},"children":[{"type":"text","value":"Squash layers on registry"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes you need to squash all layers in docker registry to free up disk space."}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Run this command to mark oldest layers"}]}]},{"type":"element","tag":"code","props":{"code":"# Try this first\ndocker run \\\n --rm anoxis/registry-cli \\\n -r https://registry.url \\\n -l user:password \\\n --delete \\\n --num 2\n\n# Then this \ndocker run -it \\\n -v /path/to/registry/data:/registry \\\n -e REGISTRY_URL=https://registry.url \\\n -e DRY_RUN=\"false\" \\\n -e REGISTRY_AUTH=\"user:password\" \\\n mortensrasmussen/docker-registry-manifest-cleanup\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"# Try this first\ndocker run \\\n --rm anoxis/registry-cli \\\n -r https://registry.url \\\n -l user:password \\\n --delete \\\n --num 2\n\n# Then this \ndocker run -it \\\n -v /path/to/registry/data:/registry \\\n -e REGISTRY_URL=https://registry.url \\\n -e DRY_RUN=\"false\" \\\n -e REGISTRY_AUTH=\"user:password\" \\\n mortensrasmussen/docker-registry-manifest-cleanup\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Suitable to work with "},{"type":"element","tag":"a","props":{"href":"Drone-ci"},"children":[{"type":"text","value":"Drone-ci"}]},{"type":"text","value":" for hosting private #docker images."}]},{"type":"element","tag":"h2","props":{"id":"sample-docker-compose-for-custom-docker-registry"},"children":[{"type":"text","value":"Sample docker-compose for custom docker registry"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This one brings up private docker registry with ui. First you'll need to generate password for it:"}]},{"type":"element","tag":"code","props":{"code":"docker run \\\n --entrypoint htpasswd registry:2 \\\n -Bbn user mypassword > auth/registry.password\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":"docker run \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" --entrypoint htpasswd registry:2 \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" -Bbn user mypassword "}]},{"type":"element","tag":"span","props":{"class":"ct-5d2f73"},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" auth/registry.password"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"version: \"3\"\nservices:\n registry:\n container_name: docker__registry\n image: registry:2\n ports:\n - 5000:5000\n restart: always\n environment:\n - REGISTRY_STORAGE_FILESYSTEM_ROOTDIRECTORY=/data\n - REGISTRY_AUTH=htpasswd\n - REGISTRY_AUTH_HTPASSWD_REALM=Registry\n - REGISTRY_AUTH_HTPASSWD_PATH=/auth/registry.password\n - REGISTRY_HTTP_SECRET=password\n - REGISTRY_STORAGE_DELETE_ENABLED=true\n volumes:\n - ./registry/auth:/auth\n - ./registry/data:/data\n ui:\n container_name: docker__ui\n image: parabuzzle/craneoperator:latest\n ports:\n - 80:80\n restart: always\n environment:\n - REGISTRY_HOST=registry\n - REGISTRY_PORT=5000\n - REGISTRY_PROTOCOL=http\n - ALLOW_REGISTRY_LOGIN=true\n - REGISTRY_ALLOW_DELETE=true\n - USERNAME=registry\n - PASSWORD=password\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b81191"},"children":[{"type":"text","value":"version"}]},{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"\"3\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b81191"},"children":[{"type":"text","value":"services"}]},{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b81191"},"children":[{"type":"text","value":"registry"}]},{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b81191"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"docker__registry"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b81191"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"registry:2"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b81191"},"children":[{"type":"text","value":"ports"}]},{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"5000:5000"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b81191"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"always"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b81191"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"REGISTRY_STORAGE_FILESYSTEM_ROOTDIRECTORY=/data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"REGISTRY_AUTH=htpasswd"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"REGISTRY_AUTH_HTPASSWD_REALM=Registry"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"REGISTRY_AUTH_HTPASSWD_PATH=/auth/registry.password"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"REGISTRY_HTTP_SECRET=password"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"REGISTRY_STORAGE_DELETE_ENABLED=true"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b81191"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"./registry/auth:/auth"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"./registry/data:/data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b81191"},"children":[{"type":"text","value":"ui"}]},{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b81191"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"docker__ui"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b81191"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"parabuzzle/craneoperator:latest"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b81191"},"children":[{"type":"text","value":"ports"}]},{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"80:80"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b81191"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"always"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b81191"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"REGISTRY_HOST=registry"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"REGISTRY_PORT=5000"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"REGISTRY_PROTOCOL=http"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"ALLOW_REGISTRY_LOGIN=true"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"REGISTRY_ALLOW_DELETE=true"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"USERNAME=registry"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"PASSWORD=password"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"squash-layers-on-registry"},"children":[{"type":"text","value":"Squash layers on registry"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes you need to squash all layers in docker registry to free up disk space."}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Run this command to mark oldest layers"}]}]},{"type":"element","tag":"code","props":{"code":"# Try this first\ndocker run \\\n --rm anoxis/registry-cli \\\n -r https://registry.url \\\n -l user:password \\\n --delete \\\n --num 2\n\n# Then this \ndocker run -it \\\n -v /path/to/registry/data:/registry \\\n -e REGISTRY_URL=https://registry.url \\\n -e DRY_RUN=\"false\" \\\n -e REGISTRY_AUTH=\"user:password\" \\\n mortensrasmussen/docker-registry-manifest-cleanup\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ce2ef3"},"children":[{"type":"text","value":"# Try this first"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":"docker run \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" --rm anoxis/registry-cli \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" -r https://registry.url \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" -l user:password \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" --delete \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" --num 2"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ce2ef3"},"children":[{"type":"text","value":"# Then this "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":"docker run -it \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" -v /path/to/registry/data:/registry \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" -e REGISTRY_URL=https://registry.url \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" -e DRY_RUN="}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" -e REGISTRY_AUTH="}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"\"user:password\""}]},{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" mortensrasmussen/docker-registry-manifest-cleanup"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-ce2ef3{color:#8B949E}.ct-b5cc20{color:#A5D6FF}.ct-b81191{color:#7EE787}.ct-5d2f73{color:#FF7B72}.ct-0ef0d6{color:#C9D1D9}.light .ct-0ef0d6{color:#657B83}.light .ct-5d2f73{color:#859900}.light .ct-b81191{color:#268BD2}.light .ct-b5cc20{color:#2AA198}.light .ct-ce2ef3{color:#93A1A1}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"sample-docker-compose-for-custom-docker-registry","depth":2,"text":"Sample docker-compose for custom docker registry"},{"id":"squash-layers-on-registry","depth":2,"text":"Squash layers on registry"}]}},"_type":"markdown","_id":"content:Docker:Private docker registry.md","_source":"content","_file":"Docker/Private docker registry.md","_extension":"md"},{"_path":"/docker/refresh-containers-on-pull","_dir":"docker","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Refresh Containers On Pull","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"setting-up-watchtower"},"children":[{"type":"text","value":"Setting up watchtower"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://containrrr.dev/watchtower/","rel":["nofollow"]},"children":[{"type":"text","value":"Watchtower"}]},{"type":"text","value":" will automatically pull updated #docker containers. Can be used with "},{"type":"element","tag":"a","props":{"href":"Private%20docker%20registry"},"children":[{"type":"text","value":"Private docker registry"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"Drone-ci"},"children":[{"type":"text","value":"Drone-ci"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"version: \"3\"\n\nservices:\n watchtower:\n container_name: docker__watchtower\n image: v2tec/watchtower\n restart: always\n volumes:\n - /var/run/docker.sock:/var/run/docker.sock\n - /home/user/.docker/config.json:/config.json\n command: --interval 60 image_1 image_2\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"version: \"3\"\n\nservices:\n watchtower:\n container_name: docker__watchtower\n image: v2tec/watchtower\n restart: always\n volumes:\n - /var/run/docker.sock:/var/run/docker.sock\n - /home/user/.docker/config.json:/config.json\n command: --interval 60 image_1 image_2\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"setting-up-watchtower"},"children":[{"type":"text","value":"Setting up watchtower"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://containrrr.dev/watchtower/","rel":["nofollow"]},"children":[{"type":"text","value":"Watchtower"}]},{"type":"text","value":" will automatically pull updated #docker containers. Can be used with "},{"type":"element","tag":"a","props":{"href":"Private%20docker%20registry"},"children":[{"type":"text","value":"Private docker registry"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"Drone-ci"},"children":[{"type":"text","value":"Drone-ci"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"version: \"3\"\n\nservices:\n watchtower:\n container_name: docker__watchtower\n image: v2tec/watchtower\n restart: always\n volumes:\n - /var/run/docker.sock:/var/run/docker.sock\n - /home/user/.docker/config.json:/config.json\n command: --interval 60 image_1 image_2\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fcd641"},"children":[{"type":"text","value":"version"}]},{"type":"element","tag":"span","props":{"class":"ct-2fce29"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b05832"},"children":[{"type":"text","value":"\"3\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fcd641"},"children":[{"type":"text","value":"services"}]},{"type":"element","tag":"span","props":{"class":"ct-2fce29"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2fce29"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fcd641"},"children":[{"type":"text","value":"watchtower"}]},{"type":"element","tag":"span","props":{"class":"ct-2fce29"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2fce29"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fcd641"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-2fce29"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b05832"},"children":[{"type":"text","value":"docker__watchtower"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2fce29"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fcd641"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-2fce29"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b05832"},"children":[{"type":"text","value":"v2tec/watchtower"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2fce29"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fcd641"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-2fce29"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b05832"},"children":[{"type":"text","value":"always"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2fce29"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fcd641"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-2fce29"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2fce29"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b05832"},"children":[{"type":"text","value":"/var/run/docker.sock:/var/run/docker.sock"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2fce29"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b05832"},"children":[{"type":"text","value":"/home/user/.docker/config.json:/config.json"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2fce29"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fcd641"},"children":[{"type":"text","value":"command"}]},{"type":"element","tag":"span","props":{"class":"ct-2fce29"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b05832"},"children":[{"type":"text","value":"--interval 60 image_1 image_2"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-b05832{color:#A5D6FF}.ct-2fce29{color:#C9D1D9}.ct-fcd641{color:#7EE787}.light .ct-fcd641{color:#268BD2}.light .ct-2fce29{color:#657B83}.light .ct-b05832{color:#2AA198}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"setting-up-watchtower","depth":2,"text":"Setting up watchtower"}]}},"_type":"markdown","_id":"content:Docker:Refresh containers on pull.md","_source":"content","_file":"Docker/Refresh containers on pull.md","_extension":"md"},{"_path":"/docker/seed-dump-inside-docker","_dir":"docker","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Seed Dump Inside Docker","description":"If you need to seed .sql dump in #docker container, just run this command. Also you can try to rsync file with SSH to get it from remote host.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you need to seed "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".sql"}]},{"type":"text","value":" dump in #docker container, just run this command. Also you can try to "},{"type":"element","tag":"a","props":{"href":"/linux/Rsync%20file%20with%20SSH"},"children":[{"type":"text","value":"rsync file with SSH"}]},{"type":"text","value":" to get it from remote host."}]},{"type":"element","tag":"code","props":{"code":"#####\n# usage: ./script.sh \"/path/to/dump.sql\"\n#####\n\nDUMP_PATH=$1\nCONTAINER=\"db\"\nUSER=root\nPASSWORD=password\nDB=database\n\ncat \"$DUMP_PATH\" | docker exec -i $CONTAINER mysql -u$USER -p$PASSWORD $DB\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"#####\n# usage: ./script.sh \"/path/to/dump.sql\"\n#####\n\nDUMP_PATH=$1\nCONTAINER=\"db\"\nUSER=root\nPASSWORD=password\nDB=database\n\ncat \"$DUMP_PATH\" | docker exec -i $CONTAINER mysql -u$USER -p$PASSWORD $DB\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you need to seed "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".sql"}]},{"type":"text","value":" dump in #docker container, just run this command. Also you can try to "},{"type":"element","tag":"a","props":{"href":"/linux/Rsync%20file%20with%20SSH"},"children":[{"type":"text","value":"rsync file with SSH"}]},{"type":"text","value":" to get it from remote host."}]},{"type":"element","tag":"code","props":{"code":"#####\n# usage: ./script.sh \"/path/to/dump.sql\"\n#####\n\nDUMP_PATH=$1\nCONTAINER=\"db\"\nUSER=root\nPASSWORD=password\nDB=database\n\ncat \"$DUMP_PATH\" | docker exec -i $CONTAINER mysql -u$USER -p$PASSWORD $DB\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ebdffd"},"children":[{"type":"text","value":"#####"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ebdffd"},"children":[{"type":"text","value":"# usage: ./script.sh \"/path/to/dump.sql\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ebdffd"},"children":[{"type":"text","value":"#####"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-82f16d"},"children":[{"type":"text","value":"DUMP_PATH="}]},{"type":"element","tag":"span","props":{"class":"ct-942add"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-a8c357"},"children":[{"type":"text","value":"1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-82f16d"},"children":[{"type":"text","value":"CONTAINER="}]},{"type":"element","tag":"span","props":{"class":"ct-ee805d"},"children":[{"type":"text","value":"\"db\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-82f16d"},"children":[{"type":"text","value":"USER=root"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-82f16d"},"children":[{"type":"text","value":"PASSWORD=password"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-82f16d"},"children":[{"type":"text","value":"DB=database"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-82f16d"},"children":[{"type":"text","value":"cat "}]},{"type":"element","tag":"span","props":{"class":"ct-ee805d"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-942add"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-a8c357"},"children":[{"type":"text","value":"DUMP_PATH"}]},{"type":"element","tag":"span","props":{"class":"ct-ee805d"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-82f16d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d9cdb7"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-82f16d"},"children":[{"type":"text","value":" docker "}]},{"type":"element","tag":"span","props":{"class":"ct-695b92"},"children":[{"type":"text","value":"exec"}]},{"type":"element","tag":"span","props":{"class":"ct-82f16d"},"children":[{"type":"text","value":" -i "}]},{"type":"element","tag":"span","props":{"class":"ct-942add"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-a8c357"},"children":[{"type":"text","value":"CONTAINER"}]},{"type":"element","tag":"span","props":{"class":"ct-82f16d"},"children":[{"type":"text","value":" mysql -u"}]},{"type":"element","tag":"span","props":{"class":"ct-942add"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-a8c357"},"children":[{"type":"text","value":"USER"}]},{"type":"element","tag":"span","props":{"class":"ct-82f16d"},"children":[{"type":"text","value":" -p"}]},{"type":"element","tag":"span","props":{"class":"ct-942add"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-a8c357"},"children":[{"type":"text","value":"PASSWORD"}]},{"type":"element","tag":"span","props":{"class":"ct-82f16d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-942add"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-a8c357"},"children":[{"type":"text","value":"DB"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-695b92{color:#79C0FF}.ct-d9cdb7{color:#FF7B72}.ct-ee805d{color:#A5D6FF}.ct-a8c357{color:#C9D1D9}.ct-942add{color:#C9D1D9}.ct-82f16d{color:#C9D1D9}.ct-ebdffd{color:#8B949E}.light .ct-ebdffd{color:#93A1A1}.light .ct-82f16d{color:#657B83}.light .ct-942add{color:#859900}.light .ct-a8c357{color:#268BD2}.light .ct-ee805d{color:#2AA198}.light .ct-d9cdb7{color:#859900}.light .ct-695b92{color:#268BD2}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Docker:Seed dump inside docker.md","_source":"content","_file":"Docker/Seed dump inside docker.md","_extension":"md"},{"_path":"/docker/wait-for-mysql","_dir":"docker","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Wait For Mysql","description":"wait-for-it.sh doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before #mysql is ready to accept connections","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/vishnubob/wait-for-it","rel":["nofollow"]},"children":[{"type":"text","value":"wait-for-it.sh"}]},{"type":"text","value":" doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before #mysql is ready to accept connections"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This script waits for first successful query from database or exits with non-zero status after timeout."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don't forget to change "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$query"}]},{"type":"text","value":" for the actually working one."}]},{"type":"element","tag":"code","props":{"code":"# Waits for mysql to become actually available\nwait_for_mysql() {\n query=\"SELECT count(*) FROM users\"\n \n timeout=180 # 3 minutes limit\n i=0\n \n while ! docker exec -it \"$1\" mysql --user=\"$2\" --password=\"$3\" -e \"$query\" $4 >/dev/null 2>&1; do\n sleep 1;\n\n i=$(($i+1))\n if [[ ${i} -ge ${timeout} ]]; then\n echo \"[Error] can't properly query MySQL after ${i} secs\"\n exit 1;\n fi\n done\n}\n\n# usage: wait_for_mysql miin-mysql-dev root password database\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"# Waits for mysql to become actually available\nwait_for_mysql() {\n query=\"SELECT count(*) FROM users\"\n \n timeout=180 # 3 minutes limit\n i=0\n \n while ! docker exec -it \"$1\" mysql --user=\"$2\" --password=\"$3\" -e \"$query\" $4 >/dev/null 2>&1; do\n sleep 1;\n\n i=$(($i+1))\n if [[ ${i} -ge ${timeout} ]]; then\n echo \"[Error] can't properly query MySQL after ${i} secs\"\n exit 1;\n fi\n done\n}\n\n# usage: wait_for_mysql miin-mysql-dev root password database\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"Wait%20for%20redis"},"children":[{"type":"text","value":"Wait for redis"}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/vishnubob/wait-for-it","rel":["nofollow"]},"children":[{"type":"text","value":"wait-for-it.sh"}]},{"type":"text","value":" doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before #mysql is ready to accept connections"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This script waits for first successful query from database or exits with non-zero status after timeout."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don't forget to change "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$query"}]},{"type":"text","value":" for the actually working one."}]},{"type":"element","tag":"code","props":{"code":"# Waits for mysql to become actually available\nwait_for_mysql() {\n query=\"SELECT count(*) FROM users\"\n \n timeout=180 # 3 minutes limit\n i=0\n \n while ! docker exec -it \"$1\" mysql --user=\"$2\" --password=\"$3\" -e \"$query\" $4 >/dev/null 2>&1; do\n sleep 1;\n\n i=$(($i+1))\n if [[ ${i} -ge ${timeout} ]]; then\n echo \"[Error] can't properly query MySQL after ${i} secs\"\n exit 1;\n fi\n done\n}\n\n# usage: wait_for_mysql miin-mysql-dev root password database\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0146c3"},"children":[{"type":"text","value":"# Waits for mysql to become actually available"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3f942f"},"children":[{"type":"text","value":"wait_for_mysql"}]},{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" query="}]},{"type":"element","tag":"span","props":{"class":"ct-1c7c94"},"children":[{"type":"text","value":"\"SELECT count(*) FROM users\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" timeout=180 "}]},{"type":"element","tag":"span","props":{"class":"ct-0146c3"},"children":[{"type":"text","value":"# 3 minutes limit"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" i=0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-94f68f"},"children":[{"type":"text","value":"while"}]},{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-94f68f"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" docker "}]},{"type":"element","tag":"span","props":{"class":"ct-ac7bf2"},"children":[{"type":"text","value":"exec"}]},{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" -it "}]},{"type":"element","tag":"span","props":{"class":"ct-1c7c94"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-1b10dc"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-6a8f91"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-1c7c94"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" mysql --user="}]},{"type":"element","tag":"span","props":{"class":"ct-1c7c94"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-1b10dc"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-6a8f91"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-1c7c94"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-1c7c94"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" -e "}]},{"type":"element","tag":"span","props":{"class":"ct-1c7c94"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-1b10dc"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-6a8f91"},"children":[{"type":"text","value":"query"}]},{"type":"element","tag":"span","props":{"class":"ct-1c7c94"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-94f68f"},"children":[{"type":"text","value":"do"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" sleep 1"}]},{"type":"element","tag":"span","props":{"class":"ct-94f68f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" i="}]},{"type":"element","tag":"span","props":{"class":"ct-1c7c94"},"children":[{"type":"text","value":"$(("}]},{"type":"element","tag":"span","props":{"class":"ct-1b10dc"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-6a8f91"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-94f68f"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-0c9ed4"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-1c7c94"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-94f68f"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" [[ "}]},{"type":"element","tag":"span","props":{"class":"ct-1b10dc"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-6a8f91"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-1b10dc"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-94f68f"},"children":[{"type":"text","value":"-ge"}]},{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b10dc"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-6a8f91"},"children":[{"type":"text","value":"timeout"}]},{"type":"element","tag":"span","props":{"class":"ct-1b10dc"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" ]]"}]},{"type":"element","tag":"span","props":{"class":"ct-94f68f"},"children":[{"type":"text","value":";"}]},{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-94f68f"},"children":[{"type":"text","value":"then"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac7bf2"},"children":[{"type":"text","value":"echo"}]},{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1c7c94"},"children":[{"type":"text","value":"\"[Error] can't properly query MySQL after "}]},{"type":"element","tag":"span","props":{"class":"ct-1b10dc"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-6a8f91"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-1b10dc"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-1c7c94"},"children":[{"type":"text","value":" secs\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac7bf2"},"children":[{"type":"text","value":"exit"}]},{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" 1"}]},{"type":"element","tag":"span","props":{"class":"ct-94f68f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-94f68f"},"children":[{"type":"text","value":"fi"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-94f68f"},"children":[{"type":"text","value":"done"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0146c3"},"children":[{"type":"text","value":"# usage: wait_for_mysql miin-mysql-dev root password database"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"Wait%20for%20redis"},"children":[{"type":"text","value":"Wait for redis"}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-0c9ed4{color:#79C0FF}.ct-6a8f91{color:#C9D1D9}.ct-1b10dc{color:#C9D1D9}.ct-ac7bf2{color:#79C0FF}.ct-94f68f{color:#FF7B72}.ct-1c7c94{color:#A5D6FF}.ct-753636{color:#C9D1D9}.ct-3f942f{color:#D2A8FF}.ct-0146c3{color:#8B949E}.light .ct-0146c3{color:#93A1A1}.light .ct-3f942f{color:#268BD2}.light .ct-753636{color:#657B83}.light .ct-1c7c94{color:#2AA198}.light .ct-94f68f{color:#859900}.light .ct-ac7bf2{color:#268BD2}.light .ct-1b10dc{color:#859900}.light .ct-6a8f91{color:#268BD2}.light .ct-0c9ed4{color:#D33682}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Docker:Wait for mysql.md","_source":"content","_file":"Docker/Wait for mysql.md","_extension":"md"},{"_path":"/docker/wait-for-redis","_dir":"docker","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Wait For Redis","description":"wait-for-it.sh doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before redis is ready to accept connections","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/vishnubob/wait-for-it","rel":["nofollow"]},"children":[{"type":"text","value":"wait-for-it.sh"}]},{"type":"text","value":" doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before redis is ready to accept connections"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This script waits for first successful ping or exits with non-zero status after 3 minutes."}]},{"type":"element","tag":"code","props":{"code":"# Waits for redis to become actually available\nwait_for_redis() {\n timeout=180 # 3 minutes\n i=0\n while ! docker exec -it \"$1\" redis-cli -h localhost -p 6379 -a \"$2\" ping | grep \"PONG\" >/dev/null 2>&1; do\n sleep 1;\n\n i=$(($i+1))\n if [[ ${i} -ge ${timeout} ]]; then\n echo \"[Error] can't properly ping Redis container after ${i} secs\"\n exit 1;\n fi\n done\n}\n\n# usage: wait_for_redis miin-redis-dev password\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"# Waits for redis to become actually available\nwait_for_redis() {\n timeout=180 # 3 minutes\n i=0\n while ! docker exec -it \"$1\" redis-cli -h localhost -p 6379 -a \"$2\" ping | grep \"PONG\" >/dev/null 2>&1; do\n sleep 1;\n\n i=$(($i+1))\n if [[ ${i} -ge ${timeout} ]]; then\n echo \"[Error] can't properly ping Redis container after ${i} secs\"\n exit 1;\n fi\n done\n}\n\n# usage: wait_for_redis miin-redis-dev password\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"Wait%20for%20mysql"},"children":[{"type":"text","value":"Wait for mysql"}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/vishnubob/wait-for-it","rel":["nofollow"]},"children":[{"type":"text","value":"wait-for-it.sh"}]},{"type":"text","value":" doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before redis is ready to accept connections"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This script waits for first successful ping or exits with non-zero status after 3 minutes."}]},{"type":"element","tag":"code","props":{"code":"# Waits for redis to become actually available\nwait_for_redis() {\n timeout=180 # 3 minutes\n i=0\n while ! docker exec -it \"$1\" redis-cli -h localhost -p 6379 -a \"$2\" ping | grep \"PONG\" >/dev/null 2>&1; do\n sleep 1;\n\n i=$(($i+1))\n if [[ ${i} -ge ${timeout} ]]; then\n echo \"[Error] can't properly ping Redis container after ${i} secs\"\n exit 1;\n fi\n done\n}\n\n# usage: wait_for_redis miin-redis-dev password\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5c461f"},"children":[{"type":"text","value":"# Waits for redis to become actually available"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ecbf6"},"children":[{"type":"text","value":"wait_for_redis"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" timeout=180 "}]},{"type":"element","tag":"span","props":{"class":"ct-5c461f"},"children":[{"type":"text","value":"# 3 minutes"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" i=0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c1e9"},"children":[{"type":"text","value":"while"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c1e9"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" docker "}]},{"type":"element","tag":"span","props":{"class":"ct-92bbf9"},"children":[{"type":"text","value":"exec"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" -it "}]},{"type":"element","tag":"span","props":{"class":"ct-46d226"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-914ee4"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-1335e9"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-46d226"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" redis-cli -h localhost -p 6379 -a "}]},{"type":"element","tag":"span","props":{"class":"ct-46d226"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-914ee4"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-1335e9"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-46d226"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" ping "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c1e9"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" grep "}]},{"type":"element","tag":"span","props":{"class":"ct-46d226"},"children":[{"type":"text","value":"\"PONG\""}]},{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c1e9"},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":"/dev/null "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c1e9"},"children":[{"type":"text","value":"2>&1;"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c1e9"},"children":[{"type":"text","value":"do"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" sleep 1"}]},{"type":"element","tag":"span","props":{"class":"ct-d8c1e9"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" i="}]},{"type":"element","tag":"span","props":{"class":"ct-46d226"},"children":[{"type":"text","value":"$(("}]},{"type":"element","tag":"span","props":{"class":"ct-914ee4"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-1335e9"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-d8c1e9"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-aeabae"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-46d226"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c1e9"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" [[ "}]},{"type":"element","tag":"span","props":{"class":"ct-914ee4"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-1335e9"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-914ee4"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c1e9"},"children":[{"type":"text","value":"-ge"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-914ee4"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-1335e9"},"children":[{"type":"text","value":"timeout"}]},{"type":"element","tag":"span","props":{"class":"ct-914ee4"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" ]]"}]},{"type":"element","tag":"span","props":{"class":"ct-d8c1e9"},"children":[{"type":"text","value":";"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c1e9"},"children":[{"type":"text","value":"then"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-92bbf9"},"children":[{"type":"text","value":"echo"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-46d226"},"children":[{"type":"text","value":"\"[Error] can't properly ping Redis container after "}]},{"type":"element","tag":"span","props":{"class":"ct-914ee4"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-1335e9"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-914ee4"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-46d226"},"children":[{"type":"text","value":" secs\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-92bbf9"},"children":[{"type":"text","value":"exit"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" 1"}]},{"type":"element","tag":"span","props":{"class":"ct-d8c1e9"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c1e9"},"children":[{"type":"text","value":"fi"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c1e9"},"children":[{"type":"text","value":"done"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5c461f"},"children":[{"type":"text","value":"# usage: wait_for_redis miin-redis-dev password"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"Wait%20for%20mysql"},"children":[{"type":"text","value":"Wait for mysql"}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-aeabae{color:#79C0FF}.ct-1335e9{color:#C9D1D9}.ct-914ee4{color:#C9D1D9}.ct-46d226{color:#A5D6FF}.ct-92bbf9{color:#79C0FF}.ct-d8c1e9{color:#FF7B72}.ct-8ef110{color:#C9D1D9}.ct-9ecbf6{color:#D2A8FF}.ct-5c461f{color:#8B949E}.light .ct-5c461f{color:#93A1A1}.light .ct-9ecbf6{color:#268BD2}.light .ct-8ef110{color:#657B83}.light .ct-d8c1e9{color:#859900}.light .ct-92bbf9{color:#268BD2}.light .ct-46d226{color:#2AA198}.light .ct-914ee4{color:#859900}.light .ct-1335e9{color:#268BD2}.light .ct-aeabae{color:#D33682}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Docker:Wait for redis.md","_source":"content","_file":"Docker/Wait for redis.md","_extension":"md"},{"_path":"/frontend/react-native/oauth2-login","_dir":"react-native","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"OAuth2 Login","description":"Use #oauth2 login with React-Native","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use #oauth2 login with React-Native"}]},{"type":"element","tag":"h2","props":{"id":"common-oauth2-providers"},"children":[{"type":"text","value":"Common OAuth2 providers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Can be handled by "},{"type":"element","tag":"a","props":{"href":"react-native-app-auth"},"children":[{"type":"text","value":"react-native-app-auth"}]},{"type":"text","value":" by redirecting to url "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"com.yourapp://oauth2provider"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"example-for-google"},"children":[{"type":"text","value":"Example for #Google"}]},{"type":"element","tag":"code","props":{"code":"import { authorize } from 'react-native-app-auth';\n\nconst GOOGLE_OAUTH_CLIENT = '...';\n\n// ...\nconst authState = await authorize({\n issuer: 'https://accounts.google.com',\n clientId: `${GOOGLE_OAUTH_CLIENT}.apps.googleusercontent.com`,\n redirectUrl: `com.yourapp:/oauth2redirect/google`,\n scopes: ['openid', 'profile'],\n dangerouslyAllowInsecureHttpRequests: true,\n});\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { authorize } from 'react-native-app-auth';\n\nconst GOOGLE_OAUTH_CLIENT = '...';\n\n// ...\nconst authState = await authorize({\n issuer: 'https://accounts.google.com',\n clientId: `${GOOGLE_OAUTH_CLIENT}.apps.googleusercontent.com`,\n redirectUrl: `com.yourapp:/oauth2redirect/google`,\n scopes: ['openid', 'profile'],\n dangerouslyAllowInsecureHttpRequests: true,\n});\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"example-for-yandex"},"children":[{"type":"text","value":"Example for #Yandex"}]},{"type":"element","tag":"code","props":{"code":"const YANDEX_OAUTH_CLIENT = '...';\nconst YANDEX_OAUTH_SECRET = '...'; // better hide it somehow\nconst APP_ID = 'com.yourapp';\n\nconst authState = await authorize({\n serviceConfiguration: {\n authorizationEndpoint: `https://oauth.yandex.ru/authorize?response_type=code&client_id=${YANDEX_OAUTH_CLIENT}&redirect_uri=${APP_ID}:/oauth2redirect`,\n // TODO: replace it with your own backend to secure client_secret:\n tokenEndpoint: `https://oauth.yandex.ru/token?grant_type=authorization_code&client_id=${YANDEX_OAUTH_CLIENT}&client_secret=${YANDEX_OAUTH_SECRET}`,\n },\n clientId: YANDEX_OAUTH_CLIENT,\n redirectUrl: `${APP_ID}:/oauth2redirect`,\n scopes: ['login:info', 'login:avatar'],\n dangerouslyAllowInsecureHttpRequests: true,\n});\n\ncallback(authState.accessToken);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const YANDEX_OAUTH_CLIENT = '...';\nconst YANDEX_OAUTH_SECRET = '...'; // better hide it somehow\nconst APP_ID = 'com.yourapp';\n\nconst authState = await authorize({\n serviceConfiguration: {\n authorizationEndpoint: `https://oauth.yandex.ru/authorize?response_type=code&client_id=${YANDEX_OAUTH_CLIENT}&redirect_uri=${APP_ID}:/oauth2redirect`,\n // TODO: replace it with your own backend to secure client_secret:\n tokenEndpoint: `https://oauth.yandex.ru/token?grant_type=authorization_code&client_id=${YANDEX_OAUTH_CLIENT}&client_secret=${YANDEX_OAUTH_SECRET}`,\n },\n clientId: YANDEX_OAUTH_CLIENT,\n redirectUrl: `${APP_ID}:/oauth2redirect`,\n scopes: ['login:info', 'login:avatar'],\n dangerouslyAllowInsecureHttpRequests: true,\n});\n\ncallback(authState.accessToken);\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"apple-id-login"},"children":[{"type":"text","value":"Apple ID login"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/invertase/react-native-apple-authentication","rel":["nofollow"]},"children":[{"type":"text","value":"react-native-apple-authentication"}]},{"type":"text","value":" has its own "},{"type":"element","tag":"a","props":{"href":"https://github.com/invertase/react-native-apple-authentication/tree/main/docs","rel":["nofollow"]},"children":[{"type":"text","value":"documentation"}]},{"type":"text","value":" on setting up OAuth using Apple ID."}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use #oauth2 login with React-Native"}]},{"type":"element","tag":"h2","props":{"id":"common-oauth2-providers"},"children":[{"type":"text","value":"Common OAuth2 providers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Can be handled by "},{"type":"element","tag":"a","props":{"href":"react-native-app-auth"},"children":[{"type":"text","value":"react-native-app-auth"}]},{"type":"text","value":" by redirecting to url "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"com.yourapp://oauth2provider"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"example-for-google"},"children":[{"type":"text","value":"Example for #Google"}]},{"type":"element","tag":"code","props":{"code":"import { authorize } from 'react-native-app-auth';\n\nconst GOOGLE_OAUTH_CLIENT = '...';\n\n// ...\nconst authState = await authorize({\n issuer: 'https://accounts.google.com',\n clientId: `${GOOGLE_OAUTH_CLIENT}.apps.googleusercontent.com`,\n redirectUrl: `com.yourapp:/oauth2redirect/google`,\n scopes: ['openid', 'profile'],\n dangerouslyAllowInsecureHttpRequests: true,\n});\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-db1a1c"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-25a6af"},"children":[{"type":"text","value":"authorize"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-db1a1c"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"'react-native-app-auth'"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bd73c0"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20d3ba"},"children":[{"type":"text","value":"GOOGLE_OAUTH_CLIENT"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-db1a1c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"'...'"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f3a5ee"},"children":[{"type":"text","value":"// ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bd73c0"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20d3ba"},"children":[{"type":"text","value":"authState"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-db1a1c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-db1a1c"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0bd357"},"children":[{"type":"text","value":"authorize"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" issuer: "}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"'https://accounts.google.com'"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" clientId: "}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"`${"}]},{"type":"element","tag":"span","props":{"class":"ct-20d3ba"},"children":[{"type":"text","value":"GOOGLE_OAUTH_CLIENT"}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"}.apps.googleusercontent.com`"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" redirectUrl: "}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"`com.yourapp:/oauth2redirect/google`"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" scopes: ["}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"'openid'"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"'profile'"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":"],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" dangerouslyAllowInsecureHttpRequests: "}]},{"type":"element","tag":"span","props":{"class":"ct-8f934a"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":"});"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"example-for-yandex"},"children":[{"type":"text","value":"Example for #Yandex"}]},{"type":"element","tag":"code","props":{"code":"const YANDEX_OAUTH_CLIENT = '...';\nconst YANDEX_OAUTH_SECRET = '...'; // better hide it somehow\nconst APP_ID = 'com.yourapp';\n\nconst authState = await authorize({\n serviceConfiguration: {\n authorizationEndpoint: `https://oauth.yandex.ru/authorize?response_type=code&client_id=${YANDEX_OAUTH_CLIENT}&redirect_uri=${APP_ID}:/oauth2redirect`,\n // TODO: replace it with your own backend to secure client_secret:\n tokenEndpoint: `https://oauth.yandex.ru/token?grant_type=authorization_code&client_id=${YANDEX_OAUTH_CLIENT}&client_secret=${YANDEX_OAUTH_SECRET}`,\n },\n clientId: YANDEX_OAUTH_CLIENT,\n redirectUrl: `${APP_ID}:/oauth2redirect`,\n scopes: ['login:info', 'login:avatar'],\n dangerouslyAllowInsecureHttpRequests: true,\n});\n\ncallback(authState.accessToken);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bd73c0"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20d3ba"},"children":[{"type":"text","value":"YANDEX_OAUTH_CLIENT"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-db1a1c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"'...'"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bd73c0"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20d3ba"},"children":[{"type":"text","value":"YANDEX_OAUTH_SECRET"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-db1a1c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"'...'"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":"; "}]},{"type":"element","tag":"span","props":{"class":"ct-f3a5ee"},"children":[{"type":"text","value":"// better hide it somehow"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bd73c0"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20d3ba"},"children":[{"type":"text","value":"APP_ID"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-db1a1c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"'com.yourapp'"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bd73c0"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20d3ba"},"children":[{"type":"text","value":"authState"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-db1a1c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-db1a1c"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0bd357"},"children":[{"type":"text","value":"authorize"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" serviceConfiguration: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" authorizationEndpoint: "}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"`https://oauth.yandex.ru/authorize?response_type=code&client_id=${"}]},{"type":"element","tag":"span","props":{"class":"ct-20d3ba"},"children":[{"type":"text","value":"YANDEX_OAUTH_CLIENT"}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"}&redirect_uri=${"}]},{"type":"element","tag":"span","props":{"class":"ct-20d3ba"},"children":[{"type":"text","value":"APP_ID"}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"}:/oauth2redirect`"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f3a5ee"},"children":[{"type":"text","value":"// TODO: replace it with your own backend to secure client_secret:"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" tokenEndpoint: "}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"`https://oauth.yandex.ru/token?grant_type=authorization_code&client_id=${"}]},{"type":"element","tag":"span","props":{"class":"ct-20d3ba"},"children":[{"type":"text","value":"YANDEX_OAUTH_CLIENT"}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"}&client_secret=${"}]},{"type":"element","tag":"span","props":{"class":"ct-20d3ba"},"children":[{"type":"text","value":"YANDEX_OAUTH_SECRET"}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"}`"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" clientId: "}]},{"type":"element","tag":"span","props":{"class":"ct-20d3ba"},"children":[{"type":"text","value":"YANDEX_OAUTH_CLIENT"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" redirectUrl: "}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"`${"}]},{"type":"element","tag":"span","props":{"class":"ct-20d3ba"},"children":[{"type":"text","value":"APP_ID"}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"}:/oauth2redirect`"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" scopes: ["}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"'login:info'"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"'login:avatar'"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":"],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" dangerouslyAllowInsecureHttpRequests: "}]},{"type":"element","tag":"span","props":{"class":"ct-8f934a"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":"});"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0bd357"},"children":[{"type":"text","value":"callback"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-25a6af"},"children":[{"type":"text","value":"authState"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-25a6af"},"children":[{"type":"text","value":"accessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":");"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"apple-id-login"},"children":[{"type":"text","value":"Apple ID login"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/invertase/react-native-apple-authentication","rel":["nofollow"]},"children":[{"type":"text","value":"react-native-apple-authentication"}]},{"type":"text","value":" has its own "},{"type":"element","tag":"a","props":{"href":"https://github.com/invertase/react-native-apple-authentication/tree/main/docs","rel":["nofollow"]},"children":[{"type":"text","value":"documentation"}]},{"type":"text","value":" on setting up OAuth using Apple ID."}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-8f934a{color:#79C0FF}.ct-0bd357{color:#D2A8FF}.ct-f3a5ee{color:#8B949E}.ct-20d3ba{color:#79C0FF}.ct-bd73c0{color:#FF7B72}.ct-d3e5b1{color:#A5D6FF}.ct-25a6af{color:#C9D1D9}.ct-7e4aea{color:#C9D1D9}.ct-db1a1c{color:#FF7B72}.light .ct-db1a1c{color:#859900}.light .ct-7e4aea{color:#657B83}.light .ct-25a6af{color:#268BD2}.light .ct-d3e5b1{color:#2AA198}.light .ct-bd73c0{color:#073642}.light .ct-20d3ba{color:#268BD2}.light .ct-f3a5ee{color:#93A1A1}.light .ct-0bd357{color:#268BD2}.light .ct-8f934a{color:#B58900}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"common-oauth2-providers","depth":2,"text":"Common OAuth2 providers","children":[{"id":"example-for-google","depth":3,"text":"Example for #Google"},{"id":"example-for-yandex","depth":3,"text":"Example for #Yandex"}]},{"id":"apple-id-login","depth":2,"text":"Apple ID login"}]}},"_type":"markdown","_id":"content:Frontend:React Native:OAuth2 login.md","_source":"content","_file":"Frontend/React Native/OAuth2 login.md","_extension":"md"},{"_path":"/frontend/react-native/preserve-flatlist-scroll-position-in-react-native","_dir":"react-native","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Preserve FlatList Scroll Position In React Native","description":"Sometimes you need to keep scroll position of FlatList in React Native after some user interactions.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes you need to keep scroll position of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"FlatList"}]},{"type":"text","value":" in React Native after some user interactions."}]},{"type":"element","tag":"code","props":{"code":"// interact() is doing some stuff, that changes FlatList scroll size\ntype Props = { interact: () => void; }\n\nconst SomeList: FC<Props> = ({ interact }) => {\n const scrollPosition = useRef(0);\n const scrollHeight = useRef(0);\n \n // set it to `true` before interaction and back to `false` right after\n const shouldKeepScrollPosition = useRef(false);\n\n const onScroll = useCallback(\n (event: NativeSyntheticEvent<NativeScrollEvent>) => {\n scrollPosition.current = event.nativeEvent.contentOffset.y;\n },\n [],\n );\n\n const onContentSizeChange = useCallback((_: number, h: number) => {\n if (!shouldKeepScrollPosition.current) {\n scrollHeight.current = h;\n return;\n }\n\n ref.current?.scrollToOffset({\n offset: scrollPosition.current + (h - scrollHeight.current),\n animated: false,\n });\n\n scrollHeight.current = h;\n }, []);\n\n // onInteraction wraps interaction to preserve scroll position\n const onInteraction = useCallback(\n () => {\n shouldKeepScrollPosition.current = true;\n\n setTimeout(() => {\n interact();\n }, 0);\n\n setTimeout(() => {\n shouldKeepScrollPosition.current = false;\n }, 500);\n },\n [setSelectedSubThemes],\n );\n \n return (\n <FlatList\n // ...required FlatList options\n ref={ref}\n onContentSizeChange={onContentSizeChange}\n onRefresh={onRefresh}\n onScroll={onScroll}\n />\n )\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// interact() is doing some stuff, that changes FlatList scroll size\ntype Props = { interact: () => void; }\n\nconst SomeList: FC<Props> = ({ interact }) => {\n const scrollPosition = useRef(0);\n const scrollHeight = useRef(0);\n \n // set it to `true` before interaction and back to `false` right after\n const shouldKeepScrollPosition = useRef(false);\n\n const onScroll = useCallback(\n (event: NativeSyntheticEvent<NativeScrollEvent>) => {\n scrollPosition.current = event.nativeEvent.contentOffset.y;\n },\n [],\n );\n\n const onContentSizeChange = useCallback((_: number, h: number) => {\n if (!shouldKeepScrollPosition.current) {\n scrollHeight.current = h;\n return;\n }\n\n ref.current?.scrollToOffset({\n offset: scrollPosition.current + (h - scrollHeight.current),\n animated: false,\n });\n\n scrollHeight.current = h;\n }, []);\n\n // onInteraction wraps interaction to preserve scroll position\n const onInteraction = useCallback(\n () => {\n shouldKeepScrollPosition.current = true;\n\n setTimeout(() => {\n interact();\n }, 0);\n\n setTimeout(() => {\n shouldKeepScrollPosition.current = false;\n }, 500);\n },\n [setSelectedSubThemes],\n );\n \n return (\n <FlatList\n // ...required FlatList options\n ref={ref}\n onContentSizeChange={onContentSizeChange}\n onRefresh={onRefresh}\n onScroll={onScroll}\n />\n )\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes you need to keep scroll position of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"FlatList"}]},{"type":"text","value":" in React Native after some user interactions."}]},{"type":"element","tag":"code","props":{"code":"// interact() is doing some stuff, that changes FlatList scroll size\ntype Props = { interact: () => void; }\n\nconst SomeList: FC<Props> = ({ interact }) => {\n const scrollPosition = useRef(0);\n const scrollHeight = useRef(0);\n \n // set it to `true` before interaction and back to `false` right after\n const shouldKeepScrollPosition = useRef(false);\n\n const onScroll = useCallback(\n (event: NativeSyntheticEvent<NativeScrollEvent>) => {\n scrollPosition.current = event.nativeEvent.contentOffset.y;\n },\n [],\n );\n\n const onContentSizeChange = useCallback((_: number, h: number) => {\n if (!shouldKeepScrollPosition.current) {\n scrollHeight.current = h;\n return;\n }\n\n ref.current?.scrollToOffset({\n offset: scrollPosition.current + (h - scrollHeight.current),\n animated: false,\n });\n\n scrollHeight.current = h;\n }, []);\n\n // onInteraction wraps interaction to preserve scroll position\n const onInteraction = useCallback(\n () => {\n shouldKeepScrollPosition.current = true;\n\n setTimeout(() => {\n interact();\n }, 0);\n\n setTimeout(() => {\n shouldKeepScrollPosition.current = false;\n }, 500);\n },\n [setSelectedSubThemes],\n );\n \n return (\n <FlatList\n // ...required FlatList options\n ref={ref}\n onContentSizeChange={onContentSizeChange}\n onRefresh={onRefresh}\n onScroll={onScroll}\n />\n )\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cbdfc4"},"children":[{"type":"text","value":"// interact() is doing some stuff, that changes FlatList scroll size"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-899c19"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8812"},"children":[{"type":"text","value":"Props"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-53862c"},"children":[{"type":"text","value":"interact"}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-899c19"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-16fddf"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"; }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ee2cab"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bc0f5b"},"children":[{"type":"text","value":"SomeList"}]},{"type":"element","tag":"span","props":{"class":"ct-6883f2"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-214e59"},"children":[{"type":"text","value":"FC"}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-214e59"},"children":[{"type":"text","value":"Props"}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-6883f2"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":" ({ "}]},{"type":"element","tag":"span","props":{"class":"ct-37159e"},"children":[{"type":"text","value":"interact"}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":" }) "}]},{"type":"element","tag":"span","props":{"class":"ct-ee2cab"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-899c19"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f151f9"},"children":[{"type":"text","value":"scrollPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-53862c"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-824354"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-899c19"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f151f9"},"children":[{"type":"text","value":"scrollHeight"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-53862c"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-824354"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbdfc4"},"children":[{"type":"text","value":"// set it to `true` before interaction and back to `false` right after"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-899c19"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f151f9"},"children":[{"type":"text","value":"shouldKeepScrollPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-53862c"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-1a8020"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-899c19"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f151f9"},"children":[{"type":"text","value":"onScroll"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-53862c"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-37159e"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-6883f2"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-214e59"},"children":[{"type":"text","value":"NativeSyntheticEvent"}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-214e59"},"children":[{"type":"text","value":"NativeScrollEvent"}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":">) "}]},{"type":"element","tag":"span","props":{"class":"ct-ee2cab"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"scrollPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"nativeEvent"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"contentOffset"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"y"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" [],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ee2cab"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-447d8e"},"children":[{"type":"text","value":"onContentSizeChange"}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6883f2"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bc0f5b"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":"(("}]},{"type":"element","tag":"span","props":{"class":"ct-37159e"},"children":[{"type":"text","value":"_"}]},{"type":"element","tag":"span","props":{"class":"ct-6883f2"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5ac3c8"},"children":[{"type":"text","value":"number"}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-37159e"},"children":[{"type":"text","value":"h"}]},{"type":"element","tag":"span","props":{"class":"ct-6883f2"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5ac3c8"},"children":[{"type":"text","value":"number"}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-ee2cab"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"shouldKeepScrollPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"scrollHeight"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"h"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"ref"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-53862c"},"children":[{"type":"text","value":"scrollToOffset"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" offset: "}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"scrollPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"h"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"scrollHeight"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" animated: "}]},{"type":"element","tag":"span","props":{"class":"ct-1a8020"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"scrollHeight"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"h"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" }, []);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbdfc4"},"children":[{"type":"text","value":"// onInteraction wraps interaction to preserve scroll position"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-899c19"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f151f9"},"children":[{"type":"text","value":"onInteraction"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-53862c"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-899c19"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"shouldKeepScrollPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1a8020"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f151f9"},"children":[{"type":"text","value":"setTimeout"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-899c19"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-53862c"},"children":[{"type":"text","value":"interact"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" }, "}]},{"type":"element","tag":"span","props":{"class":"ct-824354"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f151f9"},"children":[{"type":"text","value":"setTimeout"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-899c19"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"shouldKeepScrollPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1a8020"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" }, "}]},{"type":"element","tag":"span","props":{"class":"ct-824354"},"children":[{"type":"text","value":"500"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"setSelectedSubThemes"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-deddc5"},"children":[{"type":"text","value":"FlatList"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbdfc4"},"children":[{"type":"text","value":"// ...required FlatList options"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"ref"}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"ref"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"onContentSizeChange"}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"onContentSizeChange"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"onRefresh"}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"onRefresh"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"onScroll"}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"onScroll"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"/>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" )"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-deddc5{color:#FFA657}.ct-5ac3c8{color:#79C0FF}.ct-447d8e{color:#79C0FF}.ct-458d97{color:#C9D1D9}.ct-1a8020{color:#79C0FF}.ct-824354{color:#79C0FF}.ct-f151f9{color:#79C0FF}.ct-37159e{color:#FFA657}.ct-214e59{color:#FFA657}.ct-6883f2{color:#FF7B72}.ct-bc0f5b{color:#D2A8FF}.ct-a4861c{color:#C9D1D9}.ct-ee2cab{color:#FF7B72}.ct-16fddf{color:#79C0FF}.ct-53862c{color:#D2A8FF}.ct-bdec02{color:#FF7B72}.ct-fe8812{color:#FFA657}.ct-2651d0{color:#C9D1D9}.ct-899c19{color:#FF7B72}.ct-cbdfc4{color:#8B949E}.light .ct-cbdfc4{color:#93A1A1}.light .ct-899c19{color:#073642}.light .ct-2651d0{color:#657B83}.light .ct-fe8812{color:#268BD2}.light .ct-bdec02{color:#859900}.light .ct-53862c{color:#268BD2}.light .ct-16fddf{color:#859900}.light .ct-ee2cab{color:#073642}.light .ct-a4861c{color:#657B83}.light .ct-bc0f5b{color:#268BD2}.light .ct-6883f2{color:#859900}.light .ct-214e59{color:#268BD2}.light .ct-37159e{color:#657B83}.light .ct-f151f9{color:#268BD2}.light .ct-824354{color:#D33682}.light .ct-1a8020{color:#B58900}.light .ct-458d97{color:#268BD2}.light .ct-447d8e{color:#268BD2}.light .ct-5ac3c8{color:#859900}.light .ct-deddc5{color:#657B83}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Frontend:React Native:Preserve FlatList scroll position in React Native.md","_source":"content","_file":"Frontend/React Native/Preserve FlatList scroll position in React Native.md","_extension":"md"},{"_path":"/frontend/react-native/useful-comands","_dir":"react-native","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Useful Comands","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"show-android-logcat"},"children":[{"type":"text","value":"Show android logcat"}]},{"type":"element","tag":"code","props":{"code":"adb logcat com.application:I \"*:S\"\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"adb logcat com.application:I \"*:S\"\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"get-apks-sha-256"},"children":[{"type":"text","value":"Get .apk's SHA-256"}]},{"type":"element","tag":"code","props":{"code":"keytool -printcert -jarfile \"$1\"\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"keytool -printcert -jarfile \"$1\"\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"assemble-debug-release-on-android"},"children":[{"type":"text","value":"Assemble debug release on Android"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Packages release with bundled resources."}]},{"type":"element","tag":"code","props":{"code":"npx react-native bundle \\\n --platform android \\\n --dev false \\\n --entry-file index.js \\\n --bundle-output android/app/src/main/assets/index.android.bundle \\\n --assets-dest android/app/src/main/res/\n\ncd android && ./gradlew assembleDebug\n\n# do your stuff\n\n./gradlew clean\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npx react-native bundle \\\n --platform android \\\n --dev false \\\n --entry-file index.js \\\n --bundle-output android/app/src/main/assets/index.android.bundle \\\n --assets-dest android/app/src/main/res/\n\ncd android && ./gradlew assembleDebug\n\n# do your stuff\n\n./gradlew clean\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"send-release-to-android-device"},"children":[{"type":"text","value":"Send release to Android device"}]},{"type":"element","tag":"code","props":{"code":"cd ./android \\\n && ./gradlew assembleRelease \\\n && adb install ./app/build/outputs/apk/release/app-release.apk\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"cd ./android \\\n && ./gradlew assembleRelease \\\n && adb install ./app/build/outputs/apk/release/app-release.apk\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"deep-links"},"children":[{"type":"text","value":"Deep links"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://zarah.dev/2022/02/08/android12-deeplinks.html","rel":["nofollow"]},"children":[{"type":"text","value":"https://zarah.dev/2022/02/08/android12-deeplinks.html"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://developer.android.com/training/app-links/verify-site-associations#invoke-domain-verification","rel":["nofollow"]},"children":[{"type":"text","value":"https://developer.android.com/training/app-links/verify-site-associations#invoke-domain-verification"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://digitalassetlinks.googleapis.com/v1/statements:list?source.web.site=https://miin.ru&relation=delegate_permission/common.handle_all_urls","rel":["nofollow"]},"children":[{"type":"text","value":"https://digitalassetlinks.googleapis.com/v1/statements:list?source.web.site=https://miin.ru&relation=delegate_permission/common.handle_all_urls"}]}]}]},{"type":"element","tag":"h3","props":{"id":"open-deep-links"},"children":[{"type":"text","value":"Open deep links"}]},{"type":"element","tag":"code","props":{"code":"# ios \nxcrun simctl openurl booted $1\n\n# android\nadb shell am start -W -a android.intent.action.VIEW -d $1 \\\ncom.application\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"# ios \nxcrun simctl openurl booted $1\n\n# android\nadb shell am start -W -a android.intent.action.VIEW -d $1 \\\ncom.application\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"reverify-links-on-android"},"children":[{"type":"text","value":"Reverify links on Android"}]},{"type":"element","tag":"code","props":{"code":"PACKAGE=\"com.application\"\n\nadb shell pm set-app-links --package $PACKAGE 0 all && \\\n adb shell pm verify-app-links --re-verify $PACKAGE\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"PACKAGE=\"com.application\"\n\nadb shell pm set-app-links --package $PACKAGE 0 all && \\\n adb shell pm verify-app-links --re-verify $PACKAGE\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"show-android-logcat"},"children":[{"type":"text","value":"Show android logcat"}]},{"type":"element","tag":"code","props":{"code":"adb logcat com.application:I \"*:S\"\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":"adb logcat com.application:I "}]},{"type":"element","tag":"span","props":{"class":"ct-586fb5"},"children":[{"type":"text","value":"\"*:S\""}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"get-apks-sha-256"},"children":[{"type":"text","value":"Get .apk's SHA-256"}]},{"type":"element","tag":"code","props":{"code":"keytool -printcert -jarfile \"$1\"\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":"keytool -printcert -jarfile "}]},{"type":"element","tag":"span","props":{"class":"ct-586fb5"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-29bf92"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-0b6eba"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-586fb5"},"children":[{"type":"text","value":"\""}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"assemble-debug-release-on-android"},"children":[{"type":"text","value":"Assemble debug release on Android"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Packages release with bundled resources."}]},{"type":"element","tag":"code","props":{"code":"npx react-native bundle \\\n --platform android \\\n --dev false \\\n --entry-file index.js \\\n --bundle-output android/app/src/main/assets/index.android.bundle \\\n --assets-dest android/app/src/main/res/\n\ncd android && ./gradlew assembleDebug\n\n# do your stuff\n\n./gradlew clean\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":"npx react-native bundle \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":" --platform android \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":" --dev "}]},{"type":"element","tag":"span","props":{"class":"ct-3ff336"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":" \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":" --entry-file index.js \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":" --bundle-output android/app/src/main/assets/index.android.bundle \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":" --assets-dest android/app/src/main/res/"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3ff336"},"children":[{"type":"text","value":"cd"}]},{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":" android "}]},{"type":"element","tag":"span","props":{"class":"ct-de0bb9"},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":" ./gradlew assembleDebug"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-22d421"},"children":[{"type":"text","value":"# do your stuff"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":"./gradlew clean"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"send-release-to-android-device"},"children":[{"type":"text","value":"Send release to Android device"}]},{"type":"element","tag":"code","props":{"code":"cd ./android \\\n && ./gradlew assembleRelease \\\n && adb install ./app/build/outputs/apk/release/app-release.apk\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3ff336"},"children":[{"type":"text","value":"cd"}]},{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":" ./android \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de0bb9"},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":" ./gradlew assembleRelease \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de0bb9"},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":" adb install ./app/build/outputs/apk/release/app-release.apk"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"deep-links"},"children":[{"type":"text","value":"Deep links"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://zarah.dev/2022/02/08/android12-deeplinks.html","rel":["nofollow"]},"children":[{"type":"text","value":"https://zarah.dev/2022/02/08/android12-deeplinks.html"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://developer.android.com/training/app-links/verify-site-associations#invoke-domain-verification","rel":["nofollow"]},"children":[{"type":"text","value":"https://developer.android.com/training/app-links/verify-site-associations#invoke-domain-verification"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://digitalassetlinks.googleapis.com/v1/statements:list?source.web.site=https://miin.ru&relation=delegate_permission/common.handle_all_urls","rel":["nofollow"]},"children":[{"type":"text","value":"https://digitalassetlinks.googleapis.com/v1/statements:list?source.web.site=https://miin.ru&relation=delegate_permission/common.handle_all_urls"}]}]}]},{"type":"element","tag":"h3","props":{"id":"open-deep-links"},"children":[{"type":"text","value":"Open deep links"}]},{"type":"element","tag":"code","props":{"code":"# ios \nxcrun simctl openurl booted $1\n\n# android\nadb shell am start -W -a android.intent.action.VIEW -d $1 \\\ncom.application\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-22d421"},"children":[{"type":"text","value":"# ios "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":"xcrun simctl openurl booted "}]},{"type":"element","tag":"span","props":{"class":"ct-29bf92"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-0b6eba"},"children":[{"type":"text","value":"1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-22d421"},"children":[{"type":"text","value":"# android"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":"adb shell am start -W -a android.intent.action.VIEW -d "}]},{"type":"element","tag":"span","props":{"class":"ct-29bf92"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-0b6eba"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":" \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":"com.application"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"reverify-links-on-android"},"children":[{"type":"text","value":"Reverify links on Android"}]},{"type":"element","tag":"code","props":{"code":"PACKAGE=\"com.application\"\n\nadb shell pm set-app-links --package $PACKAGE 0 all && \\\n adb shell pm verify-app-links --re-verify $PACKAGE\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":"PACKAGE="}]},{"type":"element","tag":"span","props":{"class":"ct-586fb5"},"children":[{"type":"text","value":"\"com.application\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":"adb shell pm set-app-links --package "}]},{"type":"element","tag":"span","props":{"class":"ct-29bf92"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-0b6eba"},"children":[{"type":"text","value":"PACKAGE"}]},{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":" 0 all "}]},{"type":"element","tag":"span","props":{"class":"ct-de0bb9"},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":" \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":" adb shell pm verify-app-links --re-verify "}]},{"type":"element","tag":"span","props":{"class":"ct-29bf92"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-0b6eba"},"children":[{"type":"text","value":"PACKAGE"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-22d421{color:#8B949E}.ct-de0bb9{color:#FF7B72}.ct-3ff336{color:#79C0FF}.ct-0b6eba{color:#C9D1D9}.ct-29bf92{color:#C9D1D9}.ct-586fb5{color:#A5D6FF}.ct-506d69{color:#C9D1D9}.light .ct-506d69{color:#657B83}.light .ct-586fb5{color:#2AA198}.light .ct-29bf92{color:#859900}.light .ct-0b6eba{color:#268BD2}.light .ct-3ff336{color:#268BD2}.light .ct-de0bb9{color:#859900}.light .ct-22d421{color:#93A1A1}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"show-android-logcat","depth":2,"text":"Show android logcat"},{"id":"get-apks-sha-256","depth":2,"text":"Get .apk's SHA-256"},{"id":"assemble-debug-release-on-android","depth":2,"text":"Assemble debug release on Android"},{"id":"send-release-to-android-device","depth":2,"text":"Send release to Android device"},{"id":"deep-links","depth":2,"text":"Deep links","children":[{"id":"open-deep-links","depth":3,"text":"Open deep links"},{"id":"reverify-links-on-android","depth":3,"text":"Reverify links on Android"}]}]}},"_type":"markdown","_id":"content:Frontend:React Native:Useful comands.md","_source":"content","_file":"Frontend/React Native/Useful comands.md","_extension":"md"},{"_path":"/frontend/react/axios-refresh-token-on-react","_dir":"react","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Axios Refresh Token On React","description":"<ApiProvider /> component, that will handle token refresh if needed. Refresh function should, probably, be passed through component props.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<ApiProvider />"}]},{"type":"text","value":" component, that will handle token refresh if needed. Refresh function should, probably, be passed through component props."}]},{"type":"element","tag":"code","props":{"code":"import axios from \"axios\";\nimport React, {\n createContext,\n FC,\n PropsWithChildren,\n useCallback,\n useContext,\n useEffect,\n useRef,\n} from \"react\";\n\ninterface APIProviderProps extends PropsWithChildren {\n tokens: {\n access: string;\n refresh: string;\n };\n logout: () => void;\n}\n\nconst APIContext = createContext({\n client: axios.create({\n baseURL: process.env.NEXT_PUBLIC_API_ENDPOINT,\n }),\n});\n\nconst APIProvider: FC<APIProviderProps> = ({ \n tokens, \n logout, \n children,\n}) => {\n const client = useRef(\n axios.create({\n baseURL: process.env.NEXT_PUBLIC_API_ENDPOINT,\n })\n ).current;\n\n const refreshTokens = useCallback<() => string>(() => {\n // TODO: implement me\n throw new Error(\"not implemented\");\n }, []);\n\n useEffect(() => {\n if (!tokens.access) {\n return;\n }\n\n // append `access` token to all requests\n const req = client.interceptors.request.use(\n async (config) => {\n config.headers = {\n Authorization: `Bearer ${tokens.access}`,\n };\n return config;\n },\n (error) => {\n Promise.reject(error);\n }\n );\n\n // refreshing interceptor\n const resp = client.interceptors.response.use(\n (response) => {\n return response;\n },\n async function (error) {\n const originalRequest = error.config;\n\n if (error.response.status === 401 && !originalRequest._retry) {\n originalRequest._retry = true;\n\n const newToken = refreshTokens;\n\n return axios({\n ...originalRequest,\n headers: {\n ...originalRequest.headers,\n Authorization: \"Bearer \" + newToken,\n },\n });\n }\n\n logout();\n return Promise.reject(error);\n }\n );\n\n return () => {\n axios.interceptors.request.eject(req);\n axios.interceptors.request.eject(resp);\n };\n }, [client, tokens.access, tokens.refresh, refreshTokens, logout]);\n\n return (\n <APIContext.Provider value={{ client }}>\n {children}\n </APIContext.Provider>\n );\n};\n\nexport const useAPI = () => useContext(APIContext).client;\n\nexport { APIProvider };\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import axios from \"axios\";\nimport React, {\n createContext,\n FC,\n PropsWithChildren,\n useCallback,\n useContext,\n useEffect,\n useRef,\n} from \"react\";\n\ninterface APIProviderProps extends PropsWithChildren {\n tokens: {\n access: string;\n refresh: string;\n };\n logout: () => void;\n}\n\nconst APIContext = createContext({\n client: axios.create({\n baseURL: process.env.NEXT_PUBLIC_API_ENDPOINT,\n }),\n});\n\nconst APIProvider: FC<APIProviderProps> = ({ \n tokens, \n logout, \n children,\n}) => {\n const client = useRef(\n axios.create({\n baseURL: process.env.NEXT_PUBLIC_API_ENDPOINT,\n })\n ).current;\n\n const refreshTokens = useCallback<() => string>(() => {\n // TODO: implement me\n throw new Error(\"not implemented\");\n }, []);\n\n useEffect(() => {\n if (!tokens.access) {\n return;\n }\n\n // append `access` token to all requests\n const req = client.interceptors.request.use(\n async (config) => {\n config.headers = {\n Authorization: `Bearer ${tokens.access}`,\n };\n return config;\n },\n (error) => {\n Promise.reject(error);\n }\n );\n\n // refreshing interceptor\n const resp = client.interceptors.response.use(\n (response) => {\n return response;\n },\n async function (error) {\n const originalRequest = error.config;\n\n if (error.response.status === 401 && !originalRequest._retry) {\n originalRequest._retry = true;\n\n const newToken = refreshTokens;\n\n return axios({\n ...originalRequest,\n headers: {\n ...originalRequest.headers,\n Authorization: \"Bearer \" + newToken,\n },\n });\n }\n\n logout();\n return Promise.reject(error);\n }\n );\n\n return () => {\n axios.interceptors.request.eject(req);\n axios.interceptors.request.eject(resp);\n };\n }, [client, tokens.access, tokens.refresh, refreshTokens, logout]);\n\n return (\n <APIContext.Provider value={{ client }}>\n {children}\n </APIContext.Provider>\n );\n};\n\nexport const useAPI = () => useContext(APIContext).client;\n\nexport { APIProvider };\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<ApiProvider />"}]},{"type":"text","value":" component, that will handle token refresh if needed. Refresh function should, probably, be passed through component props."}]},{"type":"element","tag":"code","props":{"code":"import axios from \"axios\";\nimport React, {\n createContext,\n FC,\n PropsWithChildren,\n useCallback,\n useContext,\n useEffect,\n useRef,\n} from \"react\";\n\ninterface APIProviderProps extends PropsWithChildren {\n tokens: {\n access: string;\n refresh: string;\n };\n logout: () => void;\n}\n\nconst APIContext = createContext({\n client: axios.create({\n baseURL: process.env.NEXT_PUBLIC_API_ENDPOINT,\n }),\n});\n\nconst APIProvider: FC<APIProviderProps> = ({ \n tokens, \n logout, \n children,\n}) => {\n const client = useRef(\n axios.create({\n baseURL: process.env.NEXT_PUBLIC_API_ENDPOINT,\n })\n ).current;\n\n const refreshTokens = useCallback<() => string>(() => {\n // TODO: implement me\n throw new Error(\"not implemented\");\n }, []);\n\n useEffect(() => {\n if (!tokens.access) {\n return;\n }\n\n // append `access` token to all requests\n const req = client.interceptors.request.use(\n async (config) => {\n config.headers = {\n Authorization: `Bearer ${tokens.access}`,\n };\n return config;\n },\n (error) => {\n Promise.reject(error);\n }\n );\n\n // refreshing interceptor\n const resp = client.interceptors.response.use(\n (response) => {\n return response;\n },\n async function (error) {\n const originalRequest = error.config;\n\n if (error.response.status === 401 && !originalRequest._retry) {\n originalRequest._retry = true;\n\n const newToken = refreshTokens;\n\n return axios({\n ...originalRequest,\n headers: {\n ...originalRequest.headers,\n Authorization: \"Bearer \" + newToken,\n },\n });\n }\n\n logout();\n return Promise.reject(error);\n }\n );\n\n return () => {\n axios.interceptors.request.eject(req);\n axios.interceptors.request.eject(resp);\n };\n }, [client, tokens.access, tokens.refresh, refreshTokens, logout]);\n\n return (\n <APIContext.Provider value={{ client }}>\n {children}\n </APIContext.Provider>\n );\n};\n\nexport const useAPI = () => useContext(APIContext).client;\n\nexport { APIProvider };\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-aa5e40"},"children":[{"type":"text","value":"\"axios\""}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"React"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":", {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"createContext"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"FC"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"PropsWithChildren"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"useContext"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"useEffect"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"} "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-aa5e40"},"children":[{"type":"text","value":"\"react\""}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-571508"},"children":[{"type":"text","value":"interface"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-46134e"},"children":[{"type":"text","value":"APIProviderProps"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-571508"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-08c798"},"children":[{"type":"text","value":"PropsWithChildren"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac7baf"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-52b50f"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac7baf"},"children":[{"type":"text","value":"access"}]},{"type":"element","tag":"span","props":{"class":"ct-52b50f"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f9619c"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac7baf"},"children":[{"type":"text","value":"refresh"}]},{"type":"element","tag":"span","props":{"class":"ct-52b50f"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f9619c"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3837d1"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-872860"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1d4139"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-872860"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed17"},"children":[{"type":"text","value":"APIContext"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3837d1"},"children":[{"type":"text","value":"createContext"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" client: "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3837d1"},"children":[{"type":"text","value":"create"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" baseURL: "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-20ed17"},"children":[{"type":"text","value":"NEXT_PUBLIC_API_ENDPOINT"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"});"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-872860"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3837d1"},"children":[{"type":"text","value":"APIProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a8703d"},"children":[{"type":"text","value":"FC"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-a8703d"},"children":[{"type":"text","value":"APIProviderProps"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" ({ "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"children"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"}) "}]},{"type":"element","tag":"span","props":{"class":"ct-872860"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-872860"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed17"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3837d1"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3837d1"},"children":[{"type":"text","value":"create"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" baseURL: "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-20ed17"},"children":[{"type":"text","value":"NEXT_PUBLIC_API_ENDPOINT"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" )."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-872860"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed17"},"children":[{"type":"text","value":"refreshTokens"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3837d1"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"<() "}]},{"type":"element","tag":"span","props":{"class":"ct-872860"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1d4139"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":">(() "}]},{"type":"element","tag":"span","props":{"class":"ct-872860"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-211469"},"children":[{"type":"text","value":"// TODO: implement me"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1d4139"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-aa5e40"},"children":[{"type":"text","value":"\"not implemented\""}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" }, []);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3837d1"},"children":[{"type":"text","value":"useEffect"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-872860"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"access"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-211469"},"children":[{"type":"text","value":"// append `access` token to all requests"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-872860"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed17"},"children":[{"type":"text","value":"req"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"interceptors"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3837d1"},"children":[{"type":"text","value":"use"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-571508"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ac7baf"},"children":[{"type":"text","value":"config"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-571508"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"config"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" Authorization: "}]},{"type":"element","tag":"span","props":{"class":"ct-aa5e40"},"children":[{"type":"text","value":"`Bearer ${"}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-7758a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"access"}]},{"type":"element","tag":"span","props":{"class":"ct-aa5e40"},"children":[{"type":"text","value":"}`"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"config"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ac7baf"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-571508"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1d4139"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3837d1"},"children":[{"type":"text","value":"reject"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-211469"},"children":[{"type":"text","value":"// refreshing interceptor"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-872860"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed17"},"children":[{"type":"text","value":"resp"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"interceptors"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"response"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3837d1"},"children":[{"type":"text","value":"use"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ac7baf"},"children":[{"type":"text","value":"response"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-571508"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"response"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-571508"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-571508"},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ac7baf"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-872860"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed17"},"children":[{"type":"text","value":"originalRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"config"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"response"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"status"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"==="}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-51d764"},"children":[{"type":"text","value":"401"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"originalRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"_retry"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"originalRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"_retry"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7edaa2"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-872860"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed17"},"children":[{"type":"text","value":"newToken"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"refreshTokens"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3837d1"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"originalRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" headers: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"originalRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" Authorization: "}]},{"type":"element","tag":"span","props":{"class":"ct-aa5e40"},"children":[{"type":"text","value":"\"Bearer \""}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"newToken"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3837d1"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1d4139"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3837d1"},"children":[{"type":"text","value":"reject"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-872860"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"interceptors"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3837d1"},"children":[{"type":"text","value":"eject"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"req"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"interceptors"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3837d1"},"children":[{"type":"text","value":"eject"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"resp"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" }, ["}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"access"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"refresh"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"refreshTokens"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"]);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"APIContext"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"Provider"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"{{ "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" }}"}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" {"}]},{"type":"element","tag":"span","props":{"class":"ct-ac7baf"},"children":[{"type":"text","value":"children"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"APIContext"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"Provider"}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-872860"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3837d1"},"children":[{"type":"text","value":"useAPI"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-872860"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3837d1"},"children":[{"type":"text","value":"useContext"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"APIContext"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"APIProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" };"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-7edaa2{color:#79C0FF}.ct-51d764{color:#79C0FF}.ct-7758a7{color:#A5D6FF}.ct-211469{color:#8B949E}.ct-a8703d{color:#FFA657}.ct-20ed17{color:#79C0FF}.ct-1d4139{color:#79C0FF}.ct-872860{color:#FF7B72}.ct-3837d1{color:#D2A8FF}.ct-f9619c{color:#79C0FF}.ct-52b50f{color:#FF7B72}.ct-ac7baf{color:#FFA657}.ct-08c798{color:#79C0FF}.ct-46134e{color:#FFA657}.ct-6c447f{color:#C9D1D9}.ct-571508{color:#FF7B72}.ct-aa5e40{color:#A5D6FF}.ct-eb8e65{color:#C9D1D9}.ct-509eb2{color:#C9D1D9}.ct-441895{color:#FF7B72}.light .ct-441895{color:#859900}.light .ct-509eb2{color:#657B83}.light .ct-eb8e65{color:#268BD2}.light .ct-aa5e40{color:#2AA198}.light .ct-571508{color:#073642}.light .ct-6c447f{color:#657B83}.light .ct-46134e{color:#268BD2}.light .ct-08c798{color:#657B83}.light .ct-ac7baf{color:#657B83}.light .ct-52b50f{color:#859900}.light .ct-f9619c{color:#859900}.light .ct-3837d1{color:#268BD2}.light .ct-872860{color:#073642}.light .ct-1d4139{color:#859900}.light .ct-20ed17{color:#268BD2}.light .ct-a8703d{color:#268BD2}.light .ct-211469{color:#93A1A1}.light .ct-7758a7{color:#657B83}.light .ct-51d764{color:#D33682}.light .ct-7edaa2{color:#B58900}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Frontend:React:Axios refresh token on React.md","_source":"content","_file":"Frontend/React/Axios refresh token on React.md","_extension":"md"},{"_path":"/frontend/react/axios-with-abortcontroller","_dir":"react","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Axios With AbortController","description":"If you need to cancel some request, use axios with AbortController. Previously axios used cancellation token, but now it's deprecated.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you need to cancel some request, use "},{"type":"element","tag":"a","props":{"href":"https://axios-http.com/docs/cancellation","rel":["nofollow"]},"children":[{"type":"text","value":"axios with AbortController"}]},{"type":"text","value":". Previously axios used cancellation token, but now it's deprecated."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"AbortController"}]},{"type":"text","value":" can be used with a multiple requests to cancel them at once."}]},{"type":"element","tag":"code","props":{"code":"import { useCallback, useRef } from \"react\";\nimport axios from 'axios';\n\nconst client = axios.create();\n\nexport const useGetUsers = () => {\n const controller = useRef(new AbortController());\n \n const get = useCallback(async () => {\n const result = await client.get(\"/\", {\n // params and props here\n signal: controller.current.signal,\n });\n\n return result.data;\n }, []);\n\n const cancel = useCallback(() => {\n controller.current.abort();\n \n // controller should be rewritten or all requests will fail\n controller.current = new AbortController();\n }, [controller]);\n\n return { get, cancel };\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { useCallback, useRef } from \"react\";\nimport axios from 'axios';\n\nconst client = axios.create();\n\nexport const useGetUsers = () => {\n const controller = useRef(new AbortController());\n \n const get = useCallback(async () => {\n const result = await client.get(\"/\", {\n // params and props here\n signal: controller.current.signal,\n });\n\n return result.data;\n }, []);\n\n const cancel = useCallback(() => {\n controller.current.abort();\n \n // controller should be rewritten or all requests will fail\n controller.current = new AbortController();\n }, [controller]);\n\n return { get, cancel };\n};\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you need to cancel some request, use "},{"type":"element","tag":"a","props":{"href":"https://axios-http.com/docs/cancellation","rel":["nofollow"]},"children":[{"type":"text","value":"axios with AbortController"}]},{"type":"text","value":". Previously axios used cancellation token, but now it's deprecated."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"AbortController"}]},{"type":"text","value":" can be used with a multiple requests to cancel them at once."}]},{"type":"element","tag":"code","props":{"code":"import { useCallback, useRef } from \"react\";\nimport axios from 'axios';\n\nconst client = axios.create();\n\nexport const useGetUsers = () => {\n const controller = useRef(new AbortController());\n \n const get = useCallback(async () => {\n const result = await client.get(\"/\", {\n // params and props here\n signal: controller.current.signal,\n });\n\n return result.data;\n }, []);\n\n const cancel = useCallback(() => {\n controller.current.abort();\n \n // controller should be rewritten or all requests will fail\n controller.current = new AbortController();\n }, [controller]);\n\n return { get, cancel };\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8addff"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-842a9e"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-842a9e"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-8addff"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-577293"},"children":[{"type":"text","value":"\"react\""}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8addff"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-842a9e"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8addff"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-577293"},"children":[{"type":"text","value":"'axios'"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5cff5b"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a2042d"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8addff"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-842a9e"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-690655"},"children":[{"type":"text","value":"create"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8addff"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5cff5b"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690655"},"children":[{"type":"text","value":"useGetUsers"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8addff"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-5cff5b"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5cff5b"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a2042d"},"children":[{"type":"text","value":"controller"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8addff"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690655"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-8addff"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690655"},"children":[{"type":"text","value":"AbortController"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":"());"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5cff5b"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a2042d"},"children":[{"type":"text","value":"get"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8addff"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690655"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-5cff5b"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-5cff5b"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5cff5b"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a2042d"},"children":[{"type":"text","value":"result"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8addff"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8addff"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-842a9e"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-690655"},"children":[{"type":"text","value":"get"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-577293"},"children":[{"type":"text","value":"\"/\""}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":", {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-baf212"},"children":[{"type":"text","value":"// params and props here"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" signal: "}]},{"type":"element","tag":"span","props":{"class":"ct-842a9e"},"children":[{"type":"text","value":"controller"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-842a9e"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-842a9e"},"children":[{"type":"text","value":"signal"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8addff"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-842a9e"},"children":[{"type":"text","value":"result"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-842a9e"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" }, []);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5cff5b"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a2042d"},"children":[{"type":"text","value":"cancel"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8addff"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690655"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-5cff5b"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-842a9e"},"children":[{"type":"text","value":"controller"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-842a9e"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-690655"},"children":[{"type":"text","value":"abort"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-baf212"},"children":[{"type":"text","value":"// controller should be rewritten or all requests will fail"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-842a9e"},"children":[{"type":"text","value":"controller"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-842a9e"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8addff"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8addff"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690655"},"children":[{"type":"text","value":"AbortController"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" }, ["}]},{"type":"element","tag":"span","props":{"class":"ct-842a9e"},"children":[{"type":"text","value":"controller"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":"]);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8addff"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-842a9e"},"children":[{"type":"text","value":"get"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-842a9e"},"children":[{"type":"text","value":"cancel"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-baf212{color:#8B949E}.ct-690655{color:#D2A8FF}.ct-a2042d{color:#79C0FF}.ct-5cff5b{color:#FF7B72}.ct-577293{color:#A5D6FF}.ct-842a9e{color:#C9D1D9}.ct-96e232{color:#C9D1D9}.ct-8addff{color:#FF7B72}.light .ct-8addff{color:#859900}.light .ct-96e232{color:#657B83}.light .ct-842a9e{color:#268BD2}.light .ct-577293{color:#2AA198}.light .ct-5cff5b{color:#073642}.light .ct-a2042d{color:#268BD2}.light .ct-690655{color:#268BD2}.light .ct-baf212{color:#93A1A1}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Frontend:React:Axios with AbortController.md","_source":"content","_file":"Frontend/React/Axios with AbortController.md","_extension":"md"},{"_path":"/frontend/react/detect-hook-deps-changes-with-usewhatschanged","_dir":"react","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Detect Hook Deps Changes With UseWhatsChanged","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"code","props":{"code":"import { useEffect, useRef } from 'react';\n\n/** Pass dictionary of `props` as argument and it will\n * tell you, which one changed after rerender.\n * Use `prefix` to distinguish props of different components.\n */\nexport const useWhatsChanged = (\n props: Record<string, unknown>,\n prefix = '',\n) => {\n const prevProps = useRef(props);\n\n useEffect(() => {\n Object.entries(props).forEach(([key, value]) => {\n if (\n !Object.prototype.hasOwnProperty.call(prevProps.current, key) ||\n prevProps.current[key] !== value\n ) {\n console.log(`${prefix} ${key} has changed`);\n }\n });\n\n prevProps.current = props;\n }, [props, prefix]);\n};\n\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { useEffect, useRef } from 'react';\n\n/** Pass dictionary of `props` as argument and it will\n * tell you, which one changed after rerender.\n * Use `prefix` to distinguish props of different components.\n */\nexport const useWhatsChanged = (\n props: Record<string, unknown>,\n prefix = '',\n) => {\n const prevProps = useRef(props);\n\n useEffect(() => {\n Object.entries(props).forEach(([key, value]) => {\n if (\n !Object.prototype.hasOwnProperty.call(prevProps.current, key) ||\n prevProps.current[key] !== value\n ) {\n console.log(`${prefix} ${key} has changed`);\n }\n });\n\n prevProps.current = props;\n }, [props, prefix]);\n};\n\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"code","props":{"code":"import { useEffect, useRef } from 'react';\n\n/** Pass dictionary of `props` as argument and it will\n * tell you, which one changed after rerender.\n * Use `prefix` to distinguish props of different components.\n */\nexport const useWhatsChanged = (\n props: Record<string, unknown>,\n prefix = '',\n) => {\n const prevProps = useRef(props);\n\n useEffect(() => {\n Object.entries(props).forEach(([key, value]) => {\n if (\n !Object.prototype.hasOwnProperty.call(prevProps.current, key) ||\n prevProps.current[key] !== value\n ) {\n console.log(`${prefix} ${key} has changed`);\n }\n });\n\n prevProps.current = props;\n }, [props, prefix]);\n};\n\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7ec539"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-3cce2a"},"children":[{"type":"text","value":"useEffect"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-3cce2a"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-7ec539"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6d5d08"},"children":[{"type":"text","value":"'react'"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7a0006"},"children":[{"type":"text","value":"/** Pass dictionary of `props` as argument and it will"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7a0006"},"children":[{"type":"text","value":" * tell you, which one changed after rerender."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7a0006"},"children":[{"type":"text","value":" * Use `prefix` to distinguish props of different components."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7a0006"},"children":[{"type":"text","value":" */"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7ec539"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e2ac3d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fddfb0"},"children":[{"type":"text","value":"useWhatsChanged"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7ec539"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7321a2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9c555a"},"children":[{"type":"text","value":"props"}]},{"type":"element","tag":"span","props":{"class":"ct-7c9693"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-7321a2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-682427"},"children":[{"type":"text","value":"Record"}]},{"type":"element","tag":"span","props":{"class":"ct-7321a2"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-e1c665"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-7321a2"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-e1c665"},"children":[{"type":"text","value":"unknown"}]},{"type":"element","tag":"span","props":{"class":"ct-7321a2"},"children":[{"type":"text","value":">,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3cce2a"},"children":[{"type":"text","value":"prefix"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7ec539"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6d5d08"},"children":[{"type":"text","value":"''"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-e2ac3d"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e2ac3d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7def83"},"children":[{"type":"text","value":"prevProps"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7ec539"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fddfb0"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-3cce2a"},"children":[{"type":"text","value":"props"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fddfb0"},"children":[{"type":"text","value":"useEffect"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-e2ac3d"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7321a2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e1c665"},"children":[{"type":"text","value":"Object"}]},{"type":"element","tag":"span","props":{"class":"ct-7321a2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af5044"},"children":[{"type":"text","value":"entries"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7ec539"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3cce2a"},"children":[{"type":"text","value":"prevProps"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3cce2a"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"class":"ct-3cce2a"},"children":[{"type":"text","value":"key"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":"] "}]},{"type":"element","tag":"span","props":{"class":"ct-7ec539"},"children":[{"type":"text","value":"!=="}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3cce2a"},"children":[{"type":"text","value":"value"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" ) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3cce2a"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-fddfb0"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-6d5d08"},"children":[{"type":"text","value":"`${"}]},{"type":"element","tag":"span","props":{"class":"ct-3cce2a"},"children":[{"type":"text","value":"prefix"}]},{"type":"element","tag":"span","props":{"class":"ct-6d5d08"},"children":[{"type":"text","value":"} ${"}]},{"type":"element","tag":"span","props":{"class":"ct-3cce2a"},"children":[{"type":"text","value":"key"}]},{"type":"element","tag":"span","props":{"class":"ct-6d5d08"},"children":[{"type":"text","value":"} has changed`"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3cce2a"},"children":[{"type":"text","value":"prevProps"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3cce2a"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7ec539"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3cce2a"},"children":[{"type":"text","value":"props"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" }, ["}]},{"type":"element","tag":"span","props":{"class":"ct-3cce2a"},"children":[{"type":"text","value":"props"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-3cce2a"},"children":[{"type":"text","value":"prefix"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":"]);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-af5044{color:#D2A8FF}.ct-7def83{color:#79C0FF}.ct-e1c665{color:#79C0FF}.ct-682427{color:#FFA657}.ct-7c9693{color:#FF7B72}.ct-9c555a{color:#FFA657}.ct-7321a2{color:#C9D1D9}.ct-fddfb0{color:#D2A8FF}.ct-e2ac3d{color:#FF7B72}.ct-7a0006{color:#8B949E}.ct-6d5d08{color:#A5D6FF}.ct-3cce2a{color:#C9D1D9}.ct-1ee419{color:#C9D1D9}.ct-7ec539{color:#FF7B72}.light .ct-7ec539{color:#859900}.light .ct-1ee419{color:#657B83}.light .ct-3cce2a{color:#268BD2}.light .ct-6d5d08{color:#2AA198}.light .ct-7a0006{color:#93A1A1}.light .ct-e2ac3d{color:#073642}.light .ct-fddfb0{color:#268BD2}.light .ct-7321a2{color:#657B83}.light .ct-9c555a{color:#657B83}.light .ct-7c9693{color:#859900}.light .ct-682427{color:#268BD2}.light .ct-e1c665{color:#859900}.light .ct-7def83{color:#268BD2}.light .ct-af5044{color:#268BD2}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Frontend:React:Detect hook deps changes with useWhatsChanged.md","_source":"content","_file":"Frontend/React/Detect hook deps changes with useWhatsChanged.md","_extension":"md"},{"_path":"/frontend/vue/adding-global-properties-to-component","_dir":"vue","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Adding Global Properties To Component","description":"The topic's fully covered in the official documentation and in Add global variable to window.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The topic's fully covered in the "},{"type":"element","tag":"a","props":{"href":"https://vuejs.org/guide/typescript/options-api.html#augmenting-global-properties","rel":["nofollow"]},"children":[{"type":"text","value":"official documentation"}]},{"type":"text","value":" and in "},{"type":"element","tag":"a","props":{"href":"Add%20global%20variable%20to%20window"},"children":[{"type":"text","value":"Add global variable to window"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, you want to add global "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$http"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$translate"}]},{"type":"text","value":" services to all of project's components:"}]},{"type":"element","tag":"code","props":{"code":"// ~/index.d.ts or ~/custom.d.ts\n\nimport axios from 'axios'\n\ndeclare module 'vue' {\n interface ComponentCustomProperties {\n $http: typeof axios\n $translate: (key: string) => string\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// ~/index.d.ts or ~/custom.d.ts\n\nimport axios from 'axios'\n\ndeclare module 'vue' {\n interface ComponentCustomProperties {\n $http: typeof axios\n $translate: (key: string) => string\n }\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The topic's fully covered in the "},{"type":"element","tag":"a","props":{"href":"https://vuejs.org/guide/typescript/options-api.html#augmenting-global-properties","rel":["nofollow"]},"children":[{"type":"text","value":"official documentation"}]},{"type":"text","value":" and in "},{"type":"element","tag":"a","props":{"href":"Add%20global%20variable%20to%20window"},"children":[{"type":"text","value":"Add global variable to window"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, you want to add global "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$http"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$translate"}]},{"type":"text","value":" services to all of project's components:"}]},{"type":"element","tag":"code","props":{"code":"// ~/index.d.ts or ~/custom.d.ts\n\nimport axios from 'axios'\n\ndeclare module 'vue' {\n interface ComponentCustomProperties {\n $http: typeof axios\n $translate: (key: string) => string\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-740ef2"},"children":[{"type":"text","value":"// ~/index.d.ts or ~/custom.d.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-326306"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-491344"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cf3e27"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-491344"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-326306"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-491344"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5caf7b"},"children":[{"type":"text","value":"'axios'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2520f9"},"children":[{"type":"text","value":"declare"}]},{"type":"element","tag":"span","props":{"class":"ct-491344"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2520f9"},"children":[{"type":"text","value":"module"}]},{"type":"element","tag":"span","props":{"class":"ct-491344"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5caf7b"},"children":[{"type":"text","value":"'vue'"}]},{"type":"element","tag":"span","props":{"class":"ct-491344"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-491344"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2520f9"},"children":[{"type":"text","value":"interface"}]},{"type":"element","tag":"span","props":{"class":"ct-491344"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe9ad3"},"children":[{"type":"text","value":"ComponentCustomProperties"}]},{"type":"element","tag":"span","props":{"class":"ct-491344"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-491344"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-491344"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a9f03c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-293188"},"children":[{"type":"text","value":"$translate"}]},{"type":"element","tag":"span","props":{"class":"ct-92e12e"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-a9f03c"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-3a318d"},"children":[{"type":"text","value":"key"}]},{"type":"element","tag":"span","props":{"class":"ct-92e12e"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-a9f03c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d6573a"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-a9f03c"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-6d6723"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-a9f03c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d6573a"},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-491344"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-491344"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-6d6723{color:#FF7B72}.ct-d6573a{color:#79C0FF}.ct-3a318d{color:#FFA657}.ct-92e12e{color:#FF7B72}.ct-293188{color:#D2A8FF}.ct-a9f03c{color:#C9D1D9}.ct-fe9ad3{color:#FFA657}.ct-2520f9{color:#FF7B72}.ct-5caf7b{color:#A5D6FF}.ct-cf3e27{color:#C9D1D9}.ct-491344{color:#C9D1D9}.ct-326306{color:#FF7B72}.ct-740ef2{color:#8B949E}.light .ct-740ef2{color:#93A1A1}.light .ct-326306{color:#859900}.light .ct-491344{color:#657B83}.light .ct-cf3e27{color:#268BD2}.light .ct-5caf7b{color:#2AA198}.light .ct-2520f9{color:#073642}.light .ct-fe9ad3{color:#268BD2}.light .ct-a9f03c{color:#657B83}.light .ct-293188{color:#268BD2}.light .ct-92e12e{color:#859900}.light .ct-3a318d{color:#657B83}.light .ct-d6573a{color:#859900}.light .ct-6d6723{color:#073642}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Frontend:Vue:Adding global properties to component.md","_source":"content","_file":"Frontend/Vue/Adding global properties to component.md","_extension":"md"},{"_path":"/frontend/vue/make-nuxt-handle-obsidian-highlights","_dir":"vue","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Make Nuxt Handle Obsidian Highlights","description":"By default Nuxt Content Plugin not handling <span class=\"highlight\">highlight</span> links. To fix that we will create Nitro plugin:","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default "},{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org","rel":["nofollow"]},"children":[{"type":"text","value":"Nuxt Content Plugin"}]},{"type":"text","value":" not handling "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<span class=\"highlight\">highlight</span>"}]},{"type":"text","value":" links. To fix that we will create "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Nitro"}]},{"type":"text","value":" plugin:"}]},{"type":"element","tag":"code","props":{"code":"// ~/server/plugins/highlight.ts\nexport default defineNitroPlugin((nitroApp) => {\n nitroApp.hooks.hook(\"content:file:beforeParse\", (file) => {\n if (file._id.endsWith(\".md\")) {\n file.body = file.body.replace(\n /==([^=]+)==/gs,\n `<span class=\"highlight\">$1</span>`\n );\n }\n });\n});\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// ~/server/plugins/highlight.ts\nexport default defineNitroPlugin((nitroApp) => {\n nitroApp.hooks.hook(\"content:file:beforeParse\", (file) => {\n if (file._id.endsWith(\".md\")) {\n file.body = file.body.replace(\n /==([^=]+)==/gs,\n `<span class=\"highlight\">$1</span>`\n );\n }\n });\n});\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default "},{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org","rel":["nofollow"]},"children":[{"type":"text","value":"Nuxt Content Plugin"}]},{"type":"text","value":" not handling "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<span class=\"highlight\">highlight</span>"}]},{"type":"text","value":" links. To fix that we will create "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Nitro"}]},{"type":"text","value":" plugin:"}]},{"type":"element","tag":"code","props":{"code":"// ~/server/plugins/highlight.ts\nexport default defineNitroPlugin((nitroApp) => {\n nitroApp.hooks.hook(\"content:file:beforeParse\", (file) => {\n if (file._id.endsWith(\".md\")) {\n file.body = file.body.replace(\n /==([^=]+)==/gs,\n `<span class=\"highlight\">$1</span>`\n );\n }\n });\n});\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-98fed0"},"children":[{"type":"text","value":"// ~/server/plugins/highlight.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aa0bce"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-8f9ec7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-aa0bce"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-8f9ec7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b646cf"},"children":[{"type":"text","value":"defineNitroPlugin"}]},{"type":"element","tag":"span","props":{"class":"ct-8f9ec7"},"children":[{"type":"text","value":"((nitroApp) "}]},{"type":"element","tag":"span","props":{"class":"ct-7405fe"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-8f9ec7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7b3d71"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1eb4c1"},"children":[{"type":"text","value":"nitroApp"}]},{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1eb4c1"},"children":[{"type":"text","value":"hooks"}]},{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c70e5a"},"children":[{"type":"text","value":"hook"}]},{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-9cbfc0"},"children":[{"type":"text","value":"\"content:file:beforeParse\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-73bf2a"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-1eb4c1"},"children":[{"type":"text","value":"file"}]},{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1eb4c1"},"children":[{"type":"text","value":"_id"}]},{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c70e5a"},"children":[{"type":"text","value":"endsWith"}]},{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-9cbfc0"},"children":[{"type":"text","value":"\".md\""}]},{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":")) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1eb4c1"},"children":[{"type":"text","value":"file"}]},{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1eb4c1"},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-73bf2a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1eb4c1"},"children":[{"type":"text","value":"file"}]},{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1eb4c1"},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c70e5a"},"children":[{"type":"text","value":"replace"}]},{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-555ec3"},"children":[{"type":"text","value":"/==("}]},{"type":"element","tag":"span","props":{"class":"ct-ece131"},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"class":"ct-73bf2a"},"children":[{"type":"text","value":"^"}]},{"type":"element","tag":"span","props":{"class":"ct-ece131"},"children":[{"type":"text","value":"=]"}]},{"type":"element","tag":"span","props":{"class":"ct-73bf2a"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-555ec3"},"children":[{"type":"text","value":")==/"}]},{"type":"element","tag":"span","props":{"class":"ct-73bf2a"},"children":[{"type":"text","value":"gs"}]},{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9cbfc0"},"children":[{"type":"text","value":"`<span class=\"highlight\">$1</span>`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7b3d71"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-8f9ec7"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-7b3d71"},"children":[{"type":"text","value":";"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-ece131{color:#79C0FF}.ct-555ec3{color:#A5D6FF}.ct-73bf2a{color:#FF7B72}.ct-9cbfc0{color:#A5D6FF}.ct-c70e5a{color:#D2A8FF}.ct-1eb4c1{color:#C9D1D9}.ct-aee277{color:#C9D1D9}.ct-7b3d71{color:#C9D1D9}.ct-7405fe{color:#FF7B72}.ct-b646cf{color:#D2A8FF}.ct-8f9ec7{color:#FFA657}.ct-aa0bce{color:#FF7B72}.ct-98fed0{color:#8B949E}.light .ct-98fed0{color:#93A1A1}.light .ct-aa0bce{color:#859900}.light .ct-8f9ec7{color:#657B83}.light .ct-b646cf{color:#268BD2}.light .ct-7405fe{color:#073642}.light .ct-7b3d71{color:#657B83}.light .ct-aee277{color:#657B83}.light .ct-1eb4c1{color:#268BD2}.light .ct-c70e5a{color:#268BD2}.light .ct-9cbfc0{color:#2AA198}.light .ct-73bf2a{color:#859900}.light .ct-555ec3{color:#D30102}.light .ct-ece131{color:#CB4B16}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Frontend:Vue:Make Nuxt handle Obsidian highlights.md","_source":"content","_file":"Frontend/Vue/Make Nuxt handle Obsidian highlights.md","_extension":"md"},{"_path":"/frontend/webgl/basics-of-webgl-(drawing-a-cube)","_dir":"webgl","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Basics Of WebGL (Drawing A Cube)","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"helpful-documentation"},"children":[{"type":"text","value":"Helpful documentation"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://open.gl/","rel":["nofollow"]},"children":[{"type":"text","value":"https://open.gl/"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"This youtube series: "},{"type":"element","tag":"a","props":{"href":"https://www.youtube.com/watch?v=kB0ZVUrI4Aw","rel":["nofollow"]},"children":[{"type":"text","value":"Basics"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://www.youtube.com/watch?v=3yLL9ADo-ko","rel":["nofollow"]},"children":[{"type":"text","value":"Making a cube, applying transformations"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://www.youtube.com/watch?v=hpnd11doMgc&t=52s","rel":["nofollow"]},"children":[{"type":"text","value":"Texturing"}]}]}]},{"type":"element","tag":"h2","props":{"id":"vertices-and-indices"},"children":[{"type":"text","value":"Vertices and Indices"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Vertices"}]},{"type":"text","value":" are points with specific coordinates "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{x,y,z}"}]},{"type":"text","value":" in a 3D-space. We can build any figure by connecting "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"vertices"}]},{"type":"text","value":" in triangles with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"indices"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"shaders"},"children":[{"type":"text","value":"Shaders"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Shaders are functions, written in C, which describe how to draw and color polygons to Graphic Card."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" describe "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"vertice"}]},{"type":"text","value":" positions, so Graphic Card can position them by connecting with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"indices"}]},{"type":"text","value":" and project to 2D canvas."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":" describe the way polygons should be colored by assigning colors to Vertices or by applying textures to polygons."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Shaders can have parameters passed from Javascript code ("},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"uniforms"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varyings"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"attributes"}]},{"type":"text","value":"). "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":" can also access data from "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" (that ones called "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varyings"}]},{"type":"text","value":")."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"https://open.gl/media/img/c2_pipeline.png"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"program"},"children":[{"type":"text","value":"Program"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Program, as far as I understand, is a scene, that's described with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Vertices"}]},{"type":"text","value":", "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Indices"}]},{"type":"text","value":", specific "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"applying-transformations"},"children":[{"type":"text","value":"Applying transformations"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The best way to change positions inside "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" or color in "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":" is to pass parameters (also called "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"uniforms"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varyings"}]},{"type":"text","value":")."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read about that at "},{"type":"element","tag":"a","props":{"href":"https://open.gl/transformations","rel":["nofollow"]},"children":[{"type":"text","value":"open.gl"}]},{"type":"text","value":" and at "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"source-code-with-explanations"},"children":[{"type":"text","value":"Source code with explanations"}]},{"type":"element","tag":"code","props":{"code":"// render-a-cube.ts\nimport { createShader } from \"./create-shader\";\nimport vxShader from \"./vertex.glsl?raw\";\nimport fgShader from \"./fragment.glsl?raw\";\n\nconst canvas = document.getElementyId('view');\nconst ctx = canvas.getRenderingContext('webgl');\n\n// should be put inside requestAnimationFrame\ndrawCube(ctx)(); \n\nfunction drawCube (\n gl: WebGL2RenderingContext, \n width: number,\n height: number\n) {\n // Initializing viewport\n gl.viewport(0, 0, width, height);\n gl.clearColor(0, 0, 0, 0);\n gl.clear(gl.COLOR_BUFFER_BIT);\n\n const prg = gl.createProgram();\n if (!prg) {\n throw new Error(\"Can't init programm\");\n }\n\n // Setting up VERTEX and FRAGMENT shaders\n const vx = createShader(gl, vxShader, gl.VERTEX_SHADER);\n gl.attachShader(prg, vx);\n const fx = createShader(gl, fgShader, gl.FRAGMENT_SHADER);\n gl.attachShader(prg, fx);\n gl.linkProgram(prg);\n if (!gl.getProgramParameter(prg, gl.LINK_STATUS)) {\n throw new Error(\"Could not initialise shaders\");\n }\n\n // Cube's vertices Array<[x,y,z]>, 8 items\n const vertices = [\n -1, -1, -1, // 0\n 1, -1, -1, // 1\n 1, 1, -1, // 2\n -1, 1, -1, // 3\n -1, -1, 1, // 4\n 1, -1, 1, // 5\n 1, 1, 1, // 6\n -1, 1, 1, // 7\n ];\n\n // indices, that form triangles, that form cube sides\n const indices = [\n 2, 1, 0, // side 0 (first triangle)\n 0, 3, 2, // side 0 (second triangle)\n 0, 4, 7, // side 1 (first triangle)\n 7, 3, 0, // side 1 (second triangle)\n 0, 1, 5, // ...\n 5, 4, 0, \n 1, 2, 6, \n 6, 5, 1, \n 2, 3, 7, \n 7, 6, 2, \n 4, 5, 6, \n 6, 7, 4,\n ];\n\n // createe a vertex buffer and bind vertices to it\n const squareVertexBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);\n gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);\n gl.bindBuffer(gl.ARRAY_BUFFER, null);\n\n // create a vertex buffer and bind indices to it\n const squareIndexBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, squareIndexBuffer);\n gl.bufferData(\n gl.ELEMENT_ARRAY_BUFFER,\n new Uint16Array(indices),\n gl.STATIC_DRAW\n );\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);\n\n // initial drawing\n gl.clearColor(0.0, 0.0, 0.0, 0.0);\n gl.enable(gl.DEPTH_TEST);\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n gl.viewport(0, 0, width, height);\n\n // bind squareVertexBuffer as vertex positions buffer\n gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);\n \n // send every 3 bytes from squareVertexBuffer as {x,y,z} for each verticle\n gl.vertexAttribPointer(\n gl.getAttribLocation(prg, \"aVertexPosition\"), \n 3, // 3 bytes-long\n gl.FLOAT,\n false, // don't normalize (int to float)\n 0, \n 0\n );\n // send vertice buffer as `aVertexPosition` attribute inside vertex shader\n gl.enableVertexAttribArray(\n gl.getAttribLocation(prg, \"aVertexPosition\")\n );\n\n let i = 0;\n let speed = 0.01;\n\n // that's the main rendering callback\n return () => {\n gl.useProgram(prg);\n\n const scale = i * 0.25 + 0.25;\n\n // used for scaling inside Vertex Shader\n gl.uniform1f(gl.getUniformLocation(prg, \"slide\"), scale);\n // GL Screen is square, so we need to fix it's aspect ration\n gl.uniform1f(gl.getUniformLocation(prg, \"aspect\"), height / width);\n\n gl.bindBuffer(\n gl.ELEMENT_ARRAY_BUFFER, \n squareIndexBuffer\n );\n \n gl.drawElements(\n gl.TRIANGLES, \n indices.length, \n gl.UNSIGNED_SHORT, \n 0,\n );\n\n if (i > 1 || i < 0) {\n speed = -speed;\n }\n\n i += speed;\n };\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// render-a-cube.ts\nimport { createShader } from \"./create-shader\";\nimport vxShader from \"./vertex.glsl?raw\";\nimport fgShader from \"./fragment.glsl?raw\";\n\nconst canvas = document.getElementyId('view');\nconst ctx = canvas.getRenderingContext('webgl');\n\n// should be put inside requestAnimationFrame\ndrawCube(ctx)(); \n\nfunction drawCube (\n gl: WebGL2RenderingContext, \n width: number,\n height: number\n) {\n // Initializing viewport\n gl.viewport(0, 0, width, height);\n gl.clearColor(0, 0, 0, 0);\n gl.clear(gl.COLOR_BUFFER_BIT);\n\n const prg = gl.createProgram();\n if (!prg) {\n throw new Error(\"Can't init programm\");\n }\n\n // Setting up VERTEX and FRAGMENT shaders\n const vx = createShader(gl, vxShader, gl.VERTEX_SHADER);\n gl.attachShader(prg, vx);\n const fx = createShader(gl, fgShader, gl.FRAGMENT_SHADER);\n gl.attachShader(prg, fx);\n gl.linkProgram(prg);\n if (!gl.getProgramParameter(prg, gl.LINK_STATUS)) {\n throw new Error(\"Could not initialise shaders\");\n }\n\n // Cube's vertices Array<[x,y,z]>, 8 items\n const vertices = [\n -1, -1, -1, // 0\n 1, -1, -1, // 1\n 1, 1, -1, // 2\n -1, 1, -1, // 3\n -1, -1, 1, // 4\n 1, -1, 1, // 5\n 1, 1, 1, // 6\n -1, 1, 1, // 7\n ];\n\n // indices, that form triangles, that form cube sides\n const indices = [\n 2, 1, 0, // side 0 (first triangle)\n 0, 3, 2, // side 0 (second triangle)\n 0, 4, 7, // side 1 (first triangle)\n 7, 3, 0, // side 1 (second triangle)\n 0, 1, 5, // ...\n 5, 4, 0, \n 1, 2, 6, \n 6, 5, 1, \n 2, 3, 7, \n 7, 6, 2, \n 4, 5, 6, \n 6, 7, 4,\n ];\n\n // createe a vertex buffer and bind vertices to it\n const squareVertexBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);\n gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);\n gl.bindBuffer(gl.ARRAY_BUFFER, null);\n\n // create a vertex buffer and bind indices to it\n const squareIndexBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, squareIndexBuffer);\n gl.bufferData(\n gl.ELEMENT_ARRAY_BUFFER,\n new Uint16Array(indices),\n gl.STATIC_DRAW\n );\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);\n\n // initial drawing\n gl.clearColor(0.0, 0.0, 0.0, 0.0);\n gl.enable(gl.DEPTH_TEST);\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n gl.viewport(0, 0, width, height);\n\n // bind squareVertexBuffer as vertex positions buffer\n gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);\n \n // send every 3 bytes from squareVertexBuffer as {x,y,z} for each verticle\n gl.vertexAttribPointer(\n gl.getAttribLocation(prg, \"aVertexPosition\"), \n 3, // 3 bytes-long\n gl.FLOAT,\n false, // don't normalize (int to float)\n 0, \n 0\n );\n // send vertice buffer as `aVertexPosition` attribute inside vertex shader\n gl.enableVertexAttribArray(\n gl.getAttribLocation(prg, \"aVertexPosition\")\n );\n\n let i = 0;\n let speed = 0.01;\n\n // that's the main rendering callback\n return () => {\n gl.useProgram(prg);\n\n const scale = i * 0.25 + 0.25;\n\n // used for scaling inside Vertex Shader\n gl.uniform1f(gl.getUniformLocation(prg, \"slide\"), scale);\n // GL Screen is square, so we need to fix it's aspect ration\n gl.uniform1f(gl.getUniformLocation(prg, \"aspect\"), height / width);\n\n gl.bindBuffer(\n gl.ELEMENT_ARRAY_BUFFER, \n squareIndexBuffer\n );\n \n gl.drawElements(\n gl.TRIANGLES, \n indices.length, \n gl.UNSIGNED_SHORT, \n 0,\n );\n\n if (i > 1 || i < 0) {\n speed = -speed;\n }\n\n i += speed;\n };\n};\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"shader-compiler"},"children":[{"type":"text","value":"Shader compiler"}]},{"type":"element","tag":"code","props":{"code":"// create-shader.ts\nexport const createShader = (\n gl: WebGL2RenderingContext,\n sourceCode: string,\n type: number, // gl.VERTEX_SHADER or gl.FRAGMENT_SHADER\n) => {\n const shader = gl.createShader(type);\n if (!shader) {\n throw new Error(`Can't init shader`);\n }\n\n gl.shaderSource(shader, sourceCode);\n gl.compileShader(shader);\n\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n const info = gl.getShaderInfoLog(shader);\n throw `Could not compile WebGL program. \\n\\n${info}`;\n }\n\n return shader;\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// create-shader.ts\nexport const createShader = (\n gl: WebGL2RenderingContext,\n sourceCode: string,\n type: number, // gl.VERTEX_SHADER or gl.FRAGMENT_SHADER\n) => {\n const shader = gl.createShader(type);\n if (!shader) {\n throw new Error(`Can't init shader`);\n }\n\n gl.shaderSource(shader, sourceCode);\n gl.compileShader(shader);\n\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n const info = gl.getShaderInfoLog(shader);\n throw `Could not compile WebGL program. \\n\\n${info}`;\n }\n\n return shader;\n};\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"vertex-shader-example"},"children":[{"type":"text","value":"Vertex Shader Example"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read more at "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]}]},{"type":"element","tag":"code","props":{"code":"// current vertice position {x,y,z,w}\nattribute vec4 aVertexPosition;\n// final vertice position with all transformations applied,\n// that will be passed to Fragment Shader\nvarying vec4 v_positionWithOffset;\n// Parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(){\n // float array of 4 elements, same as [slide,slide,slide,1]\n vec4 scale=vec4(vec3(slide),1);\n // float array of 4 elements, same as [aspect,1,1,1]\n vec4 aspectRatioFix=vec4(aspect,vec3(1));\n // vertice position, multiplied with matrices of scale and aspect ratio\n gl_Position=aVertexPosition*scale*aspectRatioFix,\n // vertice offset, that will be passed to fragment shader\n v_positionWithOffset=gl_Position+vec4(1,1,1,1);\n}\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// current vertice position {x,y,z,w}\nattribute vec4 aVertexPosition;\n// final vertice position with all transformations applied,\n// that will be passed to Fragment Shader\nvarying vec4 v_positionWithOffset;\n// Parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(){\n // float array of 4 elements, same as [slide,slide,slide,1]\n vec4 scale=vec4(vec3(slide),1);\n // float array of 4 elements, same as [aspect,1,1,1]\n vec4 aspectRatioFix=vec4(aspect,vec3(1));\n // vertice position, multiplied with matrices of scale and aspect ratio\n gl_Position=aVertexPosition*scale*aspectRatioFix,\n // vertice offset, that will be passed to fragment shader\n v_positionWithOffset=gl_Position+vec4(1,1,1,1);\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"fragment-shader-example"},"children":[{"type":"text","value":"Fragment Shader Example"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read more at "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"precision highp float;\n\n// parameter from Vertex Shader\nvarying vec4 v_positionWithOffset;\n\nvoid main(void){\n // color, attached to current verticle {r,g,b,alpha}\n // same a[\n // v_positionWithOffset.x,\n // v_positionWithOffset.y, \n // v_positionWithOffset.z, \n // 1\n // ]\n gl_FragColor=vec4(v_positionWithOffset.xyz,1);\n}\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"precision highp float;\n\n// parameter from Vertex Shader\nvarying vec4 v_positionWithOffset;\n\nvoid main(void){\n // color, attached to current verticle {r,g,b,alpha}\n // same a[\n // v_positionWithOffset.x,\n // v_positionWithOffset.y, \n // v_positionWithOffset.z, \n // 1\n // ]\n gl_FragColor=vec4(v_positionWithOffset.xyz,1);\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"helpful-documentation"},"children":[{"type":"text","value":"Helpful documentation"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://open.gl/","rel":["nofollow"]},"children":[{"type":"text","value":"https://open.gl/"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"This youtube series: "},{"type":"element","tag":"a","props":{"href":"https://www.youtube.com/watch?v=kB0ZVUrI4Aw","rel":["nofollow"]},"children":[{"type":"text","value":"Basics"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://www.youtube.com/watch?v=3yLL9ADo-ko","rel":["nofollow"]},"children":[{"type":"text","value":"Making a cube, applying transformations"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://www.youtube.com/watch?v=hpnd11doMgc&t=52s","rel":["nofollow"]},"children":[{"type":"text","value":"Texturing"}]}]}]},{"type":"element","tag":"h2","props":{"id":"vertices-and-indices"},"children":[{"type":"text","value":"Vertices and Indices"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Vertices"}]},{"type":"text","value":" are points with specific coordinates "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{x,y,z}"}]},{"type":"text","value":" in a 3D-space. We can build any figure by connecting "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"vertices"}]},{"type":"text","value":" in triangles with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"indices"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"shaders"},"children":[{"type":"text","value":"Shaders"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Shaders are functions, written in C, which describe how to draw and color polygons to Graphic Card."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" describe "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"vertice"}]},{"type":"text","value":" positions, so Graphic Card can position them by connecting with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"indices"}]},{"type":"text","value":" and project to 2D canvas."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":" describe the way polygons should be colored by assigning colors to Vertices or by applying textures to polygons."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Shaders can have parameters passed from Javascript code ("},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"uniforms"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varyings"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"attributes"}]},{"type":"text","value":"). "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":" can also access data from "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" (that ones called "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varyings"}]},{"type":"text","value":")."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"https://open.gl/media/img/c2_pipeline.png"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"program"},"children":[{"type":"text","value":"Program"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Program, as far as I understand, is a scene, that's described with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Vertices"}]},{"type":"text","value":", "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Indices"}]},{"type":"text","value":", specific "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"applying-transformations"},"children":[{"type":"text","value":"Applying transformations"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The best way to change positions inside "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" or color in "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":" is to pass parameters (also called "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"uniforms"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varyings"}]},{"type":"text","value":")."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read about that at "},{"type":"element","tag":"a","props":{"href":"https://open.gl/transformations","rel":["nofollow"]},"children":[{"type":"text","value":"open.gl"}]},{"type":"text","value":" and at "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"source-code-with-explanations"},"children":[{"type":"text","value":"Source code with explanations"}]},{"type":"element","tag":"code","props":{"code":"// render-a-cube.ts\nimport { createShader } from \"./create-shader\";\nimport vxShader from \"./vertex.glsl?raw\";\nimport fgShader from \"./fragment.glsl?raw\";\n\nconst canvas = document.getElementyId('view');\nconst ctx = canvas.getRenderingContext('webgl');\n\n// should be put inside requestAnimationFrame\ndrawCube(ctx)(); \n\nfunction drawCube (\n gl: WebGL2RenderingContext, \n width: number,\n height: number\n) {\n // Initializing viewport\n gl.viewport(0, 0, width, height);\n gl.clearColor(0, 0, 0, 0);\n gl.clear(gl.COLOR_BUFFER_BIT);\n\n const prg = gl.createProgram();\n if (!prg) {\n throw new Error(\"Can't init programm\");\n }\n\n // Setting up VERTEX and FRAGMENT shaders\n const vx = createShader(gl, vxShader, gl.VERTEX_SHADER);\n gl.attachShader(prg, vx);\n const fx = createShader(gl, fgShader, gl.FRAGMENT_SHADER);\n gl.attachShader(prg, fx);\n gl.linkProgram(prg);\n if (!gl.getProgramParameter(prg, gl.LINK_STATUS)) {\n throw new Error(\"Could not initialise shaders\");\n }\n\n // Cube's vertices Array<[x,y,z]>, 8 items\n const vertices = [\n -1, -1, -1, // 0\n 1, -1, -1, // 1\n 1, 1, -1, // 2\n -1, 1, -1, // 3\n -1, -1, 1, // 4\n 1, -1, 1, // 5\n 1, 1, 1, // 6\n -1, 1, 1, // 7\n ];\n\n // indices, that form triangles, that form cube sides\n const indices = [\n 2, 1, 0, // side 0 (first triangle)\n 0, 3, 2, // side 0 (second triangle)\n 0, 4, 7, // side 1 (first triangle)\n 7, 3, 0, // side 1 (second triangle)\n 0, 1, 5, // ...\n 5, 4, 0, \n 1, 2, 6, \n 6, 5, 1, \n 2, 3, 7, \n 7, 6, 2, \n 4, 5, 6, \n 6, 7, 4,\n ];\n\n // createe a vertex buffer and bind vertices to it\n const squareVertexBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);\n gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);\n gl.bindBuffer(gl.ARRAY_BUFFER, null);\n\n // create a vertex buffer and bind indices to it\n const squareIndexBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, squareIndexBuffer);\n gl.bufferData(\n gl.ELEMENT_ARRAY_BUFFER,\n new Uint16Array(indices),\n gl.STATIC_DRAW\n );\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);\n\n // initial drawing\n gl.clearColor(0.0, 0.0, 0.0, 0.0);\n gl.enable(gl.DEPTH_TEST);\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n gl.viewport(0, 0, width, height);\n\n // bind squareVertexBuffer as vertex positions buffer\n gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);\n \n // send every 3 bytes from squareVertexBuffer as {x,y,z} for each verticle\n gl.vertexAttribPointer(\n gl.getAttribLocation(prg, \"aVertexPosition\"), \n 3, // 3 bytes-long\n gl.FLOAT,\n false, // don't normalize (int to float)\n 0, \n 0\n );\n // send vertice buffer as `aVertexPosition` attribute inside vertex shader\n gl.enableVertexAttribArray(\n gl.getAttribLocation(prg, \"aVertexPosition\")\n );\n\n let i = 0;\n let speed = 0.01;\n\n // that's the main rendering callback\n return () => {\n gl.useProgram(prg);\n\n const scale = i * 0.25 + 0.25;\n\n // used for scaling inside Vertex Shader\n gl.uniform1f(gl.getUniformLocation(prg, \"slide\"), scale);\n // GL Screen is square, so we need to fix it's aspect ration\n gl.uniform1f(gl.getUniformLocation(prg, \"aspect\"), height / width);\n\n gl.bindBuffer(\n gl.ELEMENT_ARRAY_BUFFER, \n squareIndexBuffer\n );\n \n gl.drawElements(\n gl.TRIANGLES, \n indices.length, \n gl.UNSIGNED_SHORT, \n 0,\n );\n\n if (i > 1 || i < 0) {\n speed = -speed;\n }\n\n i += speed;\n };\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// render-a-cube.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"createShader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2010d6"},"children":[{"type":"text","value":"\"./create-shader\""}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"vxShader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2010d6"},"children":[{"type":"text","value":"\"./vertex.glsl?raw\""}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"fgShader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2010d6"},"children":[{"type":"text","value":"\"./fragment.glsl?raw\""}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"document"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"getElementyId"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2010d6"},"children":[{"type":"text","value":"'view'"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"getRenderingContext"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2010d6"},"children":[{"type":"text","value":"'webgl'"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// should be put inside requestAnimationFrame"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"drawCube"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":")(); "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"drawCube"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aaa2c9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c4ba0e"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-2eab2c"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-aaa2c9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89a5fc"},"children":[{"type":"text","value":"WebGL2RenderingContext"}]},{"type":"element","tag":"span","props":{"class":"ct-aaa2c9"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aaa2c9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c4ba0e"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-2eab2c"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-aaa2c9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0555f3"},"children":[{"type":"text","value":"number"}]},{"type":"element","tag":"span","props":{"class":"ct-aaa2c9"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aaa2c9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c4ba0e"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-2eab2c"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-aaa2c9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0555f3"},"children":[{"type":"text","value":"number"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// Initializing viewport"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"viewport"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"clearColor"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"clear"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"COLOR_BUFFER_BIT"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"createProgram"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cd3b9c"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2010d6"},"children":[{"type":"text","value":"\"Can't init programm\""}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// Setting up VERTEX and FRAGMENT shaders"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"vx"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"createShader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"vxShader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"VERTEX_SHADER"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"attachShader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"vx"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"fx"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"createShader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"fgShader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"FRAGMENT_SHADER"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"attachShader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"fx"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"linkProgram"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"getProgramParameter"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"LINK_STATUS"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":")) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cd3b9c"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2010d6"},"children":[{"type":"text","value":"\"Could not initialise shaders\""}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// Cube's vertices Array<[x,y,z]>, 8 items"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"vertices"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// 0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// 1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// 2"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// 3"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// 4"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// 5"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// 6"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// 7"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" ];"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// indices, that form triangles, that form cube sides"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"indices"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// side 0 (first triangle)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// side 0 (second triangle)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"7"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// side 1 (first triangle)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"7"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// side 1 (second triangle)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"6"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"6"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"7"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"7"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"6"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"6"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"6"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"7"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" ];"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// createe a vertex buffer and bind vertices to it"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"squareVertexBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"createBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"bindBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"squareVertexBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"bufferData"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cd3b9c"},"children":[{"type":"text","value":"Float32Array"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"vertices"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"), "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"STATIC_DRAW"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"bindBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-02b732"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// create a vertex buffer and bind indices to it"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"squareIndexBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"createBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"bindBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"ELEMENT_ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"squareIndexBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"bufferData"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"ELEMENT_ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cd3b9c"},"children":[{"type":"text","value":"Uint16Array"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"indices"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"STATIC_DRAW"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"bindBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"ELEMENT_ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-02b732"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// initial drawing"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"clearColor"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0.0"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0.0"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0.0"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"enable"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"DEPTH_TEST"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"clear"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"COLOR_BUFFER_BIT"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"DEPTH_BUFFER_BIT"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"viewport"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// bind squareVertexBuffer as vertex positions buffer"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"bindBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"squareVertexBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// send every 3 bytes from squareVertexBuffer as {x,y,z} for each verticle"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"vertexAttribPointer"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"getAttribLocation"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-2010d6"},"children":[{"type":"text","value":"\"aVertexPosition\""}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"), "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// 3 bytes-long"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"FLOAT"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-02b732"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// don't normalize (int to float)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// send vertice buffer as `aVertexPosition` attribute inside vertex shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"enableVertexAttribArray"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"getAttribLocation"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-2010d6"},"children":[{"type":"text","value":"\"aVertexPosition\""}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"speed"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0.01"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// that's the main rendering callback"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"useProgram"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"scale"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0.25"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// used for scaling inside Vertex Shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"uniform1f"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"getUniformLocation"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-2010d6"},"children":[{"type":"text","value":"\"slide\""}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"), "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"scale"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// GL Screen is square, so we need to fix it's aspect ration"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"uniform1f"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"getUniformLocation"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-2010d6"},"children":[{"type":"text","value":"\"aspect\""}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"), "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"bindBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"ELEMENT_ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"squareIndexBuffer"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"drawElements"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"TRIANGLES"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"indices"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"UNSIGNED_SHORT"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"speed"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"speed"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"+="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"speed"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"shader-compiler"},"children":[{"type":"text","value":"Shader compiler"}]},{"type":"element","tag":"code","props":{"code":"// create-shader.ts\nexport const createShader = (\n gl: WebGL2RenderingContext,\n sourceCode: string,\n type: number, // gl.VERTEX_SHADER or gl.FRAGMENT_SHADER\n) => {\n const shader = gl.createShader(type);\n if (!shader) {\n throw new Error(`Can't init shader`);\n }\n\n gl.shaderSource(shader, sourceCode);\n gl.compileShader(shader);\n\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n const info = gl.getShaderInfoLog(shader);\n throw `Could not compile WebGL program. \\n\\n${info}`;\n }\n\n return shader;\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// create-shader.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"createShader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aaa2c9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c4ba0e"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-2eab2c"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-aaa2c9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89a5fc"},"children":[{"type":"text","value":"WebGL2RenderingContext"}]},{"type":"element","tag":"span","props":{"class":"ct-aaa2c9"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aaa2c9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c4ba0e"},"children":[{"type":"text","value":"sourceCode"}]},{"type":"element","tag":"span","props":{"class":"ct-2eab2c"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-aaa2c9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0555f3"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-aaa2c9"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aaa2c9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c4ba0e"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-2eab2c"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-aaa2c9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0555f3"},"children":[{"type":"text","value":"number"}]},{"type":"element","tag":"span","props":{"class":"ct-aaa2c9"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-aea678"},"children":[{"type":"text","value":"// gl.VERTEX_SHADER or gl.FRAGMENT_SHADER"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"createShader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cd3b9c"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2010d6"},"children":[{"type":"text","value":"`Can't init shader`"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"shaderSource"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"sourceCode"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"compileShader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"getShaderParameter"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"COMPILE_STATUS"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":")) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"info"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"getShaderInfoLog"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2010d6"},"children":[{"type":"text","value":"`Could not compile WebGL program. "}]},{"type":"element","tag":"span","props":{"class":"ct-0b8227"},"children":[{"type":"text","value":"\\n\\n"}]},{"type":"element","tag":"span","props":{"class":"ct-2010d6"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"info"}]},{"type":"element","tag":"span","props":{"class":"ct-2010d6"},"children":[{"type":"text","value":"}`"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"vertex-shader-example"},"children":[{"type":"text","value":"Vertex Shader Example"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read more at "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]}]},{"type":"element","tag":"code","props":{"code":"// current vertice position {x,y,z,w}\nattribute vec4 aVertexPosition;\n// final vertice position with all transformations applied,\n// that will be passed to Fragment Shader\nvarying vec4 v_positionWithOffset;\n// Parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(){\n // float array of 4 elements, same as [slide,slide,slide,1]\n vec4 scale=vec4(vec3(slide),1);\n // float array of 4 elements, same as [aspect,1,1,1]\n vec4 aspectRatioFix=vec4(aspect,vec3(1));\n // vertice position, multiplied with matrices of scale and aspect ratio\n gl_Position=aVertexPosition*scale*aspectRatioFix,\n // vertice offset, that will be passed to fragment shader\n v_positionWithOffset=gl_Position+vec4(1,1,1,1);\n}\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// current vertice position {x,y,z,w}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"attribute vec4 aVertexPosition;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// final vertice position with all transformations applied,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// that will be passed to Fragment Shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"varying vec4 v_positionWithOffset;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// Parameters passed from Javascript loop"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"uniform "}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" slide;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"uniform "}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" aspect;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"main"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"(){"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// float array of 4 elements, same as [slide,slide,slide,1]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" vec4 scale"}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"vec3"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"(slide),"}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// float array of 4 elements, same as [aspect,1,1,1]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" vec4 aspectRatioFix"}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"(aspect,"}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"vec3"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"));"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// vertice position, multiplied with matrices of scale and aspect ratio"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" gl_Position"}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"aVertexPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"scale"}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"aspectRatioFix,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// vertice offset, that will be passed to fragment shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" v_positionWithOffset"}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"gl_Position"}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"fragment-shader-example"},"children":[{"type":"text","value":"Fragment Shader Example"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read more at "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"precision highp float;\n\n// parameter from Vertex Shader\nvarying vec4 v_positionWithOffset;\n\nvoid main(void){\n // color, attached to current verticle {r,g,b,alpha}\n // same a[\n // v_positionWithOffset.x,\n // v_positionWithOffset.y, \n // v_positionWithOffset.z, \n // 1\n // ]\n gl_FragColor=vec4(v_positionWithOffset.xyz,1);\n}\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"precision highp "}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// parameter from Vertex Shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"varying vec4 v_positionWithOffset;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"main"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"){"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// color, attached to current verticle {r,g,b,alpha}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// same a["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// v_positionWithOffset.x,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// v_positionWithOffset.y, "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// v_positionWithOffset.z, "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// 1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// ]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" gl_FragColor"}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"v_positionWithOffset"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"xyz"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-0b8227{color:#79C0FF}.ct-aea678{color:#8B949E}.ct-02b732{color:#79C0FF}.ct-cd3b9c{color:#79C0FF}.ct-f22312{color:#79C0FF}.ct-0555f3{color:#79C0FF}.ct-89a5fc{color:#FFA657}.ct-2eab2c{color:#FF7B72}.ct-c4ba0e{color:#FFA657}.ct-aaa2c9{color:#C9D1D9}.ct-7d5ed7{color:#D2A8FF}.ct-5011ab{color:#79C0FF}.ct-fd83b5{color:#FF7B72}.ct-2010d6{color:#A5D6FF}.ct-0c42a0{color:#C9D1D9}.ct-5a6e76{color:#C9D1D9}.ct-532f07{color:#FF7B72}.ct-6e2271{color:#8B949E}.light .ct-6e2271{color:#93A1A1}.light .ct-532f07{color:#859900}.light .ct-5a6e76{color:#657B83}.light .ct-0c42a0{color:#268BD2}.light .ct-2010d6{color:#2AA198}.light .ct-fd83b5{color:#073642}.light .ct-5011ab{color:#268BD2}.light .ct-7d5ed7{color:#268BD2}.light .ct-aaa2c9{color:#657B83}.light .ct-c4ba0e{color:#657B83}.light .ct-2eab2c{color:#859900}.light .ct-89a5fc{color:#268BD2}.light .ct-0555f3{color:#859900}.light .ct-f22312{color:#D33682}.light .ct-cd3b9c{color:#859900}.light .ct-02b732{color:#B58900}.light .ct-aea678{color:#93A1A1}.light .ct-0b8227{color:#CB4B16}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"helpful-documentation","depth":2,"text":"Helpful documentation"},{"id":"vertices-and-indices","depth":2,"text":"Vertices and Indices"},{"id":"shaders","depth":2,"text":"Shaders"},{"id":"program","depth":2,"text":"Program"},{"id":"applying-transformations","depth":2,"text":"Applying transformations"},{"id":"source-code-with-explanations","depth":2,"text":"Source code with explanations"},{"id":"shader-compiler","depth":2,"text":"Shader compiler"},{"id":"vertex-shader-example","depth":2,"text":"Vertex Shader Example"},{"id":"fragment-shader-example","depth":2,"text":"Fragment Shader Example"}]}},"_type":"markdown","_id":"content:Frontend:WebGL:Basics of WebGL (Drawing a Cube).md","_source":"content","_file":"Frontend/WebGL/Basics of WebGL (Drawing a Cube).md","_extension":"md"},{"_path":"/frontend/webgl/fragment-shaders","_dir":"webgl","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Fragment Shaders","description":"Fragment shaders describe how polygons are painted (or textured). Read Basics of WebGL (Drawing a Cube) first.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Fragment shaders describe "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"how polygons are painted"}]},{"type":"text","value":" (or textured). Read "},{"type":"element","tag":"a","props":{"href":"Basics%20of%20WebGL%20(Drawing%20a%20Cube)"},"children":[{"type":"text","value":"Basics of WebGL (Drawing a Cube)"}]},{"type":"text","value":" first."}]},{"type":"element","tag":"h2","props":{"id":"sample-fragment-vertex"},"children":[{"type":"text","value":"Sample fragment vertex"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Parameters could be passed here as written at "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"precision highp float;\n\n// parameter from Vertex Shader\nvarying vec4 v_positionWithOffset;\n// parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(void){\n // color, attached to current verticle {r,g,b,alpha}\n // same a[\n // v_positionWithOffset.x,\n // v_positionWithOffset.y, \n // v_positionWithOffset.z, \n // 1\n // ]\n gl_FragColor=vec4(v_positionWithOffset.xyz,1);\n}```\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"precision highp float;\n\n// parameter from Vertex Shader\nvarying vec4 v_positionWithOffset;\n// parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(void){\n // color, attached to current verticle {r,g,b,alpha}\n // same a[\n // v_positionWithOffset.x,\n // v_positionWithOffset.y, \n // v_positionWithOffset.z, \n // 1\n // ]\n gl_FragColor=vec4(v_positionWithOffset.xyz,1);\n}```\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Fragment shaders describe "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"how polygons are painted"}]},{"type":"text","value":" (or textured). Read "},{"type":"element","tag":"a","props":{"href":"Basics%20of%20WebGL%20(Drawing%20a%20Cube)"},"children":[{"type":"text","value":"Basics of WebGL (Drawing a Cube)"}]},{"type":"text","value":" first."}]},{"type":"element","tag":"h2","props":{"id":"sample-fragment-vertex"},"children":[{"type":"text","value":"Sample fragment vertex"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Parameters could be passed here as written at "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"precision highp float;\n\n// parameter from Vertex Shader\nvarying vec4 v_positionWithOffset;\n// parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(void){\n // color, attached to current verticle {r,g,b,alpha}\n // same a[\n // v_positionWithOffset.x,\n // v_positionWithOffset.y, \n // v_positionWithOffset.z, \n // 1\n // ]\n gl_FragColor=vec4(v_positionWithOffset.xyz,1);\n}```\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":"precision highp "}]},{"type":"element","tag":"span","props":{"class":"ct-1dfc87"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e6c8c0"},"children":[{"type":"text","value":"// parameter from Vertex Shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":"varying vec4 v_positionWithOffset;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e6c8c0"},"children":[{"type":"text","value":"// parameters passed from Javascript loop"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":"uniform "}]},{"type":"element","tag":"span","props":{"class":"ct-1dfc87"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":" slide;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":"uniform "}]},{"type":"element","tag":"span","props":{"class":"ct-1dfc87"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":" aspect;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1dfc87"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdb0d0"},"children":[{"type":"text","value":"main"}]},{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-1dfc87"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":"){"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e6c8c0"},"children":[{"type":"text","value":"// color, attached to current verticle {r,g,b,alpha}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e6c8c0"},"children":[{"type":"text","value":"// same a["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e6c8c0"},"children":[{"type":"text","value":"// v_positionWithOffset.x,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e6c8c0"},"children":[{"type":"text","value":"// v_positionWithOffset.y, "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e6c8c0"},"children":[{"type":"text","value":"// v_positionWithOffset.z, "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e6c8c0"},"children":[{"type":"text","value":"// 1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e6c8c0"},"children":[{"type":"text","value":"// ]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":" gl_FragColor"}]},{"type":"element","tag":"span","props":{"class":"ct-6b3b3a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-bdb0d0"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-453e67"},"children":[{"type":"text","value":"v_positionWithOffset"}]},{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-453e67"},"children":[{"type":"text","value":"xyz"}]},{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-7ab632"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":"}```"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-7ab632{color:#79C0FF}.ct-453e67{color:#C9D1D9}.ct-6b3b3a{color:#FF7B72}.ct-bdb0d0{color:#D2A8FF}.ct-e6c8c0{color:#8B949E}.ct-1dfc87{color:#FF7B72}.ct-8297c4{color:#C9D1D9}.light .ct-8297c4{color:#657B83}.light .ct-1dfc87{color:#073642}.light .ct-e6c8c0{color:#93A1A1}.light .ct-bdb0d0{color:#268BD2}.light .ct-6b3b3a{color:#859900}.light .ct-453e67{color:#268BD2}.light .ct-7ab632{color:#D33682}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"sample-fragment-vertex","depth":2,"text":"Sample fragment vertex"}]}},"_type":"markdown","_id":"content:Frontend:WebGL:Fragment Shaders.md","_source":"content","_file":"Frontend/WebGL/Fragment Shaders.md","_extension":"md"},{"_path":"/frontend/webgl/rendering-without-blocking-in-a-worker","_dir":"webgl","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Rendering Without Blocking In A Worker","description":"Rendering items on #canvas in main loop might cause interface freezes, preventing render process from executing properly by flooding execution stack with operations.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Rendering items on #canvas in main loop "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"might cause interface freezes"}]},{"type":"text","value":", preventing render process from executing properly by flooding execution stack with operations."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To handle it properly, we can start separate #worker thread, that will handle rendering in its own event loop, so that won't affect the source tab's event loop."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Workers can have access to "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Glossary/Transferable_objects","rel":["nofollow"]},"children":[{"type":"text","value":"Transferrable Objects"}]},{"type":"text","value":" from main thread by receiving memory address. "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"That's a lot faster than cloning"}]},{"type":"text","value":". In this case "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap","rel":["nofollow"]},"children":[{"type":"text","value":"ImageBitmap"}]},{"type":"text","value":" is transferrable."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Code for the main thread component:"}]},{"type":"element","tag":"code","props":{"code":"// main.ts\nconst instance = new Worker('./render-worker.ts');\nconst canvas = document.getElementById('view');\n\n// attaching event listener to worker\ninstance.onmessage = (event: MessageEvent) => {\n const ctx = canvas?.getContext(\"2d\");\n if (!ctx) {\n throw new Error(`Can't get 2D context`);\n }\n \n ctx.drawImage(event.data as ImageBitmap, 0, 0);\n}\n\n// sending canvas contents to worker\nconst renderInCanvas = () => {\n if (!canvas.current) {\n return;\n }\n \n createImageBitmap(canvas.current).then(image => {\n instance.postMessage(image, { transfer: [image] })\n });\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// main.ts\nconst instance = new Worker('./render-worker.ts');\nconst canvas = document.getElementById('view');\n\n// attaching event listener to worker\ninstance.onmessage = (event: MessageEvent) => {\n const ctx = canvas?.getContext(\"2d\");\n if (!ctx) {\n throw new Error(`Can't get 2D context`);\n }\n \n ctx.drawImage(event.data as ImageBitmap, 0, 0);\n}\n\n// sending canvas contents to worker\nconst renderInCanvas = () => {\n if (!canvas.current) {\n return;\n }\n \n createImageBitmap(canvas.current).then(image => {\n instance.postMessage(image, { transfer: [image] })\n });\n};\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Worker code:"}]},{"type":"element","tag":"code","props":{"code":"// render-worker.ts\nexport default () => {\n self.onmessage = (message: MessageEvent) => {\n const data = message.data;\n\n if (!(data instanceof ImageBitmap)) {\n throw new Error('Received unknown data')\n }\n\n // OffscreenCanvas can be set up inside workers\n const canvas = new OffscreenCanvas(data.width, data.height);\n const ctx = canvas.getContext(\"2d\");\n\n if (!ctx) {\n throw new Error(`Can't get 2D context`);\n }\n\n ctx.drawImage(data, 0, 0);\n\n // That will block execution inside worker for \n // a couple of seconds\n doHardRenderingStuffHere(ctx, data.width, data.height);\n\n // Sending resulting image back to main thread\n createImageBitmap(canvas).then((image) => {\n self.postMessage(image, { transfer: [image] });\n });\n };\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// render-worker.ts\nexport default () => {\n self.onmessage = (message: MessageEvent) => {\n const data = message.data;\n\n if (!(data instanceof ImageBitmap)) {\n throw new Error('Received unknown data')\n }\n\n // OffscreenCanvas can be set up inside workers\n const canvas = new OffscreenCanvas(data.width, data.height);\n const ctx = canvas.getContext(\"2d\");\n\n if (!ctx) {\n throw new Error(`Can't get 2D context`);\n }\n\n ctx.drawImage(data, 0, 0);\n\n // That will block execution inside worker for \n // a couple of seconds\n doHardRenderingStuffHere(ctx, data.width, data.height);\n\n // Sending resulting image back to main thread\n createImageBitmap(canvas).then((image) => {\n self.postMessage(image, { transfer: [image] });\n });\n };\n};\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Rendering items on #canvas in main loop "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"might cause interface freezes"}]},{"type":"text","value":", preventing render process from executing properly by flooding execution stack with operations."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To handle it properly, we can start separate #worker thread, that will handle rendering in its own event loop, so that won't affect the source tab's event loop."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Workers can have access to "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Glossary/Transferable_objects","rel":["nofollow"]},"children":[{"type":"text","value":"Transferrable Objects"}]},{"type":"text","value":" from main thread by receiving memory address. "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"That's a lot faster than cloning"}]},{"type":"text","value":". In this case "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap","rel":["nofollow"]},"children":[{"type":"text","value":"ImageBitmap"}]},{"type":"text","value":" is transferrable."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Code for the main thread component:"}]},{"type":"element","tag":"code","props":{"code":"// main.ts\nconst instance = new Worker('./render-worker.ts');\nconst canvas = document.getElementById('view');\n\n// attaching event listener to worker\ninstance.onmessage = (event: MessageEvent) => {\n const ctx = canvas?.getContext(\"2d\");\n if (!ctx) {\n throw new Error(`Can't get 2D context`);\n }\n \n ctx.drawImage(event.data as ImageBitmap, 0, 0);\n}\n\n// sending canvas contents to worker\nconst renderInCanvas = () => {\n if (!canvas.current) {\n return;\n }\n \n createImageBitmap(canvas.current).then(image => {\n instance.postMessage(image, { transfer: [image] })\n });\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9baa47"},"children":[{"type":"text","value":"// main.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f8f6ea"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-99c685"},"children":[{"type":"text","value":"instance"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b87ec"},"children":[{"type":"text","value":"Worker"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0f9bbf"},"children":[{"type":"text","value":"'./render-worker.ts'"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f8f6ea"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-99c685"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"document"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8b87ec"},"children":[{"type":"text","value":"getElementById"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0f9bbf"},"children":[{"type":"text","value":"'view'"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9baa47"},"children":[{"type":"text","value":"// attaching event listener to worker"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"instance"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8b87ec"},"children":[{"type":"text","value":"onmessage"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f26505"},"children":[{"type":"text","value":"MessageEvent"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-f8f6ea"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f8f6ea"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-99c685"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-8b87ec"},"children":[{"type":"text","value":"getContext"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0f9bbf"},"children":[{"type":"text","value":"\"2d\""}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e37a18"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0f9bbf"},"children":[{"type":"text","value":"`Can't get 2D context`"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8b87ec"},"children":[{"type":"text","value":"drawImage"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"as"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f26505"},"children":[{"type":"text","value":"ImageBitmap"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-527554"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-527554"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9baa47"},"children":[{"type":"text","value":"// sending canvas contents to worker"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f8f6ea"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b87ec"},"children":[{"type":"text","value":"renderInCanvas"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-f8f6ea"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b87ec"},"children":[{"type":"text","value":"createImageBitmap"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"class":"ct-8b87ec"},"children":[{"type":"text","value":"then"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"instance"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8b87ec"},"children":[{"type":"text","value":"postMessage"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":", { transfer: ["}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"] })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Worker code:"}]},{"type":"element","tag":"code","props":{"code":"// render-worker.ts\nexport default () => {\n self.onmessage = (message: MessageEvent) => {\n const data = message.data;\n\n if (!(data instanceof ImageBitmap)) {\n throw new Error('Received unknown data')\n }\n\n // OffscreenCanvas can be set up inside workers\n const canvas = new OffscreenCanvas(data.width, data.height);\n const ctx = canvas.getContext(\"2d\");\n\n if (!ctx) {\n throw new Error(`Can't get 2D context`);\n }\n\n ctx.drawImage(data, 0, 0);\n\n // That will block execution inside worker for \n // a couple of seconds\n doHardRenderingStuffHere(ctx, data.width, data.height);\n\n // Sending resulting image back to main thread\n createImageBitmap(canvas).then((image) => {\n self.postMessage(image, { transfer: [image] });\n });\n };\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9baa47"},"children":[{"type":"text","value":"// render-worker.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-06f34b"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-188de8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-06f34b"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-188de8"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-1068a0"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-188de8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d00ff5"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"self"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8b87ec"},"children":[{"type":"text","value":"onmessage"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f8f6ea"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-99c685"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"message"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"instanceof"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f26505"},"children":[{"type":"text","value":"ImageBitmap"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":")) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e37a18"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0f9bbf"},"children":[{"type":"text","value":"'Received unknown data'"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9baa47"},"children":[{"type":"text","value":"// OffscreenCanvas can be set up inside workers"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f8f6ea"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-99c685"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b87ec"},"children":[{"type":"text","value":"OffscreenCanvas"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f8f6ea"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-99c685"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8b87ec"},"children":[{"type":"text","value":"getContext"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0f9bbf"},"children":[{"type":"text","value":"\"2d\""}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e37a18"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0f9bbf"},"children":[{"type":"text","value":"`Can't get 2D context`"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8b87ec"},"children":[{"type":"text","value":"drawImage"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-527554"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-527554"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9baa47"},"children":[{"type":"text","value":"// That will block execution inside worker for "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9baa47"},"children":[{"type":"text","value":"// a couple of seconds"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b87ec"},"children":[{"type":"text","value":"doHardRenderingStuffHere"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9baa47"},"children":[{"type":"text","value":"// Sending resulting image back to main thread"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b87ec"},"children":[{"type":"text","value":"createImageBitmap"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"class":"ct-8b87ec"},"children":[{"type":"text","value":"then"}]},{"type":"element","tag":"span","props":{"class":"ct-f8f6ea"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"self"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8b87ec"},"children":[{"type":"text","value":"postMessage"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":", { transfer: ["}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"] });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-d00ff5{color:#C9D1D9}.ct-1068a0{color:#FF7B72}.ct-188de8{color:#FFA657}.ct-06f34b{color:#FF7B72}.ct-527554{color:#79C0FF}.ct-e37a18{color:#79C0FF}.ct-f26505{color:#FFA657}.ct-06555d{color:#C9D1D9}.ct-0f9bbf{color:#A5D6FF}.ct-8b87ec{color:#D2A8FF}.ct-5659a8{color:#FF7B72}.ct-99c685{color:#79C0FF}.ct-fabed9{color:#C9D1D9}.ct-f8f6ea{color:#FF7B72}.ct-9baa47{color:#8B949E}.light .ct-9baa47{color:#93A1A1}.light .ct-f8f6ea{color:#073642}.light .ct-fabed9{color:#657B83}.light .ct-99c685{color:#268BD2}.light .ct-5659a8{color:#859900}.light .ct-8b87ec{color:#268BD2}.light .ct-0f9bbf{color:#2AA198}.light .ct-06555d{color:#268BD2}.light .ct-f26505{color:#268BD2}.light .ct-e37a18{color:#859900}.light .ct-527554{color:#D33682}.light .ct-06f34b{color:#859900}.light .ct-188de8{color:#657B83}.light .ct-1068a0{color:#073642}.light .ct-d00ff5{color:#657B83}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Frontend:WebGL:Rendering without blocking in a Worker.md","_source":"content","_file":"Frontend/WebGL/Rendering without blocking in a Worker.md","_extension":"md"},{"_path":"/frontend/webgl/vertex-shaders","_dir":"webgl","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Vertex Shaders","description":"Read Basics of WebGL (Drawing a Cube) first.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read "},{"type":"element","tag":"a","props":{"href":"Basics%20of%20WebGL%20(Drawing%20a%20Cube)"},"children":[{"type":"text","value":"Basics of WebGL (Drawing a Cube)"}]},{"type":"text","value":" first."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" define vertice positions in 3D-space. That's just a function, that defines "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gl_Position"}]},{"type":"text","value":" value by applying different transformations to it."}]},{"type":"element","tag":"h2","props":{"id":"sample-code"},"children":[{"type":"text","value":"Sample code"}]},{"type":"element","tag":"code","props":{"code":"// current vertice position {x,y,z,w}\nattribute vec4 aVertexPosition;\n// final vertice position with all transformations applied,\n// that will be passed to Fragment Shader\nvarying vec4 v_positionWithOffset;\n// Parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(){\n // float array of 4 elements, same as [slide,slide,slide,1]\n vec4 scale=vec4(vec3(slide),1);\n // float array of 4 elements, same as [aspect,1,1,1]\n vec4 aspectRatioFix=vec4(aspect,vec3(1));\n // vertice position, multiplied with matrices of scale and aspect ratio\n gl_Position=aVertexPosition*scale*aspectRatioFix,\n // vertice offset, that will be passed to fragment shader\n v_positionWithOffset=gl_Position+vec4(1,1,1,1);\n}\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// current vertice position {x,y,z,w}\nattribute vec4 aVertexPosition;\n// final vertice position with all transformations applied,\n// that will be passed to Fragment Shader\nvarying vec4 v_positionWithOffset;\n// Parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(){\n // float array of 4 elements, same as [slide,slide,slide,1]\n vec4 scale=vec4(vec3(slide),1);\n // float array of 4 elements, same as [aspect,1,1,1]\n vec4 aspectRatioFix=vec4(aspect,vec3(1));\n // vertice position, multiplied with matrices of scale and aspect ratio\n gl_Position=aVertexPosition*scale*aspectRatioFix,\n // vertice offset, that will be passed to fragment shader\n v_positionWithOffset=gl_Position+vec4(1,1,1,1);\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"passing-parameters-to-vertexshader"},"children":[{"type":"text","value":"Passing parameters to VertexShader"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Search for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Uniforms"}]},{"type":"text","value":" "},{"type":"element","tag":"a","props":{"href":"https://open.gl/drawing","rel":["nofollow"]},"children":[{"type":"text","value":"at open.gl"}]},{"type":"text","value":" for further reading."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There're 3 ways to pass parameters."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"attribute"}]},{"type":"text","value":" are parameters, that won't change. Good for vertex buffers."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"uniform"}]},{"type":"text","value":" are meant to change over the time. Good for passing transformations."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varying"}]},{"type":"text","value":" are parameters, that's shared between Vertex and "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"h2","props":{"id":"applying-transformations"},"children":[{"type":"text","value":"Applying transformations"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Every vertice position is defined as "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{x,y,z,w}"}]},{"type":"text","value":", where "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"w"}]},{"type":"text","value":" is a common denominator, that's used to achieve fast coord transformations by multiplying number of square matrices with original vertice coordinates."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"We don't change vertice position buffer"}]},{"type":"text","value":", because it's slow when being run inside Javascript loop, we "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"pass transformation matrices"}]},{"type":"text","value":" instead and "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"multiply vertice positions with transformation matrices"}]},{"type":"text","value":" inside a Graphic Card's GPU, because that's what GPU made for."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Good explanation can be found here: "},{"type":"element","tag":"a","props":{"href":"https://open.gl/transformations","rel":["nofollow"]},"children":[{"type":"text","value":"open.gl"}]},{"type":"text","value":"."}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read "},{"type":"element","tag":"a","props":{"href":"Basics%20of%20WebGL%20(Drawing%20a%20Cube)"},"children":[{"type":"text","value":"Basics of WebGL (Drawing a Cube)"}]},{"type":"text","value":" first."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" define vertice positions in 3D-space. That's just a function, that defines "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gl_Position"}]},{"type":"text","value":" value by applying different transformations to it."}]},{"type":"element","tag":"h2","props":{"id":"sample-code"},"children":[{"type":"text","value":"Sample code"}]},{"type":"element","tag":"code","props":{"code":"// current vertice position {x,y,z,w}\nattribute vec4 aVertexPosition;\n// final vertice position with all transformations applied,\n// that will be passed to Fragment Shader\nvarying vec4 v_positionWithOffset;\n// Parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(){\n // float array of 4 elements, same as [slide,slide,slide,1]\n vec4 scale=vec4(vec3(slide),1);\n // float array of 4 elements, same as [aspect,1,1,1]\n vec4 aspectRatioFix=vec4(aspect,vec3(1));\n // vertice position, multiplied with matrices of scale and aspect ratio\n gl_Position=aVertexPosition*scale*aspectRatioFix,\n // vertice offset, that will be passed to fragment shader\n v_positionWithOffset=gl_Position+vec4(1,1,1,1);\n}\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cab054"},"children":[{"type":"text","value":"// current vertice position {x,y,z,w}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":"attribute vec4 aVertexPosition;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cab054"},"children":[{"type":"text","value":"// final vertice position with all transformations applied,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cab054"},"children":[{"type":"text","value":"// that will be passed to Fragment Shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":"varying vec4 v_positionWithOffset;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cab054"},"children":[{"type":"text","value":"// Parameters passed from Javascript loop"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":"uniform "}]},{"type":"element","tag":"span","props":{"class":"ct-5f3977"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":" slide;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":"uniform "}]},{"type":"element","tag":"span","props":{"class":"ct-5f3977"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":" aspect;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5f3977"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-aae1d7"},"children":[{"type":"text","value":"main"}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":"(){"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cab054"},"children":[{"type":"text","value":"// float array of 4 elements, same as [slide,slide,slide,1]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":" vec4 scale"}]},{"type":"element","tag":"span","props":{"class":"ct-7abd18"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-aae1d7"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-aae1d7"},"children":[{"type":"text","value":"vec3"}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":"(slide),"}]},{"type":"element","tag":"span","props":{"class":"ct-10abe3"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cab054"},"children":[{"type":"text","value":"// float array of 4 elements, same as [aspect,1,1,1]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":" vec4 aspectRatioFix"}]},{"type":"element","tag":"span","props":{"class":"ct-7abd18"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-aae1d7"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":"(aspect,"}]},{"type":"element","tag":"span","props":{"class":"ct-aae1d7"},"children":[{"type":"text","value":"vec3"}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-10abe3"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":"));"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cab054"},"children":[{"type":"text","value":"// vertice position, multiplied with matrices of scale and aspect ratio"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":" gl_Position"}]},{"type":"element","tag":"span","props":{"class":"ct-7abd18"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":"aVertexPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-7abd18"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":"scale"}]},{"type":"element","tag":"span","props":{"class":"ct-7abd18"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":"aspectRatioFix,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cab054"},"children":[{"type":"text","value":"// vertice offset, that will be passed to fragment shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":" v_positionWithOffset"}]},{"type":"element","tag":"span","props":{"class":"ct-7abd18"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":"gl_Position"}]},{"type":"element","tag":"span","props":{"class":"ct-7abd18"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-aae1d7"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-10abe3"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-10abe3"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-10abe3"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-10abe3"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"passing-parameters-to-vertexshader"},"children":[{"type":"text","value":"Passing parameters to VertexShader"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Search for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Uniforms"}]},{"type":"text","value":" "},{"type":"element","tag":"a","props":{"href":"https://open.gl/drawing","rel":["nofollow"]},"children":[{"type":"text","value":"at open.gl"}]},{"type":"text","value":" for further reading."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There're 3 ways to pass parameters."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"attribute"}]},{"type":"text","value":" are parameters, that won't change. Good for vertex buffers."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"uniform"}]},{"type":"text","value":" are meant to change over the time. Good for passing transformations."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varying"}]},{"type":"text","value":" are parameters, that's shared between Vertex and "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"h2","props":{"id":"applying-transformations"},"children":[{"type":"text","value":"Applying transformations"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Every vertice position is defined as "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{x,y,z,w}"}]},{"type":"text","value":", where "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"w"}]},{"type":"text","value":" is a common denominator, that's used to achieve fast coord transformations by multiplying number of square matrices with original vertice coordinates."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"We don't change vertice position buffer"}]},{"type":"text","value":", because it's slow when being run inside Javascript loop, we "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"pass transformation matrices"}]},{"type":"text","value":" instead and "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"multiply vertice positions with transformation matrices"}]},{"type":"text","value":" inside a Graphic Card's GPU, because that's what GPU made for."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Good explanation can be found here: "},{"type":"element","tag":"a","props":{"href":"https://open.gl/transformations","rel":["nofollow"]},"children":[{"type":"text","value":"open.gl"}]},{"type":"text","value":"."}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-10abe3{color:#79C0FF}.ct-7abd18{color:#FF7B72}.ct-aae1d7{color:#D2A8FF}.ct-5f3977{color:#FF7B72}.ct-61138c{color:#C9D1D9}.ct-cab054{color:#8B949E}.light .ct-cab054{color:#93A1A1}.light .ct-61138c{color:#657B83}.light .ct-5f3977{color:#073642}.light .ct-aae1d7{color:#268BD2}.light .ct-7abd18{color:#859900}.light .ct-10abe3{color:#D33682}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"sample-code","depth":2,"text":"Sample code"},{"id":"passing-parameters-to-vertexshader","depth":2,"text":"Passing parameters to VertexShader"},{"id":"applying-transformations","depth":2,"text":"Applying transformations"}]}},"_type":"markdown","_id":"content:Frontend:WebGL:Vertex Shaders.md","_source":"content","_file":"Frontend/WebGL/Vertex Shaders.md","_extension":"md"},{"_path":"/git/force-git-to-use-https","_dir":"git","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Force Git To Use HTTPS","description":"Forces #git to use https even if remote url is #SSH. Useful for the networks with blocked #ssh protocol.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Forces #git to use https even if remote url is #SSH. Useful for the networks with blocked #ssh protocol."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Put this inside your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"~/.gitconfig"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"[url \"https://github.com\"]\n insteadOf = git://github.com\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"[url \"https://github.com\"]\n insteadOf = git://github.com\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Forces #git to use https even if remote url is #SSH. Useful for the networks with blocked #ssh protocol."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Put this inside your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"~/.gitconfig"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"[url \"https://github.com\"]\n insteadOf = git://github.com\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94d865"},"children":[{"type":"text","value":"[url "}]},{"type":"element","tag":"span","props":{"class":"ct-e92d62"},"children":[{"type":"text","value":"\"https://github.com\""}]},{"type":"element","tag":"span","props":{"class":"ct-94d865"},"children":[{"type":"text","value":"]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94d865"},"children":[{"type":"text","value":" insteadOf "}]},{"type":"element","tag":"span","props":{"class":"ct-8324af"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-94d865"},"children":[{"type":"text","value":" git:"}]},{"type":"element","tag":"span","props":{"class":"ct-ffb31d"},"children":[{"type":"text","value":"//github.com"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-ffb31d{color:#8B949E}.ct-8324af{color:#FF7B72}.ct-e92d62{color:#A5D6FF}.ct-94d865{color:#C9D1D9}.light .ct-94d865{color:#657B83}.light .ct-e92d62{color:#2AA198}.light .ct-8324af{color:#859900}.light .ct-ffb31d{color:#93A1A1}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Git:Force git to use HTTPS.md","_source":"content","_file":"Git/Force git to use HTTPS.md","_extension":"md"},{"_path":"/git/git-aliases-and-useful-commands","_dir":"git","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Git Aliases And Useful Commands","description":"Shorthands for #git commands can be specified. Should be placed at ~/.gitconfig.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Shorthands for #git commands can be specified. Should be placed at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"~/.gitconfig"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"[alias]\n flush = git clean-branches branch | grep -v master | xargs git branch -D\n lol = log --oneline --graph\n l = lol\n c = commit -am\n cv = commit --no-verify -am\n p = push\n pf = p --force-with-lease\n ignore-now = update-index --skip-worktree\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"[alias]\n flush = git clean-branches branch | grep -v master | xargs git branch -D\n lol = log --oneline --graph\n l = lol\n c = commit -am\n cv = commit --no-verify -am\n p = push\n pf = p --force-with-lease\n ignore-now = update-index --skip-worktree\n"}]}]}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"command"}]}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"description"}]}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git flush"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"drops all branches, except master"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git lol"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"shows log"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git c"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"commits with message"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git cv"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"commits without hooks"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git p"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"pushes"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git pf"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"push with --force and additional check"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git ignore-now"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"starts ignoring file from now on"}]}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Shorthands for #git commands can be specified. Should be placed at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"~/.gitconfig"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"[alias]\n flush = git clean-branches branch | grep -v master | xargs git branch -D\n lol = log --oneline --graph\n l = lol\n c = commit -am\n cv = commit --no-verify -am\n p = push\n pf = p --force-with-lease\n ignore-now = update-index --skip-worktree\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":"[alias]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":" flush "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":" git clean"}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":"branches branch "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":" grep "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":"v master "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":" xargs git branch "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":"D"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":" lol "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":" log "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"--"}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":"oneline "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"--"}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":"graph"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":" l "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":" lol"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":" c "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":" commit "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":"am"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":" cv "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":" commit "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"--"}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":"no"}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":"verify "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":"am"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":" p "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":" push"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":" pf "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":" p "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"--"}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":"force"}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":"with"}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":"lease"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":" ignore"}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":"now "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":" update"}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":"index "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"--"}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":"skip"}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":"worktree"}]}]}]}]}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"command"}]}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"description"}]}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git flush"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"drops all branches, except master"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git lol"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"shows log"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git c"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"commits with message"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git cv"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"commits without hooks"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git p"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"pushes"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git pf"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"push with --force and additional check"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git ignore-now"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"starts ignoring file from now on"}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-00cd05{color:#FF7B72}.ct-145c34{color:#C9D1D9}.light .ct-145c34{color:#657B83}.light .ct-00cd05{color:#859900}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Git:Git aliases and useful commands.md","_source":"content","_file":"Git/Git aliases and useful commands.md","_extension":"md"},{"_path":"/golang/i18n-in-golang","_dir":"golang","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"I18n In Golang","description":"There are no good examples of golang.org/x/text uses and description of how pluralization made. So, this is it.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are no good examples of "},{"type":"element","tag":"a","props":{"href":"https://golang.org/x/text","rel":["nofollow"]},"children":[{"type":"text","value":"golang.org/x/text"}]},{"type":"text","value":" uses and description of how pluralization made. So, this is it."}]},{"type":"element","tag":"h4","props":{"id":"generating-translations"},"children":[{"type":"text","value":"Generating translations"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You should specify valid "},{"type":"element","tag":"a","props":{"href":"https://www.iso.org/obp/ui/#iso:code:3166","rel":["nofollow"]},"children":[{"type":"text","value":"ISO-3166 locale code"}]},{"type":"text","value":" to get plurals working!"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Write your code:"}]},{"type":"element","tag":"code","props":{"code":"import (\n \"golang.org/x/text/language\"\n \"golang.org/x/text/message\"\n)\n\nlang := language.MustParse('ru-RU')\nprinter := message.NewPrinter(lang)\n\ncount := 1\nprinter.Sprintf(\"%d butterflies\", count)\n","language":"go"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import (\n \"golang.org/x/text/language\"\n \"golang.org/x/text/message\"\n)\n\nlang := language.MustParse('ru-RU')\nprinter := message.NewPrinter(lang)\n\ncount := 1\nprinter.Sprintf(\"%d butterflies\", count)\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then run generator for your locale (mine is "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ru-RU"}]},{"type":"text","value":"):"}]},{"type":"element","tag":"code","props":{"code":"gotext -srclang=en-GB update -lang=ru-RU \\\n -out=translations.go github.com/path/to-output-folder\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"gotext -srclang=en-GB update -lang=ru-RU \\\n -out=translations.go github.com/path/to-output-folder\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will generate "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"out.gotext.json"}]},{"type":"text","value":" in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/path/to-output-folder/ru-RU"}]},{"type":"text","value":" of your project. Copy it to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"messages.out.json"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h4","props":{"id":"translating-and-adding-plural-forms"},"children":[{"type":"text","value":"Translating and adding plural forms"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Change "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"\"translation\""}]},{"type":"text","value":" value in generated "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"messages.gotext.json"}]},{"type":"text","value":" to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"string"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"object"}]},{"type":"text","value":" of the form shown below if you want pluralize strings, "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"then run gotext command again"}]},{"type":"text","value":", it will generate "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".go files with translations"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"According to "},{"type":"element","tag":"a","props":{"href":"https://github.com/golang/text/blob/master/feature/plural/gen_common.go#L19","rel":["nofollow"]},"children":[{"type":"text","value":"source files of gen_common"}]},{"type":"text","value":", there's a couple of forms:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"=N"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"!=N"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"%N"}]},{"type":"text","value":" for exact matches"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"zero"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"one"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"two"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"few"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"many"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"other"}]},{"type":"text","value":" - they're different for each language, so,"}]}]},{"type":"element","tag":"code","props":{"code":"{\n \"id\": \"{Count} butterflies\",\n \"message\": \"{Count} butterflies\",\n \"translation\": {\n \"select\": {\n \"feature\": \"plural\",\n \"arg\": \"Count\",\n \"cases\": {\n \"one\": {\n \"msg\": \"{Count} бабочка\"\n },\n \"few\": {\n \"msg\": \"{Count} бабочки\"\n },\n \"many\": {\n \"msg\": \"{Count} бабочек\"\n },\n \"other\": {\n \"msg\": \"{Count} бабочуль\"\n }\n }\n }\n },\n \"placeholders\": [\n {\n \"id\": \"Count\",\n \"string\": \"%[1]d\",\n \"type\": \"int\",\n \"underlyingType\": \"int\",\n \"argNum\": 1,\n \"expr\": \"count\"\n }\n ]\n},\n","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"{\n \"id\": \"{Count} butterflies\",\n \"message\": \"{Count} butterflies\",\n \"translation\": {\n \"select\": {\n \"feature\": \"plural\",\n \"arg\": \"Count\",\n \"cases\": {\n \"one\": {\n \"msg\": \"{Count} бабочка\"\n },\n \"few\": {\n \"msg\": \"{Count} бабочки\"\n },\n \"many\": {\n \"msg\": \"{Count} бабочек\"\n },\n \"other\": {\n \"msg\": \"{Count} бабочуль\"\n }\n }\n }\n },\n \"placeholders\": [\n {\n \"id\": \"Count\",\n \"string\": \"%[1]d\",\n \"type\": \"int\",\n \"underlyingType\": \"int\",\n \"argNum\": 1,\n \"expr\": \"count\"\n }\n ]\n},\n"}]}]}]},{"type":"element","tag":"h4","props":{"id":"using-go-generate"},"children":[{"type":"text","value":"Using go-generate"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Write this at some "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".go"}]},{"type":"text","value":" file:"}]},{"type":"element","tag":"code","props":{"code":"//go:generate gotext -srclang=en-GB update -out=translations.go -lang=ru-RU github.com/muerwre/vault-golang/internal/api\n","language":"go"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"//go:generate gotext -srclang=en-GB update -out=translations.go -lang=ru-RU github.com/muerwre/vault-golang/internal/api\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then run go generation:"}]},{"type":"element","tag":"code","props":{"code":"go generate ./...\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"go generate ./...\n"}]}]}]},{"type":"element","tag":"h4","props":{"id":"useful-links"},"children":[{"type":"text","value":"Useful links"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/golang/text/blob/master/feature/plural/gen_common.go#L19","rel":["nofollow"]},"children":[{"type":"text","value":"All available forms in this .go file"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://community.crowdin.com/t/plurals-in-gotext-json-files/600","rel":["nofollow"]},"children":[{"type":"text","value":"Answer, that solved it for me"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are no good examples of "},{"type":"element","tag":"a","props":{"href":"https://golang.org/x/text","rel":["nofollow"]},"children":[{"type":"text","value":"golang.org/x/text"}]},{"type":"text","value":" uses and description of how pluralization made. So, this is it."}]},{"type":"element","tag":"h4","props":{"id":"generating-translations"},"children":[{"type":"text","value":"Generating translations"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You should specify valid "},{"type":"element","tag":"a","props":{"href":"https://www.iso.org/obp/ui/#iso:code:3166","rel":["nofollow"]},"children":[{"type":"text","value":"ISO-3166 locale code"}]},{"type":"text","value":" to get plurals working!"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Write your code:"}]},{"type":"element","tag":"code","props":{"code":"import (\n \"golang.org/x/text/language\"\n \"golang.org/x/text/message\"\n)\n\nlang := language.MustParse('ru-RU')\nprinter := message.NewPrinter(lang)\n\ncount := 1\nprinter.Sprintf(\"%d butterflies\", count)\n","language":"go"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d75569"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d55d13"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-03e448"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-b637b2"},"children":[{"type":"text","value":"golang.org/x/text/language"}]},{"type":"element","tag":"span","props":{"class":"ct-03e448"},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d55d13"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-03e448"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-b637b2"},"children":[{"type":"text","value":"golang.org/x/text/message"}]},{"type":"element","tag":"span","props":{"class":"ct-03e448"},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3ccebd"},"children":[{"type":"text","value":"lang"}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d75569"},"children":[{"type":"text","value":":="}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" language."}]},{"type":"element","tag":"span","props":{"class":"ct-91dbaa"},"children":[{"type":"text","value":"MustParse"}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-1e836b"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-2891df"},"children":[{"type":"text","value":"ru-RU"}]},{"type":"element","tag":"span","props":{"class":"ct-1e836b"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3ccebd"},"children":[{"type":"text","value":"printer"}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d75569"},"children":[{"type":"text","value":":="}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" message."}]},{"type":"element","tag":"span","props":{"class":"ct-91dbaa"},"children":[{"type":"text","value":"NewPrinter"}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":"(lang)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3ccebd"},"children":[{"type":"text","value":"count"}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d75569"},"children":[{"type":"text","value":":="}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-82e32d"},"children":[{"type":"text","value":"1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":"printer."}]},{"type":"element","tag":"span","props":{"class":"ct-91dbaa"},"children":[{"type":"text","value":"Sprintf"}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-1e836b"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-ebe6d6"},"children":[{"type":"text","value":"%d"}]},{"type":"element","tag":"span","props":{"class":"ct-1e836b"},"children":[{"type":"text","value":" butterflies\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":", count)"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then run generator for your locale (mine is "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ru-RU"}]},{"type":"text","value":"):"}]},{"type":"element","tag":"code","props":{"code":"gotext -srclang=en-GB update -lang=ru-RU \\\n -out=translations.go github.com/path/to-output-folder\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":"gotext -srclang=en-GB update -lang=ru-RU \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" -out=translations.go github.com/path/to-output-folder"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will generate "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"out.gotext.json"}]},{"type":"text","value":" in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/path/to-output-folder/ru-RU"}]},{"type":"text","value":" of your project. Copy it to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"messages.out.json"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h4","props":{"id":"translating-and-adding-plural-forms"},"children":[{"type":"text","value":"Translating and adding plural forms"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Change "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"\"translation\""}]},{"type":"text","value":" value in generated "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"messages.gotext.json"}]},{"type":"text","value":" to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"string"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"object"}]},{"type":"text","value":" of the form shown below if you want pluralize strings, "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"then run gotext command again"}]},{"type":"text","value":", it will generate "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".go files with translations"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"According to "},{"type":"element","tag":"a","props":{"href":"https://github.com/golang/text/blob/master/feature/plural/gen_common.go#L19","rel":["nofollow"]},"children":[{"type":"text","value":"source files of gen_common"}]},{"type":"text","value":", there's a couple of forms:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"=N"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"!=N"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"%N"}]},{"type":"text","value":" for exact matches"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"zero"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"one"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"two"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"few"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"many"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"other"}]},{"type":"text","value":" - they're different for each language, so,"}]}]},{"type":"element","tag":"code","props":{"code":"{\n \"id\": \"{Count} butterflies\",\n \"message\": \"{Count} butterflies\",\n \"translation\": {\n \"select\": {\n \"feature\": \"plural\",\n \"arg\": \"Count\",\n \"cases\": {\n \"one\": {\n \"msg\": \"{Count} бабочка\"\n },\n \"few\": {\n \"msg\": \"{Count} бабочки\"\n },\n \"many\": {\n \"msg\": \"{Count} бабочек\"\n },\n \"other\": {\n \"msg\": \"{Count} бабочуль\"\n }\n }\n }\n },\n \"placeholders\": [\n {\n \"id\": \"Count\",\n \"string\": \"%[1]d\",\n \"type\": \"int\",\n \"underlyingType\": \"int\",\n \"argNum\": 1,\n \"expr\": \"count\"\n }\n ]\n},\n","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"id\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1e836b"},"children":[{"type":"text","value":"\"{Count} butterflies\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"message\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1e836b"},"children":[{"type":"text","value":"\"{Count} butterflies\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"translation\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"select\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"feature\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1e836b"},"children":[{"type":"text","value":"\"plural\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"arg\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1e836b"},"children":[{"type":"text","value":"\"Count\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"cases\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"one\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"msg\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1e836b"},"children":[{"type":"text","value":"\"{Count} бабочка\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"few\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"msg\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1e836b"},"children":[{"type":"text","value":"\"{Count} бабочки\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"many\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"msg\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1e836b"},"children":[{"type":"text","value":"\"{Count} бабочек\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"other\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"msg\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1e836b"},"children":[{"type":"text","value":"\"{Count} бабочуль\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"placeholders\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"id\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1e836b"},"children":[{"type":"text","value":"\"Count\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"string\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1e836b"},"children":[{"type":"text","value":"\"%[1]d\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"type\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1e836b"},"children":[{"type":"text","value":"\"int\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"underlyingType\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1e836b"},"children":[{"type":"text","value":"\"int\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"argNum\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-82e32d"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"expr\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1e836b"},"children":[{"type":"text","value":"\"count\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" ]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":"},"}]}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"using-go-generate"},"children":[{"type":"text","value":"Using go-generate"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Write this at some "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".go"}]},{"type":"text","value":" file:"}]},{"type":"element","tag":"code","props":{"code":"//go:generate gotext -srclang=en-GB update -out=translations.go -lang=ru-RU github.com/muerwre/vault-golang/internal/api\n","language":"go"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e81ade"},"children":[{"type":"text","value":"//go:generate gotext -srclang=en-GB update -out=translations.go -lang=ru-RU github.com/muerwre/vault-golang/internal/api"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then run go generation:"}]},{"type":"element","tag":"code","props":{"code":"go generate ./...\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":"go generate ./..."}]}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"useful-links"},"children":[{"type":"text","value":"Useful links"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/golang/text/blob/master/feature/plural/gen_common.go#L19","rel":["nofollow"]},"children":[{"type":"text","value":"All available forms in this .go file"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://community.crowdin.com/t/plurals-in-gotext-json-files/600","rel":["nofollow"]},"children":[{"type":"text","value":"Answer, that solved it for me"}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-e81ade{color:#8B949E}.ct-0dacf2{color:#79C0FF}.ct-ebe6d6{color:#79C0FF}.ct-82e32d{color:#79C0FF}.ct-2891df{color:#FFA198}.ct-1e836b{color:#A5D6FF}.ct-91dbaa{color:#79C0FF}.ct-3ccebd{color:#C9D1D9}.ct-b637b2{color:#FFA657}.ct-03e448{color:#A5D6FF}.ct-d55d13{color:#C9D1D9}.ct-13cb8b{color:#C9D1D9}.ct-d75569{color:#FF7B72}.light .ct-d75569{color:#859900}.light .ct-13cb8b{color:#657B83}.light .ct-d55d13{color:#657B83}.light .ct-03e448{color:#2AA198}.light .ct-b637b2{color:#2AA198}.light .ct-3ccebd{color:#268BD2}.light .ct-91dbaa{color:#268BD2}.light .ct-1e836b{color:#2AA198}.light .ct-2891df{color:#CD3131}.light .ct-82e32d{color:#D33682}.light .ct-ebe6d6{color:#CB4B16}.light .ct-0dacf2{color:#859900}.light .ct-e81ade{color:#93A1A1}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Golang:i18n in golang.md","_source":"content","_file":"Golang/i18n in golang.md","_extension":"md"},{"_path":"/graphql/apollo-client-pagination","_dir":"graphql","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Apollo Client Pagination","description":"Say, we have gql response like this and we wan't to have pagination with it. Let's merge it as it specified in official documentation","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Say, we have "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gql"}]},{"type":"text","value":" response like this and we wan't to have pagination with it. Let's merge it as it specified in "},{"type":"element","tag":"a","props":{"href":"https://www.apollographql.com/docs/react/caching/cache-field-behavior/#the-merge-function","rel":["nofollow"]},"children":[{"type":"text","value":"official documentation"}]}]},{"type":"element","tag":"code","props":{"code":"query listItems(\n filter: Filter, \n sort: String,\n limit: Number,\n offset: Number,\n): ItemList!\n\ninput Filter {\n name: String!\n type: String!\n}\n\ntype ItemList {\n items: [Item!]!\n totalCount: Int!\n}\n","language":"graphql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"query listItems(\n filter: Filter, \n sort: String,\n limit: Number,\n offset: Number,\n): ItemList!\n\ninput Filter {\n name: String!\n type: String!\n}\n\ntype ItemList {\n items: [Item!]!\n totalCount: Int!\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We will setup "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ApolloClient"}]},{"type":"text","value":" with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"typePolicies"}]},{"type":"text","value":" to merge incoming data in cache:"}]},{"type":"element","tag":"code","props":{"code":"import { ApolloClient, InMemoryCache } from '@apollo/client';\n\nconst client = new ApolloClient({\n // ...\n cache: new InMemoryCache({ typePolicies }),\n // ...\n});\n\nexport const typePolicies: TypePolicies = {\n Query: {\n fields: {\n // query name\n listItems: {\n // apollo will serialize and use keyArgs as unique\n // identifier in cache for every query\n // consider choosing the right fields, \n // i.e. limit and offset won't work here\n keyArgs: [\n 'sort', // primitive type\n 'filter', ['name', 'type'] // nested fields of `filter`\n ],\n merge: mergeItemsWithTotalCount,\n },\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { ApolloClient, InMemoryCache } from '@apollo/client';\n\nconst client = new ApolloClient({\n // ...\n cache: new InMemoryCache({ typePolicies }),\n // ...\n});\n\nexport const typePolicies: TypePolicies = {\n Query: {\n fields: {\n // query name\n listItems: {\n // apollo will serialize and use keyArgs as unique\n // identifier in cache for every query\n // consider choosing the right fields, \n // i.e. limit and offset won't work here\n keyArgs: [\n 'sort', // primitive type\n 'filter', ['name', 'type'] // nested fields of `filter`\n ],\n merge: mergeItemsWithTotalCount,\n },\n }\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We will need merge function "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mergeItemsWithTotalCount"}]},{"type":"text","value":", which will join results of query and cached data for specific key:"}]},{"type":"element","tag":"code","props":{"code":"/** merges all sources with { items: unknown[], totalCount: number } */\nconst mergeItemsWithTotalCount = (existing, incoming, { args }) => {\n // no existing data\n if (!existing || !args?.offset || args.offset < existing.length) {\n return incoming || [];\n }\n\n // If hook was called multiple times\n if (existing?.items?.length && args?.offset < existing.items.length) {\n return existing || [];\n }\n\n // merge cache and incoming data\n const items = [...(existing?.items || []), ...(incoming?.items || [])];\n\n // apply latest result for totalCount\n const totalCount = incoming?.totalCount || existing?.totalCount;\n\n return {\n ...(incoming || existing || {}),\n items,\n totalCount,\n };\n };\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"/** merges all sources with { items: unknown[], totalCount: number } */\nconst mergeItemsWithTotalCount = (existing, incoming, { args }) => {\n // no existing data\n if (!existing || !args?.offset || args.offset < existing.length) {\n return incoming || [];\n }\n\n // If hook was called multiple times\n if (existing?.items?.length && args?.offset < existing.items.length) {\n return existing || [];\n }\n\n // merge cache and incoming data\n const items = [...(existing?.items || []), ...(incoming?.items || [])];\n\n // apply latest result for totalCount\n const totalCount = incoming?.totalCount || existing?.totalCount;\n\n return {\n ...(incoming || existing || {}),\n items,\n totalCount,\n };\n };\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Say, we have "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gql"}]},{"type":"text","value":" response like this and we wan't to have pagination with it. Let's merge it as it specified in "},{"type":"element","tag":"a","props":{"href":"https://www.apollographql.com/docs/react/caching/cache-field-behavior/#the-merge-function","rel":["nofollow"]},"children":[{"type":"text","value":"official documentation"}]}]},{"type":"element","tag":"code","props":{"code":"query listItems(\n filter: Filter, \n sort: String,\n limit: Number,\n offset: Number,\n): ItemList!\n\ninput Filter {\n name: String!\n type: String!\n}\n\ntype ItemList {\n items: [Item!]!\n totalCount: Int!\n}\n","language":"graphql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"query"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bfd470"},"children":[{"type":"text","value":"listItems"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89a0ce"},"children":[{"type":"text","value":"filter"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e6f76e"},"children":[{"type":"text","value":"Filter"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89a0ce"},"children":[{"type":"text","value":"sort"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e6f76e"},"children":[{"type":"text","value":"String"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89a0ce"},"children":[{"type":"text","value":"limit"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e6f76e"},"children":[{"type":"text","value":"Number"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89a0ce"},"children":[{"type":"text","value":"offset"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e6f76e"},"children":[{"type":"text","value":"Number"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"): "}]},{"type":"element","tag":"span","props":{"class":"ct-bfd470"},"children":[{"type":"text","value":"ItemList"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"!"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"input"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b9abb7"},"children":[{"type":"text","value":"Filter"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89a0ce"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e6f76e"},"children":[{"type":"text","value":"String"}]},{"type":"element","tag":"span","props":{"class":"ct-904dbb"},"children":[{"type":"text","value":"!"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89a0ce"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e6f76e"},"children":[{"type":"text","value":"String"}]},{"type":"element","tag":"span","props":{"class":"ct-904dbb"},"children":[{"type":"text","value":"!"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b9abb7"},"children":[{"type":"text","value":"ItemList"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89a0ce"},"children":[{"type":"text","value":"items"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":": ["}]},{"type":"element","tag":"span","props":{"class":"ct-e6f76e"},"children":[{"type":"text","value":"Item"}]},{"type":"element","tag":"span","props":{"class":"ct-904dbb"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":"]"}]},{"type":"element","tag":"span","props":{"class":"ct-904dbb"},"children":[{"type":"text","value":"!"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89a0ce"},"children":[{"type":"text","value":"totalCount"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e6f76e"},"children":[{"type":"text","value":"Int"}]},{"type":"element","tag":"span","props":{"class":"ct-904dbb"},"children":[{"type":"text","value":"!"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We will setup "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ApolloClient"}]},{"type":"text","value":" with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"typePolicies"}]},{"type":"text","value":" to merge incoming data in cache:"}]},{"type":"element","tag":"code","props":{"code":"import { ApolloClient, InMemoryCache } from '@apollo/client';\n\nconst client = new ApolloClient({\n // ...\n cache: new InMemoryCache({ typePolicies }),\n // ...\n});\n\nexport const typePolicies: TypePolicies = {\n Query: {\n fields: {\n // query name\n listItems: {\n // apollo will serialize and use keyArgs as unique\n // identifier in cache for every query\n // consider choosing the right fields, \n // i.e. limit and offset won't work here\n keyArgs: [\n 'sort', // primitive type\n 'filter', ['name', 'type'] // nested fields of `filter`\n ],\n merge: mergeItemsWithTotalCount,\n },\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"ApolloClient"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"InMemoryCache"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c275b5"},"children":[{"type":"text","value":"'@apollo/client'"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6561fc"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3aa4d5"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bfd470"},"children":[{"type":"text","value":"ApolloClient"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1476e6"},"children":[{"type":"text","value":"// ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" cache: "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bfd470"},"children":[{"type":"text","value":"InMemoryCache"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"({ "}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"typePolicies"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1476e6"},"children":[{"type":"text","value":"// ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"});"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6561fc"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3aa4d5"},"children":[{"type":"text","value":"typePolicies"}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-aa8127"},"children":[{"type":"text","value":"TypePolicies"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" Query: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" fields: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1476e6"},"children":[{"type":"text","value":"// query name"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" listItems: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1476e6"},"children":[{"type":"text","value":"// apollo will serialize and use keyArgs as unique"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1476e6"},"children":[{"type":"text","value":"// identifier in cache for every query"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1476e6"},"children":[{"type":"text","value":"// consider choosing the right fields, "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1476e6"},"children":[{"type":"text","value":"// i.e. limit and offset won't work here"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" keyArgs: ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c275b5"},"children":[{"type":"text","value":"'sort'"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-1476e6"},"children":[{"type":"text","value":"// primitive type"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c275b5"},"children":[{"type":"text","value":"'filter'"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":", ["}]},{"type":"element","tag":"span","props":{"class":"ct-c275b5"},"children":[{"type":"text","value":"'name'"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-c275b5"},"children":[{"type":"text","value":"'type'"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"] "}]},{"type":"element","tag":"span","props":{"class":"ct-1476e6"},"children":[{"type":"text","value":"// nested fields of `filter`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" ],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" merge: "}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"mergeItemsWithTotalCount"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We will need merge function "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mergeItemsWithTotalCount"}]},{"type":"text","value":", which will join results of query and cached data for specific key:"}]},{"type":"element","tag":"code","props":{"code":"/** merges all sources with { items: unknown[], totalCount: number } */\nconst mergeItemsWithTotalCount = (existing, incoming, { args }) => {\n // no existing data\n if (!existing || !args?.offset || args.offset < existing.length) {\n return incoming || [];\n }\n\n // If hook was called multiple times\n if (existing?.items?.length && args?.offset < existing.items.length) {\n return existing || [];\n }\n\n // merge cache and incoming data\n const items = [...(existing?.items || []), ...(incoming?.items || [])];\n\n // apply latest result for totalCount\n const totalCount = incoming?.totalCount || existing?.totalCount;\n\n return {\n ...(incoming || existing || {}),\n items,\n totalCount,\n };\n };\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1476e6"},"children":[{"type":"text","value":"/** merges all sources with { items: unknown[], totalCount: number } */"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b5872a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6af47c"},"children":[{"type":"text","value":"mergeItemsWithTotalCount"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-904dbb"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-89a0ce"},"children":[{"type":"text","value":"existing"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-89a0ce"},"children":[{"type":"text","value":"incoming"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":", { "}]},{"type":"element","tag":"span","props":{"class":"ct-89a0ce"},"children":[{"type":"text","value":"args"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":" }) "}]},{"type":"element","tag":"span","props":{"class":"ct-b5872a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1476e6"},"children":[{"type":"text","value":"// no existing data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"existing"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"args"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"offset"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"args"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"offset"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"existing"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"incoming"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" [];"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1476e6"},"children":[{"type":"text","value":"// If hook was called multiple times"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"existing"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"items"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"?."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"existing"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" [];"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1476e6"},"children":[{"type":"text","value":"// merge cache and incoming data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6561fc"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3aa4d5"},"children":[{"type":"text","value":"items"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"existing"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"items"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1476e6"},"children":[{"type":"text","value":"// apply latest result for totalCount"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6561fc"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3aa4d5"},"children":[{"type":"text","value":"totalCount"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"incoming"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"totalCount"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"existing"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"totalCount"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"incoming"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"items"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"totalCount"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" };"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-6af47c{color:#D2A8FF}.ct-b5872a{color:#FF7B72}.ct-aa8127{color:#FFA657}.ct-1476e6{color:#8B949E}.ct-3aa4d5{color:#79C0FF}.ct-6561fc{color:#FF7B72}.ct-c275b5{color:#A5D6FF}.ct-aa253b{color:#C9D1D9}.ct-904dbb{color:#FF7B72}.ct-b9abb7{color:#79C0FF}.ct-e6f76e{color:#79C0FF}.ct-89a0ce{color:#FFA657}.ct-20ad43{color:#C9D1D9}.ct-bfd470{color:#D2A8FF}.ct-7dafdd{color:#C9D1D9}.ct-ac9afb{color:#FF7B72}.light .ct-ac9afb{color:#859900}.light .ct-7dafdd{color:#657B83}.light .ct-bfd470{color:#268BD2}.light .ct-20ad43{color:#657B83}.light .ct-89a0ce{color:#657B83}.light .ct-e6f76e{color:#859900}.light .ct-b9abb7{color:#859900}.light .ct-904dbb{color:#859900}.light .ct-aa253b{color:#268BD2}.light .ct-c275b5{color:#2AA198}.light .ct-6561fc{color:#073642}.light .ct-3aa4d5{color:#268BD2}.light .ct-1476e6{color:#93A1A1}.light .ct-aa8127{color:#268BD2}.light .ct-b5872a{color:#073642}.light .ct-6af47c{color:#268BD2}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:GraphQL:Apollo Client pagination.md","_source":"content","_file":"GraphQL/Apollo Client pagination.md","_extension":"md"},{"_path":"/graphql/refresh-token-in-apollo-client","_dir":"graphql","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Refresh Token In Apollo Client","description":"If your GraphQL api needs token refresh option, you can pass custom fetch function for Apollo Client.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If your GraphQL api needs token refresh option, you can pass custom fetch function for Apollo Client."}]},{"type":"element","tag":"code","props":{"code":"export const createApolloClient = (\n url: string,\n logout: () => void,\n getAuthorizationData: () => { authorization: string },\n refreshToken: () => Promise<\n { accessToken: string; refreshToken: string } | undefined\n >,\n) =>\n new ApolloClientBase({\n // ...other options\n link: ApolloLink.from([\n // ...other options\n setContext(async (_, { headers }) => {\n return {\n headers: {\n ...headers,\n ...getAuthorizationData(),\n },\n };\n }),\n new HttpLink({\n uri: url,\n fetch: fetchWithTokenRefresh(logout, refreshToken),\n }),\n ]),\n });\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export const createApolloClient = (\n url: string,\n logout: () => void,\n getAuthorizationData: () => { authorization: string },\n refreshToken: () => Promise<\n { accessToken: string; refreshToken: string } | undefined\n >,\n) =>\n new ApolloClientBase({\n // ...other options\n link: ApolloLink.from([\n // ...other options\n setContext(async (_, { headers }) => {\n return {\n headers: {\n ...headers,\n ...getAuthorizationData(),\n },\n };\n }),\n new HttpLink({\n uri: url,\n fetch: fetchWithTokenRefresh(logout, refreshToken),\n }),\n ]),\n });\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Custom fetch function for this request. You should tune "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"hasUnauthorizedError"}]},{"type":"text","value":" and\n"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"isRefreshRequestOptions"}]},{"type":"text","value":" to match your api."}]},{"type":"element","tag":"code","props":{"code":"/** Global singleton for refreshing promise */\nlet refreshingPromise: Promise<string> | null = null;\n\n/** Checks if GraphQl errors has unauthenticated error */\nconst hasUnauthorizedError = (errors: Array<{ code?: ErrorCode }>): boolean =>\n Array.isArray(errors) &&\n errors.some(error => {\n return error.status === 401; // Distinguish unauthorized error here\n });\n\n/** Detects if customFetch is sending refresh request */\nconst isRefreshRequestOptions = (options: RequestInit) => {\n try {\n const body = JSON.parse(options?.body as string);\n return body.operationName === 'RefreshToken';\n } catch (e) {\n return false;\n }\n};\n\n/** fetchWithTokenRefresh is a custom fetch function with token refresh for apollo */\nexport const fetchWithTokenRefresh =\n (\n logout: () => void,\n refreshToken: () => Promise<\n { accessToken: string; refreshToken: string } | undefined\n >,\n ) =>\n async (uri: string, options: RequestInit): Promise<Response> => {\n // already refreshing token, wait for it and then use refreshed token\n // or use empty authorization if refreshing failed\n if (\n !isRefreshRequestOptions(options) &&\n refreshingPromise &&\n (options.headers as Record<string, string>)?.authorization\n ) {\n const newAccessToken = await refreshingPromise\n .catch(() => {\n // refreshing token from other request failed, retry without authorization\n return '';\n });\n \n options.headers = {\n ...(options.headers || {}),\n authorization: newAccessToken,\n };\n }\n\n return fetch(uri, options).then(async response => {\n const text = await response.text();\n const json = JSON.parse(text);\n\n // check for unauthorized errors, if not present, just return result\n if (\n isRefreshRequestOptions(options) ||\n !json?.errors ||\n !Array.isArray(json.errors) ||\n !hasUnauthorizedError(json.errors)\n ) {\n return {\n ...response,\n ok: true,\n json: async () =>\n new Promise<unknown>(resolve => {\n resolve(json);\n }),\n text: async () =>\n new Promise<string>(resolve => {\n resolve(text);\n }),\n };\n }\n\n // If unauthorized, refresh token and try again\n if (!refreshingPromise) {\n refreshingPromise = refreshToken()\n .then(async (tokens): Promise<string> => {\n refreshingPromise = null;\n\n if (!tokens?.accessToken) {\n throw new Error('Session expired');\n }\n\n return tokens?.accessToken;\n })\n .catch(() => {\n refreshingPromise = null;\n\n // can't refresh token. logging out\n logout();\n throw new Error('Session expired');\n });\n }\n\n // success or any non-auth error\n return refreshingPromise\n .then(async (newAccessToken: string) => {\n // wait for other request's refreshing query to finish, when retry\n\n return fetch(uri, {\n ...options,\n headers: {\n ...(options.headers || {}),\n authorization: newAccessToken,\n },\n });\n })\n .catch(async () => {\n // refreshing token from other request failed, retry without authorization\n\n return fetch(uri, {\n ...options,\n headers: {\n ...(options.headers || {}),\n authorization: '',\n },\n });\n });\n });\n };\n\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"/** Global singleton for refreshing promise */\nlet refreshingPromise: Promise<string> | null = null;\n\n/** Checks if GraphQl errors has unauthenticated error */\nconst hasUnauthorizedError = (errors: Array<{ code?: ErrorCode }>): boolean =>\n Array.isArray(errors) &&\n errors.some(error => {\n return error.status === 401; // Distinguish unauthorized error here\n });\n\n/** Detects if customFetch is sending refresh request */\nconst isRefreshRequestOptions = (options: RequestInit) => {\n try {\n const body = JSON.parse(options?.body as string);\n return body.operationName === 'RefreshToken';\n } catch (e) {\n return false;\n }\n};\n\n/** fetchWithTokenRefresh is a custom fetch function with token refresh for apollo */\nexport const fetchWithTokenRefresh =\n (\n logout: () => void,\n refreshToken: () => Promise<\n { accessToken: string; refreshToken: string } | undefined\n >,\n ) =>\n async (uri: string, options: RequestInit): Promise<Response> => {\n // already refreshing token, wait for it and then use refreshed token\n // or use empty authorization if refreshing failed\n if (\n !isRefreshRequestOptions(options) &&\n refreshingPromise &&\n (options.headers as Record<string, string>)?.authorization\n ) {\n const newAccessToken = await refreshingPromise\n .catch(() => {\n // refreshing token from other request failed, retry without authorization\n return '';\n });\n \n options.headers = {\n ...(options.headers || {}),\n authorization: newAccessToken,\n };\n }\n\n return fetch(uri, options).then(async response => {\n const text = await response.text();\n const json = JSON.parse(text);\n\n // check for unauthorized errors, if not present, just return result\n if (\n isRefreshRequestOptions(options) ||\n !json?.errors ||\n !Array.isArray(json.errors) ||\n !hasUnauthorizedError(json.errors)\n ) {\n return {\n ...response,\n ok: true,\n json: async () =>\n new Promise<unknown>(resolve => {\n resolve(json);\n }),\n text: async () =>\n new Promise<string>(resolve => {\n resolve(text);\n }),\n };\n }\n\n // If unauthorized, refresh token and try again\n if (!refreshingPromise) {\n refreshingPromise = refreshToken()\n .then(async (tokens): Promise<string> => {\n refreshingPromise = null;\n\n if (!tokens?.accessToken) {\n throw new Error('Session expired');\n }\n\n return tokens?.accessToken;\n })\n .catch(() => {\n refreshingPromise = null;\n\n // can't refresh token. logging out\n logout();\n throw new Error('Session expired');\n });\n }\n\n // success or any non-auth error\n return refreshingPromise\n .then(async (newAccessToken: string) => {\n // wait for other request's refreshing query to finish, when retry\n\n return fetch(uri, {\n ...options,\n headers: {\n ...(options.headers || {}),\n authorization: newAccessToken,\n },\n });\n })\n .catch(async () => {\n // refreshing token from other request failed, retry without authorization\n\n return fetch(uri, {\n ...options,\n headers: {\n ...(options.headers || {}),\n authorization: '',\n },\n });\n });\n });\n };\n\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If your GraphQL api needs token refresh option, you can pass custom fetch function for Apollo Client."}]},{"type":"element","tag":"code","props":{"code":"export const createApolloClient = (\n url: string,\n logout: () => void,\n getAuthorizationData: () => { authorization: string },\n refreshToken: () => Promise<\n { accessToken: string; refreshToken: string } | undefined\n >,\n) =>\n new ApolloClientBase({\n // ...other options\n link: ApolloLink.from([\n // ...other options\n setContext(async (_, { headers }) => {\n return {\n headers: {\n ...headers,\n ...getAuthorizationData(),\n },\n };\n }),\n new HttpLink({\n uri: url,\n fetch: fetchWithTokenRefresh(logout, refreshToken),\n }),\n ]),\n });\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"createApolloClient"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8a16f8"},"children":[{"type":"text","value":"url"}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-51c055"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b5b795"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-95749a"},"children":[{"type":"text","value":"getAuthorizationData"}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-74652a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-8a16f8"},"children":[{"type":"text","value":"authorization"}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-51c055"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"refreshToken"}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-21f98f"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"<"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-8a16f8"},"children":[{"type":"text","value":"accessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-51c055"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":"; "}]},{"type":"element","tag":"span","props":{"class":"ct-8a16f8"},"children":[{"type":"text","value":"refreshToken"}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-51c055"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-51c055"},"children":[{"type":"text","value":"undefined"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" >,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"=>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"ApolloClientBase"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b7707f"},"children":[{"type":"text","value":"// ...other options"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" link: "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"ApolloLink"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"(["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b7707f"},"children":[{"type":"text","value":"// ...other options"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-95749a"},"children":[{"type":"text","value":"setContext"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-74652a"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-8a16f8"},"children":[{"type":"text","value":"_"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":", { "}]},{"type":"element","tag":"span","props":{"class":"ct-8a16f8"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" }) "}]},{"type":"element","tag":"span","props":{"class":"ct-74652a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" headers: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"getAuthorizationData"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"(),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"HttpLink"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" uri: "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"url"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" fetch: "}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"fetchWithTokenRefresh"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"refreshToken"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" ]),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" });"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Custom fetch function for this request. You should tune "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"hasUnauthorizedError"}]},{"type":"text","value":" and\n"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"isRefreshRequestOptions"}]},{"type":"text","value":" to match your api."}]},{"type":"element","tag":"code","props":{"code":"/** Global singleton for refreshing promise */\nlet refreshingPromise: Promise<string> | null = null;\n\n/** Checks if GraphQl errors has unauthenticated error */\nconst hasUnauthorizedError = (errors: Array<{ code?: ErrorCode }>): boolean =>\n Array.isArray(errors) &&\n errors.some(error => {\n return error.status === 401; // Distinguish unauthorized error here\n });\n\n/** Detects if customFetch is sending refresh request */\nconst isRefreshRequestOptions = (options: RequestInit) => {\n try {\n const body = JSON.parse(options?.body as string);\n return body.operationName === 'RefreshToken';\n } catch (e) {\n return false;\n }\n};\n\n/** fetchWithTokenRefresh is a custom fetch function with token refresh for apollo */\nexport const fetchWithTokenRefresh =\n (\n logout: () => void,\n refreshToken: () => Promise<\n { accessToken: string; refreshToken: string } | undefined\n >,\n ) =>\n async (uri: string, options: RequestInit): Promise<Response> => {\n // already refreshing token, wait for it and then use refreshed token\n // or use empty authorization if refreshing failed\n if (\n !isRefreshRequestOptions(options) &&\n refreshingPromise &&\n (options.headers as Record<string, string>)?.authorization\n ) {\n const newAccessToken = await refreshingPromise\n .catch(() => {\n // refreshing token from other request failed, retry without authorization\n return '';\n });\n \n options.headers = {\n ...(options.headers || {}),\n authorization: newAccessToken,\n };\n }\n\n return fetch(uri, options).then(async response => {\n const text = await response.text();\n const json = JSON.parse(text);\n\n // check for unauthorized errors, if not present, just return result\n if (\n isRefreshRequestOptions(options) ||\n !json?.errors ||\n !Array.isArray(json.errors) ||\n !hasUnauthorizedError(json.errors)\n ) {\n return {\n ...response,\n ok: true,\n json: async () =>\n new Promise<unknown>(resolve => {\n resolve(json);\n }),\n text: async () =>\n new Promise<string>(resolve => {\n resolve(text);\n }),\n };\n }\n\n // If unauthorized, refresh token and try again\n if (!refreshingPromise) {\n refreshingPromise = refreshToken()\n .then(async (tokens): Promise<string> => {\n refreshingPromise = null;\n\n if (!tokens?.accessToken) {\n throw new Error('Session expired');\n }\n\n return tokens?.accessToken;\n })\n .catch(() => {\n refreshingPromise = null;\n\n // can't refresh token. logging out\n logout();\n throw new Error('Session expired');\n });\n }\n\n // success or any non-auth error\n return refreshingPromise\n .then(async (newAccessToken: string) => {\n // wait for other request's refreshing query to finish, when retry\n\n return fetch(uri, {\n ...options,\n headers: {\n ...(options.headers || {}),\n authorization: newAccessToken,\n },\n });\n })\n .catch(async () => {\n // refreshing token from other request failed, retry without authorization\n\n return fetch(uri, {\n ...options,\n headers: {\n ...(options.headers || {}),\n authorization: '',\n },\n });\n });\n });\n };\n\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b7707f"},"children":[{"type":"text","value":"/** Global singleton for refreshing promise */"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"refreshingPromise"}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-21f98f"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b5b795"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b5b795"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c909fd"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b7707f"},"children":[{"type":"text","value":"/** Checks if GraphQl errors has unauthenticated error */"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-74652a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-95749a"},"children":[{"type":"text","value":"hasUnauthorizedError"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-8a16f8"},"children":[{"type":"text","value":"errors"}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-998e75"},"children":[{"type":"text","value":"Array"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":"<{ "}]},{"type":"element","tag":"span","props":{"class":"ct-8a16f8"},"children":[{"type":"text","value":"code"}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":"?:"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-998e75"},"children":[{"type":"text","value":"ErrorCode"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" }>)"}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74652a"},"children":[{"type":"text","value":"=>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b5b795"},"children":[{"type":"text","value":"Array"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"isArray"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"errors"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"&&"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"errors"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"some"}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"status"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"==="}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dd29d5"},"children":[{"type":"text","value":"401"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"; "}]},{"type":"element","tag":"span","props":{"class":"ct-b7707f"},"children":[{"type":"text","value":"// Distinguish unauthorized error here"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b7707f"},"children":[{"type":"text","value":"/** Detects if customFetch is sending refresh request */"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-74652a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-95749a"},"children":[{"type":"text","value":"isRefreshRequestOptions"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-8a16f8"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-998e75"},"children":[{"type":"text","value":"RequestInit"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-74652a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"try"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-53ce96"},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b5b795"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"operationName"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"==="}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1451a3"},"children":[{"type":"text","value":"'RefreshToken'"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"e"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c909fd"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b7707f"},"children":[{"type":"text","value":"/** fetchWithTokenRefresh is a custom fetch function with token refresh for apollo */"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-53ce96"},"children":[{"type":"text","value":"fetchWithTokenRefresh"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"="}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":": () "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"refreshToken"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":": () "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" { accessToken: "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"; "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"refreshToken"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c909fd"},"children":[{"type":"text","value":"undefined"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" ) "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"=>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74652a"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-8a16f8"},"children":[{"type":"text","value":"uri"}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-51c055"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-8a16f8"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-998e75"},"children":[{"type":"text","value":"RequestInit"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-998e75"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-998e75"},"children":[{"type":"text","value":"Response"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-74652a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b7707f"},"children":[{"type":"text","value":"// already refreshing token, wait for it and then use refreshed token"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b7707f"},"children":[{"type":"text","value":"// or use empty authorization if refreshing failed"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"isRefreshRequestOptions"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"&&"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"refreshingPromise"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"&&"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"as"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-21f98f"},"children":[{"type":"text","value":"Record"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b5b795"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b5b795"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":">)?."}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"authorization"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" ) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-53ce96"},"children":[{"type":"text","value":"newAccessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"refreshingPromise"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b7707f"},"children":[{"type":"text","value":"// refreshing token from other request failed, retry without authorization"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1451a3"},"children":[{"type":"text","value":"''"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" {}),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" authorization: "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"newAccessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"fetch"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"uri"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"then"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"async"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-53ce96"},"children":[{"type":"text","value":"text"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"response"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"text"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-53ce96"},"children":[{"type":"text","value":"json"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"="}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b7707f"},"children":[{"type":"text","value":"// check for unauthorized errors, if not present, just return result"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"isRefreshRequestOptions"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"||"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"json"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"errors"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"||"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"hasUnauthorizedError"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"json"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"errors"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" ) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"response"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" ok: "}]},{"type":"element","tag":"span","props":{"class":"ct-c909fd"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"json"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"=>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-51c055"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-51c055"},"children":[{"type":"text","value":"unknown"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":">("}]},{"type":"element","tag":"span","props":{"class":"ct-8a16f8"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74652a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"json"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"text"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"=>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-51c055"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-51c055"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":">("}]},{"type":"element","tag":"span","props":{"class":"ct-8a16f8"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74652a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"text"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b7707f"},"children":[{"type":"text","value":"// If unauthorized, refresh token and try again"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"refreshingPromise"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"refreshingPromise"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"refreshToken"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-95749a"},"children":[{"type":"text","value":"then"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-74652a"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-8a16f8"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-998e75"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-51c055"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-74652a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"refreshingPromise"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c909fd"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"accessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b5b795"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-1451a3"},"children":[{"type":"text","value":"'Session expired'"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"accessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"refreshingPromise"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c909fd"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b7707f"},"children":[{"type":"text","value":"// can't refresh token. logging out"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b5b795"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-1451a3"},"children":[{"type":"text","value":"'Session expired'"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b7707f"},"children":[{"type":"text","value":"// success or any non-auth error"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"refreshingPromise"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-95749a"},"children":[{"type":"text","value":"then"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-74652a"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-8a16f8"},"children":[{"type":"text","value":"newAccessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-51c055"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-74652a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b7707f"},"children":[{"type":"text","value":"// wait for other request's refreshing query to finish, when retry"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"fetch"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"uri"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":", {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" headers: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" {}),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" authorization: "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"newAccessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b7707f"},"children":[{"type":"text","value":"// refreshing token from other request failed, retry without authorization"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"fetch"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"uri"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":", {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" headers: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" {}),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" authorization: "}]},{"type":"element","tag":"span","props":{"class":"ct-1451a3"},"children":[{"type":"text","value":"''"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" };"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-1451a3{color:#A5D6FF}.ct-53ce96{color:#79C0FF}.ct-dd29d5{color:#79C0FF}.ct-998e75{color:#FFA657}.ct-c909fd{color:#79C0FF}.ct-e74100{color:#C9D1D9}.ct-b7707f{color:#8B949E}.ct-21f98f{color:#FFA657}.ct-74652a{color:#FF7B72}.ct-95749a{color:#D2A8FF}.ct-b5b795{color:#79C0FF}.ct-51c055{color:#79C0FF}.ct-75053d{color:#FF7B72}.ct-8a16f8{color:#FFA657}.ct-009fff{color:#C9D1D9}.ct-c3df2f{color:#D2A8FF}.ct-341544{color:#FF7B72}.ct-43d640{color:#C9D1D9}.ct-3b9dab{color:#FF7B72}.light .ct-3b9dab{color:#859900}.light .ct-43d640{color:#657B83}.light .ct-341544{color:#073642}.light .ct-c3df2f{color:#268BD2}.light .ct-009fff{color:#657B83}.light .ct-8a16f8{color:#657B83}.light .ct-75053d{color:#859900}.light .ct-51c055{color:#859900}.light .ct-b5b795{color:#859900}.light .ct-95749a{color:#268BD2}.light .ct-74652a{color:#073642}.light .ct-21f98f{color:#268BD2}.light .ct-b7707f{color:#93A1A1}.light .ct-e74100{color:#268BD2}.light .ct-c909fd{color:#B58900}.light .ct-998e75{color:#268BD2}.light .ct-dd29d5{color:#D33682}.light .ct-53ce96{color:#268BD2}.light .ct-1451a3{color:#2AA198}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:GraphQL:Refresh token in Apollo client.md","_source":"content","_file":"GraphQL/Refresh token in Apollo client.md","_extension":"md"},{"_path":"/linux/find-out-who-uses-swap","_dir":"linux","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Find Out Who Uses Swap","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"code","props":{"code":"for file in /proc/*/status ; do awk '/VmSwap|Name/{printf $2 \" \" $3}END{ print \"\"}' $file; done | sort -k 2 -n -r | less\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"for file in /proc/*/status ; do awk '/VmSwap|Name/{printf $2 \" \" $3}END{ print \"\"}' $file; done | sort -k 2 -n -r | less\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"code","props":{"code":"for file in /proc/*/status ; do awk '/VmSwap|Name/{printf $2 \" \" $3}END{ print \"\"}' $file; done | sort -k 2 -n -r | less\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0eb2c3"},"children":[{"type":"text","value":"for"}]},{"type":"element","tag":"span","props":{"class":"ct-30c242"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a91e4d"},"children":[{"type":"text","value":"file"}]},{"type":"element","tag":"span","props":{"class":"ct-30c242"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0eb2c3"},"children":[{"type":"text","value":"in"}]},{"type":"element","tag":"span","props":{"class":"ct-30c242"},"children":[{"type":"text","value":" /proc/"}]},{"type":"element","tag":"span","props":{"class":"ct-0eb2c3"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-30c242"},"children":[{"type":"text","value":"/status "}]},{"type":"element","tag":"span","props":{"class":"ct-0eb2c3"},"children":[{"type":"text","value":";"}]},{"type":"element","tag":"span","props":{"class":"ct-30c242"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0eb2c3"},"children":[{"type":"text","value":"do"}]},{"type":"element","tag":"span","props":{"class":"ct-30c242"},"children":[{"type":"text","value":" awk "}]},{"type":"element","tag":"span","props":{"class":"ct-812a0c"},"children":[{"type":"text","value":"'/VmSwap|Name/{printf $2 \" \" $3}END{ print \"\"}'"}]},{"type":"element","tag":"span","props":{"class":"ct-30c242"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0eb2c3"},"children":[{"type":"text","value":"done"}]},{"type":"element","tag":"span","props":{"class":"ct-30c242"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0eb2c3"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-30c242"},"children":[{"type":"text","value":" sort -k 2 -n -r "}]},{"type":"element","tag":"span","props":{"class":"ct-0eb2c3"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-30c242"},"children":[{"type":"text","value":" less"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-812a0c{color:#A5D6FF}.ct-a91e4d{color:#C9D1D9}.ct-30c242{color:#C9D1D9}.ct-0eb2c3{color:#FF7B72}.light .ct-0eb2c3{color:#859900}.light .ct-30c242{color:#657B83}.light .ct-a91e4d{color:#268BD2}.light .ct-812a0c{color:#2AA198}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Linux:Find out who uses swap.md","_source":"content","_file":"Linux/Find out who uses swap.md","_extension":"md"},{"_path":"/linux/fixing-lagging-usb-headphones","_dir":"linux","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Fixing Lagging USB Headphones","description":"When receiving messages like this:","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When receiving messages like this:"}]},{"type":"element","tag":"code","props":{"code":"Bluetooth: hci0: ACL packet for unknown connection handle 256\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"Bluetooth: hci0: ACL packet for unknown connection handle 256\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Create "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/modprobe.d/disable_btusb_autosuspend.conf"}]},{"type":"text","value":" with following content:"}]},{"type":"element","tag":"code","props":{"code":"# Disable autosuspend for btusb to make the bluetooth keyboard work again\noptions btusb enable_autosuspend=n\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"# Disable autosuspend for btusb to make the bluetooth keyboard work again\noptions btusb enable_autosuspend=n\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then run"}]},{"type":"element","tag":"code","props":{"code":"mkinitcpio -P\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"mkinitcpio -P\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Reboot and debug with"}]},{"type":"element","tag":"code","props":{"code":"$ systool -v -m btusb | grep autosuspend\n enable_autosuspend = \"N\" # should be \"N\"\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"$ systool -v -m btusb | grep autosuspend\n enable_autosuspend = \"N\" # should be \"N\"\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"also"},"children":[{"type":"text","value":"Also"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"That could be either "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"btusb.enable_autosuspend=n"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"usbcore.autosuspend=-1"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"TLP has settings for BTUSB, check it to exclude your device from autosuspend"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"There's a guy on ubuntuforums, who wrote "},{"type":"element","tag":"a","props":{"href":"https://ubuntuforums.org/showthread.php?t=2159645&page=6&p=12926730#post12926730","rel":["nofollow"]},"children":[{"type":"text","value":"solution"}]},{"type":"text","value":", which disables autosuspend manually"}]}]},{"type":"element","tag":"h2","props":{"id":"refs"},"children":[{"type":"text","value":"Refs"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://bbs.archlinux.org/viewtopic.php?id=236479","rel":["nofollow"]},"children":[{"type":"text","value":"Bluetooth keyboard disconnects randomly"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://bbs.archlinux.org/viewtopic.php?id=275962","rel":["nofollow"]},"children":[{"type":"text","value":"Bluetooth keeps turning off"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://wiki.archlinux.org/title/Bluetooth#Device_connects,_then_disconnects_after_a_few_moments","rel":["nofollow"]},"children":[{"type":"text","value":"ArchWiki: Device connects, then disconnects after a few moments"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://ubuntuforums.org/showthread.php?t=2159645&page=6&p=12926730#post12926730","rel":["nofollow"]},"children":[{"type":"text","value":"Said solution with a script in rc.local"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When receiving messages like this:"}]},{"type":"element","tag":"code","props":{"code":"Bluetooth: hci0: ACL packet for unknown connection handle 256\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e14c6"},"children":[{"type":"text","value":"Bluetooth: hci0: ACL packet "}]},{"type":"element","tag":"span","props":{"class":"ct-e92459"},"children":[{"type":"text","value":"for"}]},{"type":"element","tag":"span","props":{"class":"ct-8e14c6"},"children":[{"type":"text","value":" unknown connection handle 256"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Create "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/modprobe.d/disable_btusb_autosuspend.conf"}]},{"type":"text","value":" with following content:"}]},{"type":"element","tag":"code","props":{"code":"# Disable autosuspend for btusb to make the bluetooth keyboard work again\noptions btusb enable_autosuspend=n\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-83708b"},"children":[{"type":"text","value":"# Disable autosuspend for btusb to make the bluetooth keyboard work again"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e14c6"},"children":[{"type":"text","value":"options btusb enable_autosuspend=n"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then run"}]},{"type":"element","tag":"code","props":{"code":"mkinitcpio -P\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e14c6"},"children":[{"type":"text","value":"mkinitcpio -P"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Reboot and debug with"}]},{"type":"element","tag":"code","props":{"code":"$ systool -v -m btusb | grep autosuspend\n enable_autosuspend = \"N\" # should be \"N\"\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e14c6"},"children":[{"type":"text","value":"$ systool -v -m btusb "}]},{"type":"element","tag":"span","props":{"class":"ct-e92459"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-8e14c6"},"children":[{"type":"text","value":" grep autosuspend"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e14c6"},"children":[{"type":"text","value":" enable_autosuspend = "}]},{"type":"element","tag":"span","props":{"class":"ct-511c36"},"children":[{"type":"text","value":"\"N\""}]},{"type":"element","tag":"span","props":{"class":"ct-8e14c6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-83708b"},"children":[{"type":"text","value":"# should be \"N\""}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"also"},"children":[{"type":"text","value":"Also"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"That could be either "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"btusb.enable_autosuspend=n"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"usbcore.autosuspend=-1"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"TLP has settings for BTUSB, check it to exclude your device from autosuspend"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"There's a guy on ubuntuforums, who wrote "},{"type":"element","tag":"a","props":{"href":"https://ubuntuforums.org/showthread.php?t=2159645&page=6&p=12926730#post12926730","rel":["nofollow"]},"children":[{"type":"text","value":"solution"}]},{"type":"text","value":", which disables autosuspend manually"}]}]},{"type":"element","tag":"h2","props":{"id":"refs"},"children":[{"type":"text","value":"Refs"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://bbs.archlinux.org/viewtopic.php?id=236479","rel":["nofollow"]},"children":[{"type":"text","value":"Bluetooth keyboard disconnects randomly"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://bbs.archlinux.org/viewtopic.php?id=275962","rel":["nofollow"]},"children":[{"type":"text","value":"Bluetooth keeps turning off"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://wiki.archlinux.org/title/Bluetooth#Device_connects,_then_disconnects_after_a_few_moments","rel":["nofollow"]},"children":[{"type":"text","value":"ArchWiki: Device connects, then disconnects after a few moments"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://ubuntuforums.org/showthread.php?t=2159645&page=6&p=12926730#post12926730","rel":["nofollow"]},"children":[{"type":"text","value":"Said solution with a script in rc.local"}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-511c36{color:#A5D6FF}.ct-83708b{color:#8B949E}.ct-e92459{color:#FF7B72}.ct-8e14c6{color:#C9D1D9}.light .ct-8e14c6{color:#657B83}.light .ct-e92459{color:#859900}.light .ct-83708b{color:#93A1A1}.light .ct-511c36{color:#2AA198}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"also","depth":2,"text":"Also"},{"id":"refs","depth":2,"text":"Refs"}]}},"_type":"markdown","_id":"content:Linux:Fixing lagging USB Headphones.md","_source":"content","_file":"Linux/Fixing lagging USB Headphones.md","_extension":"md"},{"_path":"/linux/gitea-for-git-hosting","_dir":"linux","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Gitea For Git Hosting","description":"Self-hosted #git repositories with gitea and #docker.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Self-hosted #git repositories with "},{"type":"element","tag":"a","props":{"href":"https://gitea.io/ru-ru/","rel":["nofollow"]},"children":[{"type":"text","value":"gitea"}]},{"type":"text","value":" and #docker."}]},{"type":"element","tag":"h2","props":{"id":"setting-up-with-docker-compose"},"children":[{"type":"text","value":"Setting up with docker-compose"}]},{"type":"element","tag":"code","props":{"code":"version: \"3\"\n\nnetworks:\n gitea:\n external: false\nservices:\n server:\n image: gitea/gitea:latest\n container_name: gitea\n environment:\n - USER_UID=1000\n - USER_GID=1000\n restart: always\n networks:\n - gitea\n volumes:\n - ./var/lib/gitea:/data\n - ./etc/gitea:/etc/gitea\n - /etc/timezone:/etc/timezone:ro\n - /etc/localtime:/etc/localtime:ro\n ports:\n - \"3000:3000\"\n - \"222:22\"\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"version: \"3\"\n\nnetworks:\n gitea:\n external: false\nservices:\n server:\n image: gitea/gitea:latest\n container_name: gitea\n environment:\n - USER_UID=1000\n - USER_GID=1000\n restart: always\n networks:\n - gitea\n volumes:\n - ./var/lib/gitea:/data\n - ./etc/gitea:/etc/gitea\n - /etc/timezone:/etc/timezone:ro\n - /etc/localtime:/etc/localtime:ro\n ports:\n - \"3000:3000\"\n - \"222:22\"\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Self-hosted #git repositories with "},{"type":"element","tag":"a","props":{"href":"https://gitea.io/ru-ru/","rel":["nofollow"]},"children":[{"type":"text","value":"gitea"}]},{"type":"text","value":" and #docker."}]},{"type":"element","tag":"h2","props":{"id":"setting-up-with-docker-compose"},"children":[{"type":"text","value":"Setting up with docker-compose"}]},{"type":"element","tag":"code","props":{"code":"version: \"3\"\n\nnetworks:\n gitea:\n external: false\nservices:\n server:\n image: gitea/gitea:latest\n container_name: gitea\n environment:\n - USER_UID=1000\n - USER_GID=1000\n restart: always\n networks:\n - gitea\n volumes:\n - ./var/lib/gitea:/data\n - ./etc/gitea:/etc/gitea\n - /etc/timezone:/etc/timezone:ro\n - /etc/localtime:/etc/localtime:ro\n ports:\n - \"3000:3000\"\n - \"222:22\"\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ef8381"},"children":[{"type":"text","value":"version"}]},{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-376b56"},"children":[{"type":"text","value":"\"3\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ef8381"},"children":[{"type":"text","value":"networks"}]},{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ef8381"},"children":[{"type":"text","value":"gitea"}]},{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ef8381"},"children":[{"type":"text","value":"external"}]},{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-d30e7c"},"children":[{"type":"text","value":"false"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ef8381"},"children":[{"type":"text","value":"services"}]},{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ef8381"},"children":[{"type":"text","value":"server"}]},{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ef8381"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-376b56"},"children":[{"type":"text","value":"gitea/gitea:latest"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ef8381"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-376b56"},"children":[{"type":"text","value":"gitea"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ef8381"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-376b56"},"children":[{"type":"text","value":"USER_UID=1000"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-376b56"},"children":[{"type":"text","value":"USER_GID=1000"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ef8381"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-376b56"},"children":[{"type":"text","value":"always"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ef8381"},"children":[{"type":"text","value":"networks"}]},{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-376b56"},"children":[{"type":"text","value":"gitea"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ef8381"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-376b56"},"children":[{"type":"text","value":"./var/lib/gitea:/data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-376b56"},"children":[{"type":"text","value":"./etc/gitea:/etc/gitea"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-376b56"},"children":[{"type":"text","value":"/etc/timezone:/etc/timezone:ro"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-376b56"},"children":[{"type":"text","value":"/etc/localtime:/etc/localtime:ro"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ef8381"},"children":[{"type":"text","value":"ports"}]},{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-376b56"},"children":[{"type":"text","value":"\"3000:3000\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-376b56"},"children":[{"type":"text","value":"\"222:22\""}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-d30e7c{color:#79C0FF}.ct-376b56{color:#A5D6FF}.ct-fe8fa5{color:#C9D1D9}.ct-ef8381{color:#7EE787}.light .ct-ef8381{color:#268BD2}.light .ct-fe8fa5{color:#657B83}.light .ct-376b56{color:#2AA198}.light .ct-d30e7c{color:#B58900}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"setting-up-with-docker-compose","depth":2,"text":"Setting up with docker-compose"}]}},"_type":"markdown","_id":"content:Linux:Gitea for git hosting.md","_source":"content","_file":"Linux/Gitea for git hosting.md","_extension":"md"},{"_path":"/linux/google-photos-alternative-with-photoprism","_dir":"linux","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Google Photos Alternative With Photoprism","description":"Photo Prism is a free alternative to Google photos, can be set up with #docker.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://photoprism.app/","rel":["nofollow"]},"children":[{"type":"text","value":"Photo Prism"}]},{"type":"text","value":" is a free alternative to Google photos, can be set up with #docker."}]},{"type":"element","tag":"h2","props":{"id":"docker-compose-file-to-run-it"},"children":[{"type":"text","value":"Docker compose file to run it"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check out current "},{"type":"element","tag":"a","props":{"href":"https://dl.photoprism.app/docker/docker-compose.yml","rel":["nofollow"]},"children":[{"type":"text","value":"example"}]},{"type":"text","value":" at photoprism's "},{"type":"element","tag":"a","props":{"href":"https://docs.photoprism.app/getting-started/docker-compose/","rel":["nofollow"]},"children":[{"type":"text","value":"documentation"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"version: '3.5'\n\nservices:\n photoprism:\n container_name: photoprism__app\n image: photoprism/photoprism:latest\n depends_on:\n - mariadb\n restart: unless-stopped\n security_opt:\n - seccomp:unconfined\n - apparmor:unconfined\n ports:\n - 2342:2342 # HTTP port (host:container)\n environment:\n PHOTOPRISM_ADMIN_PASSWORD: \"password\"\n PHOTOPRISM_SITE_URL: \"https://service.url/\"\n PHOTOPRISM_ORIGINALS_LIMIT: 5000\n PHOTOPRISM_HTTP_COMPRESSION: \"gzip\"\n PHOTOPRISM_DEBUG: \"false\" \n PHOTOPRISM_PUBLIC: \"false\" \n PHOTOPRISM_READONLY: \"false\" \n PHOTOPRISM_EXPERIMENTAL: \"false\"\n PHOTOPRISM_DISABLE_CHOWN: \"false\"\n PHOTOPRISM_DISABLE_WEBDAV: \"false\" \n PHOTOPRISM_DISABLE_SETTINGS: \"false\"\n PHOTOPRISM_DISABLE_TENSORFLOW: \"false\"\n PHOTOPRISM_DISABLE_FACES: \"false\" \n PHOTOPRISM_DISABLE_CLASSIFICATION: \"false\"\n PHOTOPRISM_DARKTABLE_PRESETS: \"false\" \n PHOTOPRISM_DETECT_NSFW: \"false\" \n PHOTOPRISM_UPLOAD_NSFW: \"true\" \n PHOTOPRISM_DATABASE_DRIVER: \"mysql\" \n PHOTOPRISM_DATABASE_SERVER: \"mariadb:3306\"\n PHOTOPRISM_DATABASE_NAME: \"photoprism\" \n PHOTOPRISM_DATABASE_USER: \"root\" \n PHOTOPRISM_DATABASE_PASSWORD: \"insecure\" \n PHOTOPRISM_SITE_TITLE: \"PhotoPrism\"\n PHOTOPRISM_SITE_CAPTION: \"Browse Your Life\"\n PHOTOPRISM_SITE_DESCRIPTION: \"\"\n PHOTOPRISM_SITE_AUTHOR: \"\"\n HOME: \"/photoprism\"\n working_dir: \"/photoprism\"\n volumes:\n - \"./data/originals:/photoprism/originals\" \n - \"./data/imports:/photoprism/import\"\n - \"./data/storage:/photoprism/storage\"\n mariadb:\n container_name: photoprism__db\n restart: unless-stopped\n image: mariadb:10.6\n security_opt:\n - seccomp:unconfined\n - apparmor:unconfined\n command: mysqld --innodb-buffer-pool-size=128M --transaction-isolation=READ-COMMITTED --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci --max-connections=512 --innodb-rollback-on-timeout=OFF --innodb-lock-wait-timeout=120\n volumes:\n - \"./database:/var/lib/mysql\" # Important, don't remove\n environment:\n MYSQL_ROOT_PASSWORD: insecure\n MYSQL_DATABASE: photoprism\n MYSQL_USER: photoprism\n MYSQL_PASSWORD: insecure\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"version: '3.5'\n\nservices:\n photoprism:\n container_name: photoprism__app\n image: photoprism/photoprism:latest\n depends_on:\n - mariadb\n restart: unless-stopped\n security_opt:\n - seccomp:unconfined\n - apparmor:unconfined\n ports:\n - 2342:2342 # HTTP port (host:container)\n environment:\n PHOTOPRISM_ADMIN_PASSWORD: \"password\"\n PHOTOPRISM_SITE_URL: \"https://service.url/\"\n PHOTOPRISM_ORIGINALS_LIMIT: 5000\n PHOTOPRISM_HTTP_COMPRESSION: \"gzip\"\n PHOTOPRISM_DEBUG: \"false\" \n PHOTOPRISM_PUBLIC: \"false\" \n PHOTOPRISM_READONLY: \"false\" \n PHOTOPRISM_EXPERIMENTAL: \"false\"\n PHOTOPRISM_DISABLE_CHOWN: \"false\"\n PHOTOPRISM_DISABLE_WEBDAV: \"false\" \n PHOTOPRISM_DISABLE_SETTINGS: \"false\"\n PHOTOPRISM_DISABLE_TENSORFLOW: \"false\"\n PHOTOPRISM_DISABLE_FACES: \"false\" \n PHOTOPRISM_DISABLE_CLASSIFICATION: \"false\"\n PHOTOPRISM_DARKTABLE_PRESETS: \"false\" \n PHOTOPRISM_DETECT_NSFW: \"false\" \n PHOTOPRISM_UPLOAD_NSFW: \"true\" \n PHOTOPRISM_DATABASE_DRIVER: \"mysql\" \n PHOTOPRISM_DATABASE_SERVER: \"mariadb:3306\"\n PHOTOPRISM_DATABASE_NAME: \"photoprism\" \n PHOTOPRISM_DATABASE_USER: \"root\" \n PHOTOPRISM_DATABASE_PASSWORD: \"insecure\" \n PHOTOPRISM_SITE_TITLE: \"PhotoPrism\"\n PHOTOPRISM_SITE_CAPTION: \"Browse Your Life\"\n PHOTOPRISM_SITE_DESCRIPTION: \"\"\n PHOTOPRISM_SITE_AUTHOR: \"\"\n HOME: \"/photoprism\"\n working_dir: \"/photoprism\"\n volumes:\n - \"./data/originals:/photoprism/originals\" \n - \"./data/imports:/photoprism/import\"\n - \"./data/storage:/photoprism/storage\"\n mariadb:\n container_name: photoprism__db\n restart: unless-stopped\n image: mariadb:10.6\n security_opt:\n - seccomp:unconfined\n - apparmor:unconfined\n command: mysqld --innodb-buffer-pool-size=128M --transaction-isolation=READ-COMMITTED --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci --max-connections=512 --innodb-rollback-on-timeout=OFF --innodb-lock-wait-timeout=120\n volumes:\n - \"./database:/var/lib/mysql\" # Important, don't remove\n environment:\n MYSQL_ROOT_PASSWORD: insecure\n MYSQL_DATABASE: photoprism\n MYSQL_USER: photoprism\n MYSQL_PASSWORD: insecure\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://photoprism.app/","rel":["nofollow"]},"children":[{"type":"text","value":"Photo Prism"}]},{"type":"text","value":" is a free alternative to Google photos, can be set up with #docker."}]},{"type":"element","tag":"h2","props":{"id":"docker-compose-file-to-run-it"},"children":[{"type":"text","value":"Docker compose file to run it"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check out current "},{"type":"element","tag":"a","props":{"href":"https://dl.photoprism.app/docker/docker-compose.yml","rel":["nofollow"]},"children":[{"type":"text","value":"example"}]},{"type":"text","value":" at photoprism's "},{"type":"element","tag":"a","props":{"href":"https://docs.photoprism.app/getting-started/docker-compose/","rel":["nofollow"]},"children":[{"type":"text","value":"documentation"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"version: '3.5'\n\nservices:\n photoprism:\n container_name: photoprism__app\n image: photoprism/photoprism:latest\n depends_on:\n - mariadb\n restart: unless-stopped\n security_opt:\n - seccomp:unconfined\n - apparmor:unconfined\n ports:\n - 2342:2342 # HTTP port (host:container)\n environment:\n PHOTOPRISM_ADMIN_PASSWORD: \"password\"\n PHOTOPRISM_SITE_URL: \"https://service.url/\"\n PHOTOPRISM_ORIGINALS_LIMIT: 5000\n PHOTOPRISM_HTTP_COMPRESSION: \"gzip\"\n PHOTOPRISM_DEBUG: \"false\" \n PHOTOPRISM_PUBLIC: \"false\" \n PHOTOPRISM_READONLY: \"false\" \n PHOTOPRISM_EXPERIMENTAL: \"false\"\n PHOTOPRISM_DISABLE_CHOWN: \"false\"\n PHOTOPRISM_DISABLE_WEBDAV: \"false\" \n PHOTOPRISM_DISABLE_SETTINGS: \"false\"\n PHOTOPRISM_DISABLE_TENSORFLOW: \"false\"\n PHOTOPRISM_DISABLE_FACES: \"false\" \n PHOTOPRISM_DISABLE_CLASSIFICATION: \"false\"\n PHOTOPRISM_DARKTABLE_PRESETS: \"false\" \n PHOTOPRISM_DETECT_NSFW: \"false\" \n PHOTOPRISM_UPLOAD_NSFW: \"true\" \n PHOTOPRISM_DATABASE_DRIVER: \"mysql\" \n PHOTOPRISM_DATABASE_SERVER: \"mariadb:3306\"\n PHOTOPRISM_DATABASE_NAME: \"photoprism\" \n PHOTOPRISM_DATABASE_USER: \"root\" \n PHOTOPRISM_DATABASE_PASSWORD: \"insecure\" \n PHOTOPRISM_SITE_TITLE: \"PhotoPrism\"\n PHOTOPRISM_SITE_CAPTION: \"Browse Your Life\"\n PHOTOPRISM_SITE_DESCRIPTION: \"\"\n PHOTOPRISM_SITE_AUTHOR: \"\"\n HOME: \"/photoprism\"\n working_dir: \"/photoprism\"\n volumes:\n - \"./data/originals:/photoprism/originals\" \n - \"./data/imports:/photoprism/import\"\n - \"./data/storage:/photoprism/storage\"\n mariadb:\n container_name: photoprism__db\n restart: unless-stopped\n image: mariadb:10.6\n security_opt:\n - seccomp:unconfined\n - apparmor:unconfined\n command: mysqld --innodb-buffer-pool-size=128M --transaction-isolation=READ-COMMITTED --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci --max-connections=512 --innodb-rollback-on-timeout=OFF --innodb-lock-wait-timeout=120\n volumes:\n - \"./database:/var/lib/mysql\" # Important, don't remove\n environment:\n MYSQL_ROOT_PASSWORD: insecure\n MYSQL_DATABASE: photoprism\n MYSQL_USER: photoprism\n MYSQL_PASSWORD: insecure\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"version"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"'3.5'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"services"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"photoprism"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"photoprism__app"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"photoprism/photoprism:latest"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"depends_on"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"mariadb"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"unless-stopped"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"security_opt"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"seccomp:unconfined"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"apparmor:unconfined"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"ports"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"2342:2342"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-16272c"},"children":[{"type":"text","value":"# HTTP port (host:container)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_ADMIN_PASSWORD"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"password\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_SITE_URL"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"https://service.url/\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_ORIGINALS_LIMIT"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-700af9"},"children":[{"type":"text","value":"5000"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_HTTP_COMPRESSION"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"gzip\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_DEBUG"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_PUBLIC"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_READONLY"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_EXPERIMENTAL"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"false\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_DISABLE_CHOWN"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"false\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_DISABLE_WEBDAV"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_DISABLE_SETTINGS"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"false\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_DISABLE_TENSORFLOW"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"false\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_DISABLE_FACES"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_DISABLE_CLASSIFICATION"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"false\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_DARKTABLE_PRESETS"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_DETECT_NSFW"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_UPLOAD_NSFW"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"true\""}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_DATABASE_DRIVER"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"mysql\""}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_DATABASE_SERVER"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"mariadb:3306\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_DATABASE_NAME"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"photoprism\""}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_DATABASE_USER"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"root\""}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_DATABASE_PASSWORD"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"insecure\""}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_SITE_TITLE"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"PhotoPrism\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_SITE_CAPTION"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"Browse Your Life\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_SITE_DESCRIPTION"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_SITE_AUTHOR"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"HOME"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"/photoprism\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"working_dir"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"/photoprism\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"./data/originals:/photoprism/originals\""}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"./data/imports:/photoprism/import\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"./data/storage:/photoprism/storage\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"mariadb"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"photoprism__db"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"unless-stopped"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"mariadb:10.6"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"security_opt"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"seccomp:unconfined"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"apparmor:unconfined"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"command"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"mysqld --innodb-buffer-pool-size=128M --transaction-isolation=READ-COMMITTED --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci --max-connections=512 --innodb-rollback-on-timeout=OFF --innodb-lock-wait-timeout=120"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"./database:/var/lib/mysql\""}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-16272c"},"children":[{"type":"text","value":"# Important, don't remove"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"MYSQL_ROOT_PASSWORD"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"insecure"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"MYSQL_DATABASE"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"photoprism"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"MYSQL_USER"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"photoprism"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"MYSQL_PASSWORD"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"insecure"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-700af9{color:#79C0FF}.ct-16272c{color:#8B949E}.ct-afc238{color:#A5D6FF}.ct-a7ea58{color:#C9D1D9}.ct-085d59{color:#7EE787}.light .ct-085d59{color:#268BD2}.light .ct-a7ea58{color:#657B83}.light .ct-afc238{color:#2AA198}.light .ct-16272c{color:#93A1A1}.light .ct-700af9{color:#D33682}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"docker-compose-file-to-run-it","depth":2,"text":"Docker compose file to run it"}]}},"_type":"markdown","_id":"content:Linux:Google photos alternative with Photoprism.md","_source":"content","_file":"Linux/Google photos alternative with Photoprism.md","_extension":"md"},{"_path":"/linux/linux-on-asus-zenbook-um3402-ya","_dir":"linux","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Linux On Asus Zenbook UM3402 YA","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"installing-linux-with-dualboot-alongside-windows-11"},"children":[{"type":"text","value":"Installing Linux with DualBoot alongside Windows 11"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.asus.com/support/FAQ/1047461/","rel":["nofollow"]},"children":[{"type":"text","value":"Disable BitLocker in Windows"}]},{"type":"text","value":", don't forget to backup your key"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.asus.com/me-en/support/FAQ/1044688/#Win11","rel":["nofollow"]},"children":[{"type":"text","value":"Shrink system partition"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Disable Secure Boot in Bios:"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Pressing F2 while booting"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Then F7 in bios"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Select \"Security\" -> \"Secure Boot\" -> Disable."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Press F10 to save and reboot"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Boot in windows, check that everything's wotking"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Burn image with "},{"type":"element","tag":"a","props":{"href":"https://rufus.ie/","rel":["nofollow"]},"children":[{"type":"text","value":"rufus"}]},{"type":"text","value":", reboot, press F2, choose your USB drive as first boot option"}]}]},{"type":"element","tag":"h2","props":{"id":"getting-bluetooth-working-with-mediatek-7921e"},"children":[{"type":"text","value":"Getting bluetooth working with Mediatek 7921e"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Problem"}]},{"type":"text","value":": WiFi is working on Zenbook UM3402-YA, but bluetooth doesn't."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"According to this "},{"type":"element","tag":"a","props":{"href":"https://www.linux.org/threads/solved-wifi-adaptator-not-found-mediatek-wi-fi-6-mt7921-wireless-lan-card.37699/page-2#post-143291","rel":["nofollow"]},"children":[{"type":"text","value":"answer"}]},{"type":"text","value":" you should just turn your laptop off, disconnect power supply and "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"hold power key for 60 seconds"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"After that press Power key again and wait for about 10-20sec for asus logo to appear. Then "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"press F2 and disable secure boot again"}]},{"type":"text","value":", that's the necessary part."}]},{"type":"element","tag":"h2","props":{"id":"power-usage-optimizations"},"children":[{"type":"text","value":"Power usage optimizations"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Install "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"tlp"}]},{"type":"text","value":" and enable it with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"systemctl enable --now tlp"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"installing-linux-with-dualboot-alongside-windows-11"},"children":[{"type":"text","value":"Installing Linux with DualBoot alongside Windows 11"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.asus.com/support/FAQ/1047461/","rel":["nofollow"]},"children":[{"type":"text","value":"Disable BitLocker in Windows"}]},{"type":"text","value":", don't forget to backup your key"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.asus.com/me-en/support/FAQ/1044688/#Win11","rel":["nofollow"]},"children":[{"type":"text","value":"Shrink system partition"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Disable Secure Boot in Bios:"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Pressing F2 while booting"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Then F7 in bios"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Select \"Security\" -> \"Secure Boot\" -> Disable."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Press F10 to save and reboot"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Boot in windows, check that everything's wotking"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Burn image with "},{"type":"element","tag":"a","props":{"href":"https://rufus.ie/","rel":["nofollow"]},"children":[{"type":"text","value":"rufus"}]},{"type":"text","value":", reboot, press F2, choose your USB drive as first boot option"}]}]},{"type":"element","tag":"h2","props":{"id":"getting-bluetooth-working-with-mediatek-7921e"},"children":[{"type":"text","value":"Getting bluetooth working with Mediatek 7921e"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Problem"}]},{"type":"text","value":": WiFi is working on Zenbook UM3402-YA, but bluetooth doesn't."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"According to this "},{"type":"element","tag":"a","props":{"href":"https://www.linux.org/threads/solved-wifi-adaptator-not-found-mediatek-wi-fi-6-mt7921-wireless-lan-card.37699/page-2#post-143291","rel":["nofollow"]},"children":[{"type":"text","value":"answer"}]},{"type":"text","value":" you should just turn your laptop off, disconnect power supply and "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"hold power key for 60 seconds"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"After that press Power key again and wait for about 10-20sec for asus logo to appear. Then "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"press F2 and disable secure boot again"}]},{"type":"text","value":", that's the necessary part."}]},{"type":"element","tag":"h2","props":{"id":"power-usage-optimizations"},"children":[{"type":"text","value":"Power usage optimizations"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Install "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"tlp"}]},{"type":"text","value":" and enable it with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"systemctl enable --now tlp"}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"installing-linux-with-dualboot-alongside-windows-11","depth":2,"text":"Installing Linux with DualBoot alongside Windows 11"},{"id":"getting-bluetooth-working-with-mediatek-7921e","depth":2,"text":"Getting bluetooth working with Mediatek 7921e"},{"id":"power-usage-optimizations","depth":2,"text":"Power usage optimizations"}]}},"_type":"markdown","_id":"content:Linux:Linux on Asus Zenbook UM3402-YA.md","_source":"content","_file":"Linux/Linux on Asus Zenbook UM3402-YA.md","_extension":"md"},{"_path":"/linux/resume-or-start-screen-session","_dir":"linux","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Resume Or Start Screen Session","description":"Running this script will enter currently running screen session or will start new one.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Running this script will enter currently running "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"screen"}]},{"type":"text","value":" session or will start new one."}]},{"type":"element","tag":"code","props":{"code":"( screen -r bash || ( screen -d bash && screen -r bash || screen -SAm bash bash ) )\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"( screen -r bash || ( screen -d bash && screen -r bash || screen -SAm bash bash ) )\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Running this script will enter currently running "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"screen"}]},{"type":"text","value":" session or will start new one."}]},{"type":"element","tag":"code","props":{"code":"( screen -r bash || ( screen -d bash && screen -r bash || screen -SAm bash bash ) )\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-daaae9"},"children":[{"type":"text","value":"( screen -r bash "}]},{"type":"element","tag":"span","props":{"class":"ct-322045"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-daaae9"},"children":[{"type":"text","value":" ( screen -d bash "}]},{"type":"element","tag":"span","props":{"class":"ct-322045"},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"class":"ct-daaae9"},"children":[{"type":"text","value":" screen -r bash "}]},{"type":"element","tag":"span","props":{"class":"ct-322045"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-daaae9"},"children":[{"type":"text","value":" screen -SAm bash bash ) )"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-322045{color:#FF7B72}.ct-daaae9{color:#C9D1D9}.light .ct-daaae9{color:#657B83}.light .ct-322045{color:#859900}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Linux:Resume or start screen session.md","_source":"content","_file":"Linux/Resume or start screen session.md","_extension":"md"},{"_path":"/linux/rsync-file-with-ssh","_dir":"linux","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Rsync File With SSH","description":"Downloads file from #SSH with rsync and puts it in current folder.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Downloads file from #SSH with rsync and puts it in current folder."}]},{"type":"element","tag":"code","props":{"code":"#!/bin/bash\n\nPORT=22\nUSER=user\nHOST=example.com\nREMOTE_PATH=/tmp\nREMOTE_FILE=sample.text\nDEST_PATH=./\n\nrsync -a -e \"ssh -p $PORT\" -P -v \\\n \"$USER@$HOST:$REMOTE_PATH/$REMOTE_FILE\" \\\n \"$DEST_PATH\"\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"#!/bin/bash\n\nPORT=22\nUSER=user\nHOST=example.com\nREMOTE_PATH=/tmp\nREMOTE_FILE=sample.text\nDEST_PATH=./\n\nrsync -a -e \"ssh -p $PORT\" -P -v \\\n \"$USER@$HOST:$REMOTE_PATH/$REMOTE_FILE\" \\\n \"$DEST_PATH\"\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Downloads file from #SSH with rsync and puts it in current folder."}]},{"type":"element","tag":"code","props":{"code":"#!/bin/bash\n\nPORT=22\nUSER=user\nHOST=example.com\nREMOTE_PATH=/tmp\nREMOTE_FILE=sample.text\nDEST_PATH=./\n\nrsync -a -e \"ssh -p $PORT\" -P -v \\\n \"$USER@$HOST:$REMOTE_PATH/$REMOTE_FILE\" \\\n \"$DEST_PATH\"\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-369d9f"},"children":[{"type":"text","value":"#!/bin/bash"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dcb3db"},"children":[{"type":"text","value":"PORT=22"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dcb3db"},"children":[{"type":"text","value":"USER=user"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dcb3db"},"children":[{"type":"text","value":"HOST=example.com"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dcb3db"},"children":[{"type":"text","value":"REMOTE_PATH=/tmp"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dcb3db"},"children":[{"type":"text","value":"REMOTE_FILE=sample.text"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dcb3db"},"children":[{"type":"text","value":"DEST_PATH=./"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dcb3db"},"children":[{"type":"text","value":"rsync -a -e "}]},{"type":"element","tag":"span","props":{"class":"ct-2e2f05"},"children":[{"type":"text","value":"\"ssh -p "}]},{"type":"element","tag":"span","props":{"class":"ct-49032f"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-14b85e"},"children":[{"type":"text","value":"PORT"}]},{"type":"element","tag":"span","props":{"class":"ct-2e2f05"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-dcb3db"},"children":[{"type":"text","value":" -P -v \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dcb3db"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2e2f05"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-49032f"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-14b85e"},"children":[{"type":"text","value":"USER"}]},{"type":"element","tag":"span","props":{"class":"ct-2e2f05"},"children":[{"type":"text","value":"@"}]},{"type":"element","tag":"span","props":{"class":"ct-49032f"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-14b85e"},"children":[{"type":"text","value":"HOST"}]},{"type":"element","tag":"span","props":{"class":"ct-2e2f05"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-49032f"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-14b85e"},"children":[{"type":"text","value":"REMOTE_PATH"}]},{"type":"element","tag":"span","props":{"class":"ct-2e2f05"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-49032f"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-14b85e"},"children":[{"type":"text","value":"REMOTE_FILE"}]},{"type":"element","tag":"span","props":{"class":"ct-2e2f05"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-dcb3db"},"children":[{"type":"text","value":" \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dcb3db"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2e2f05"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-49032f"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-14b85e"},"children":[{"type":"text","value":"DEST_PATH"}]},{"type":"element","tag":"span","props":{"class":"ct-2e2f05"},"children":[{"type":"text","value":"\""}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-14b85e{color:#C9D1D9}.ct-49032f{color:#C9D1D9}.ct-2e2f05{color:#A5D6FF}.ct-dcb3db{color:#C9D1D9}.ct-369d9f{color:#8B949E}.light .ct-369d9f{color:#93A1A1}.light .ct-dcb3db{color:#657B83}.light .ct-2e2f05{color:#2AA198}.light .ct-49032f{color:#859900}.light .ct-14b85e{color:#268BD2}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Linux:Rsync file with SSH.md","_source":"content","_file":"Linux/Rsync file with SSH.md","_extension":"md"},{"_path":"/linux/setting-up-nginx","_dir":"linux","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Setting Up NGINX","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"fallback-url-for-spa-s"},"children":[{"type":"text","value":"Fallback url for SPA-s"}]},{"type":"element","tag":"code","props":{"code":"server {\n # ...\n location / {\n # First attempt to serve request as file, then\n # as directory, then fall back to displaying a 404.\n try_files $uri $uri/ =404;\n }\n # ...\n}\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"server {\n # ...\n location / {\n # First attempt to serve request as file, then\n # as directory, then fall back to displaying a 404.\n try_files $uri $uri/ =404;\n }\n # ...\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"set-up-for-uploads"},"children":[{"type":"text","value":"Set up for uploads"}]},{"type":"element","tag":"code","props":{"code":"server {\n # ...\n client_max_body_size 200M;\n # ...\n}\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"server {\n # ...\n client_max_body_size 200M;\n # ...\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"reverse-proxy-for-https"},"children":[{"type":"text","value":"Reverse proxy for https"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Given config forwards "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"https"}]},{"type":"text","value":" traffic to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"http"}]},{"type":"text","value":" on port "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"8080"}]},{"type":"text","value":" for "},{"type":"element","tag":"a","props":{"href":"https://next.vault48.org","rel":["nofollow"]},"children":[{"type":"text","value":"https://next.vault48.org"}]},{"type":"text","value":"\nwith http2 support if possible."}]},{"type":"element","tag":"code","props":{"code":"server {\n listen 80;\n server_name next.vault48.org;\n return 301 https://next.vault48.org$request_uri;\n}\n\nserver {\n listen 443 ssl http2;\n listen [::]:443 ssl http2;\n \n # managed by Certbot\n ssl_certificate /etc/letsencrypt/live/vault48.org/fullchain.pem; \n ssl_certificate_key /etc/letsencrypt/live/vault48.org/privkey.pem; \n ssl_trusted_certificate /etc/letsencrypt/live/vault48.org/chain.pem;\n \n server_name next.vault48.org;\n \n location / {\n proxy_redirect off;\n proxy_set_header Host $host;\n proxy_set_header X-Real-IP $remote_addr;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n \n proxy_pass http://127.0.0.1:8080;\n }\n}\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"server {\n listen 80;\n server_name next.vault48.org;\n return 301 https://next.vault48.org$request_uri;\n}\n\nserver {\n listen 443 ssl http2;\n listen [::]:443 ssl http2;\n \n # managed by Certbot\n ssl_certificate /etc/letsencrypt/live/vault48.org/fullchain.pem; \n ssl_certificate_key /etc/letsencrypt/live/vault48.org/privkey.pem; \n ssl_trusted_certificate /etc/letsencrypt/live/vault48.org/chain.pem;\n \n server_name next.vault48.org;\n \n location / {\n proxy_redirect off;\n proxy_set_header Host $host;\n proxy_set_header X-Real-IP $remote_addr;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n \n proxy_pass http://127.0.0.1:8080;\n }\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"fallback-url-for-spa-s"},"children":[{"type":"text","value":"Fallback url for SPA-s"}]},{"type":"element","tag":"code","props":{"code":"server {\n # ...\n location / {\n # First attempt to serve request as file, then\n # as directory, then fall back to displaying a 404.\n try_files $uri $uri/ =404;\n }\n # ...\n}\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ce1709"},"children":[{"type":"text","value":"server"}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9e3ec0"},"children":[{"type":"text","value":"# ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f5ead"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-14e2f1"},"children":[{"type":"text","value":"location"}]},{"type":"element","tag":"span","props":{"class":"ct-1f5ead"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-32f766"},"children":[{"type":"text","value":"/ "}]},{"type":"element","tag":"span","props":{"class":"ct-1f5ead"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9e3ec0"},"children":[{"type":"text","value":"# First attempt to serve request as file, then"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9e3ec0"},"children":[{"type":"text","value":"# as directory, then fall back to displaying a 404."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2277dc"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9e3ec0"},"children":[{"type":"text","value":"# ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"set-up-for-uploads"},"children":[{"type":"text","value":"Set up for uploads"}]},{"type":"element","tag":"code","props":{"code":"server {\n # ...\n client_max_body_size 200M;\n # ...\n}\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ce1709"},"children":[{"type":"text","value":"server"}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9e3ec0"},"children":[{"type":"text","value":"# ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e0762"},"children":[{"type":"text","value":" client_max_body_size "}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":"200M;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9e3ec0"},"children":[{"type":"text","value":"# ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"reverse-proxy-for-https"},"children":[{"type":"text","value":"Reverse proxy for https"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Given config forwards "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"https"}]},{"type":"text","value":" traffic to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"http"}]},{"type":"text","value":" on port "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"8080"}]},{"type":"text","value":" for "},{"type":"element","tag":"a","props":{"href":"https://next.vault48.org","rel":["nofollow"]},"children":[{"type":"text","value":"https://next.vault48.org"}]},{"type":"text","value":"\nwith http2 support if possible."}]},{"type":"element","tag":"code","props":{"code":"server {\n listen 80;\n server_name next.vault48.org;\n return 301 https://next.vault48.org$request_uri;\n}\n\nserver {\n listen 443 ssl http2;\n listen [::]:443 ssl http2;\n \n # managed by Certbot\n ssl_certificate /etc/letsencrypt/live/vault48.org/fullchain.pem; \n ssl_certificate_key /etc/letsencrypt/live/vault48.org/privkey.pem; \n ssl_trusted_certificate /etc/letsencrypt/live/vault48.org/chain.pem;\n \n server_name next.vault48.org;\n \n location / {\n proxy_redirect off;\n proxy_set_header Host $host;\n proxy_set_header X-Real-IP $remote_addr;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n \n proxy_pass http://127.0.0.1:8080;\n }\n}\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ce1709"},"children":[{"type":"text","value":"server"}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e0762"},"children":[{"type":"text","value":" listen "}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":"80;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e0762"},"children":[{"type":"text","value":" server_name "}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":"next.vault48.org;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e0762"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-77ae0e"},"children":[{"type":"text","value":"301"}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" https://next.vault48.org"}]},{"type":"element","tag":"span","props":{"class":"ct-969cf7"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-52e8a3"},"children":[{"type":"text","value":"request_uri"}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ce1709"},"children":[{"type":"text","value":"server"}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e0762"},"children":[{"type":"text","value":" listen "}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":"443 ssl http2;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e0762"},"children":[{"type":"text","value":" listen "}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":"[::]:443 ssl http2;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9e3ec0"},"children":[{"type":"text","value":"# managed by Certbot"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e0762"},"children":[{"type":"text","value":" ssl_certificate "}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":"/etc/letsencrypt/live/vault48.org/fullchain.pem; "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e0762"},"children":[{"type":"text","value":" ssl_certificate_key "}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":"/etc/letsencrypt/live/vault48.org/privkey.pem; "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e0762"},"children":[{"type":"text","value":" ssl_trusted_certificate "}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":"/etc/letsencrypt/live/vault48.org/chain.pem;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e0762"},"children":[{"type":"text","value":" server_name "}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":"next.vault48.org;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f5ead"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-14e2f1"},"children":[{"type":"text","value":"location"}]},{"type":"element","tag":"span","props":{"class":"ct-1f5ead"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-32f766"},"children":[{"type":"text","value":"/ "}]},{"type":"element","tag":"span","props":{"class":"ct-1f5ead"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e0762"},"children":[{"type":"text","value":" proxy_redirect "}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":"off;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e0762"},"children":[{"type":"text","value":" proxy_set_header "}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":"Host "}]},{"type":"element","tag":"span","props":{"class":"ct-969cf7"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-52e8a3"},"children":[{"type":"text","value":"host"}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e0762"},"children":[{"type":"text","value":" proxy_set_header "}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":"X-Real-IP "}]},{"type":"element","tag":"span","props":{"class":"ct-969cf7"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-52e8a3"},"children":[{"type":"text","value":"remote_addr"}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e0762"},"children":[{"type":"text","value":" proxy_set_header "}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":"X-Forwarded-For "}]},{"type":"element","tag":"span","props":{"class":"ct-969cf7"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-52e8a3"},"children":[{"type":"text","value":"proxy_add_x_forwarded_for"}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e0762"},"children":[{"type":"text","value":" proxy_pass "}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":"http://127.0.0.1:8080;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-52e8a3{color:#C9D1D9}.ct-969cf7{color:#C9D1D9}.ct-77ae0e{color:#79C0FF}.ct-1e0762{color:#FF7B72}.ct-2277dc{color:#FF7B72}.ct-32f766{color:#FFA657}.ct-14e2f1{color:#FF7B72}.ct-1f5ead{color:#C9D1D9}.ct-9e3ec0{color:#8B949E}.ct-6e3323{color:#C9D1D9}.ct-ce1709{color:#FF7B72}.light .ct-ce1709{color:#073642}.light .ct-6e3323{color:#657B83}.light .ct-9e3ec0{color:#93A1A1}.light .ct-1f5ead{color:#657B83}.light .ct-14e2f1{color:#073642}.light .ct-32f766{color:#657B83}.light .ct-2277dc{color:#657B83}.light .ct-1e0762{color:#859900}.light .ct-77ae0e{color:#D33682}.light .ct-969cf7{color:#859900}.light .ct-52e8a3{color:#268BD2}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"fallback-url-for-spa-s","depth":2,"text":"Fallback url for SPA-s"},{"id":"set-up-for-uploads","depth":2,"text":"Set up for uploads"},{"id":"reverse-proxy-for-https","depth":2,"text":"Reverse proxy for https"}]}},"_type":"markdown","_id":"content:Linux:Setting up NGINX.md","_source":"content","_file":"Linux/Setting up NGINX.md","_extension":"md"},{"_path":"/linux/ssh","_dir":"linux","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"SSH","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"config-aliases-for-ssh-hosts"},"children":[{"type":"text","value":"Config aliases for #SSH hosts"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"#SSH config can be used to made aliases for different hosts. Should be put at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"~/.ssh/config"}]},{"type":"text","value":". To simply call "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ssh router"}]},{"type":"text","value":" without parameters, use this:"}]},{"type":"element","tag":"code","props":{"code":"Host router\n HostName 192.168.0.1\n IdentityFile ~/.ssh/id_rsa\n User root\n Port 22522\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"Host router\n HostName 192.168.0.1\n IdentityFile ~/.ssh/id_rsa\n User root\n Port 22522\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"config-aliases-for-ssh-hosts"},"children":[{"type":"text","value":"Config aliases for #SSH hosts"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"#SSH config can be used to made aliases for different hosts. Should be put at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"~/.ssh/config"}]},{"type":"text","value":". To simply call "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ssh router"}]},{"type":"text","value":" without parameters, use this:"}]},{"type":"element","tag":"code","props":{"code":"Host router\n HostName 192.168.0.1\n IdentityFile ~/.ssh/id_rsa\n User root\n Port 22522\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"Host router\n HostName 192.168.0.1\n IdentityFile ~/.ssh/id_rsa\n User root\n Port 22522"}]}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"config-aliases-for-ssh-hosts","depth":2,"text":"Config aliases for #SSH hosts"}]}},"_type":"markdown","_id":"content:Linux:SSH.md","_source":"content","_file":"Linux/SSH.md","_extension":"md"},{"_path":"/obsidian/self-hosted-obsidian-sync-with-couchdb","_dir":"obsidian","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Self Hosted Obsidian Sync With CouchDB","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/vrtmrz/obsidian-livesync","rel":["nofollow"]},"children":[{"type":"text","value":"Main documentation"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/vrtmrz/obsidian-livesync/blob/main/docs/setup_own_server.md","rel":["nofollow"]},"children":[{"type":"text","value":"Setting up couchdb"}]}]}]},{"type":"element","tag":"h2","props":{"id":"setting-up-environment"},"children":[{"type":"text","value":"Setting up environment"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"First, you should create "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docker-compose.yml"}]},{"type":"text","value":" with the following contents:"}]},{"type":"element","tag":"code","props":{"code":"version: '3'\nservices:\n couchserver:\n container_name: obsidian__database\n image: couchdb\n restart: always\n ports:\n - \"5984:5984\"\n environment:\n - COUCHDB_USER=user\n - COUCHDB_PASSWORD=somepassword\n volumes:\n - ./couchdb/dbdata:/opt/couchdb/data\n - ./couchdb/local.ini:/opt/couchdb/etc/local.ini\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"version: '3'\nservices:\n couchserver:\n container_name: obsidian__database\n image: couchdb\n restart: always\n ports:\n - \"5984:5984\"\n environment:\n - COUCHDB_USER=user\n - COUCHDB_PASSWORD=somepassword\n volumes:\n - ./couchdb/dbdata:/opt/couchdb/data\n - ./couchdb/local.ini:/opt/couchdb/etc/local.ini\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then create initial config at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"./couchdb/local.ini"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"[couchdb]\nsingle_node=true\nmax_document_size=50000000\nmax_http_request_size=4294967296\n\n[chttpd]\nrequire_valid_user = true\n\n[chttpd_auth]\nrequire_valid_user = true\nauthentication_redirect = /_utils/session.html\n\n[httpd]\nWWW-Authenticate = Basic realm=\"couchdb\"\nenable_cors = true\n\n[cors]\norigins = app://obsidian.md,capacitor://localhost,http://localhost\ncredentials = true\nheaders = accept, authorization, content-type, origin, referer\nmethods = GET, PUT, POST, HEAD, DELETE\nmax_age = 3600\n","language":"ini"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"[couchdb]\nsingle_node=true\nmax_document_size=50000000\nmax_http_request_size=4294967296\n\n[chttpd]\nrequire_valid_user = true\n\n[chttpd_auth]\nrequire_valid_user = true\nauthentication_redirect = /_utils/session.html\n\n[httpd]\nWWW-Authenticate = Basic realm=\"couchdb\"\nenable_cors = true\n\n[cors]\norigins = app://obsidian.md,capacitor://localhost,http://localhost\ncredentials = true\nheaders = accept, authorization, content-type, origin, referer\nmethods = GET, PUT, POST, HEAD, DELETE\nmax_age = 3600\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then, in order to have sync on mobile devices, we will need a reverse proxy with nginx at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/nginx/sites-enabled/obsidian-couchdb"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"server {\n listen 80;\n listen [::]:80;\n server_name couchdb.yourhost.com;\n return 301 https://$host$request_uri;\n}\n\nserver {\n listen 443 ssl http2;\n listen [::]:443 ssl http2;\n\n ssl_certificate /etc/letsencrypt/live/yourhost.com/fullchain.pem; # managed by Certbot\n ssl_certificate_key /etc/letsencrypt/live/yourhost.com/privkey.pem; # managed by Certbot\n ssl_trusted_certificate /etc/letsencrypt/live/yourhost.com/chain.pem;\n\n server_name couchdb.yourhost.com;\n client_max_body_size 200M;\n\n location / {\n proxy_redirect off;\n proxy_set_header Host $host;\n proxy_set_header X-Real-IP $remote_addr;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n\n proxy_pass http://127.0.0.1:5984;\n }\n}\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"server {\n listen 80;\n listen [::]:80;\n server_name couchdb.yourhost.com;\n return 301 https://$host$request_uri;\n}\n\nserver {\n listen 443 ssl http2;\n listen [::]:443 ssl http2;\n\n ssl_certificate /etc/letsencrypt/live/yourhost.com/fullchain.pem; # managed by Certbot\n ssl_certificate_key /etc/letsencrypt/live/yourhost.com/privkey.pem; # managed by Certbot\n ssl_trusted_certificate /etc/letsencrypt/live/yourhost.com/chain.pem;\n\n server_name couchdb.yourhost.com;\n client_max_body_size 200M;\n\n location / {\n proxy_redirect off;\n proxy_set_header Host $host;\n proxy_set_header X-Real-IP $remote_addr;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n\n proxy_pass http://127.0.0.1:5984;\n }\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"setting-up-obsidian"},"children":[{"type":"text","value":"Setting up Obsidian"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Install "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Self-hosted LiveSync"}]},{"type":"text","value":" plugin"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Change host to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"https://yourhost.com"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Specify username and password"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Press "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"test"}]},{"type":"text","value":", then "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fetch database"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/vrtmrz/obsidian-livesync","rel":["nofollow"]},"children":[{"type":"text","value":"Main documentation"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/vrtmrz/obsidian-livesync/blob/main/docs/setup_own_server.md","rel":["nofollow"]},"children":[{"type":"text","value":"Setting up couchdb"}]}]}]},{"type":"element","tag":"h2","props":{"id":"setting-up-environment"},"children":[{"type":"text","value":"Setting up environment"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"First, you should create "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docker-compose.yml"}]},{"type":"text","value":" with the following contents:"}]},{"type":"element","tag":"code","props":{"code":"version: '3'\nservices:\n couchserver:\n container_name: obsidian__database\n image: couchdb\n restart: always\n ports:\n - \"5984:5984\"\n environment:\n - COUCHDB_USER=user\n - COUCHDB_PASSWORD=somepassword\n volumes:\n - ./couchdb/dbdata:/opt/couchdb/data\n - ./couchdb/local.ini:/opt/couchdb/etc/local.ini\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f0c7fc"},"children":[{"type":"text","value":"version"}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-34a38e"},"children":[{"type":"text","value":"'3'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f0c7fc"},"children":[{"type":"text","value":"services"}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f0c7fc"},"children":[{"type":"text","value":"couchserver"}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f0c7fc"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-34a38e"},"children":[{"type":"text","value":"obsidian__database"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f0c7fc"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-34a38e"},"children":[{"type":"text","value":"couchdb"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f0c7fc"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-34a38e"},"children":[{"type":"text","value":"always"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f0c7fc"},"children":[{"type":"text","value":"ports"}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-34a38e"},"children":[{"type":"text","value":"\"5984:5984\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f0c7fc"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-34a38e"},"children":[{"type":"text","value":"COUCHDB_USER=user"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-34a38e"},"children":[{"type":"text","value":"COUCHDB_PASSWORD=somepassword"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f0c7fc"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-34a38e"},"children":[{"type":"text","value":"./couchdb/dbdata:/opt/couchdb/data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-34a38e"},"children":[{"type":"text","value":"./couchdb/local.ini:/opt/couchdb/etc/local.ini"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then create initial config at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"./couchdb/local.ini"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"[couchdb]\nsingle_node=true\nmax_document_size=50000000\nmax_http_request_size=4294967296\n\n[chttpd]\nrequire_valid_user = true\n\n[chttpd_auth]\nrequire_valid_user = true\nauthentication_redirect = /_utils/session.html\n\n[httpd]\nWWW-Authenticate = Basic realm=\"couchdb\"\nenable_cors = true\n\n[cors]\norigins = app://obsidian.md,capacitor://localhost,http://localhost\ncredentials = true\nheaders = accept, authorization, content-type, origin, referer\nmethods = GET, PUT, POST, HEAD, DELETE\nmax_age = 3600\n","language":"ini"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"[couchdb]\nsingle_node=true\nmax_document_size=50000000\nmax_http_request_size=4294967296\n\n[chttpd]\nrequire_valid_user = true\n\n[chttpd_auth]\nrequire_valid_user = true\nauthentication_redirect = /_utils/session.html\n\n[httpd]\nWWW-Authenticate = Basic realm=\"couchdb\"\nenable_cors = true\n\n[cors]\norigins = app://obsidian.md,capacitor://localhost,http://localhost\ncredentials = true\nheaders = accept, authorization, content-type, origin, referer\nmethods = GET, PUT, POST, HEAD, DELETE\nmax_age = 3600"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then, in order to have sync on mobile devices, we will need a reverse proxy with nginx at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/nginx/sites-enabled/obsidian-couchdb"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"server {\n listen 80;\n listen [::]:80;\n server_name couchdb.yourhost.com;\n return 301 https://$host$request_uri;\n}\n\nserver {\n listen 443 ssl http2;\n listen [::]:443 ssl http2;\n\n ssl_certificate /etc/letsencrypt/live/yourhost.com/fullchain.pem; # managed by Certbot\n ssl_certificate_key /etc/letsencrypt/live/yourhost.com/privkey.pem; # managed by Certbot\n ssl_trusted_certificate /etc/letsencrypt/live/yourhost.com/chain.pem;\n\n server_name couchdb.yourhost.com;\n client_max_body_size 200M;\n\n location / {\n proxy_redirect off;\n proxy_set_header Host $host;\n proxy_set_header X-Real-IP $remote_addr;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n\n proxy_pass http://127.0.0.1:5984;\n }\n}\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e4ca3"},"children":[{"type":"text","value":"server"}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52fd"},"children":[{"type":"text","value":" listen "}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":"80;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52fd"},"children":[{"type":"text","value":" listen "}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":"[::]:80;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52fd"},"children":[{"type":"text","value":" server_name "}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":"couchdb.yourhost.com;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52fd"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b56d52"},"children":[{"type":"text","value":"301"}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" https://"}]},{"type":"element","tag":"span","props":{"class":"ct-9b4f35"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-3b0c9a"},"children":[{"type":"text","value":"host"}]},{"type":"element","tag":"span","props":{"class":"ct-9b4f35"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-3b0c9a"},"children":[{"type":"text","value":"request_uri"}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e4ca3"},"children":[{"type":"text","value":"server"}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52fd"},"children":[{"type":"text","value":" listen "}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":"443 ssl http2;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52fd"},"children":[{"type":"text","value":" listen "}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":"[::]:443 ssl http2;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52fd"},"children":[{"type":"text","value":" ssl_certificate "}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":"/etc/letsencrypt/live/yourhost.com/fullchain.pem; "}]},{"type":"element","tag":"span","props":{"class":"ct-930690"},"children":[{"type":"text","value":"# managed by Certbot"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52fd"},"children":[{"type":"text","value":" ssl_certificate_key "}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":"/etc/letsencrypt/live/yourhost.com/privkey.pem; "}]},{"type":"element","tag":"span","props":{"class":"ct-930690"},"children":[{"type":"text","value":"# managed by Certbot"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52fd"},"children":[{"type":"text","value":" ssl_trusted_certificate "}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":"/etc/letsencrypt/live/yourhost.com/chain.pem;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52fd"},"children":[{"type":"text","value":" server_name "}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":"couchdb.yourhost.com;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52fd"},"children":[{"type":"text","value":" client_max_body_size "}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":"200M;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b19092"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-18102e"},"children":[{"type":"text","value":"location"}]},{"type":"element","tag":"span","props":{"class":"ct-b19092"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b28bc"},"children":[{"type":"text","value":"/ "}]},{"type":"element","tag":"span","props":{"class":"ct-b19092"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52fd"},"children":[{"type":"text","value":" proxy_redirect "}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":"off;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52fd"},"children":[{"type":"text","value":" proxy_set_header "}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":"Host "}]},{"type":"element","tag":"span","props":{"class":"ct-9b4f35"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-3b0c9a"},"children":[{"type":"text","value":"host"}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52fd"},"children":[{"type":"text","value":" proxy_set_header "}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":"X-Real-IP "}]},{"type":"element","tag":"span","props":{"class":"ct-9b4f35"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-3b0c9a"},"children":[{"type":"text","value":"remote_addr"}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52fd"},"children":[{"type":"text","value":" proxy_set_header "}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":"X-Forwarded-For "}]},{"type":"element","tag":"span","props":{"class":"ct-9b4f35"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-3b0c9a"},"children":[{"type":"text","value":"proxy_add_x_forwarded_for"}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52fd"},"children":[{"type":"text","value":" proxy_pass "}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":"http://127.0.0.1:5984;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"setting-up-obsidian"},"children":[{"type":"text","value":"Setting up Obsidian"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Install "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Self-hosted LiveSync"}]},{"type":"text","value":" plugin"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Change host to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"https://yourhost.com"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Specify username and password"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Press "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"test"}]},{"type":"text","value":", then "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fetch database"}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-8b28bc{color:#FFA657}.ct-18102e{color:#FF7B72}.ct-b19092{color:#C9D1D9}.ct-930690{color:#8B949E}.ct-3b0c9a{color:#C9D1D9}.ct-9b4f35{color:#C9D1D9}.ct-b56d52{color:#79C0FF}.ct-ea52fd{color:#FF7B72}.ct-6e4ca3{color:#FF7B72}.ct-34a38e{color:#A5D6FF}.ct-c3c363{color:#C9D1D9}.ct-f0c7fc{color:#7EE787}.light .ct-f0c7fc{color:#268BD2}.light .ct-c3c363{color:#657B83}.light .ct-34a38e{color:#2AA198}.light .ct-6e4ca3{color:#073642}.light .ct-ea52fd{color:#859900}.light .ct-b56d52{color:#D33682}.light .ct-9b4f35{color:#859900}.light .ct-3b0c9a{color:#268BD2}.light .ct-930690{color:#93A1A1}.light .ct-b19092{color:#657B83}.light .ct-18102e{color:#073642}.light .ct-8b28bc{color:#657B83}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"setting-up-environment","depth":2,"text":"Setting up environment"},{"id":"setting-up-obsidian","depth":2,"text":"Setting up Obsidian"}]}},"_type":"markdown","_id":"content:Obsidian:Self-hosted Obsidian sync with CouchDB.md","_source":"content","_file":"Obsidian/Self-hosted Obsidian sync with CouchDB.md","_extension":"md"},{"_path":"/sql/mysql-and-mariadb-setup","_dir":"sql","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"MySQL And MariaDB Setup","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"install-mariadb-on-ubuntu-2004-lts"},"children":[{"type":"text","value":"Install MariaDB on Ubuntu 20.04 LTS"}]},{"type":"element","tag":"code","props":{"code":"sudo apt update\nsudo apt install mariadb-server\nsudo mysql_secure_installation\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"sudo apt update\nsudo apt install mariadb-server\nsudo mysql_secure_installation\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"access-database-from-outside"},"children":[{"type":"text","value":"Access Database from outside"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Open "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/mysql/mariadb.conf.d/50-server.cnf"}]},{"type":"text","value":" and change the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"bind-address"}]},{"type":"text","value":" to:"}]},{"type":"element","tag":"code","props":{"code":"...\nbind-address = 0.0.0.0\n...\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"...\nbind-address = 0.0.0.0\n...\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"create-administrative-user"},"children":[{"type":"text","value":"Create Administrative User"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Create a new user "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"newuser"}]},{"type":"text","value":" for the host "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"localhost"}]},{"type":"text","value":" with a new "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"password"}]},{"type":"text","value":":"}]}]},{"type":"element","tag":"code","props":{"code":"CREATE USER 'newuser'@'localhost' IDENTIFIED BY 'password';\n","language":"mysql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"CREATE USER 'newuser'@'localhost' IDENTIFIED BY 'password';\n"}]}]}]},{"type":"element","tag":"ol","props":{"start":2},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Grant all permissions to the new user"}]}]},{"type":"element","tag":"code","props":{"code":"GRANT ALL PRIVILEGES ON * . * TO 'newuser'@'localhost';\n","language":"mysql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"GRANT ALL PRIVILEGES ON * . * TO 'newuser'@'localhost';\n"}]}]}]},{"type":"element","tag":"ol","props":{"start":3},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Update permissions"}]}]},{"type":"element","tag":"code","props":{"code":"FLUSH PRIVILEGES;\n","language":"mysql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"FLUSH PRIVILEGES;\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"install-mariadb-on-ubuntu-2004-lts"},"children":[{"type":"text","value":"Install MariaDB on Ubuntu 20.04 LTS"}]},{"type":"element","tag":"code","props":{"code":"sudo apt update\nsudo apt install mariadb-server\nsudo mysql_secure_installation\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c1f08a"},"children":[{"type":"text","value":"sudo apt update"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c1f08a"},"children":[{"type":"text","value":"sudo apt install mariadb-server"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c1f08a"},"children":[{"type":"text","value":"sudo mysql_secure_installation"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"access-database-from-outside"},"children":[{"type":"text","value":"Access Database from outside"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Open "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/mysql/mariadb.conf.d/50-server.cnf"}]},{"type":"text","value":" and change the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"bind-address"}]},{"type":"text","value":" to:"}]},{"type":"element","tag":"code","props":{"code":"...\nbind-address = 0.0.0.0\n...\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c1f08a"},"children":[{"type":"text","value":"..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c1f08a"},"children":[{"type":"text","value":"bind-"}]},{"type":"element","tag":"span","props":{"class":"ct-4287d3"},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"span","props":{"class":"ct-c1f08a"},"children":[{"type":"text","value":" = 0.0.0.0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c1f08a"},"children":[{"type":"text","value":"..."}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"create-administrative-user"},"children":[{"type":"text","value":"Create Administrative User"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Create a new user "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"newuser"}]},{"type":"text","value":" for the host "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"localhost"}]},{"type":"text","value":" with a new "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"password"}]},{"type":"text","value":":"}]}]},{"type":"element","tag":"code","props":{"code":"CREATE USER 'newuser'@'localhost' IDENTIFIED BY 'password';\n","language":"mysql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"CREATE USER 'newuser'@'localhost' IDENTIFIED BY 'password';"}]}]}]}]}]},{"type":"element","tag":"ol","props":{"start":2},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Grant all permissions to the new user"}]}]},{"type":"element","tag":"code","props":{"code":"GRANT ALL PRIVILEGES ON * . * TO 'newuser'@'localhost';\n","language":"mysql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"GRANT ALL PRIVILEGES ON * . * TO 'newuser'@'localhost';"}]}]}]}]}]},{"type":"element","tag":"ol","props":{"start":3},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Update permissions"}]}]},{"type":"element","tag":"code","props":{"code":"FLUSH PRIVILEGES;\n","language":"mysql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"FLUSH PRIVILEGES;"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-4287d3{color:#FF7B72}.ct-c1f08a{color:#C9D1D9}.light .ct-c1f08a{color:#657B83}.light .ct-4287d3{color:#859900}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"install-mariadb-on-ubuntu-2004-lts","depth":2,"text":"Install MariaDB on Ubuntu 20.04 LTS"},{"id":"access-database-from-outside","depth":2,"text":"Access Database from outside"},{"id":"create-administrative-user","depth":2,"text":"Create Administrative User"}]}},"_type":"markdown","_id":"content:SQL:MySQL and MariaDB setup.md","_source":"content","_file":"SQL/MySQL and MariaDB setup.md","_extension":"md"},{"_path":"/sql/postgress-setup","_dir":"sql","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Postgress Setup","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"install-postgresql-12-on-ubuntu-2004-lts"},"children":[{"type":"text","value":"Install PostgreSQL 12 on Ubuntu 20.04 LTS"}]},{"type":"element","tag":"code","props":{"code":"sudo apt update\nsudo apt install -y postgresql postgresql-contrib postgresql-client\nsudo systemctl status postgresql.service\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"sudo apt update\nsudo apt install -y postgresql postgresql-contrib postgresql-client\nsudo systemctl status postgresql.service\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"initial-database-connection"},"children":[{"type":"text","value":"Initial database connection"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A local connection (from the database server) can be done by the following command:"}]},{"type":"element","tag":"code","props":{"code":"sudo -u postgres psql\n\npsql (12.12 (Ubuntu 12.12-0ubuntu0.20.04.1))\nType \"help\" for help.\n\npostgres=#\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"sudo -u postgres psql\n\npsql (12.12 (Ubuntu 12.12-0ubuntu0.20.04.1))\nType \"help\" for help.\n\npostgres=#\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"set-password-for-postgres-database-user"},"children":[{"type":"text","value":"Set password for postgres database user"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The password for the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"postgres"}]},{"type":"text","value":" database user can be set the the quick command "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"\\password"}]},{"type":"text","value":"\nor by "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"alter user postgres password 'Supersecret'"}]},{"type":"text","value":". A connection using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"postgres"}]},{"type":"text","value":" user\nis still not possible from the \"outside\" hence to the default settings in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pg_hba.conf"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"update-pg_hbaconf-to-allow-postgres-user-connections-with-password"},"children":[{"type":"text","value":"Update pg_hba.conf to allow postgres user connections with password"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In order to allow connections of the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"postgres"}]},{"type":"text","value":" database user not using OS user\nauthentication, you have to update the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pg_hba.conf"}]},{"type":"text","value":" which can be found under\n"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/postgresql/12/main/pg_hba.conf"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"sudo vi /etc/postgresql/12/main/pg_hba.conf\n\n...\nlocal all postgres peer\n...\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"sudo vi /etc/postgresql/12/main/pg_hba.conf\n\n...\nlocal all postgres peer\n...\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Change the last section of the above line to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"md5"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"local all postgres md5\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"local all postgres md5\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A restart is required in order to apply the new configuration:"}]},{"type":"element","tag":"code","props":{"code":"sudo systemctl restart postgresql\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"sudo systemctl restart postgresql\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Now a connection from outside the database host is possible e.g."}]},{"type":"element","tag":"code","props":{"code":"psql -U postgres -d postgres -h databasehostname\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"psql -U postgres -d postgres -h databasehostname\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"creation-of-additional-database-users"},"children":[{"type":"text","value":"Creation of additional database users"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A database user can be created by the following command:"}]},{"type":"element","tag":"code","props":{"code":"create user myuser with encrypted password 'Supersecret';\nCREATE ROLE\n\npostgres=# \\du\n List of roles\n Role name | Attributes | Member of\n-----------+------------------------------------------------------------+-----------\n myuser | | {}\n postgres | Superuser, Create role, Create DB, Replication, Bypass RLS | {}\n","language":"sql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"create user myuser with encrypted password 'Supersecret';\nCREATE ROLE\n\npostgres=# \\du\n List of roles\n Role name | Attributes | Member of\n-----------+------------------------------------------------------------+-----------\n myuser | | {}\n postgres | Superuser, Create role, Create DB, Replication, Bypass RLS | {}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"creation-of-additional-databases"},"children":[{"type":"text","value":"Creation of additional databases"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"One can create new Postgres databases within an instance. Therefore you can use the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"psql"}]},{"type":"text","value":"\ncommand to login (see above)."}]},{"type":"element","tag":"code","props":{"code":"CREATE DATABASE dbname OWNER myuser;\nCREATE DATABASE\n\npostgres=# \\l\n List of databases\n Name | Owner | Encoding | Collate | Ctype | Access privileges\n-----------+----------+----------+-------------+-------------+-----------------------\n dbname | myuser | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n postgres | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n template0 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c/postgres +\n | | | | | postgres=CTc/postgres\n template1 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c/postgres +\n | | | | | postgres=CTc/postgres\n","language":"sql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"CREATE DATABASE dbname OWNER myuser;\nCREATE DATABASE\n\npostgres=# \\l\n List of databases\n Name | Owner | Encoding | Collate | Ctype | Access privileges\n-----------+----------+----------+-------------+-------------+-----------------------\n dbname | myuser | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n postgres | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n template0 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c/postgres +\n | | | | | postgres=CTc/postgres\n template1 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c/postgres +\n | | | | | postgres=CTc/postgres\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can leave the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"OWNER"}]},{"type":"text","value":" section of the command, when doing so, the current user will become\nowner of the newly created database."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To change the owner of an existing database later, you can use the following command:"}]},{"type":"element","tag":"code","props":{"code":"postgres=# alter database dbname owner to myuser;\nALTER DATABASE\n","language":"sql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"postgres=# alter database dbname owner to myuser;\nALTER DATABASE\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"install-postgresql-12-on-ubuntu-2004-lts"},"children":[{"type":"text","value":"Install PostgreSQL 12 on Ubuntu 20.04 LTS"}]},{"type":"element","tag":"code","props":{"code":"sudo apt update\nsudo apt install -y postgresql postgresql-contrib postgresql-client\nsudo systemctl status postgresql.service\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3c68ed"},"children":[{"type":"text","value":"sudo apt update"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3c68ed"},"children":[{"type":"text","value":"sudo apt install -y postgresql postgresql-contrib postgresql-client"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3c68ed"},"children":[{"type":"text","value":"sudo systemctl status postgresql.service"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"initial-database-connection"},"children":[{"type":"text","value":"Initial database connection"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A local connection (from the database server) can be done by the following command:"}]},{"type":"element","tag":"code","props":{"code":"sudo -u postgres psql\n\npsql (12.12 (Ubuntu 12.12-0ubuntu0.20.04.1))\nType \"help\" for help.\n\npostgres=#\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3c68ed"},"children":[{"type":"text","value":"sudo -u postgres psql"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3c68ed"},"children":[{"type":"text","value":"psql (12.12 (Ubuntu 12.12-0ubuntu0.20.04.1))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3c68ed"},"children":[{"type":"text","value":"Type "}]},{"type":"element","tag":"span","props":{"class":"ct-cff873"},"children":[{"type":"text","value":"\"help\""}]},{"type":"element","tag":"span","props":{"class":"ct-3c68ed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-18a817"},"children":[{"type":"text","value":"for"}]},{"type":"element","tag":"span","props":{"class":"ct-3c68ed"},"children":[{"type":"text","value":" help."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3c68ed"},"children":[{"type":"text","value":"postgres="}]},{"type":"element","tag":"span","props":{"class":"ct-127309"},"children":[{"type":"text","value":"#"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"set-password-for-postgres-database-user"},"children":[{"type":"text","value":"Set password for postgres database user"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The password for the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"postgres"}]},{"type":"text","value":" database user can be set the the quick command "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"\\password"}]},{"type":"text","value":"\nor by "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"alter user postgres password 'Supersecret'"}]},{"type":"text","value":". A connection using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"postgres"}]},{"type":"text","value":" user\nis still not possible from the \"outside\" hence to the default settings in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pg_hba.conf"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"update-pg_hbaconf-to-allow-postgres-user-connections-with-password"},"children":[{"type":"text","value":"Update pg_hba.conf to allow postgres user connections with password"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In order to allow connections of the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"postgres"}]},{"type":"text","value":" database user not using OS user\nauthentication, you have to update the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pg_hba.conf"}]},{"type":"text","value":" which can be found under\n"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/postgresql/12/main/pg_hba.conf"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"sudo vi /etc/postgresql/12/main/pg_hba.conf\n\n...\nlocal all postgres peer\n...\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3c68ed"},"children":[{"type":"text","value":"sudo vi /etc/postgresql/12/main/pg_hba.conf"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3c68ed"},"children":[{"type":"text","value":"..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b12528"},"children":[{"type":"text","value":"local"}]},{"type":"element","tag":"span","props":{"class":"ct-3c68ed"},"children":[{"type":"text","value":" all postgres peer"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3c68ed"},"children":[{"type":"text","value":"..."}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Change the last section of the above line to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"md5"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"local all postgres md5\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"local all postgres md5"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A restart is required in order to apply the new configuration:"}]},{"type":"element","tag":"code","props":{"code":"sudo systemctl restart postgresql\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3c68ed"},"children":[{"type":"text","value":"sudo systemctl restart postgresql"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Now a connection from outside the database host is possible e.g."}]},{"type":"element","tag":"code","props":{"code":"psql -U postgres -d postgres -h databasehostname\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3c68ed"},"children":[{"type":"text","value":"psql -U postgres -d postgres -h databasehostname"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"creation-of-additional-database-users"},"children":[{"type":"text","value":"Creation of additional database users"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A database user can be created by the following command:"}]},{"type":"element","tag":"code","props":{"code":"create user myuser with encrypted password 'Supersecret';\nCREATE ROLE\n\npostgres=# \\du\n List of roles\n Role name | Attributes | Member of\n-----------+------------------------------------------------------------+-----------\n myuser | | {}\n postgres | Superuser, Create role, Create DB, Replication, Bypass RLS | {}\n","language":"sql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"create user myuser with encrypted password 'Supersecret';\nCREATE ROLE\n\npostgres=# \\du\n List of roles\n Role name | Attributes | Member of\n-----------+------------------------------------------------------------+-----------\n myuser | | {}\n postgres | Superuser, Create role, Create DB, Replication, Bypass RLS | {}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"creation-of-additional-databases"},"children":[{"type":"text","value":"Creation of additional databases"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"One can create new Postgres databases within an instance. Therefore you can use the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"psql"}]},{"type":"text","value":"\ncommand to login (see above)."}]},{"type":"element","tag":"code","props":{"code":"CREATE DATABASE dbname OWNER myuser;\nCREATE DATABASE\n\npostgres=# \\l\n List of databases\n Name | Owner | Encoding | Collate | Ctype | Access privileges\n-----------+----------+----------+-------------+-------------+-----------------------\n dbname | myuser | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n postgres | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n template0 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c/postgres +\n | | | | | postgres=CTc/postgres\n template1 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c/postgres +\n | | | | | postgres=CTc/postgres\n","language":"sql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"CREATE DATABASE dbname OWNER myuser;\nCREATE DATABASE\n\npostgres=# \\l\n List of databases\n Name | Owner | Encoding | Collate | Ctype | Access privileges\n-----------+----------+----------+-------------+-------------+-----------------------\n dbname | myuser | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n postgres | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n template0 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c/postgres +\n | | | | | postgres=CTc/postgres\n template1 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c/postgres +\n | | | | | postgres=CTc/postgres"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can leave the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"OWNER"}]},{"type":"text","value":" section of the command, when doing so, the current user will become\nowner of the newly created database."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To change the owner of an existing database later, you can use the following command:"}]},{"type":"element","tag":"code","props":{"code":"postgres=# alter database dbname owner to myuser;\nALTER DATABASE\n","language":"sql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"postgres=# alter database dbname owner to myuser;\nALTER DATABASE"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-b12528{color:#FF7B72}.ct-127309{color:#8B949E}.ct-18a817{color:#FF7B72}.ct-cff873{color:#A5D6FF}.ct-3c68ed{color:#C9D1D9}.light .ct-3c68ed{color:#657B83}.light .ct-cff873{color:#2AA198}.light .ct-18a817{color:#859900}.light .ct-127309{color:#93A1A1}.light .ct-b12528{color:#073642}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"install-postgresql-12-on-ubuntu-2004-lts","depth":2,"text":"Install PostgreSQL 12 on Ubuntu 20.04 LTS"},{"id":"initial-database-connection","depth":2,"text":"Initial database connection"},{"id":"set-password-for-postgres-database-user","depth":2,"text":"Set password for postgres database user","children":[{"id":"update-pg_hbaconf-to-allow-postgres-user-connections-with-password","depth":3,"text":"Update pg_hba.conf to allow postgres user connections with password"}]},{"id":"creation-of-additional-database-users","depth":2,"text":"Creation of additional database users"},{"id":"creation-of-additional-databases","depth":2,"text":"Creation of additional databases"}]}},"_type":"markdown","_id":"content:SQL:Postgress setup.md","_source":"content","_file":"SQL/Postgress setup.md","_extension":"md"},{"_path":"/typescript/add-global-variable-to-window","_dir":"typescript","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Add Global Variable To Window","description":"Sometimes you want to add global variable to your window. That thing's called global module augmentation.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes you want to add global variable to your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window"}]},{"type":"text","value":". That thing's called "},{"type":"element","tag":"a","props":{"href":"https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation","rel":["nofollow"]},"children":[{"type":"text","value":"global module augmentation"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Say you need to call "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window.doFancyThings()"}]},{"type":"text","value":". For that you should augment global "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window"}]},{"type":"text","value":" interface in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"*.d.ts"}]},{"type":"text","value":" file:"}]},{"type":"element","tag":"code","props":{"code":"declare global {\n interface Window {\n doFancyThings: () => void;\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"declare global {\n interface Window {\n doFancyThings: () => void;\n }\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is useful for declaring global "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window.ethereum"}]},{"type":"text","value":" (or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window.web3"}]},{"type":"text","value":") in "},{"type":"element","tag":"a","props":{"href":"/blockchain/Common%20typescript%20examples"},"children":[{"type":"text","value":"blockchain"}]},{"type":"text","value":" projects with typescript, which use wallet browser extensions."}]},{"type":"element","tag":"h2","props":{"id":"augmenting-existing-interface"},"children":[{"type":"text","value":"Augmenting existing interface"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, you have class "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Sample"}]},{"type":"text","value":" without any functionality:"}]},{"type":"element","tag":"code","props":{"code":"// Sample.ts\n\nexport class Sample {\n // nothing :-)\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// Sample.ts\n\nexport class Sample {\n // nothing :-)\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then you want extend it with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"doFancyThings()"}]},{"type":"text","value":" method. That can be achieved with said "},{"type":"element","tag":"a","props":{"href":"https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation","rel":["nofollow"]},"children":[{"type":"text","value":"module augmentation"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"// fancyThings.ts\nimport { Sample } from \"./Sample\";\n\ndeclare module \"./Sample\" {\n interface Sample {\n doFancyThings: () => void;\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// fancyThings.ts\nimport { Sample } from \"./Sample\";\n\ndeclare module \"./Sample\" {\n interface Sample {\n doFancyThings: () => void;\n }\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Now you can call "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sample.doFancyThings()"}]},{"type":"text","value":" by importing both "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".ts"}]},{"type":"text","value":" files:"}]},{"type":"element","tag":"code","props":{"code":"import { Sample } from \"./sample\";\nimport \"./fancyThings\";\n\nconst sample = new Sample();\nsample.doFancyThings(); // ok\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { Sample } from \"./sample\";\nimport \"./fancyThings\";\n\nconst sample = new Sample();\nsample.doFancyThings(); // ok\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This example is useful for "},{"type":"element","tag":"a","props":{"href":"./Frontend/Vue/Adding%20global%20properties%20to%20component"},"children":[{"type":"text","value":"adding global properties to component"}]},{"type":"text","value":" in vue.js."}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes you want to add global variable to your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window"}]},{"type":"text","value":". That thing's called "},{"type":"element","tag":"a","props":{"href":"https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation","rel":["nofollow"]},"children":[{"type":"text","value":"global module augmentation"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Say you need to call "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window.doFancyThings()"}]},{"type":"text","value":". For that you should augment global "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window"}]},{"type":"text","value":" interface in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"*.d.ts"}]},{"type":"text","value":" file:"}]},{"type":"element","tag":"code","props":{"code":"declare global {\n interface Window {\n doFancyThings: () => void;\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b2af0d"},"children":[{"type":"text","value":"declare"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3a5851"},"children":[{"type":"text","value":"global"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b2af0d"},"children":[{"type":"text","value":"interface"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-494734"},"children":[{"type":"text","value":"Window"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9a4dd"},"children":[{"type":"text","value":"doFancyThings"}]},{"type":"element","tag":"span","props":{"class":"ct-66d539"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-b2af0d"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-756283"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is useful for declaring global "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window.ethereum"}]},{"type":"text","value":" (or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window.web3"}]},{"type":"text","value":") in "},{"type":"element","tag":"a","props":{"href":"/blockchain/Common%20typescript%20examples"},"children":[{"type":"text","value":"blockchain"}]},{"type":"text","value":" projects with typescript, which use wallet browser extensions."}]},{"type":"element","tag":"h2","props":{"id":"augmenting-existing-interface"},"children":[{"type":"text","value":"Augmenting existing interface"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, you have class "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Sample"}]},{"type":"text","value":" without any functionality:"}]},{"type":"element","tag":"code","props":{"code":"// Sample.ts\n\nexport class Sample {\n // nothing :-)\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1265ec"},"children":[{"type":"text","value":"// Sample.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-66d539"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b2af0d"},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-494734"},"children":[{"type":"text","value":"Sample"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1265ec"},"children":[{"type":"text","value":"// nothing :-)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then you want extend it with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"doFancyThings()"}]},{"type":"text","value":" method. That can be achieved with said "},{"type":"element","tag":"a","props":{"href":"https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation","rel":["nofollow"]},"children":[{"type":"text","value":"module augmentation"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"// fancyThings.ts\nimport { Sample } from \"./Sample\";\n\ndeclare module \"./Sample\" {\n interface Sample {\n doFancyThings: () => void;\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1265ec"},"children":[{"type":"text","value":"// fancyThings.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-66d539"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-3a5851"},"children":[{"type":"text","value":"Sample"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-66d539"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-214b42"},"children":[{"type":"text","value":"\"./Sample\""}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b2af0d"},"children":[{"type":"text","value":"declare"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b2af0d"},"children":[{"type":"text","value":"module"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-214b42"},"children":[{"type":"text","value":"\"./Sample\""}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b2af0d"},"children":[{"type":"text","value":"interface"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-494734"},"children":[{"type":"text","value":"Sample"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9a4dd"},"children":[{"type":"text","value":"doFancyThings"}]},{"type":"element","tag":"span","props":{"class":"ct-66d539"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-b2af0d"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-756283"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Now you can call "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sample.doFancyThings()"}]},{"type":"text","value":" by importing both "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".ts"}]},{"type":"text","value":" files:"}]},{"type":"element","tag":"code","props":{"code":"import { Sample } from \"./sample\";\nimport \"./fancyThings\";\n\nconst sample = new Sample();\nsample.doFancyThings(); // ok\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-66d539"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-3a5851"},"children":[{"type":"text","value":"Sample"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-66d539"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-214b42"},"children":[{"type":"text","value":"\"./sample\""}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-66d539"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-214b42"},"children":[{"type":"text","value":"\"./fancyThings\""}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b2af0d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-35e71a"},"children":[{"type":"text","value":"sample"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-66d539"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-66d539"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9a4dd"},"children":[{"type":"text","value":"Sample"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3a5851"},"children":[{"type":"text","value":"sample"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e9a4dd"},"children":[{"type":"text","value":"doFancyThings"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":"(); "}]},{"type":"element","tag":"span","props":{"class":"ct-1265ec"},"children":[{"type":"text","value":"// ok"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This example is useful for "},{"type":"element","tag":"a","props":{"href":"./Frontend/Vue/Adding%20global%20properties%20to%20component"},"children":[{"type":"text","value":"adding global properties to component"}]},{"type":"text","value":" in vue.js."}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-35e71a{color:#79C0FF}.ct-214b42{color:#A5D6FF}.ct-1265ec{color:#8B949E}.ct-756283{color:#79C0FF}.ct-66d539{color:#FF7B72}.ct-e9a4dd{color:#D2A8FF}.ct-494734{color:#FFA657}.ct-3a5851{color:#C9D1D9}.ct-44d604{color:#C9D1D9}.ct-b2af0d{color:#FF7B72}.light .ct-b2af0d{color:#073642}.light .ct-44d604{color:#657B83}.light .ct-3a5851{color:#268BD2}.light .ct-494734{color:#268BD2}.light .ct-e9a4dd{color:#268BD2}.light .ct-66d539{color:#859900}.light .ct-756283{color:#859900}.light .ct-1265ec{color:#93A1A1}.light .ct-214b42{color:#2AA198}.light .ct-35e71a{color:#268BD2}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"augmenting-existing-interface","depth":2,"text":"Augmenting existing interface"}]}},"_type":"markdown","_id":"content:Typescript:Add global variable to window.md","_source":"content","_file":"Typescript/Add global variable to window.md","_extension":"md"},{"_path":"/typescript/flatten-object-with-periods","_dir":"typescript","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Flatten Object With Periods","description":"This helper generates Typescript types for i18n dictionary json\nfiles by flattening it with period delimiter. Supports plural forms.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This helper generates Typescript types for i18n dictionary json\nfiles by flattening it with period delimiter. Supports plural forms."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Used for typing "},{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/i18n-js","rel":["nofollow"]},"children":[{"type":"text","value":"i18n.js"}]},{"type":"text","value":" dictionaries;"}]},{"type":"element","tag":"code","props":{"code":"import en from './en.json';\ntype TranslationPath = Flatten<typeof en>;\n\nconst t = (key: TranslationPath, options?: TranslateOptions) =>\n I18nLib.t(key, options);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import en from './en.json';\ntype TranslationPath = Flatten<typeof en>;\n\nconst t = (key: TranslationPath, options?: TranslateOptions) =>\n I18nLib.t(key, options);\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Flatten type defined here:"}]},{"type":"element","tag":"code","props":{"code":"// This one based on answer from StackOverflow:\n// https://stackoverflow.com/questions/58434389/typescript-deep-keyof-of-a-nested-object\n\nexport type Flatten<T, D extends number = 5> = [D] extends [never]\n ? never\n : T extends PluralForm // plural object\n ? ''\n : T extends object\n ? { [K in keyof T]-?: Join<K, Flatten<T[K], Prev[D]>> }[keyof T]\n : '';\n\n// Fix it for you plural form\ntype PluralForm = Record<'one' | 'few' | 'many', string>;\n\ntype Join<K, P> = K extends string | number\n ? P extends string | number\n ? `${K}${'' extends P ? '' : '.'}${P}`\n : never\n : never;\n\ntype Prev = [never, 0, 1, 2, 3, 4, 5, ...Array<0>];\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// This one based on answer from StackOverflow:\n// https://stackoverflow.com/questions/58434389/typescript-deep-keyof-of-a-nested-object\n\nexport type Flatten<T, D extends number = 5> = [D] extends [never]\n ? never\n : T extends PluralForm // plural object\n ? ''\n : T extends object\n ? { [K in keyof T]-?: Join<K, Flatten<T[K], Prev[D]>> }[keyof T]\n : '';\n\n// Fix it for you plural form\ntype PluralForm = Record<'one' | 'few' | 'many', string>;\n\ntype Join<K, P> = K extends string | number\n ? P extends string | number\n ? `${K}${'' extends P ? '' : '.'}${P}`\n : never\n : never;\n\ntype Prev = [never, 0, 1, 2, 3, 4, 5, ...Array<0>];\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This helper generates Typescript types for i18n dictionary json\nfiles by flattening it with period delimiter. Supports plural forms."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Used for typing "},{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/i18n-js","rel":["nofollow"]},"children":[{"type":"text","value":"i18n.js"}]},{"type":"text","value":" dictionaries;"}]},{"type":"element","tag":"code","props":{"code":"import en from './en.json';\ntype TranslationPath = Flatten<typeof en>;\n\nconst t = (key: TranslationPath, options?: TranslateOptions) =>\n I18nLib.t(key, options);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b74055"},"children":[{"type":"text","value":"en"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-15ea19"},"children":[{"type":"text","value":"'./en.json'"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b0b9f6"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"TranslationPath"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"Flatten"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"typeof"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b74055"},"children":[{"type":"text","value":"en"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":">;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7c233"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2b32b2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72900f"},"children":[{"type":"text","value":"t"}]},{"type":"element","tag":"span","props":{"class":"ct-2b32b2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2d9980"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2b32b2"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ce246f"},"children":[{"type":"text","value":"key"}]},{"type":"element","tag":"span","props":{"class":"ct-2d9980"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2b32b2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dd53c4"},"children":[{"type":"text","value":"TranslationPath"}]},{"type":"element","tag":"span","props":{"class":"ct-2b32b2"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-ce246f"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-2d9980"},"children":[{"type":"text","value":"?:"}]},{"type":"element","tag":"span","props":{"class":"ct-2b32b2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dd53c4"},"children":[{"type":"text","value":"TranslateOptions"}]},{"type":"element","tag":"span","props":{"class":"ct-2b32b2"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c233"},"children":[{"type":"text","value":"=>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b74055"},"children":[{"type":"text","value":"I18nLib"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac8bfb"},"children":[{"type":"text","value":"t"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-b74055"},"children":[{"type":"text","value":"key"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b74055"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":");"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Flatten type defined here:"}]},{"type":"element","tag":"code","props":{"code":"// This one based on answer from StackOverflow:\n// https://stackoverflow.com/questions/58434389/typescript-deep-keyof-of-a-nested-object\n\nexport type Flatten<T, D extends number = 5> = [D] extends [never]\n ? never\n : T extends PluralForm // plural object\n ? ''\n : T extends object\n ? { [K in keyof T]-?: Join<K, Flatten<T[K], Prev[D]>> }[keyof T]\n : '';\n\n// Fix it for you plural form\ntype PluralForm = Record<'one' | 'few' | 'many', string>;\n\ntype Join<K, P> = K extends string | number\n ? P extends string | number\n ? `${K}${'' extends P ? '' : '.'}${P}`\n : never\n : never;\n\ntype Prev = [never, 0, 1, 2, 3, 4, 5, ...Array<0>];\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7f20ca"},"children":[{"type":"text","value":"// This one based on answer from StackOverflow:"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7f20ca"},"children":[{"type":"text","value":"// https://stackoverflow.com/questions/58434389/typescript-deep-keyof-of-a-nested-object"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b0b9f6"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"Flatten"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"T"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"D"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b0b9f6"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-11ec7f"},"children":[{"type":"text","value":"number"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f99b99"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"D"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"] "}]},{"type":"element","tag":"span","props":{"class":"ct-b0b9f6"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"class":"ct-11ec7f"},"children":[{"type":"text","value":"never"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-11ec7f"},"children":[{"type":"text","value":"never"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"T"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b0b9f6"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"PluralForm"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7f20ca"},"children":[{"type":"text","value":"// plural object"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-15ea19"},"children":[{"type":"text","value":"''"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"T"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b0b9f6"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-11ec7f"},"children":[{"type":"text","value":"object"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" { ["}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"K"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"in"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"keyof"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"T"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"]"}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"-?:"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"Join"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"K"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"Flatten"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"T"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"K"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"], "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"Prev"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"D"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"]>> }["}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"keyof"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"T"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-15ea19"},"children":[{"type":"text","value":"''"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7f20ca"},"children":[{"type":"text","value":"// Fix it for you plural form"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b0b9f6"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"PluralForm"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"Record"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-15ea19"},"children":[{"type":"text","value":"'one'"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-15ea19"},"children":[{"type":"text","value":"'few'"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-15ea19"},"children":[{"type":"text","value":"'many'"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-11ec7f"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":">;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b0b9f6"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"Join"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"K"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"P"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"K"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b0b9f6"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-11ec7f"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-11ec7f"},"children":[{"type":"text","value":"number"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"P"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b0b9f6"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-11ec7f"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-11ec7f"},"children":[{"type":"text","value":"number"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-15ea19"},"children":[{"type":"text","value":"`${"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"K"}]},{"type":"element","tag":"span","props":{"class":"ct-15ea19"},"children":[{"type":"text","value":"}${''"}]},{"type":"element","tag":"span","props":{"class":"ct-a027f6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b0b9f6"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-a027f6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"P"}]},{"type":"element","tag":"span","props":{"class":"ct-a027f6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"class":"ct-a027f6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-15ea19"},"children":[{"type":"text","value":"''"}]},{"type":"element","tag":"span","props":{"class":"ct-a027f6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-a027f6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-15ea19"},"children":[{"type":"text","value":"'.'}${"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"P"}]},{"type":"element","tag":"span","props":{"class":"ct-15ea19"},"children":[{"type":"text","value":"}`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-11ec7f"},"children":[{"type":"text","value":"never"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-11ec7f"},"children":[{"type":"text","value":"never"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b0b9f6"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"Prev"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"class":"ct-11ec7f"},"children":[{"type":"text","value":"never"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f99b99"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f99b99"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f99b99"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f99b99"},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f99b99"},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f99b99"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"Array"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-f99b99"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":">];"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-a027f6{color:#A5D6FF}.ct-f99b99{color:#79C0FF}.ct-11ec7f{color:#79C0FF}.ct-7f20ca{color:#8B949E}.ct-ac8bfb{color:#D2A8FF}.ct-dd53c4{color:#FFA657}.ct-ce246f{color:#FFA657}.ct-2d9980{color:#FF7B72}.ct-72900f{color:#D2A8FF}.ct-2b32b2{color:#C9D1D9}.ct-a7c233{color:#FF7B72}.ct-8ef880{color:#FFA657}.ct-b0b9f6{color:#FF7B72}.ct-15ea19{color:#A5D6FF}.ct-b74055{color:#C9D1D9}.ct-3f6086{color:#C9D1D9}.ct-62e4b4{color:#FF7B72}.light .ct-62e4b4{color:#859900}.light .ct-3f6086{color:#657B83}.light .ct-b74055{color:#268BD2}.light .ct-15ea19{color:#2AA198}.light .ct-b0b9f6{color:#073642}.light .ct-8ef880{color:#268BD2}.light .ct-a7c233{color:#073642}.light .ct-2b32b2{color:#657B83}.light .ct-72900f{color:#268BD2}.light .ct-2d9980{color:#859900}.light .ct-ce246f{color:#657B83}.light .ct-dd53c4{color:#268BD2}.light .ct-ac8bfb{color:#268BD2}.light .ct-7f20ca{color:#93A1A1}.light .ct-11ec7f{color:#859900}.light .ct-f99b99{color:#D33682}.light .ct-a027f6{color:#657B83}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Typescript:Flatten object with periods.md","_source":"content","_file":"Typescript/Flatten object with periods.md","_extension":"md"},{"_path":"/typescript/type-guards","_dir":"typescript","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Type Guards","description":"Useful for type checking at compile and run time:","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Useful for type checking at compile and run time:"}]},{"type":"element","tag":"code","props":{"code":"function isFish(pet: Fish | Bird): pet is Fish {\n return (pet as Fish).swim !== undefined;\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"function isFish(pet: Fish | Bird): pet is Fish {\n return (pet as Fish).swim !== undefined;\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Usage:"}]},{"type":"element","tag":"code","props":{"code":"const pet = getSmallPet();\n \nif (isFish(pet)) {\n pet.swim();\n} else {\n pet.fly();\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const pet = getSmallPet();\n \nif (isFish(pet)) {\n pet.swim();\n} else {\n pet.fly();\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Useful for type checking at compile and run time:"}]},{"type":"element","tag":"code","props":{"code":"function isFish(pet: Fish | Bird): pet is Fish {\n return (pet as Fish).swim !== undefined;\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-651390"},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"class":"ct-27e1db"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-50a0ee"},"children":[{"type":"text","value":"isFish"}]},{"type":"element","tag":"span","props":{"class":"ct-27e1db"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a8285d"},"children":[{"type":"text","value":"pet"}]},{"type":"element","tag":"span","props":{"class":"ct-dbd72e"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-27e1db"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8457d1"},"children":[{"type":"text","value":"Fish"}]},{"type":"element","tag":"span","props":{"class":"ct-27e1db"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dbd72e"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-27e1db"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8457d1"},"children":[{"type":"text","value":"Bird"}]},{"type":"element","tag":"span","props":{"class":"ct-27e1db"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-dbd72e"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-27e1db"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a8285d"},"children":[{"type":"text","value":"pet"}]},{"type":"element","tag":"span","props":{"class":"ct-27e1db"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dbd72e"},"children":[{"type":"text","value":"is"}]},{"type":"element","tag":"span","props":{"class":"ct-27e1db"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8457d1"},"children":[{"type":"text","value":"Fish"}]},{"type":"element","tag":"span","props":{"class":"ct-27e1db"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7b47ed"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-a686d9"},"children":[{"type":"text","value":"pet"}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7b47ed"},"children":[{"type":"text","value":"as"}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-35c055"},"children":[{"type":"text","value":"Fish"}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"class":"ct-a686d9"},"children":[{"type":"text","value":"swim"}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7b47ed"},"children":[{"type":"text","value":"!=="}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9343ba"},"children":[{"type":"text","value":"undefined"}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Usage:"}]},{"type":"element","tag":"code","props":{"code":"const pet = getSmallPet();\n \nif (isFish(pet)) {\n pet.swim();\n} else {\n pet.fly();\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f16cd6"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e065f3"},"children":[{"type":"text","value":"pet"}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7b47ed"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1f1b92"},"children":[{"type":"text","value":"getSmallPet"}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7b47ed"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-1f1b92"},"children":[{"type":"text","value":"isFish"}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a686d9"},"children":[{"type":"text","value":"pet"}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":")) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a686d9"},"children":[{"type":"text","value":"pet"}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1f1b92"},"children":[{"type":"text","value":"swim"}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":"} "}]},{"type":"element","tag":"span","props":{"class":"ct-7b47ed"},"children":[{"type":"text","value":"else"}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a686d9"},"children":[{"type":"text","value":"pet"}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1f1b92"},"children":[{"type":"text","value":"fly"}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-1f1b92{color:#D2A8FF}.ct-e065f3{color:#79C0FF}.ct-f16cd6{color:#FF7B72}.ct-9343ba{color:#79C0FF}.ct-35c055{color:#FFA657}.ct-a686d9{color:#C9D1D9}.ct-7b47ed{color:#FF7B72}.ct-413c42{color:#C9D1D9}.ct-8457d1{color:#FFA657}.ct-dbd72e{color:#FF7B72}.ct-a8285d{color:#FFA657}.ct-50a0ee{color:#D2A8FF}.ct-27e1db{color:#C9D1D9}.ct-651390{color:#FF7B72}.light .ct-651390{color:#073642}.light .ct-27e1db{color:#657B83}.light .ct-50a0ee{color:#268BD2}.light .ct-a8285d{color:#657B83}.light .ct-dbd72e{color:#859900}.light .ct-8457d1{color:#268BD2}.light .ct-413c42{color:#657B83}.light .ct-7b47ed{color:#859900}.light .ct-a686d9{color:#268BD2}.light .ct-35c055{color:#268BD2}.light .ct-9343ba{color:#B58900}.light .ct-f16cd6{color:#073642}.light .ct-e065f3{color:#268BD2}.light .ct-1f1b92{color:#268BD2}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Typescript:Type guards.md","_source":"content","_file":"Typescript/Type guards.md","_extension":"md"}],"navigation":[{"title":"Blockchain","_path":"/blockchain","children":[{"title":"Common Typescript Examples","_path":"/blockchain/common-typescript-examples"},{"title":"Smart Contracts","_path":"/blockchain/smart-contracts"}]},{"title":"Css","_path":"/css","children":[{"title":"Automatic Grid Like Masonry With Pure CSS","_path":"/css/automatic-grid-like-masonry-with-pure-css"},{"title":"Sass Nth Child Iterate Mixin","_path":"/css/sass-nth-child-iterate-mixin"},{"title":"Test If Browser Supports CSS Rules","_path":"/css/test-if-browser-supports-css-rules"}]},{"title":"Docker","_path":"/docker","children":[{"title":"Building Static Pages With Docker","_path":"/docker/building-static-pages-with-docker"},{"title":"Common Things With Docker Mailserver","_path":"/docker/common-things-with-docker-mailserver"},{"title":"Drone Ci","_path":"/docker/drone-ci"},{"title":"Github Pages With Drone Ci","_path":"/docker/github-pages-with-drone-ci"},{"title":"Private Docker Registry","_path":"/docker/private-docker-registry"},{"title":"Refresh Containers On Pull","_path":"/docker/refresh-containers-on-pull"},{"title":"Seed Dump Inside Docker","_path":"/docker/seed-dump-inside-docker"},{"title":"Wait For Mysql","_path":"/docker/wait-for-mysql"},{"title":"Wait For Redis","_path":"/docker/wait-for-redis"}]},{"title":"Frontend","_path":"/frontend","children":[{"title":"React Native","_path":"/frontend/react-native","children":[{"title":"OAuth2 Login","_path":"/frontend/react-native/oauth2-login"},{"title":"Preserve FlatList Scroll Position In React Native","_path":"/frontend/react-native/preserve-flatlist-scroll-position-in-react-native"},{"title":"Useful Comands","_path":"/frontend/react-native/useful-comands"}]},{"title":"React","_path":"/frontend/react","children":[{"title":"Axios Refresh Token On React","_path":"/frontend/react/axios-refresh-token-on-react"},{"title":"Axios With AbortController","_path":"/frontend/react/axios-with-abortcontroller"},{"title":"Detect Hook Deps Changes With UseWhatsChanged","_path":"/frontend/react/detect-hook-deps-changes-with-usewhatschanged"}]},{"title":"Vue","_path":"/frontend/vue","children":[{"title":"Adding Global Properties To Component","_path":"/frontend/vue/adding-global-properties-to-component"},{"title":"Make Nuxt Handle Obsidian Highlights","_path":"/frontend/vue/make-nuxt-handle-obsidian-highlights"}]},{"title":"Webgl","_path":"/frontend/webgl","children":[{"title":"Basics Of WebGL (Drawing A Cube)","_path":"/frontend/webgl/basics-of-webgl-(drawing-a-cube)"},{"title":"Fragment Shaders","_path":"/frontend/webgl/fragment-shaders"},{"title":"Rendering Without Blocking In A Worker","_path":"/frontend/webgl/rendering-without-blocking-in-a-worker"},{"title":"Vertex Shaders","_path":"/frontend/webgl/vertex-shaders"}]}]},{"title":"Git","_path":"/git","children":[{"title":"Force Git To Use HTTPS","_path":"/git/force-git-to-use-https"},{"title":"Git Aliases And Useful Commands","_path":"/git/git-aliases-and-useful-commands"}]},{"title":"Golang","_path":"/golang","children":[{"title":"I18n In Golang","_path":"/golang/i18n-in-golang"}]},{"title":"Graphql","_path":"/graphql","children":[{"title":"Apollo Client Pagination","_path":"/graphql/apollo-client-pagination"},{"title":"Refresh Token In Apollo Client","_path":"/graphql/refresh-token-in-apollo-client"}]},{"title":"Linux","_path":"/linux","children":[{"title":"Find Out Who Uses Swap","_path":"/linux/find-out-who-uses-swap"},{"title":"Fixing Lagging USB Headphones","_path":"/linux/fixing-lagging-usb-headphones"},{"title":"Gitea For Git Hosting","_path":"/linux/gitea-for-git-hosting"},{"title":"Google Photos Alternative With Photoprism","_path":"/linux/google-photos-alternative-with-photoprism"},{"title":"Linux On Asus Zenbook UM3402 YA","_path":"/linux/linux-on-asus-zenbook-um3402-ya"},{"title":"Resume Or Start Screen Session","_path":"/linux/resume-or-start-screen-session"},{"title":"Rsync File With SSH","_path":"/linux/rsync-file-with-ssh"},{"title":"Setting Up NGINX","_path":"/linux/setting-up-nginx"},{"title":"SSH","_path":"/linux/ssh"}]},{"title":"Obsidian","_path":"/obsidian","children":[{"title":"Self Hosted Obsidian Sync With CouchDB","_path":"/obsidian/self-hosted-obsidian-sync-with-couchdb"}]},{"title":"Sql","_path":"/sql","children":[{"title":"MySQL And MariaDB Setup","_path":"/sql/mysql-and-mariadb-setup"},{"title":"Postgress Setup","_path":"/sql/postgress-setup"}]},{"title":"Typescript","_path":"/typescript","children":[{"title":"Add Global Variable To Window","_path":"/typescript/add-global-variable-to-window"},{"title":"Flatten Object With Periods","_path":"/typescript/flatten-object-with-periods"},{"title":"Type Guards","_path":"/typescript/type-guards"}]}]}
\ No newline at end of file
diff --git a/docs/api/_content/navigation b/docs/api/_content/navigation
index 36871b1..d3495c5 100644
--- a/docs/api/_content/navigation
+++ b/docs/api/_content/navigation
@@ -1 +1 @@
-[{"title":"Blockchain","_path":"/blockchain","children":[{"title":"Common Typescript Examples","_path":"/blockchain/common-typescript-examples"},{"title":"Smart Contracts","_path":"/blockchain/smart-contracts"}]},{"title":"Css","_path":"/css","children":[{"title":"Automatic Grid Like Masonry With Pure CSS","_path":"/css/automatic-grid-like-masonry-with-pure-css"},{"title":"Sass Nth Child Iterate Mixin","_path":"/css/sass-nth-child-iterate-mixin"},{"title":"Test If Browser Supports CSS Rules","_path":"/css/test-if-browser-supports-css-rules"}]},{"title":"Docker","_path":"/docker","children":[{"title":"Building Static Pages With Docker","_path":"/docker/building-static-pages-with-docker"},{"title":"Drone Ci","_path":"/docker/drone-ci"},{"title":"Github Pages With Drone Ci","_path":"/docker/github-pages-with-drone-ci"},{"title":"Private Docker Registry","_path":"/docker/private-docker-registry"},{"title":"Refresh Containers On Pull","_path":"/docker/refresh-containers-on-pull"},{"title":"Seed Dump Inside Docker","_path":"/docker/seed-dump-inside-docker"},{"title":"Wait For Mysql","_path":"/docker/wait-for-mysql"},{"title":"Wait For Redis","_path":"/docker/wait-for-redis"}]},{"title":"Frontend","_path":"/frontend","children":[{"title":"React Native","_path":"/frontend/react-native","children":[{"title":"OAuth2 Login","_path":"/frontend/react-native/oauth2-login"},{"title":"Preserve FlatList Scroll Position In React Native","_path":"/frontend/react-native/preserve-flatlist-scroll-position-in-react-native"},{"title":"Useful Comands","_path":"/frontend/react-native/useful-comands"}]},{"title":"React","_path":"/frontend/react","children":[{"title":"Axios Refresh Token On React","_path":"/frontend/react/axios-refresh-token-on-react"},{"title":"Axios With AbortController","_path":"/frontend/react/axios-with-abortcontroller"},{"title":"UseWhatsChanged","_path":"/frontend/react/usewhatschanged"}]},{"title":"Vue","_path":"/frontend/vue","children":[{"title":"Adding Global Properties To Component","_path":"/frontend/vue/adding-global-properties-to-component"},{"title":"Make Nuxt Handle Obsidian Highlights","_path":"/frontend/vue/make-nuxt-handle-obsidian-highlights"}]},{"title":"Webgl","_path":"/frontend/webgl","children":[{"title":"Basics Of WebGL (Drawing A Cube)","_path":"/frontend/webgl/basics-of-webgl-(drawing-a-cube)"},{"title":"Fragment Shaders","_path":"/frontend/webgl/fragment-shaders"},{"title":"Rendering Without Blocking In A Worker","_path":"/frontend/webgl/rendering-without-blocking-in-a-worker"},{"title":"Vertex Shaders","_path":"/frontend/webgl/vertex-shaders"}]}]},{"title":"Git","_path":"/git","children":[{"title":"Force Git To Use HTTPS","_path":"/git/force-git-to-use-https"},{"title":"Git Aliases And Useful Commands","_path":"/git/git-aliases-and-useful-commands"}]},{"title":"Golang","_path":"/golang","children":[{"title":"I18n In Golang","_path":"/golang/i18n-in-golang"}]},{"title":"Graphql","_path":"/graphql","children":[{"title":"Apollo Client Pagination","_path":"/graphql/apollo-client-pagination"},{"title":"Refresh Token In Apollo Client","_path":"/graphql/refresh-token-in-apollo-client"}]},{"title":"Linux","_path":"/linux","children":[{"title":"Find Out Who Uses Swap","_path":"/linux/find-out-who-uses-swap"},{"title":"Fixing Lagging USB Headphones","_path":"/linux/fixing-lagging-usb-headphones"},{"title":"Gitea For Git Hosting","_path":"/linux/gitea-for-git-hosting"},{"title":"Google Photos Alternative With Photoprism","_path":"/linux/google-photos-alternative-with-photoprism"},{"title":"Linux On Asus Zenbook UM3402 YA","_path":"/linux/linux-on-asus-zenbook-um3402-ya"},{"title":"Resume Or Start Screen Session","_path":"/linux/resume-or-start-screen-session"},{"title":"Rsync File With SSH","_path":"/linux/rsync-file-with-ssh"},{"title":"Setting Up NGINX","_path":"/linux/setting-up-nginx"},{"title":"SSH","_path":"/linux/ssh"}]},{"title":"Obsidian","_path":"/obsidian","children":[{"title":"Self Hosted Obsidian Sync With CouchDB","_path":"/obsidian/self-hosted-obsidian-sync-with-couchdb"}]},{"title":"Sql","_path":"/sql","children":[{"title":"MySQL And MariaDB Setup","_path":"/sql/mysql-and-mariadb-setup"},{"title":"Postgress Setup","_path":"/sql/postgress-setup"}]},{"title":"Typescript","_path":"/typescript","children":[{"title":"Add Global Variable To Window","_path":"/typescript/add-global-variable-to-window"},{"title":"Flatten Object With Periods","_path":"/typescript/flatten-object-with-periods"},{"title":"Type Guards","_path":"/typescript/type-guards"}]}]
\ No newline at end of file
+[{"title":"Blockchain","_path":"/blockchain","children":[{"title":"Common Typescript Examples","_path":"/blockchain/common-typescript-examples"},{"title":"Smart Contracts","_path":"/blockchain/smart-contracts"}]},{"title":"Css","_path":"/css","children":[{"title":"Automatic Grid Like Masonry With Pure CSS","_path":"/css/automatic-grid-like-masonry-with-pure-css"},{"title":"Sass Nth Child Iterate Mixin","_path":"/css/sass-nth-child-iterate-mixin"},{"title":"Test If Browser Supports CSS Rules","_path":"/css/test-if-browser-supports-css-rules"}]},{"title":"Docker","_path":"/docker","children":[{"title":"Building Static Pages With Docker","_path":"/docker/building-static-pages-with-docker"},{"title":"Common Things With Docker Mailserver","_path":"/docker/common-things-with-docker-mailserver"},{"title":"Drone Ci","_path":"/docker/drone-ci"},{"title":"Github Pages With Drone Ci","_path":"/docker/github-pages-with-drone-ci"},{"title":"Private Docker Registry","_path":"/docker/private-docker-registry"},{"title":"Refresh Containers On Pull","_path":"/docker/refresh-containers-on-pull"},{"title":"Seed Dump Inside Docker","_path":"/docker/seed-dump-inside-docker"},{"title":"Wait For Mysql","_path":"/docker/wait-for-mysql"},{"title":"Wait For Redis","_path":"/docker/wait-for-redis"}]},{"title":"Frontend","_path":"/frontend","children":[{"title":"React Native","_path":"/frontend/react-native","children":[{"title":"OAuth2 Login","_path":"/frontend/react-native/oauth2-login"},{"title":"Preserve FlatList Scroll Position In React Native","_path":"/frontend/react-native/preserve-flatlist-scroll-position-in-react-native"},{"title":"Useful Comands","_path":"/frontend/react-native/useful-comands"}]},{"title":"React","_path":"/frontend/react","children":[{"title":"Axios Refresh Token On React","_path":"/frontend/react/axios-refresh-token-on-react"},{"title":"Axios With AbortController","_path":"/frontend/react/axios-with-abortcontroller"},{"title":"Detect Hook Deps Changes With UseWhatsChanged","_path":"/frontend/react/detect-hook-deps-changes-with-usewhatschanged"}]},{"title":"Vue","_path":"/frontend/vue","children":[{"title":"Adding Global Properties To Component","_path":"/frontend/vue/adding-global-properties-to-component"},{"title":"Make Nuxt Handle Obsidian Highlights","_path":"/frontend/vue/make-nuxt-handle-obsidian-highlights"}]},{"title":"Webgl","_path":"/frontend/webgl","children":[{"title":"Basics Of WebGL (Drawing A Cube)","_path":"/frontend/webgl/basics-of-webgl-(drawing-a-cube)"},{"title":"Fragment Shaders","_path":"/frontend/webgl/fragment-shaders"},{"title":"Rendering Without Blocking In A Worker","_path":"/frontend/webgl/rendering-without-blocking-in-a-worker"},{"title":"Vertex Shaders","_path":"/frontend/webgl/vertex-shaders"}]}]},{"title":"Git","_path":"/git","children":[{"title":"Force Git To Use HTTPS","_path":"/git/force-git-to-use-https"},{"title":"Git Aliases And Useful Commands","_path":"/git/git-aliases-and-useful-commands"}]},{"title":"Golang","_path":"/golang","children":[{"title":"I18n In Golang","_path":"/golang/i18n-in-golang"}]},{"title":"Graphql","_path":"/graphql","children":[{"title":"Apollo Client Pagination","_path":"/graphql/apollo-client-pagination"},{"title":"Refresh Token In Apollo Client","_path":"/graphql/refresh-token-in-apollo-client"}]},{"title":"Linux","_path":"/linux","children":[{"title":"Find Out Who Uses Swap","_path":"/linux/find-out-who-uses-swap"},{"title":"Fixing Lagging USB Headphones","_path":"/linux/fixing-lagging-usb-headphones"},{"title":"Gitea For Git Hosting","_path":"/linux/gitea-for-git-hosting"},{"title":"Google Photos Alternative With Photoprism","_path":"/linux/google-photos-alternative-with-photoprism"},{"title":"Linux On Asus Zenbook UM3402 YA","_path":"/linux/linux-on-asus-zenbook-um3402-ya"},{"title":"Resume Or Start Screen Session","_path":"/linux/resume-or-start-screen-session"},{"title":"Rsync File With SSH","_path":"/linux/rsync-file-with-ssh"},{"title":"Setting Up NGINX","_path":"/linux/setting-up-nginx"},{"title":"SSH","_path":"/linux/ssh"}]},{"title":"Obsidian","_path":"/obsidian","children":[{"title":"Self Hosted Obsidian Sync With CouchDB","_path":"/obsidian/self-hosted-obsidian-sync-with-couchdb"}]},{"title":"Sql","_path":"/sql","children":[{"title":"MySQL And MariaDB Setup","_path":"/sql/mysql-and-mariadb-setup"},{"title":"Postgress Setup","_path":"/sql/postgress-setup"}]},{"title":"Typescript","_path":"/typescript","children":[{"title":"Add Global Variable To Window","_path":"/typescript/add-global-variable-to-window"},{"title":"Flatten Object With Periods","_path":"/typescript/flatten-object-with-periods"},{"title":"Type Guards","_path":"/typescript/type-guards"}]}]
\ No newline at end of file
diff --git a/docs/api/_content/query/068glZS8Mz.json b/docs/api/_content/query/068glZS8Mz.json
index 0f3cb58..a1e4ed5 100644
--- a/docs/api/_content/query/068glZS8Mz.json
+++ b/docs/api/_content/query/068glZS8Mz.json
@@ -1 +1 @@
-{"_path":"/css/automatic-grid-like-masonry-with-pure-css","_dir":"css","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Automatic Grid Like Masonry With Pure CSS","description":"Grid, that places items by density. Pure #css solution. Can be used with items, that take different amount of rows/columns.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Grid, that places items by density. Pure #css solution. Can be used with items, that take different amount of rows/columns."}]},{"type":"element","tag":"code","props":{"code":"$cell: 250px;\n$gap: 20px;\n\n.grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax($cell, 1fr));\n grid-auto-rows: 256px;\n grid-auto-flow: row dense;\n grid-column-gap: $gap;\n grid-row-gap: $gap;\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"$cell: 250px;\n$gap: 20px;\n\n.grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax($cell, 1fr));\n grid-auto-rows: 256px;\n grid-auto-flow: row dense;\n grid-column-gap: $gap;\n grid-row-gap: $gap;\n}\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"basic-elements-with-double-height-or-width"},"children":[{"type":"text","value":"Basic elements with double height or width"}]},{"type":"element","tag":"code","props":{"code":".h-2 { // takes 2 columns\n grid-column-end: span 2;\n}\n\n.v-2 { // takes 2 rows\n grid-row-end: span 2;\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":".h-2 { // takes 2 columns\n grid-column-end: span 2;\n}\n\n.v-2 { // takes 2 rows\n grid-row-end: span 2;\n}\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"header-that-fills-all-columns"},"children":[{"type":"text","value":"Header, that fills all columns"}]},{"type":"element","tag":"code","props":{"code":".full-width {\n grid-row: 1 / 2; // height: 1 row\n grid-column: 1 / -1;\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":".full-width {\n grid-row: 1 / 2; // height: 1 row\n grid-column: 1 / -1;\n}\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"stamp-element-that-takes-3-rows-in-the-top-right-corner"},"children":[{"type":"text","value":"Stamp element, that takes 3 rows in the top right corner"}]},{"type":"element","tag":"code","props":{"code":".top-right {\n grid-row: 1 / 3; // height here\n grid-column: -2 / -1; // width here\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":".top-right {\n grid-row: 1 / 3; // height here\n grid-column: -2 / -1; // width here\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Grid, that places items by density. Pure #css solution. Can be used with items, that take different amount of rows/columns."}]},{"type":"element","tag":"code","props":{"code":"$cell: 250px;\n$gap: 20px;\n\n.grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax($cell, 1fr));\n grid-auto-rows: 256px;\n grid-auto-flow: row dense;\n grid-column-gap: $gap;\n grid-row-gap: $gap;\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0b1739"},"children":[{"type":"text","value":"$cell: "}]},{"type":"element","tag":"span","props":{"class":"ct-7f7248"},"children":[{"type":"text","value":"250"}]},{"type":"element","tag":"span","props":{"class":"ct-cb9271"},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0b1739"},"children":[{"type":"text","value":"$gap: "}]},{"type":"element","tag":"span","props":{"class":"ct-7f7248"},"children":[{"type":"text","value":"20"}]},{"type":"element","tag":"span","props":{"class":"ct-cb9271"},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-782921"},"children":[{"type":"text","value":".grid"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d1855"},"children":[{"type":"text","value":"display"}]},{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-486191"},"children":[{"type":"text","value":"grid"}]},{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d1855"},"children":[{"type":"text","value":"grid-template-columns"}]},{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-d99f2d"},"children":[{"type":"text","value":"repeat"}]},{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-26f635"},"children":[{"type":"text","value":"auto-fit"}]},{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-d99f2d"},"children":[{"type":"text","value":"minmax"}]},{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-26f635"},"children":[{"type":"text","value":"$cell"}]},{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6a1d51"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-b72695"},"children":[{"type":"text","value":"fr"}]},{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":"));"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e72082"},"children":[{"type":"text","value":"grid-auto-rows"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-7f7248"},"children":[{"type":"text","value":"256"}]},{"type":"element","tag":"span","props":{"class":"ct-cb9271"},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d1855"},"children":[{"type":"text","value":"grid-auto-flow"}]},{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-486191"},"children":[{"type":"text","value":"row"}]},{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-486191"},"children":[{"type":"text","value":"dense"}]},{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d1855"},"children":[{"type":"text","value":"grid-column-gap"}]},{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-26f635"},"children":[{"type":"text","value":"$gap"}]},{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d1855"},"children":[{"type":"text","value":"grid-row-gap"}]},{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-26f635"},"children":[{"type":"text","value":"$gap"}]},{"type":"element","tag":"span","props":{"class":"ct-9d7d33"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"basic-elements-with-double-height-or-width"},"children":[{"type":"text","value":"Basic elements with double height or width"}]},{"type":"element","tag":"code","props":{"code":".h-2 { // takes 2 columns\n grid-column-end: span 2;\n}\n\n.v-2 { // takes 2 rows\n grid-row-end: span 2;\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-782921"},"children":[{"type":"text","value":".h-2"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-6636be"},"children":[{"type":"text","value":"// takes 2 columns"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e72082"},"children":[{"type":"text","value":"grid-column-end"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e72082"},"children":[{"type":"text","value":"span"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7f7248"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-782921"},"children":[{"type":"text","value":".v-2"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-6636be"},"children":[{"type":"text","value":"// takes 2 rows"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e72082"},"children":[{"type":"text","value":"grid-row-end"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e72082"},"children":[{"type":"text","value":"span"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7f7248"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"header-that-fills-all-columns"},"children":[{"type":"text","value":"Header, that fills all columns"}]},{"type":"element","tag":"code","props":{"code":".full-width {\n grid-row: 1 / 2; // height: 1 row\n grid-column: 1 / -1;\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-782921"},"children":[{"type":"text","value":".full-width"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e72082"},"children":[{"type":"text","value":"grid-row"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-7f7248"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cb9271"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7f7248"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":"; "}]},{"type":"element","tag":"span","props":{"class":"ct-6636be"},"children":[{"type":"text","value":"// height: 1 row"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e72082"},"children":[{"type":"text","value":"grid-column"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-7f7248"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" / "}]},{"type":"element","tag":"span","props":{"class":"ct-7f7248"},"children":[{"type":"text","value":"-1"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"stamp-element-that-takes-3-rows-in-the-top-right-corner"},"children":[{"type":"text","value":"Stamp element, that takes 3 rows in the top right corner"}]},{"type":"element","tag":"code","props":{"code":".top-right {\n grid-row: 1 / 3; // height here\n grid-column: -2 / -1; // width here\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-782921"},"children":[{"type":"text","value":".top-right"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e72082"},"children":[{"type":"text","value":"grid-row"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-7f7248"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cb9271"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7f7248"},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":"; "}]},{"type":"element","tag":"span","props":{"class":"ct-6636be"},"children":[{"type":"text","value":"// height here"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e72082"},"children":[{"type":"text","value":"grid-column"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-7f7248"},"children":[{"type":"text","value":"-2"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":" / "}]},{"type":"element","tag":"span","props":{"class":"ct-7f7248"},"children":[{"type":"text","value":"-1"}]},{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":"; "}]},{"type":"element","tag":"span","props":{"class":"ct-6636be"},"children":[{"type":"text","value":"// width here"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-19f723"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-6636be{color:#8B949E}.ct-e72082{color:#79C0FF}.ct-b72695{color:#FF7B72}.ct-6a1d51{color:#79C0FF}.ct-26f635{color:#FFA657}.ct-d99f2d{color:#79C0FF}.ct-486191{color:#79C0FF}.ct-7d1855{color:#79C0FF}.ct-9d7d33{color:#C9D1D9}.ct-782921{color:#79C0FF}.ct-19f723{color:#C9D1D9}.ct-cb9271{color:#FF7B72}.ct-7f7248{color:#79C0FF}.ct-0b1739{color:#FFA657}.light .ct-0b1739{color:#657B83}.light .ct-7f7248{color:#D33682}.light .ct-cb9271{color:#859900}.light .ct-19f723{color:#657B83}.light .ct-782921{color:#93A1A1}.light .ct-9d7d33{color:#657B83}.light .ct-7d1855{color:#859900}.light .ct-486191{color:#657B83}.light .ct-d99f2d{color:#268BD2}.light .ct-26f635{color:#657B83}.light .ct-6a1d51{color:#D33682}.light .ct-b72695{color:#859900}.light .ct-e72082{color:#859900}.light .ct-6636be{color:#93A1A1}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"basic-elements-with-double-height-or-width","depth":3,"text":"Basic elements with double height or width"},{"id":"header-that-fills-all-columns","depth":3,"text":"Header, that fills all columns"},{"id":"stamp-element-that-takes-3-rows-in-the-top-right-corner","depth":3,"text":"Stamp element, that takes 3 rows in the top right corner"}]}},"_type":"markdown","_id":"content:CSS:Automatic Grid like Masonry with pure CSS.md","_source":"content","_file":"CSS/Automatic Grid like Masonry with pure CSS.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/css/automatic-grid-like-masonry-with-pure-css","_dir":"css","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Automatic Grid Like Masonry With Pure CSS","description":"Grid, that places items by density. Pure #css solution. Can be used with items, that take different amount of rows/columns.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Grid, that places items by density. Pure #css solution. Can be used with items, that take different amount of rows/columns."}]},{"type":"element","tag":"code","props":{"code":"$cell: 250px;\n$gap: 20px;\n\n.grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax($cell, 1fr));\n grid-auto-rows: 256px;\n grid-auto-flow: row dense;\n grid-column-gap: $gap;\n grid-row-gap: $gap;\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"$cell: 250px;\n$gap: 20px;\n\n.grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax($cell, 1fr));\n grid-auto-rows: 256px;\n grid-auto-flow: row dense;\n grid-column-gap: $gap;\n grid-row-gap: $gap;\n}\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"basic-elements-with-double-height-or-width"},"children":[{"type":"text","value":"Basic elements with double height or width"}]},{"type":"element","tag":"code","props":{"code":".h-2 { // takes 2 columns\n grid-column-end: span 2;\n}\n\n.v-2 { // takes 2 rows\n grid-row-end: span 2;\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":".h-2 { // takes 2 columns\n grid-column-end: span 2;\n}\n\n.v-2 { // takes 2 rows\n grid-row-end: span 2;\n}\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"header-that-fills-all-columns"},"children":[{"type":"text","value":"Header, that fills all columns"}]},{"type":"element","tag":"code","props":{"code":".full-width {\n grid-row: 1 / 2; // height: 1 row\n grid-column: 1 / -1;\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":".full-width {\n grid-row: 1 / 2; // height: 1 row\n grid-column: 1 / -1;\n}\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"stamp-element-that-takes-3-rows-in-the-top-right-corner"},"children":[{"type":"text","value":"Stamp element, that takes 3 rows in the top right corner"}]},{"type":"element","tag":"code","props":{"code":".top-right {\n grid-row: 1 / 3; // height here\n grid-column: -2 / -1; // width here\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":".top-right {\n grid-row: 1 / 3; // height here\n grid-column: -2 / -1; // width here\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Grid, that places items by density. Pure #css solution. Can be used with items, that take different amount of rows/columns."}]},{"type":"element","tag":"code","props":{"code":"$cell: 250px;\n$gap: 20px;\n\n.grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax($cell, 1fr));\n grid-auto-rows: 256px;\n grid-auto-flow: row dense;\n grid-column-gap: $gap;\n grid-row-gap: $gap;\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0a7911"},"children":[{"type":"text","value":"$cell: "}]},{"type":"element","tag":"span","props":{"class":"ct-64f3a7"},"children":[{"type":"text","value":"250"}]},{"type":"element","tag":"span","props":{"class":"ct-7d5daa"},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0a7911"},"children":[{"type":"text","value":"$gap: "}]},{"type":"element","tag":"span","props":{"class":"ct-64f3a7"},"children":[{"type":"text","value":"20"}]},{"type":"element","tag":"span","props":{"class":"ct-7d5daa"},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-810bae"},"children":[{"type":"text","value":".grid"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aa8a5"},"children":[{"type":"text","value":"display"}]},{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-8d33fd"},"children":[{"type":"text","value":"grid"}]},{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aa8a5"},"children":[{"type":"text","value":"grid-template-columns"}]},{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-d8b9cf"},"children":[{"type":"text","value":"repeat"}]},{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-9e6b01"},"children":[{"type":"text","value":"auto-fit"}]},{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-d8b9cf"},"children":[{"type":"text","value":"minmax"}]},{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-9e6b01"},"children":[{"type":"text","value":"$cell"}]},{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a29ed9"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-c55733"},"children":[{"type":"text","value":"fr"}]},{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":"));"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-db8cc5"},"children":[{"type":"text","value":"grid-auto-rows"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-64f3a7"},"children":[{"type":"text","value":"256"}]},{"type":"element","tag":"span","props":{"class":"ct-7d5daa"},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aa8a5"},"children":[{"type":"text","value":"grid-auto-flow"}]},{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-8d33fd"},"children":[{"type":"text","value":"row"}]},{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d33fd"},"children":[{"type":"text","value":"dense"}]},{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aa8a5"},"children":[{"type":"text","value":"grid-column-gap"}]},{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9e6b01"},"children":[{"type":"text","value":"$gap"}]},{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aa8a5"},"children":[{"type":"text","value":"grid-row-gap"}]},{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9e6b01"},"children":[{"type":"text","value":"$gap"}]},{"type":"element","tag":"span","props":{"class":"ct-ed4939"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"basic-elements-with-double-height-or-width"},"children":[{"type":"text","value":"Basic elements with double height or width"}]},{"type":"element","tag":"code","props":{"code":".h-2 { // takes 2 columns\n grid-column-end: span 2;\n}\n\n.v-2 { // takes 2 rows\n grid-row-end: span 2;\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-810bae"},"children":[{"type":"text","value":".h-2"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-0f60fc"},"children":[{"type":"text","value":"// takes 2 columns"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-db8cc5"},"children":[{"type":"text","value":"grid-column-end"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-db8cc5"},"children":[{"type":"text","value":"span"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-64f3a7"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-810bae"},"children":[{"type":"text","value":".v-2"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-0f60fc"},"children":[{"type":"text","value":"// takes 2 rows"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-db8cc5"},"children":[{"type":"text","value":"grid-row-end"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-db8cc5"},"children":[{"type":"text","value":"span"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-64f3a7"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"header-that-fills-all-columns"},"children":[{"type":"text","value":"Header, that fills all columns"}]},{"type":"element","tag":"code","props":{"code":".full-width {\n grid-row: 1 / 2; // height: 1 row\n grid-column: 1 / -1;\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-810bae"},"children":[{"type":"text","value":".full-width"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-db8cc5"},"children":[{"type":"text","value":"grid-row"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-64f3a7"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d5daa"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-64f3a7"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":"; "}]},{"type":"element","tag":"span","props":{"class":"ct-0f60fc"},"children":[{"type":"text","value":"// height: 1 row"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-db8cc5"},"children":[{"type":"text","value":"grid-column"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-64f3a7"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" / "}]},{"type":"element","tag":"span","props":{"class":"ct-64f3a7"},"children":[{"type":"text","value":"-1"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"stamp-element-that-takes-3-rows-in-the-top-right-corner"},"children":[{"type":"text","value":"Stamp element, that takes 3 rows in the top right corner"}]},{"type":"element","tag":"code","props":{"code":".top-right {\n grid-row: 1 / 3; // height here\n grid-column: -2 / -1; // width here\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-810bae"},"children":[{"type":"text","value":".top-right"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-db8cc5"},"children":[{"type":"text","value":"grid-row"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-64f3a7"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d5daa"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-64f3a7"},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":"; "}]},{"type":"element","tag":"span","props":{"class":"ct-0f60fc"},"children":[{"type":"text","value":"// height here"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-db8cc5"},"children":[{"type":"text","value":"grid-column"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-64f3a7"},"children":[{"type":"text","value":"-2"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":" / "}]},{"type":"element","tag":"span","props":{"class":"ct-64f3a7"},"children":[{"type":"text","value":"-1"}]},{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":"; "}]},{"type":"element","tag":"span","props":{"class":"ct-0f60fc"},"children":[{"type":"text","value":"// width here"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d93ca5"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-0f60fc{color:#8B949E}.ct-db8cc5{color:#79C0FF}.ct-c55733{color:#FF7B72}.ct-a29ed9{color:#79C0FF}.ct-9e6b01{color:#FFA657}.ct-d8b9cf{color:#79C0FF}.ct-8d33fd{color:#79C0FF}.ct-9aa8a5{color:#79C0FF}.ct-ed4939{color:#C9D1D9}.ct-810bae{color:#79C0FF}.ct-d93ca5{color:#C9D1D9}.ct-7d5daa{color:#FF7B72}.ct-64f3a7{color:#79C0FF}.ct-0a7911{color:#FFA657}.light .ct-0a7911{color:#657B83}.light .ct-64f3a7{color:#D33682}.light .ct-7d5daa{color:#859900}.light .ct-d93ca5{color:#657B83}.light .ct-810bae{color:#93A1A1}.light .ct-ed4939{color:#657B83}.light .ct-9aa8a5{color:#859900}.light .ct-8d33fd{color:#657B83}.light .ct-d8b9cf{color:#268BD2}.light .ct-9e6b01{color:#657B83}.light .ct-a29ed9{color:#D33682}.light .ct-c55733{color:#859900}.light .ct-db8cc5{color:#859900}.light .ct-0f60fc{color:#93A1A1}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"basic-elements-with-double-height-or-width","depth":3,"text":"Basic elements with double height or width"},{"id":"header-that-fills-all-columns","depth":3,"text":"Header, that fills all columns"},{"id":"stamp-element-that-takes-3-rows-in-the-top-right-corner","depth":3,"text":"Stamp element, that takes 3 rows in the top right corner"}]}},"_type":"markdown","_id":"content:CSS:Automatic Grid like Masonry with pure CSS.md","_source":"content","_file":"CSS/Automatic Grid like Masonry with pure CSS.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/1Q9jaWh0XH.json b/docs/api/_content/query/1Q9jaWh0XH.json
index cd5c53d..bcfef04 100644
--- a/docs/api/_content/query/1Q9jaWh0XH.json
+++ b/docs/api/_content/query/1Q9jaWh0XH.json
@@ -1 +1 @@
-{"_path":"/obsidian/self-hosted-obsidian-sync-with-couchdb","_dir":"obsidian","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Self Hosted Obsidian Sync With CouchDB","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/vrtmrz/obsidian-livesync","rel":["nofollow"]},"children":[{"type":"text","value":"Main documentation"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/vrtmrz/obsidian-livesync/blob/main/docs/setup_own_server.md","rel":["nofollow"]},"children":[{"type":"text","value":"Setting up couchdb"}]}]}]},{"type":"element","tag":"h2","props":{"id":"setting-up-environment"},"children":[{"type":"text","value":"Setting up environment"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"First, you should create "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docker-compose.yml"}]},{"type":"text","value":" with the following contents:"}]},{"type":"element","tag":"code","props":{"code":"version: '3'\nservices:\n couchserver:\n container_name: obsidian__database\n image: couchdb\n restart: always\n ports:\n - \"5984:5984\"\n environment:\n - COUCHDB_USER=user\n - COUCHDB_PASSWORD=somepassword\n volumes:\n - ./couchdb/dbdata:/opt/couchdb/data\n - ./couchdb/local.ini:/opt/couchdb/etc/local.ini\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"version: '3'\nservices:\n couchserver:\n container_name: obsidian__database\n image: couchdb\n restart: always\n ports:\n - \"5984:5984\"\n environment:\n - COUCHDB_USER=user\n - COUCHDB_PASSWORD=somepassword\n volumes:\n - ./couchdb/dbdata:/opt/couchdb/data\n - ./couchdb/local.ini:/opt/couchdb/etc/local.ini\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then create initial config at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"./couchdb/local.ini"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"[couchdb]\nsingle_node=true\nmax_document_size=50000000\nmax_http_request_size=4294967296\n\n[chttpd]\nrequire_valid_user = true\n\n[chttpd_auth]\nrequire_valid_user = true\nauthentication_redirect = /_utils/session.html\n\n[httpd]\nWWW-Authenticate = Basic realm=\"couchdb\"\nenable_cors = true\n\n[cors]\norigins = app://obsidian.md,capacitor://localhost,http://localhost\ncredentials = true\nheaders = accept, authorization, content-type, origin, referer\nmethods = GET, PUT, POST, HEAD, DELETE\nmax_age = 3600\n","language":"ini"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"[couchdb]\nsingle_node=true\nmax_document_size=50000000\nmax_http_request_size=4294967296\n\n[chttpd]\nrequire_valid_user = true\n\n[chttpd_auth]\nrequire_valid_user = true\nauthentication_redirect = /_utils/session.html\n\n[httpd]\nWWW-Authenticate = Basic realm=\"couchdb\"\nenable_cors = true\n\n[cors]\norigins = app://obsidian.md,capacitor://localhost,http://localhost\ncredentials = true\nheaders = accept, authorization, content-type, origin, referer\nmethods = GET, PUT, POST, HEAD, DELETE\nmax_age = 3600\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then, in order to have sync on mobile devices, we will need a reverse proxy with nginx at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/nginx/sites-enabled/obsidian-couchdb"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"server {\n listen 80;\n listen [::]:80;\n server_name couchdb.yourhost.com;\n return 301 https://$host$request_uri;\n}\n\nserver {\n listen 443 ssl http2;\n listen [::]:443 ssl http2;\n\n ssl_certificate /etc/letsencrypt/live/yourhost.com/fullchain.pem; # managed by Certbot\n ssl_certificate_key /etc/letsencrypt/live/yourhost.com/privkey.pem; # managed by Certbot\n ssl_trusted_certificate /etc/letsencrypt/live/yourhost.com/chain.pem;\n\n server_name couchdb.yourhost.com;\n client_max_body_size 200M;\n\n location / {\n proxy_redirect off;\n proxy_set_header Host $host;\n proxy_set_header X-Real-IP $remote_addr;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n\n proxy_pass http://127.0.0.1:5984;\n }\n}\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"server {\n listen 80;\n listen [::]:80;\n server_name couchdb.yourhost.com;\n return 301 https://$host$request_uri;\n}\n\nserver {\n listen 443 ssl http2;\n listen [::]:443 ssl http2;\n\n ssl_certificate /etc/letsencrypt/live/yourhost.com/fullchain.pem; # managed by Certbot\n ssl_certificate_key /etc/letsencrypt/live/yourhost.com/privkey.pem; # managed by Certbot\n ssl_trusted_certificate /etc/letsencrypt/live/yourhost.com/chain.pem;\n\n server_name couchdb.yourhost.com;\n client_max_body_size 200M;\n\n location / {\n proxy_redirect off;\n proxy_set_header Host $host;\n proxy_set_header X-Real-IP $remote_addr;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n\n proxy_pass http://127.0.0.1:5984;\n }\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"setting-up-obsidian"},"children":[{"type":"text","value":"Setting up Obsidian"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Install "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Self-hosted LiveSync"}]},{"type":"text","value":" plugin"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Change host to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"https://yourhost.com"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Specify username and password"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Press "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"test"}]},{"type":"text","value":", then "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fetch database"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/vrtmrz/obsidian-livesync","rel":["nofollow"]},"children":[{"type":"text","value":"Main documentation"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/vrtmrz/obsidian-livesync/blob/main/docs/setup_own_server.md","rel":["nofollow"]},"children":[{"type":"text","value":"Setting up couchdb"}]}]}]},{"type":"element","tag":"h2","props":{"id":"setting-up-environment"},"children":[{"type":"text","value":"Setting up environment"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"First, you should create "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docker-compose.yml"}]},{"type":"text","value":" with the following contents:"}]},{"type":"element","tag":"code","props":{"code":"version: '3'\nservices:\n couchserver:\n container_name: obsidian__database\n image: couchdb\n restart: always\n ports:\n - \"5984:5984\"\n environment:\n - COUCHDB_USER=user\n - COUCHDB_PASSWORD=somepassword\n volumes:\n - ./couchdb/dbdata:/opt/couchdb/data\n - ./couchdb/local.ini:/opt/couchdb/etc/local.ini\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1391ae"},"children":[{"type":"text","value":"version"}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-8c9f43"},"children":[{"type":"text","value":"'3'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1391ae"},"children":[{"type":"text","value":"services"}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1391ae"},"children":[{"type":"text","value":"couchserver"}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1391ae"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-8c9f43"},"children":[{"type":"text","value":"obsidian__database"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1391ae"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-8c9f43"},"children":[{"type":"text","value":"couchdb"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1391ae"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-8c9f43"},"children":[{"type":"text","value":"always"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1391ae"},"children":[{"type":"text","value":"ports"}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-8c9f43"},"children":[{"type":"text","value":"\"5984:5984\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1391ae"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-8c9f43"},"children":[{"type":"text","value":"COUCHDB_USER=user"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-8c9f43"},"children":[{"type":"text","value":"COUCHDB_PASSWORD=somepassword"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1391ae"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-8c9f43"},"children":[{"type":"text","value":"./couchdb/dbdata:/opt/couchdb/data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-8c9f43"},"children":[{"type":"text","value":"./couchdb/local.ini:/opt/couchdb/etc/local.ini"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then create initial config at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"./couchdb/local.ini"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"[couchdb]\nsingle_node=true\nmax_document_size=50000000\nmax_http_request_size=4294967296\n\n[chttpd]\nrequire_valid_user = true\n\n[chttpd_auth]\nrequire_valid_user = true\nauthentication_redirect = /_utils/session.html\n\n[httpd]\nWWW-Authenticate = Basic realm=\"couchdb\"\nenable_cors = true\n\n[cors]\norigins = app://obsidian.md,capacitor://localhost,http://localhost\ncredentials = true\nheaders = accept, authorization, content-type, origin, referer\nmethods = GET, PUT, POST, HEAD, DELETE\nmax_age = 3600\n","language":"ini"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"[couchdb]\nsingle_node=true\nmax_document_size=50000000\nmax_http_request_size=4294967296\n\n[chttpd]\nrequire_valid_user = true\n\n[chttpd_auth]\nrequire_valid_user = true\nauthentication_redirect = /_utils/session.html\n\n[httpd]\nWWW-Authenticate = Basic realm=\"couchdb\"\nenable_cors = true\n\n[cors]\norigins = app://obsidian.md,capacitor://localhost,http://localhost\ncredentials = true\nheaders = accept, authorization, content-type, origin, referer\nmethods = GET, PUT, POST, HEAD, DELETE\nmax_age = 3600"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then, in order to have sync on mobile devices, we will need a reverse proxy with nginx at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/nginx/sites-enabled/obsidian-couchdb"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"server {\n listen 80;\n listen [::]:80;\n server_name couchdb.yourhost.com;\n return 301 https://$host$request_uri;\n}\n\nserver {\n listen 443 ssl http2;\n listen [::]:443 ssl http2;\n\n ssl_certificate /etc/letsencrypt/live/yourhost.com/fullchain.pem; # managed by Certbot\n ssl_certificate_key /etc/letsencrypt/live/yourhost.com/privkey.pem; # managed by Certbot\n ssl_trusted_certificate /etc/letsencrypt/live/yourhost.com/chain.pem;\n\n server_name couchdb.yourhost.com;\n client_max_body_size 200M;\n\n location / {\n proxy_redirect off;\n proxy_set_header Host $host;\n proxy_set_header X-Real-IP $remote_addr;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n\n proxy_pass http://127.0.0.1:5984;\n }\n}\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e355da"},"children":[{"type":"text","value":"server"}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b38421"},"children":[{"type":"text","value":" listen "}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":"80;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b38421"},"children":[{"type":"text","value":" listen "}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":"[::]:80;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b38421"},"children":[{"type":"text","value":" server_name "}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":"couchdb.yourhost.com;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b38421"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-54acd4"},"children":[{"type":"text","value":"301"}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" https://"}]},{"type":"element","tag":"span","props":{"class":"ct-f0f5d8"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-6433f1"},"children":[{"type":"text","value":"host"}]},{"type":"element","tag":"span","props":{"class":"ct-f0f5d8"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-6433f1"},"children":[{"type":"text","value":"request_uri"}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e355da"},"children":[{"type":"text","value":"server"}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b38421"},"children":[{"type":"text","value":" listen "}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":"443 ssl http2;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b38421"},"children":[{"type":"text","value":" listen "}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":"[::]:443 ssl http2;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b38421"},"children":[{"type":"text","value":" ssl_certificate "}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":"/etc/letsencrypt/live/yourhost.com/fullchain.pem; "}]},{"type":"element","tag":"span","props":{"class":"ct-18e5d9"},"children":[{"type":"text","value":"# managed by Certbot"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b38421"},"children":[{"type":"text","value":" ssl_certificate_key "}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":"/etc/letsencrypt/live/yourhost.com/privkey.pem; "}]},{"type":"element","tag":"span","props":{"class":"ct-18e5d9"},"children":[{"type":"text","value":"# managed by Certbot"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b38421"},"children":[{"type":"text","value":" ssl_trusted_certificate "}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":"/etc/letsencrypt/live/yourhost.com/chain.pem;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b38421"},"children":[{"type":"text","value":" server_name "}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":"couchdb.yourhost.com;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b38421"},"children":[{"type":"text","value":" client_max_body_size "}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":"200M;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9e8f85"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0804f5"},"children":[{"type":"text","value":"location"}]},{"type":"element","tag":"span","props":{"class":"ct-9e8f85"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0734bb"},"children":[{"type":"text","value":"/ "}]},{"type":"element","tag":"span","props":{"class":"ct-9e8f85"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b38421"},"children":[{"type":"text","value":" proxy_redirect "}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":"off;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b38421"},"children":[{"type":"text","value":" proxy_set_header "}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":"Host "}]},{"type":"element","tag":"span","props":{"class":"ct-f0f5d8"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-6433f1"},"children":[{"type":"text","value":"host"}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b38421"},"children":[{"type":"text","value":" proxy_set_header "}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":"X-Real-IP "}]},{"type":"element","tag":"span","props":{"class":"ct-f0f5d8"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-6433f1"},"children":[{"type":"text","value":"remote_addr"}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b38421"},"children":[{"type":"text","value":" proxy_set_header "}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":"X-Forwarded-For "}]},{"type":"element","tag":"span","props":{"class":"ct-f0f5d8"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-6433f1"},"children":[{"type":"text","value":"proxy_add_x_forwarded_for"}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b38421"},"children":[{"type":"text","value":" proxy_pass "}]},{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":"http://127.0.0.1:5984;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39845b"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"setting-up-obsidian"},"children":[{"type":"text","value":"Setting up Obsidian"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Install "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Self-hosted LiveSync"}]},{"type":"text","value":" plugin"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Change host to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"https://yourhost.com"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Specify username and password"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Press "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"test"}]},{"type":"text","value":", then "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fetch database"}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-0734bb{color:#FFA657}.ct-0804f5{color:#FF7B72}.ct-9e8f85{color:#C9D1D9}.ct-18e5d9{color:#8B949E}.ct-6433f1{color:#C9D1D9}.ct-f0f5d8{color:#C9D1D9}.ct-54acd4{color:#79C0FF}.ct-b38421{color:#FF7B72}.ct-e355da{color:#FF7B72}.ct-8c9f43{color:#A5D6FF}.ct-39845b{color:#C9D1D9}.ct-1391ae{color:#7EE787}.light .ct-1391ae{color:#268BD2}.light .ct-39845b{color:#657B83}.light .ct-8c9f43{color:#2AA198}.light .ct-e355da{color:#073642}.light .ct-b38421{color:#859900}.light .ct-54acd4{color:#D33682}.light .ct-f0f5d8{color:#859900}.light .ct-6433f1{color:#268BD2}.light .ct-18e5d9{color:#93A1A1}.light .ct-9e8f85{color:#657B83}.light .ct-0804f5{color:#073642}.light .ct-0734bb{color:#657B83}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"setting-up-environment","depth":2,"text":"Setting up environment"},{"id":"setting-up-obsidian","depth":2,"text":"Setting up Obsidian"}]}},"_type":"markdown","_id":"content:Obsidian:Self-hosted Obsidian sync with CouchDB.md","_source":"content","_file":"Obsidian/Self-hosted Obsidian sync with CouchDB.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/obsidian/self-hosted-obsidian-sync-with-couchdb","_dir":"obsidian","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Self Hosted Obsidian Sync With CouchDB","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/vrtmrz/obsidian-livesync","rel":["nofollow"]},"children":[{"type":"text","value":"Main documentation"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/vrtmrz/obsidian-livesync/blob/main/docs/setup_own_server.md","rel":["nofollow"]},"children":[{"type":"text","value":"Setting up couchdb"}]}]}]},{"type":"element","tag":"h2","props":{"id":"setting-up-environment"},"children":[{"type":"text","value":"Setting up environment"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"First, you should create "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docker-compose.yml"}]},{"type":"text","value":" with the following contents:"}]},{"type":"element","tag":"code","props":{"code":"version: '3'\nservices:\n couchserver:\n container_name: obsidian__database\n image: couchdb\n restart: always\n ports:\n - \"5984:5984\"\n environment:\n - COUCHDB_USER=user\n - COUCHDB_PASSWORD=somepassword\n volumes:\n - ./couchdb/dbdata:/opt/couchdb/data\n - ./couchdb/local.ini:/opt/couchdb/etc/local.ini\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"version: '3'\nservices:\n couchserver:\n container_name: obsidian__database\n image: couchdb\n restart: always\n ports:\n - \"5984:5984\"\n environment:\n - COUCHDB_USER=user\n - COUCHDB_PASSWORD=somepassword\n volumes:\n - ./couchdb/dbdata:/opt/couchdb/data\n - ./couchdb/local.ini:/opt/couchdb/etc/local.ini\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then create initial config at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"./couchdb/local.ini"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"[couchdb]\nsingle_node=true\nmax_document_size=50000000\nmax_http_request_size=4294967296\n\n[chttpd]\nrequire_valid_user = true\n\n[chttpd_auth]\nrequire_valid_user = true\nauthentication_redirect = /_utils/session.html\n\n[httpd]\nWWW-Authenticate = Basic realm=\"couchdb\"\nenable_cors = true\n\n[cors]\norigins = app://obsidian.md,capacitor://localhost,http://localhost\ncredentials = true\nheaders = accept, authorization, content-type, origin, referer\nmethods = GET, PUT, POST, HEAD, DELETE\nmax_age = 3600\n","language":"ini"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"[couchdb]\nsingle_node=true\nmax_document_size=50000000\nmax_http_request_size=4294967296\n\n[chttpd]\nrequire_valid_user = true\n\n[chttpd_auth]\nrequire_valid_user = true\nauthentication_redirect = /_utils/session.html\n\n[httpd]\nWWW-Authenticate = Basic realm=\"couchdb\"\nenable_cors = true\n\n[cors]\norigins = app://obsidian.md,capacitor://localhost,http://localhost\ncredentials = true\nheaders = accept, authorization, content-type, origin, referer\nmethods = GET, PUT, POST, HEAD, DELETE\nmax_age = 3600\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then, in order to have sync on mobile devices, we will need a reverse proxy with nginx at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/nginx/sites-enabled/obsidian-couchdb"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"server {\n listen 80;\n listen [::]:80;\n server_name couchdb.yourhost.com;\n return 301 https://$host$request_uri;\n}\n\nserver {\n listen 443 ssl http2;\n listen [::]:443 ssl http2;\n\n ssl_certificate /etc/letsencrypt/live/yourhost.com/fullchain.pem; # managed by Certbot\n ssl_certificate_key /etc/letsencrypt/live/yourhost.com/privkey.pem; # managed by Certbot\n ssl_trusted_certificate /etc/letsencrypt/live/yourhost.com/chain.pem;\n\n server_name couchdb.yourhost.com;\n client_max_body_size 200M;\n\n location / {\n proxy_redirect off;\n proxy_set_header Host $host;\n proxy_set_header X-Real-IP $remote_addr;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n\n proxy_pass http://127.0.0.1:5984;\n }\n}\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"server {\n listen 80;\n listen [::]:80;\n server_name couchdb.yourhost.com;\n return 301 https://$host$request_uri;\n}\n\nserver {\n listen 443 ssl http2;\n listen [::]:443 ssl http2;\n\n ssl_certificate /etc/letsencrypt/live/yourhost.com/fullchain.pem; # managed by Certbot\n ssl_certificate_key /etc/letsencrypt/live/yourhost.com/privkey.pem; # managed by Certbot\n ssl_trusted_certificate /etc/letsencrypt/live/yourhost.com/chain.pem;\n\n server_name couchdb.yourhost.com;\n client_max_body_size 200M;\n\n location / {\n proxy_redirect off;\n proxy_set_header Host $host;\n proxy_set_header X-Real-IP $remote_addr;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n\n proxy_pass http://127.0.0.1:5984;\n }\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"setting-up-obsidian"},"children":[{"type":"text","value":"Setting up Obsidian"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Install "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Self-hosted LiveSync"}]},{"type":"text","value":" plugin"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Change host to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"https://yourhost.com"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Specify username and password"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Press "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"test"}]},{"type":"text","value":", then "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fetch database"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/vrtmrz/obsidian-livesync","rel":["nofollow"]},"children":[{"type":"text","value":"Main documentation"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/vrtmrz/obsidian-livesync/blob/main/docs/setup_own_server.md","rel":["nofollow"]},"children":[{"type":"text","value":"Setting up couchdb"}]}]}]},{"type":"element","tag":"h2","props":{"id":"setting-up-environment"},"children":[{"type":"text","value":"Setting up environment"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"First, you should create "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docker-compose.yml"}]},{"type":"text","value":" with the following contents:"}]},{"type":"element","tag":"code","props":{"code":"version: '3'\nservices:\n couchserver:\n container_name: obsidian__database\n image: couchdb\n restart: always\n ports:\n - \"5984:5984\"\n environment:\n - COUCHDB_USER=user\n - COUCHDB_PASSWORD=somepassword\n volumes:\n - ./couchdb/dbdata:/opt/couchdb/data\n - ./couchdb/local.ini:/opt/couchdb/etc/local.ini\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f0c7fc"},"children":[{"type":"text","value":"version"}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-34a38e"},"children":[{"type":"text","value":"'3'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f0c7fc"},"children":[{"type":"text","value":"services"}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f0c7fc"},"children":[{"type":"text","value":"couchserver"}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f0c7fc"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-34a38e"},"children":[{"type":"text","value":"obsidian__database"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f0c7fc"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-34a38e"},"children":[{"type":"text","value":"couchdb"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f0c7fc"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-34a38e"},"children":[{"type":"text","value":"always"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f0c7fc"},"children":[{"type":"text","value":"ports"}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-34a38e"},"children":[{"type":"text","value":"\"5984:5984\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f0c7fc"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-34a38e"},"children":[{"type":"text","value":"COUCHDB_USER=user"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-34a38e"},"children":[{"type":"text","value":"COUCHDB_PASSWORD=somepassword"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f0c7fc"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-34a38e"},"children":[{"type":"text","value":"./couchdb/dbdata:/opt/couchdb/data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-34a38e"},"children":[{"type":"text","value":"./couchdb/local.ini:/opt/couchdb/etc/local.ini"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then create initial config at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"./couchdb/local.ini"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"[couchdb]\nsingle_node=true\nmax_document_size=50000000\nmax_http_request_size=4294967296\n\n[chttpd]\nrequire_valid_user = true\n\n[chttpd_auth]\nrequire_valid_user = true\nauthentication_redirect = /_utils/session.html\n\n[httpd]\nWWW-Authenticate = Basic realm=\"couchdb\"\nenable_cors = true\n\n[cors]\norigins = app://obsidian.md,capacitor://localhost,http://localhost\ncredentials = true\nheaders = accept, authorization, content-type, origin, referer\nmethods = GET, PUT, POST, HEAD, DELETE\nmax_age = 3600\n","language":"ini"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"[couchdb]\nsingle_node=true\nmax_document_size=50000000\nmax_http_request_size=4294967296\n\n[chttpd]\nrequire_valid_user = true\n\n[chttpd_auth]\nrequire_valid_user = true\nauthentication_redirect = /_utils/session.html\n\n[httpd]\nWWW-Authenticate = Basic realm=\"couchdb\"\nenable_cors = true\n\n[cors]\norigins = app://obsidian.md,capacitor://localhost,http://localhost\ncredentials = true\nheaders = accept, authorization, content-type, origin, referer\nmethods = GET, PUT, POST, HEAD, DELETE\nmax_age = 3600"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then, in order to have sync on mobile devices, we will need a reverse proxy with nginx at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/nginx/sites-enabled/obsidian-couchdb"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"server {\n listen 80;\n listen [::]:80;\n server_name couchdb.yourhost.com;\n return 301 https://$host$request_uri;\n}\n\nserver {\n listen 443 ssl http2;\n listen [::]:443 ssl http2;\n\n ssl_certificate /etc/letsencrypt/live/yourhost.com/fullchain.pem; # managed by Certbot\n ssl_certificate_key /etc/letsencrypt/live/yourhost.com/privkey.pem; # managed by Certbot\n ssl_trusted_certificate /etc/letsencrypt/live/yourhost.com/chain.pem;\n\n server_name couchdb.yourhost.com;\n client_max_body_size 200M;\n\n location / {\n proxy_redirect off;\n proxy_set_header Host $host;\n proxy_set_header X-Real-IP $remote_addr;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n\n proxy_pass http://127.0.0.1:5984;\n }\n}\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e4ca3"},"children":[{"type":"text","value":"server"}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52fd"},"children":[{"type":"text","value":" listen "}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":"80;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52fd"},"children":[{"type":"text","value":" listen "}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":"[::]:80;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52fd"},"children":[{"type":"text","value":" server_name "}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":"couchdb.yourhost.com;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52fd"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b56d52"},"children":[{"type":"text","value":"301"}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" https://"}]},{"type":"element","tag":"span","props":{"class":"ct-9b4f35"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-3b0c9a"},"children":[{"type":"text","value":"host"}]},{"type":"element","tag":"span","props":{"class":"ct-9b4f35"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-3b0c9a"},"children":[{"type":"text","value":"request_uri"}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e4ca3"},"children":[{"type":"text","value":"server"}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52fd"},"children":[{"type":"text","value":" listen "}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":"443 ssl http2;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52fd"},"children":[{"type":"text","value":" listen "}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":"[::]:443 ssl http2;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52fd"},"children":[{"type":"text","value":" ssl_certificate "}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":"/etc/letsencrypt/live/yourhost.com/fullchain.pem; "}]},{"type":"element","tag":"span","props":{"class":"ct-930690"},"children":[{"type":"text","value":"# managed by Certbot"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52fd"},"children":[{"type":"text","value":" ssl_certificate_key "}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":"/etc/letsencrypt/live/yourhost.com/privkey.pem; "}]},{"type":"element","tag":"span","props":{"class":"ct-930690"},"children":[{"type":"text","value":"# managed by Certbot"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52fd"},"children":[{"type":"text","value":" ssl_trusted_certificate "}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":"/etc/letsencrypt/live/yourhost.com/chain.pem;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52fd"},"children":[{"type":"text","value":" server_name "}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":"couchdb.yourhost.com;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52fd"},"children":[{"type":"text","value":" client_max_body_size "}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":"200M;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b19092"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-18102e"},"children":[{"type":"text","value":"location"}]},{"type":"element","tag":"span","props":{"class":"ct-b19092"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b28bc"},"children":[{"type":"text","value":"/ "}]},{"type":"element","tag":"span","props":{"class":"ct-b19092"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52fd"},"children":[{"type":"text","value":" proxy_redirect "}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":"off;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52fd"},"children":[{"type":"text","value":" proxy_set_header "}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":"Host "}]},{"type":"element","tag":"span","props":{"class":"ct-9b4f35"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-3b0c9a"},"children":[{"type":"text","value":"host"}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52fd"},"children":[{"type":"text","value":" proxy_set_header "}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":"X-Real-IP "}]},{"type":"element","tag":"span","props":{"class":"ct-9b4f35"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-3b0c9a"},"children":[{"type":"text","value":"remote_addr"}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52fd"},"children":[{"type":"text","value":" proxy_set_header "}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":"X-Forwarded-For "}]},{"type":"element","tag":"span","props":{"class":"ct-9b4f35"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-3b0c9a"},"children":[{"type":"text","value":"proxy_add_x_forwarded_for"}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52fd"},"children":[{"type":"text","value":" proxy_pass "}]},{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":"http://127.0.0.1:5984;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c3c363"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"setting-up-obsidian"},"children":[{"type":"text","value":"Setting up Obsidian"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Install "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Self-hosted LiveSync"}]},{"type":"text","value":" plugin"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Change host to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"https://yourhost.com"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Specify username and password"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Press "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"test"}]},{"type":"text","value":", then "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fetch database"}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-8b28bc{color:#FFA657}.ct-18102e{color:#FF7B72}.ct-b19092{color:#C9D1D9}.ct-930690{color:#8B949E}.ct-3b0c9a{color:#C9D1D9}.ct-9b4f35{color:#C9D1D9}.ct-b56d52{color:#79C0FF}.ct-ea52fd{color:#FF7B72}.ct-6e4ca3{color:#FF7B72}.ct-34a38e{color:#A5D6FF}.ct-c3c363{color:#C9D1D9}.ct-f0c7fc{color:#7EE787}.light .ct-f0c7fc{color:#268BD2}.light .ct-c3c363{color:#657B83}.light .ct-34a38e{color:#2AA198}.light .ct-6e4ca3{color:#073642}.light .ct-ea52fd{color:#859900}.light .ct-b56d52{color:#D33682}.light .ct-9b4f35{color:#859900}.light .ct-3b0c9a{color:#268BD2}.light .ct-930690{color:#93A1A1}.light .ct-b19092{color:#657B83}.light .ct-18102e{color:#073642}.light .ct-8b28bc{color:#657B83}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"setting-up-environment","depth":2,"text":"Setting up environment"},{"id":"setting-up-obsidian","depth":2,"text":"Setting up Obsidian"}]}},"_type":"markdown","_id":"content:Obsidian:Self-hosted Obsidian sync with CouchDB.md","_source":"content","_file":"Obsidian/Self-hosted Obsidian sync with CouchDB.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/2vMf3x3doM.json b/docs/api/_content/query/2vMf3x3doM.json
index da602c8..69ddc40 100644
--- a/docs/api/_content/query/2vMf3x3doM.json
+++ b/docs/api/_content/query/2vMf3x3doM.json
@@ -1 +1 @@
-{"_path":"/graphql/apollo-client-pagination","_dir":"graphql","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Apollo Client Pagination","description":"Say, we have gql response like this and we wan't to have pagination with it. Let's merge it as it specified in official documentation","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Say, we have "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gql"}]},{"type":"text","value":" response like this and we wan't to have pagination with it. Let's merge it as it specified in "},{"type":"element","tag":"a","props":{"href":"https://www.apollographql.com/docs/react/caching/cache-field-behavior/#the-merge-function","rel":["nofollow"]},"children":[{"type":"text","value":"official documentation"}]}]},{"type":"element","tag":"code","props":{"code":"query listItems(\n filter: Filter, \n sort: String,\n limit: Number,\n offset: Number,\n): ItemList!\n\ninput Filter {\n name: String!\n type: String!\n}\n\ntype ItemList {\n items: [Item!]!\n totalCount: Int!\n}\n","language":"graphql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"query listItems(\n filter: Filter, \n sort: String,\n limit: Number,\n offset: Number,\n): ItemList!\n\ninput Filter {\n name: String!\n type: String!\n}\n\ntype ItemList {\n items: [Item!]!\n totalCount: Int!\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We will setup "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ApolloClient"}]},{"type":"text","value":" with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"typePolicies"}]},{"type":"text","value":" to merge incoming data in cache:"}]},{"type":"element","tag":"code","props":{"code":"import { ApolloClient, InMemoryCache } from '@apollo/client';\n\nconst client = new ApolloClient({\n // ...\n cache: new InMemoryCache({ typePolicies }),\n // ...\n});\n\nexport const typePolicies: TypePolicies = {\n Query: {\n fields: {\n // query name\n listItems: {\n // apollo will serialize and use keyArgs as unique\n // identifier in cache for every query\n // consider choosing the right fields, \n // i.e. limit and offset won't work here\n keyArgs: [\n 'sort', // primitive type\n 'filter', ['name', 'type'] // nested fields of `filter`\n ],\n merge: mergeItemsWithTotalCount,\n },\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { ApolloClient, InMemoryCache } from '@apollo/client';\n\nconst client = new ApolloClient({\n // ...\n cache: new InMemoryCache({ typePolicies }),\n // ...\n});\n\nexport const typePolicies: TypePolicies = {\n Query: {\n fields: {\n // query name\n listItems: {\n // apollo will serialize and use keyArgs as unique\n // identifier in cache for every query\n // consider choosing the right fields, \n // i.e. limit and offset won't work here\n keyArgs: [\n 'sort', // primitive type\n 'filter', ['name', 'type'] // nested fields of `filter`\n ],\n merge: mergeItemsWithTotalCount,\n },\n }\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We will need merge function "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mergeItemsWithTotalCount"}]},{"type":"text","value":", which will join results of query and cached data for specific key:"}]},{"type":"element","tag":"code","props":{"code":"/** merges all sources with { items: unknown[], totalCount: number } */\nconst mergeItemsWithTotalCount = (existing, incoming, { args }) => {\n // no existing data\n if (!existing || !args?.offset || args.offset < existing.length) {\n return incoming || [];\n }\n\n // If hook was called multiple times\n if (existing?.items?.length && args?.offset < existing.items.length) {\n return existing || [];\n }\n\n // merge cache and incoming data\n const items = [...(existing?.items || []), ...(incoming?.items || [])];\n\n // apply latest result for totalCount\n const totalCount = incoming?.totalCount || existing?.totalCount;\n\n return {\n ...(incoming || existing || {}),\n items,\n totalCount,\n };\n };\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"/** merges all sources with { items: unknown[], totalCount: number } */\nconst mergeItemsWithTotalCount = (existing, incoming, { args }) => {\n // no existing data\n if (!existing || !args?.offset || args.offset < existing.length) {\n return incoming || [];\n }\n\n // If hook was called multiple times\n if (existing?.items?.length && args?.offset < existing.items.length) {\n return existing || [];\n }\n\n // merge cache and incoming data\n const items = [...(existing?.items || []), ...(incoming?.items || [])];\n\n // apply latest result for totalCount\n const totalCount = incoming?.totalCount || existing?.totalCount;\n\n return {\n ...(incoming || existing || {}),\n items,\n totalCount,\n };\n };\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Say, we have "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gql"}]},{"type":"text","value":" response like this and we wan't to have pagination with it. Let's merge it as it specified in "},{"type":"element","tag":"a","props":{"href":"https://www.apollographql.com/docs/react/caching/cache-field-behavior/#the-merge-function","rel":["nofollow"]},"children":[{"type":"text","value":"official documentation"}]}]},{"type":"element","tag":"code","props":{"code":"query listItems(\n filter: Filter, \n sort: String,\n limit: Number,\n offset: Number,\n): ItemList!\n\ninput Filter {\n name: String!\n type: String!\n}\n\ntype ItemList {\n items: [Item!]!\n totalCount: Int!\n}\n","language":"graphql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"query"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad782e"},"children":[{"type":"text","value":"listItems"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2ccaad"},"children":[{"type":"text","value":"filter"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b6a8d2"},"children":[{"type":"text","value":"Filter"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2ccaad"},"children":[{"type":"text","value":"sort"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b6a8d2"},"children":[{"type":"text","value":"String"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2ccaad"},"children":[{"type":"text","value":"limit"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b6a8d2"},"children":[{"type":"text","value":"Number"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2ccaad"},"children":[{"type":"text","value":"offset"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b6a8d2"},"children":[{"type":"text","value":"Number"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"): "}]},{"type":"element","tag":"span","props":{"class":"ct-ad782e"},"children":[{"type":"text","value":"ItemList"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"!"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"input"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1275"},"children":[{"type":"text","value":"Filter"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2ccaad"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b6a8d2"},"children":[{"type":"text","value":"String"}]},{"type":"element","tag":"span","props":{"class":"ct-8f48bb"},"children":[{"type":"text","value":"!"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2ccaad"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b6a8d2"},"children":[{"type":"text","value":"String"}]},{"type":"element","tag":"span","props":{"class":"ct-8f48bb"},"children":[{"type":"text","value":"!"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1275"},"children":[{"type":"text","value":"ItemList"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2ccaad"},"children":[{"type":"text","value":"items"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":": ["}]},{"type":"element","tag":"span","props":{"class":"ct-b6a8d2"},"children":[{"type":"text","value":"Item"}]},{"type":"element","tag":"span","props":{"class":"ct-8f48bb"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":"]"}]},{"type":"element","tag":"span","props":{"class":"ct-8f48bb"},"children":[{"type":"text","value":"!"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2ccaad"},"children":[{"type":"text","value":"totalCount"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b6a8d2"},"children":[{"type":"text","value":"Int"}]},{"type":"element","tag":"span","props":{"class":"ct-8f48bb"},"children":[{"type":"text","value":"!"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We will setup "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ApolloClient"}]},{"type":"text","value":" with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"typePolicies"}]},{"type":"text","value":" to merge incoming data in cache:"}]},{"type":"element","tag":"code","props":{"code":"import { ApolloClient, InMemoryCache } from '@apollo/client';\n\nconst client = new ApolloClient({\n // ...\n cache: new InMemoryCache({ typePolicies }),\n // ...\n});\n\nexport const typePolicies: TypePolicies = {\n Query: {\n fields: {\n // query name\n listItems: {\n // apollo will serialize and use keyArgs as unique\n // identifier in cache for every query\n // consider choosing the right fields, \n // i.e. limit and offset won't work here\n keyArgs: [\n 'sort', // primitive type\n 'filter', ['name', 'type'] // nested fields of `filter`\n ],\n merge: mergeItemsWithTotalCount,\n },\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"ApolloClient"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"InMemoryCache"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9cb4e4"},"children":[{"type":"text","value":"'@apollo/client'"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2e1fb9"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7982ff"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad782e"},"children":[{"type":"text","value":"ApolloClient"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5baecc"},"children":[{"type":"text","value":"// ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" cache: "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad782e"},"children":[{"type":"text","value":"InMemoryCache"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"({ "}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"typePolicies"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5baecc"},"children":[{"type":"text","value":"// ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"});"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2e1fb9"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7982ff"},"children":[{"type":"text","value":"typePolicies"}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4f2e82"},"children":[{"type":"text","value":"TypePolicies"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" Query: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" fields: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5baecc"},"children":[{"type":"text","value":"// query name"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" listItems: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5baecc"},"children":[{"type":"text","value":"// apollo will serialize and use keyArgs as unique"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5baecc"},"children":[{"type":"text","value":"// identifier in cache for every query"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5baecc"},"children":[{"type":"text","value":"// consider choosing the right fields, "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5baecc"},"children":[{"type":"text","value":"// i.e. limit and offset won't work here"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" keyArgs: ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9cb4e4"},"children":[{"type":"text","value":"'sort'"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-5baecc"},"children":[{"type":"text","value":"// primitive type"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9cb4e4"},"children":[{"type":"text","value":"'filter'"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":", ["}]},{"type":"element","tag":"span","props":{"class":"ct-9cb4e4"},"children":[{"type":"text","value":"'name'"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-9cb4e4"},"children":[{"type":"text","value":"'type'"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"] "}]},{"type":"element","tag":"span","props":{"class":"ct-5baecc"},"children":[{"type":"text","value":"// nested fields of `filter`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" ],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" merge: "}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"mergeItemsWithTotalCount"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We will need merge function "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mergeItemsWithTotalCount"}]},{"type":"text","value":", which will join results of query and cached data for specific key:"}]},{"type":"element","tag":"code","props":{"code":"/** merges all sources with { items: unknown[], totalCount: number } */\nconst mergeItemsWithTotalCount = (existing, incoming, { args }) => {\n // no existing data\n if (!existing || !args?.offset || args.offset < existing.length) {\n return incoming || [];\n }\n\n // If hook was called multiple times\n if (existing?.items?.length && args?.offset < existing.items.length) {\n return existing || [];\n }\n\n // merge cache and incoming data\n const items = [...(existing?.items || []), ...(incoming?.items || [])];\n\n // apply latest result for totalCount\n const totalCount = incoming?.totalCount || existing?.totalCount;\n\n return {\n ...(incoming || existing || {}),\n items,\n totalCount,\n };\n };\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5baecc"},"children":[{"type":"text","value":"/** merges all sources with { items: unknown[], totalCount: number } */"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9daaf1"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8487a"},"children":[{"type":"text","value":"mergeItemsWithTotalCount"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8f48bb"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-2ccaad"},"children":[{"type":"text","value":"existing"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-2ccaad"},"children":[{"type":"text","value":"incoming"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":", { "}]},{"type":"element","tag":"span","props":{"class":"ct-2ccaad"},"children":[{"type":"text","value":"args"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":" }) "}]},{"type":"element","tag":"span","props":{"class":"ct-9daaf1"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-237419"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5baecc"},"children":[{"type":"text","value":"// no existing data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"existing"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"args"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"offset"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"args"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"offset"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"existing"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"incoming"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" [];"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5baecc"},"children":[{"type":"text","value":"// If hook was called multiple times"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"existing"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"items"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"?."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"existing"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" [];"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5baecc"},"children":[{"type":"text","value":"// merge cache and incoming data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2e1fb9"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7982ff"},"children":[{"type":"text","value":"items"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"existing"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"items"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5baecc"},"children":[{"type":"text","value":"// apply latest result for totalCount"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2e1fb9"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7982ff"},"children":[{"type":"text","value":"totalCount"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"incoming"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"totalCount"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"existing"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"totalCount"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"incoming"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9af43"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"items"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6a8d9e"},"children":[{"type":"text","value":"totalCount"}]},{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-654dd2"},"children":[{"type":"text","value":" };"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-d8487a{color:#D2A8FF}.ct-9daaf1{color:#FF7B72}.ct-4f2e82{color:#FFA657}.ct-5baecc{color:#8B949E}.ct-7982ff{color:#79C0FF}.ct-2e1fb9{color:#FF7B72}.ct-9cb4e4{color:#A5D6FF}.ct-6a8d9e{color:#C9D1D9}.ct-8f48bb{color:#FF7B72}.ct-cb1275{color:#79C0FF}.ct-b6a8d2{color:#79C0FF}.ct-2ccaad{color:#FFA657}.ct-237419{color:#C9D1D9}.ct-ad782e{color:#D2A8FF}.ct-654dd2{color:#C9D1D9}.ct-e9af43{color:#FF7B72}.light .ct-e9af43{color:#859900}.light .ct-654dd2{color:#657B83}.light .ct-ad782e{color:#268BD2}.light .ct-237419{color:#657B83}.light .ct-2ccaad{color:#657B83}.light .ct-b6a8d2{color:#859900}.light .ct-cb1275{color:#859900}.light .ct-8f48bb{color:#859900}.light .ct-6a8d9e{color:#268BD2}.light .ct-9cb4e4{color:#2AA198}.light .ct-2e1fb9{color:#073642}.light .ct-7982ff{color:#268BD2}.light .ct-5baecc{color:#93A1A1}.light .ct-4f2e82{color:#268BD2}.light .ct-9daaf1{color:#073642}.light .ct-d8487a{color:#268BD2}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:GraphQL:Apollo Client pagination.md","_source":"content","_file":"GraphQL/Apollo Client pagination.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/graphql/apollo-client-pagination","_dir":"graphql","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Apollo Client Pagination","description":"Say, we have gql response like this and we wan't to have pagination with it. Let's merge it as it specified in official documentation","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Say, we have "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gql"}]},{"type":"text","value":" response like this and we wan't to have pagination with it. Let's merge it as it specified in "},{"type":"element","tag":"a","props":{"href":"https://www.apollographql.com/docs/react/caching/cache-field-behavior/#the-merge-function","rel":["nofollow"]},"children":[{"type":"text","value":"official documentation"}]}]},{"type":"element","tag":"code","props":{"code":"query listItems(\n filter: Filter, \n sort: String,\n limit: Number,\n offset: Number,\n): ItemList!\n\ninput Filter {\n name: String!\n type: String!\n}\n\ntype ItemList {\n items: [Item!]!\n totalCount: Int!\n}\n","language":"graphql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"query listItems(\n filter: Filter, \n sort: String,\n limit: Number,\n offset: Number,\n): ItemList!\n\ninput Filter {\n name: String!\n type: String!\n}\n\ntype ItemList {\n items: [Item!]!\n totalCount: Int!\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We will setup "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ApolloClient"}]},{"type":"text","value":" with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"typePolicies"}]},{"type":"text","value":" to merge incoming data in cache:"}]},{"type":"element","tag":"code","props":{"code":"import { ApolloClient, InMemoryCache } from '@apollo/client';\n\nconst client = new ApolloClient({\n // ...\n cache: new InMemoryCache({ typePolicies }),\n // ...\n});\n\nexport const typePolicies: TypePolicies = {\n Query: {\n fields: {\n // query name\n listItems: {\n // apollo will serialize and use keyArgs as unique\n // identifier in cache for every query\n // consider choosing the right fields, \n // i.e. limit and offset won't work here\n keyArgs: [\n 'sort', // primitive type\n 'filter', ['name', 'type'] // nested fields of `filter`\n ],\n merge: mergeItemsWithTotalCount,\n },\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { ApolloClient, InMemoryCache } from '@apollo/client';\n\nconst client = new ApolloClient({\n // ...\n cache: new InMemoryCache({ typePolicies }),\n // ...\n});\n\nexport const typePolicies: TypePolicies = {\n Query: {\n fields: {\n // query name\n listItems: {\n // apollo will serialize and use keyArgs as unique\n // identifier in cache for every query\n // consider choosing the right fields, \n // i.e. limit and offset won't work here\n keyArgs: [\n 'sort', // primitive type\n 'filter', ['name', 'type'] // nested fields of `filter`\n ],\n merge: mergeItemsWithTotalCount,\n },\n }\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We will need merge function "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mergeItemsWithTotalCount"}]},{"type":"text","value":", which will join results of query and cached data for specific key:"}]},{"type":"element","tag":"code","props":{"code":"/** merges all sources with { items: unknown[], totalCount: number } */\nconst mergeItemsWithTotalCount = (existing, incoming, { args }) => {\n // no existing data\n if (!existing || !args?.offset || args.offset < existing.length) {\n return incoming || [];\n }\n\n // If hook was called multiple times\n if (existing?.items?.length && args?.offset < existing.items.length) {\n return existing || [];\n }\n\n // merge cache and incoming data\n const items = [...(existing?.items || []), ...(incoming?.items || [])];\n\n // apply latest result for totalCount\n const totalCount = incoming?.totalCount || existing?.totalCount;\n\n return {\n ...(incoming || existing || {}),\n items,\n totalCount,\n };\n };\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"/** merges all sources with { items: unknown[], totalCount: number } */\nconst mergeItemsWithTotalCount = (existing, incoming, { args }) => {\n // no existing data\n if (!existing || !args?.offset || args.offset < existing.length) {\n return incoming || [];\n }\n\n // If hook was called multiple times\n if (existing?.items?.length && args?.offset < existing.items.length) {\n return existing || [];\n }\n\n // merge cache and incoming data\n const items = [...(existing?.items || []), ...(incoming?.items || [])];\n\n // apply latest result for totalCount\n const totalCount = incoming?.totalCount || existing?.totalCount;\n\n return {\n ...(incoming || existing || {}),\n items,\n totalCount,\n };\n };\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Say, we have "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gql"}]},{"type":"text","value":" response like this and we wan't to have pagination with it. Let's merge it as it specified in "},{"type":"element","tag":"a","props":{"href":"https://www.apollographql.com/docs/react/caching/cache-field-behavior/#the-merge-function","rel":["nofollow"]},"children":[{"type":"text","value":"official documentation"}]}]},{"type":"element","tag":"code","props":{"code":"query listItems(\n filter: Filter, \n sort: String,\n limit: Number,\n offset: Number,\n): ItemList!\n\ninput Filter {\n name: String!\n type: String!\n}\n\ntype ItemList {\n items: [Item!]!\n totalCount: Int!\n}\n","language":"graphql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"query"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bfd470"},"children":[{"type":"text","value":"listItems"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89a0ce"},"children":[{"type":"text","value":"filter"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e6f76e"},"children":[{"type":"text","value":"Filter"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89a0ce"},"children":[{"type":"text","value":"sort"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e6f76e"},"children":[{"type":"text","value":"String"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89a0ce"},"children":[{"type":"text","value":"limit"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e6f76e"},"children":[{"type":"text","value":"Number"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89a0ce"},"children":[{"type":"text","value":"offset"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e6f76e"},"children":[{"type":"text","value":"Number"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"): "}]},{"type":"element","tag":"span","props":{"class":"ct-bfd470"},"children":[{"type":"text","value":"ItemList"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"!"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"input"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b9abb7"},"children":[{"type":"text","value":"Filter"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89a0ce"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e6f76e"},"children":[{"type":"text","value":"String"}]},{"type":"element","tag":"span","props":{"class":"ct-904dbb"},"children":[{"type":"text","value":"!"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89a0ce"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e6f76e"},"children":[{"type":"text","value":"String"}]},{"type":"element","tag":"span","props":{"class":"ct-904dbb"},"children":[{"type":"text","value":"!"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b9abb7"},"children":[{"type":"text","value":"ItemList"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89a0ce"},"children":[{"type":"text","value":"items"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":": ["}]},{"type":"element","tag":"span","props":{"class":"ct-e6f76e"},"children":[{"type":"text","value":"Item"}]},{"type":"element","tag":"span","props":{"class":"ct-904dbb"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":"]"}]},{"type":"element","tag":"span","props":{"class":"ct-904dbb"},"children":[{"type":"text","value":"!"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89a0ce"},"children":[{"type":"text","value":"totalCount"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e6f76e"},"children":[{"type":"text","value":"Int"}]},{"type":"element","tag":"span","props":{"class":"ct-904dbb"},"children":[{"type":"text","value":"!"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We will setup "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ApolloClient"}]},{"type":"text","value":" with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"typePolicies"}]},{"type":"text","value":" to merge incoming data in cache:"}]},{"type":"element","tag":"code","props":{"code":"import { ApolloClient, InMemoryCache } from '@apollo/client';\n\nconst client = new ApolloClient({\n // ...\n cache: new InMemoryCache({ typePolicies }),\n // ...\n});\n\nexport const typePolicies: TypePolicies = {\n Query: {\n fields: {\n // query name\n listItems: {\n // apollo will serialize and use keyArgs as unique\n // identifier in cache for every query\n // consider choosing the right fields, \n // i.e. limit and offset won't work here\n keyArgs: [\n 'sort', // primitive type\n 'filter', ['name', 'type'] // nested fields of `filter`\n ],\n merge: mergeItemsWithTotalCount,\n },\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"ApolloClient"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"InMemoryCache"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c275b5"},"children":[{"type":"text","value":"'@apollo/client'"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6561fc"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3aa4d5"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bfd470"},"children":[{"type":"text","value":"ApolloClient"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1476e6"},"children":[{"type":"text","value":"// ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" cache: "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bfd470"},"children":[{"type":"text","value":"InMemoryCache"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"({ "}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"typePolicies"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1476e6"},"children":[{"type":"text","value":"// ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"});"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6561fc"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3aa4d5"},"children":[{"type":"text","value":"typePolicies"}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-aa8127"},"children":[{"type":"text","value":"TypePolicies"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" Query: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" fields: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1476e6"},"children":[{"type":"text","value":"// query name"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" listItems: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1476e6"},"children":[{"type":"text","value":"// apollo will serialize and use keyArgs as unique"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1476e6"},"children":[{"type":"text","value":"// identifier in cache for every query"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1476e6"},"children":[{"type":"text","value":"// consider choosing the right fields, "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1476e6"},"children":[{"type":"text","value":"// i.e. limit and offset won't work here"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" keyArgs: ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c275b5"},"children":[{"type":"text","value":"'sort'"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-1476e6"},"children":[{"type":"text","value":"// primitive type"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c275b5"},"children":[{"type":"text","value":"'filter'"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":", ["}]},{"type":"element","tag":"span","props":{"class":"ct-c275b5"},"children":[{"type":"text","value":"'name'"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-c275b5"},"children":[{"type":"text","value":"'type'"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"] "}]},{"type":"element","tag":"span","props":{"class":"ct-1476e6"},"children":[{"type":"text","value":"// nested fields of `filter`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" ],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" merge: "}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"mergeItemsWithTotalCount"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We will need merge function "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mergeItemsWithTotalCount"}]},{"type":"text","value":", which will join results of query and cached data for specific key:"}]},{"type":"element","tag":"code","props":{"code":"/** merges all sources with { items: unknown[], totalCount: number } */\nconst mergeItemsWithTotalCount = (existing, incoming, { args }) => {\n // no existing data\n if (!existing || !args?.offset || args.offset < existing.length) {\n return incoming || [];\n }\n\n // If hook was called multiple times\n if (existing?.items?.length && args?.offset < existing.items.length) {\n return existing || [];\n }\n\n // merge cache and incoming data\n const items = [...(existing?.items || []), ...(incoming?.items || [])];\n\n // apply latest result for totalCount\n const totalCount = incoming?.totalCount || existing?.totalCount;\n\n return {\n ...(incoming || existing || {}),\n items,\n totalCount,\n };\n };\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1476e6"},"children":[{"type":"text","value":"/** merges all sources with { items: unknown[], totalCount: number } */"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b5872a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6af47c"},"children":[{"type":"text","value":"mergeItemsWithTotalCount"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-904dbb"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-89a0ce"},"children":[{"type":"text","value":"existing"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-89a0ce"},"children":[{"type":"text","value":"incoming"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":", { "}]},{"type":"element","tag":"span","props":{"class":"ct-89a0ce"},"children":[{"type":"text","value":"args"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":" }) "}]},{"type":"element","tag":"span","props":{"class":"ct-b5872a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-20ad43"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1476e6"},"children":[{"type":"text","value":"// no existing data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"existing"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"args"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"offset"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"args"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"offset"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"existing"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"incoming"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" [];"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1476e6"},"children":[{"type":"text","value":"// If hook was called multiple times"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"existing"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"items"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"?."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"existing"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" [];"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1476e6"},"children":[{"type":"text","value":"// merge cache and incoming data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6561fc"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3aa4d5"},"children":[{"type":"text","value":"items"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"existing"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"items"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1476e6"},"children":[{"type":"text","value":"// apply latest result for totalCount"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6561fc"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3aa4d5"},"children":[{"type":"text","value":"totalCount"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"incoming"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"totalCount"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"existing"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"totalCount"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"incoming"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9afb"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"items"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-aa253b"},"children":[{"type":"text","value":"totalCount"}]},{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7dafdd"},"children":[{"type":"text","value":" };"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-6af47c{color:#D2A8FF}.ct-b5872a{color:#FF7B72}.ct-aa8127{color:#FFA657}.ct-1476e6{color:#8B949E}.ct-3aa4d5{color:#79C0FF}.ct-6561fc{color:#FF7B72}.ct-c275b5{color:#A5D6FF}.ct-aa253b{color:#C9D1D9}.ct-904dbb{color:#FF7B72}.ct-b9abb7{color:#79C0FF}.ct-e6f76e{color:#79C0FF}.ct-89a0ce{color:#FFA657}.ct-20ad43{color:#C9D1D9}.ct-bfd470{color:#D2A8FF}.ct-7dafdd{color:#C9D1D9}.ct-ac9afb{color:#FF7B72}.light .ct-ac9afb{color:#859900}.light .ct-7dafdd{color:#657B83}.light .ct-bfd470{color:#268BD2}.light .ct-20ad43{color:#657B83}.light .ct-89a0ce{color:#657B83}.light .ct-e6f76e{color:#859900}.light .ct-b9abb7{color:#859900}.light .ct-904dbb{color:#859900}.light .ct-aa253b{color:#268BD2}.light .ct-c275b5{color:#2AA198}.light .ct-6561fc{color:#073642}.light .ct-3aa4d5{color:#268BD2}.light .ct-1476e6{color:#93A1A1}.light .ct-aa8127{color:#268BD2}.light .ct-b5872a{color:#073642}.light .ct-6af47c{color:#268BD2}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:GraphQL:Apollo Client pagination.md","_source":"content","_file":"GraphQL/Apollo Client pagination.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/4AUGrl0JGY.json b/docs/api/_content/query/4AUGrl0JGY.json
index 1c30569..401777c 100644
--- a/docs/api/_content/query/4AUGrl0JGY.json
+++ b/docs/api/_content/query/4AUGrl0JGY.json
@@ -1 +1 @@
-{"_path":"/docker/wait-for-redis","_dir":"docker","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Wait For Redis","description":"wait-for-it.sh doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before redis is ready to accept connections","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/vishnubob/wait-for-it","rel":["nofollow"]},"children":[{"type":"text","value":"wait-for-it.sh"}]},{"type":"text","value":" doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before redis is ready to accept connections"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This script waits for first successful ping or exits with non-zero status after 3 minutes."}]},{"type":"element","tag":"code","props":{"code":"# Waits for redis to become actually available\nwait_for_redis() {\n timeout=180 # 3 minutes\n i=0\n while ! docker exec -it \"$1\" redis-cli -h localhost -p 6379 -a \"$2\" ping | grep \"PONG\" >/dev/null 2>&1; do\n sleep 1;\n\n i=$(($i+1))\n if [[ ${i} -ge ${timeout} ]]; then\n echo \"[Error] can't properly ping Redis container after ${i} secs\"\n exit 1;\n fi\n done\n}\n\n# usage: wait_for_redis miin-redis-dev password\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"# Waits for redis to become actually available\nwait_for_redis() {\n timeout=180 # 3 minutes\n i=0\n while ! docker exec -it \"$1\" redis-cli -h localhost -p 6379 -a \"$2\" ping | grep \"PONG\" >/dev/null 2>&1; do\n sleep 1;\n\n i=$(($i+1))\n if [[ ${i} -ge ${timeout} ]]; then\n echo \"[Error] can't properly ping Redis container after ${i} secs\"\n exit 1;\n fi\n done\n}\n\n# usage: wait_for_redis miin-redis-dev password\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"Wait%20for%20mysql"},"children":[{"type":"text","value":"Wait for mysql"}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/vishnubob/wait-for-it","rel":["nofollow"]},"children":[{"type":"text","value":"wait-for-it.sh"}]},{"type":"text","value":" doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before redis is ready to accept connections"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This script waits for first successful ping or exits with non-zero status after 3 minutes."}]},{"type":"element","tag":"code","props":{"code":"# Waits for redis to become actually available\nwait_for_redis() {\n timeout=180 # 3 minutes\n i=0\n while ! docker exec -it \"$1\" redis-cli -h localhost -p 6379 -a \"$2\" ping | grep \"PONG\" >/dev/null 2>&1; do\n sleep 1;\n\n i=$(($i+1))\n if [[ ${i} -ge ${timeout} ]]; then\n echo \"[Error] can't properly ping Redis container after ${i} secs\"\n exit 1;\n fi\n done\n}\n\n# usage: wait_for_redis miin-redis-dev password\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-15417a"},"children":[{"type":"text","value":"# Waits for redis to become actually available"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-765ec8"},"children":[{"type":"text","value":"wait_for_redis"}]},{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" timeout=180 "}]},{"type":"element","tag":"span","props":{"class":"ct-15417a"},"children":[{"type":"text","value":"# 3 minutes"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" i=0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3e06c3"},"children":[{"type":"text","value":"while"}]},{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3e06c3"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" docker "}]},{"type":"element","tag":"span","props":{"class":"ct-fe4a82"},"children":[{"type":"text","value":"exec"}]},{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" -it "}]},{"type":"element","tag":"span","props":{"class":"ct-333e9d"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-705dc7"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-ffdc0d"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-333e9d"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" redis-cli -h localhost -p 6379 -a "}]},{"type":"element","tag":"span","props":{"class":"ct-333e9d"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-705dc7"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-ffdc0d"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-333e9d"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" ping "}]},{"type":"element","tag":"span","props":{"class":"ct-3e06c3"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" grep "}]},{"type":"element","tag":"span","props":{"class":"ct-333e9d"},"children":[{"type":"text","value":"\"PONG\""}]},{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3e06c3"},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":"/dev/null "}]},{"type":"element","tag":"span","props":{"class":"ct-3e06c3"},"children":[{"type":"text","value":"2>&1;"}]},{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3e06c3"},"children":[{"type":"text","value":"do"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" sleep 1"}]},{"type":"element","tag":"span","props":{"class":"ct-3e06c3"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" i="}]},{"type":"element","tag":"span","props":{"class":"ct-333e9d"},"children":[{"type":"text","value":"$(("}]},{"type":"element","tag":"span","props":{"class":"ct-705dc7"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-ffdc0d"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-3e06c3"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-060abb"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-333e9d"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3e06c3"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" [[ "}]},{"type":"element","tag":"span","props":{"class":"ct-705dc7"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-ffdc0d"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-705dc7"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3e06c3"},"children":[{"type":"text","value":"-ge"}]},{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-705dc7"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-ffdc0d"},"children":[{"type":"text","value":"timeout"}]},{"type":"element","tag":"span","props":{"class":"ct-705dc7"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" ]]"}]},{"type":"element","tag":"span","props":{"class":"ct-3e06c3"},"children":[{"type":"text","value":";"}]},{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3e06c3"},"children":[{"type":"text","value":"then"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe4a82"},"children":[{"type":"text","value":"echo"}]},{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-333e9d"},"children":[{"type":"text","value":"\"[Error] can't properly ping Redis container after "}]},{"type":"element","tag":"span","props":{"class":"ct-705dc7"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-ffdc0d"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-705dc7"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-333e9d"},"children":[{"type":"text","value":" secs\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe4a82"},"children":[{"type":"text","value":"exit"}]},{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" 1"}]},{"type":"element","tag":"span","props":{"class":"ct-3e06c3"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3e06c3"},"children":[{"type":"text","value":"fi"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3e06c3"},"children":[{"type":"text","value":"done"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d2c0fb"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-15417a"},"children":[{"type":"text","value":"# usage: wait_for_redis miin-redis-dev password"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"Wait%20for%20mysql"},"children":[{"type":"text","value":"Wait for mysql"}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-060abb{color:#79C0FF}.ct-ffdc0d{color:#C9D1D9}.ct-705dc7{color:#C9D1D9}.ct-333e9d{color:#A5D6FF}.ct-fe4a82{color:#79C0FF}.ct-3e06c3{color:#FF7B72}.ct-d2c0fb{color:#C9D1D9}.ct-765ec8{color:#D2A8FF}.ct-15417a{color:#8B949E}.light .ct-15417a{color:#93A1A1}.light .ct-765ec8{color:#268BD2}.light .ct-d2c0fb{color:#657B83}.light .ct-3e06c3{color:#859900}.light .ct-fe4a82{color:#268BD2}.light .ct-333e9d{color:#2AA198}.light .ct-705dc7{color:#859900}.light .ct-ffdc0d{color:#268BD2}.light .ct-060abb{color:#D33682}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Docker:Wait for redis.md","_source":"content","_file":"Docker/Wait for redis.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/docker/wait-for-redis","_dir":"docker","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Wait For Redis","description":"wait-for-it.sh doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before redis is ready to accept connections","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/vishnubob/wait-for-it","rel":["nofollow"]},"children":[{"type":"text","value":"wait-for-it.sh"}]},{"type":"text","value":" doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before redis is ready to accept connections"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This script waits for first successful ping or exits with non-zero status after 3 minutes."}]},{"type":"element","tag":"code","props":{"code":"# Waits for redis to become actually available\nwait_for_redis() {\n timeout=180 # 3 minutes\n i=0\n while ! docker exec -it \"$1\" redis-cli -h localhost -p 6379 -a \"$2\" ping | grep \"PONG\" >/dev/null 2>&1; do\n sleep 1;\n\n i=$(($i+1))\n if [[ ${i} -ge ${timeout} ]]; then\n echo \"[Error] can't properly ping Redis container after ${i} secs\"\n exit 1;\n fi\n done\n}\n\n# usage: wait_for_redis miin-redis-dev password\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"# Waits for redis to become actually available\nwait_for_redis() {\n timeout=180 # 3 minutes\n i=0\n while ! docker exec -it \"$1\" redis-cli -h localhost -p 6379 -a \"$2\" ping | grep \"PONG\" >/dev/null 2>&1; do\n sleep 1;\n\n i=$(($i+1))\n if [[ ${i} -ge ${timeout} ]]; then\n echo \"[Error] can't properly ping Redis container after ${i} secs\"\n exit 1;\n fi\n done\n}\n\n# usage: wait_for_redis miin-redis-dev password\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"Wait%20for%20mysql"},"children":[{"type":"text","value":"Wait for mysql"}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/vishnubob/wait-for-it","rel":["nofollow"]},"children":[{"type":"text","value":"wait-for-it.sh"}]},{"type":"text","value":" doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before redis is ready to accept connections"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This script waits for first successful ping or exits with non-zero status after 3 minutes."}]},{"type":"element","tag":"code","props":{"code":"# Waits for redis to become actually available\nwait_for_redis() {\n timeout=180 # 3 minutes\n i=0\n while ! docker exec -it \"$1\" redis-cli -h localhost -p 6379 -a \"$2\" ping | grep \"PONG\" >/dev/null 2>&1; do\n sleep 1;\n\n i=$(($i+1))\n if [[ ${i} -ge ${timeout} ]]; then\n echo \"[Error] can't properly ping Redis container after ${i} secs\"\n exit 1;\n fi\n done\n}\n\n# usage: wait_for_redis miin-redis-dev password\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5c461f"},"children":[{"type":"text","value":"# Waits for redis to become actually available"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ecbf6"},"children":[{"type":"text","value":"wait_for_redis"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" timeout=180 "}]},{"type":"element","tag":"span","props":{"class":"ct-5c461f"},"children":[{"type":"text","value":"# 3 minutes"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" i=0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c1e9"},"children":[{"type":"text","value":"while"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c1e9"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" docker "}]},{"type":"element","tag":"span","props":{"class":"ct-92bbf9"},"children":[{"type":"text","value":"exec"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" -it "}]},{"type":"element","tag":"span","props":{"class":"ct-46d226"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-914ee4"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-1335e9"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-46d226"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" redis-cli -h localhost -p 6379 -a "}]},{"type":"element","tag":"span","props":{"class":"ct-46d226"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-914ee4"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-1335e9"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-46d226"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" ping "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c1e9"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" grep "}]},{"type":"element","tag":"span","props":{"class":"ct-46d226"},"children":[{"type":"text","value":"\"PONG\""}]},{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c1e9"},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":"/dev/null "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c1e9"},"children":[{"type":"text","value":"2>&1;"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c1e9"},"children":[{"type":"text","value":"do"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" sleep 1"}]},{"type":"element","tag":"span","props":{"class":"ct-d8c1e9"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" i="}]},{"type":"element","tag":"span","props":{"class":"ct-46d226"},"children":[{"type":"text","value":"$(("}]},{"type":"element","tag":"span","props":{"class":"ct-914ee4"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-1335e9"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-d8c1e9"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-aeabae"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-46d226"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c1e9"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" [[ "}]},{"type":"element","tag":"span","props":{"class":"ct-914ee4"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-1335e9"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-914ee4"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c1e9"},"children":[{"type":"text","value":"-ge"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-914ee4"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-1335e9"},"children":[{"type":"text","value":"timeout"}]},{"type":"element","tag":"span","props":{"class":"ct-914ee4"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" ]]"}]},{"type":"element","tag":"span","props":{"class":"ct-d8c1e9"},"children":[{"type":"text","value":";"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c1e9"},"children":[{"type":"text","value":"then"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-92bbf9"},"children":[{"type":"text","value":"echo"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-46d226"},"children":[{"type":"text","value":"\"[Error] can't properly ping Redis container after "}]},{"type":"element","tag":"span","props":{"class":"ct-914ee4"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-1335e9"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-914ee4"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-46d226"},"children":[{"type":"text","value":" secs\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-92bbf9"},"children":[{"type":"text","value":"exit"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" 1"}]},{"type":"element","tag":"span","props":{"class":"ct-d8c1e9"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c1e9"},"children":[{"type":"text","value":"fi"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c1e9"},"children":[{"type":"text","value":"done"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef110"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5c461f"},"children":[{"type":"text","value":"# usage: wait_for_redis miin-redis-dev password"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"Wait%20for%20mysql"},"children":[{"type":"text","value":"Wait for mysql"}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-aeabae{color:#79C0FF}.ct-1335e9{color:#C9D1D9}.ct-914ee4{color:#C9D1D9}.ct-46d226{color:#A5D6FF}.ct-92bbf9{color:#79C0FF}.ct-d8c1e9{color:#FF7B72}.ct-8ef110{color:#C9D1D9}.ct-9ecbf6{color:#D2A8FF}.ct-5c461f{color:#8B949E}.light .ct-5c461f{color:#93A1A1}.light .ct-9ecbf6{color:#268BD2}.light .ct-8ef110{color:#657B83}.light .ct-d8c1e9{color:#859900}.light .ct-92bbf9{color:#268BD2}.light .ct-46d226{color:#2AA198}.light .ct-914ee4{color:#859900}.light .ct-1335e9{color:#268BD2}.light .ct-aeabae{color:#D33682}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Docker:Wait for redis.md","_source":"content","_file":"Docker/Wait for redis.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/8cFyiEqgoq.json b/docs/api/_content/query/8cFyiEqgoq.json
index c2154fd..c1ac213 100644
--- a/docs/api/_content/query/8cFyiEqgoq.json
+++ b/docs/api/_content/query/8cFyiEqgoq.json
@@ -1 +1 @@
-{"_path":"/blockchain/common-typescript-examples","_dir":"blockchain","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Common Typescript Examples","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Simple #dapp example for tests: "},{"type":"element","tag":"a","props":{"href":"https://metamask.github.io/test-dapp/","rel":["nofollow"]},"children":[{"type":"text","value":"https://metamask.github.io/test-dapp/"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Interaction with smart contracts described in "},{"type":"element","tag":"a","props":{"href":"Smart%20contracts"},"children":[{"type":"text","value":"Smart contracts"}]}]}]},{"type":"element","tag":"h2","props":{"id":"connecting-to-node"},"children":[{"type":"text","value":"Connecting to node"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If #Metamask extension installed, "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Web3.givenProvider"}]},{"type":"text","value":" is available in global window. You can use "},{"type":"element","tag":"a","props":{"href":"https://infura.io","rel":["nofollow"]},"children":[{"type":"text","value":"Infura"}]},{"type":"text","value":" or your node instead:"}]},{"type":"element","tag":"code","props":{"code":"import Web3 from 'web3';\n\n// URL of your node\nconst PROVIDER_URL = 'https://...';\n\nexport const web3 = new Web3(Web3.givenProvider || PROVIDER_URL);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import Web3 from 'web3';\n\n// URL of your node\nconst PROVIDER_URL = 'https://...';\n\nexport const web3 = new Web3(Web3.givenProvider || PROVIDER_URL);\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"getting-wallet-balance"},"children":[{"type":"text","value":"Getting wallet balance"}]},{"type":"element","tag":"code","props":{"code":"const getBalance = async (address: string) => {\n return await web3.eth.getBalance(address);\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const getBalance = async (address: string) => {\n return await web3.eth.getBalance(address);\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"getting-wallet-address"},"children":[{"type":"text","value":"Getting wallet address"}]},{"type":"element","tag":"code","props":{"code":"// first we need to authorize\nconst authorize = async () => {\n await web3.currentProvider.request({ method: 'eth_requestAccounts' });\n}\n\n// then we can get wallet address\nconst getCurrentAddressUser = () => {\n return web3.currentProvider.selectedAddress;\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// first we need to authorize\nconst authorize = async () => {\n await web3.currentProvider.request({ method: 'eth_requestAccounts' });\n}\n\n// then we can get wallet address\nconst getCurrentAddressUser = () => {\n return web3.currentProvider.selectedAddress;\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"sending-transaction"},"children":[{"type":"text","value":"Sending transaction"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sending "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"value"}]},{"type":"text","value":" tokens with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"memo"}]},{"type":"text","value":" as value:"}]},{"type":"element","tag":"code","props":{"code":"\nconst transfer = async ({ \n from, \n to, \n value, \n memo, \n privateKey, \n gasLimit = 44000 \n}) => {\n const nonce = await web3.eth.getTransactionCount(from);\n const gasPrice = await web3.eth.getGasPrice();\n \n const rawTx = {\n from,\n to,\n value: web3.utils.toHex(Web3.utils.toWei(value, 'ether')),\n gasLimit: web3.utils.toHex(gasLimit),\n gasPrice: web3.utils.toHex(gasPrice),\n nonce: web3.utils.toHex(nonce),\n data: memo,\n };\n \n const privateKeyBuffer = EthUtil.toBuffer(privateKey);\n \n const tx = new Transaction(rawTx);\n \n tx.sign(privateKeyBuffer);\n const serializedTx = tx.serialize();\n \n return this.web3.eth.sendSignedTransaction(\n `0x${serializedTx.toString('hex')}`\n );\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\nconst transfer = async ({ \n from, \n to, \n value, \n memo, \n privateKey, \n gasLimit = 44000 \n}) => {\n const nonce = await web3.eth.getTransactionCount(from);\n const gasPrice = await web3.eth.getGasPrice();\n \n const rawTx = {\n from,\n to,\n value: web3.utils.toHex(Web3.utils.toWei(value, 'ether')),\n gasLimit: web3.utils.toHex(gasLimit),\n gasPrice: web3.utils.toHex(gasPrice),\n nonce: web3.utils.toHex(nonce),\n data: memo,\n };\n \n const privateKeyBuffer = EthUtil.toBuffer(privateKey);\n \n const tx = new Transaction(rawTx);\n \n tx.sign(privateKeyBuffer);\n const serializedTx = tx.serialize();\n \n return this.web3.eth.sendSignedTransaction(\n `0x${serializedTx.toString('hex')}`\n );\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"estimating-transaction-fee"},"children":[{"type":"text","value":"Estimating transaction FEE"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Useful to get fixed amount of tokens from user with pre-estimated fee."}]},{"type":"element","tag":"code","props":{"code":"import { web3 } from '.';\n\nconst estimateFee = async ({\n from,\n to,\n value,\n memo,\n}) => {\n const gasPrice = await web3.eth.getGasPrice();\n const gasLimit = await web3.eth.estimateGas({\n from,\n to,\n value: web3.utils.toHex(web3.utils.toWei(value, 'ether')),\n data: web3.utils.asciiToHex(memo),\n }).call();\n \n return web3.utils.fromWei(\n BigInt(gasPrice.toString())\n .multiply(BigInt(gasLimit.toString()))\n .toString()\n );\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { web3 } from '.';\n\nconst estimateFee = async ({\n from,\n to,\n value,\n memo,\n}) => {\n const gasPrice = await web3.eth.getGasPrice();\n const gasLimit = await web3.eth.estimateGas({\n from,\n to,\n value: web3.utils.toHex(web3.utils.toWei(value, 'ether')),\n data: web3.utils.asciiToHex(memo),\n }).call();\n \n return web3.utils.fromWei(\n BigInt(gasPrice.toString())\n .multiply(BigInt(gasLimit.toString()))\n .toString()\n );\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"subscribing-to-wallet-address-change"},"children":[{"type":"text","value":"Subscribing to wallet address change"}]},{"type":"element","tag":"code","props":{"code":"import { web3 } from '.';\n\nweb3.currentProvider.on('accountsChanged', callback);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { web3 } from '.';\n\nweb3.currentProvider.on('accountsChanged', callback);\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"watching-network-change"},"children":[{"type":"text","value":"Watching network change"}]},{"type":"element","tag":"code","props":{"code":"ethereum.on('chainChanged', handler: (chainId: string) => void);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"ethereum.on('chainChanged', handler: (chainId: string) => void);\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"adding-custom-token-to-wallet"},"children":[{"type":"text","value":"Adding custom token to wallet"}]},{"type":"element","tag":"code","props":{"code":"window.ethereum\n .request({\n method: 'wallet_watchAsset',\n params: {\n type: 'ERC20',\n options: {\n address: '0xb60e8dd61c5d32be8058bb8eb970870f07233155',\n symbol: 'FOO',\n decimals: 18,\n image: 'https://foo.io/token-image.svg',\n },\n },\n })\n .then((success) => {\n if (success) {\n console.log('FOO successfully added to wallet!')\n } else {\n throw new Error('Something went wrong.')\n }\n })\n .catch(console.error)\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"window.ethereum\n .request({\n method: 'wallet_watchAsset',\n params: {\n type: 'ERC20',\n options: {\n address: '0xb60e8dd61c5d32be8058bb8eb970870f07233155',\n symbol: 'FOO',\n decimals: 18,\n image: 'https://foo.io/token-image.svg',\n },\n },\n })\n .then((success) => {\n if (success) {\n console.log('FOO successfully added to wallet!')\n } else {\n throw new Error('Something went wrong.')\n }\n })\n .catch(console.error)\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"changing-network-to-custom"},"children":[{"type":"text","value":"Changing network to custom"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Checking current chainId:"}]},{"type":"element","tag":"code","props":{"code":"const getChainID = async () => {\n return ethereum.request({ method: 'eth_chainId' })\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const getChainID = async () => {\n return ethereum.request({ method: 'eth_chainId' })\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Asking wallet to change current network:"}]},{"type":"element","tag":"code","props":{"code":"try {\n await window.ethereum.request({\n method: 'wallet_switchEthereumChain',\n params: [{ chainId: '0x03' }], // ropsten chainID (3) in hex\n });\n} catch (switchError) {\n // This error code indicates that the chain has not been added to MetaMask.\n if (error.code === 4902) {\n try {\n await window.ethereum.request({\n method: 'wallet_addEthereumChain',\n params: [{ \n chainId: '0x03', // ropsten chainID (3) in hex\n chainName: 'Ropsten Test Network', \n nativeCurrency: { \n name: 'ETH',\n symbol: 'ETH',\n decimals: 18\n }, \n rpcUrls: ['https://ropsten.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161'], \n blockExplorerUrls: ['https://ropsten.etherscan.io'] \n }] ,\n });\n } catch (addError) {\n // handle \"add\" error\n }\n }\n // handle other \"switch\" errors\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"try {\n await window.ethereum.request({\n method: 'wallet_switchEthereumChain',\n params: [{ chainId: '0x03' }], // ropsten chainID (3) in hex\n });\n} catch (switchError) {\n // This error code indicates that the chain has not been added to MetaMask.\n if (error.code === 4902) {\n try {\n await window.ethereum.request({\n method: 'wallet_addEthereumChain',\n params: [{ \n chainId: '0x03', // ropsten chainID (3) in hex\n chainName: 'Ropsten Test Network', \n nativeCurrency: { \n name: 'ETH',\n symbol: 'ETH',\n decimals: 18\n }, \n rpcUrls: ['https://ropsten.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161'], \n blockExplorerUrls: ['https://ropsten.etherscan.io'] \n }] ,\n });\n } catch (addError) {\n // handle \"add\" error\n }\n }\n // handle other \"switch\" errors\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Simple #dapp example for tests: "},{"type":"element","tag":"a","props":{"href":"https://metamask.github.io/test-dapp/","rel":["nofollow"]},"children":[{"type":"text","value":"https://metamask.github.io/test-dapp/"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Interaction with smart contracts described in "},{"type":"element","tag":"a","props":{"href":"Smart%20contracts"},"children":[{"type":"text","value":"Smart contracts"}]}]}]},{"type":"element","tag":"h2","props":{"id":"connecting-to-node"},"children":[{"type":"text","value":"Connecting to node"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If #Metamask extension installed, "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Web3.givenProvider"}]},{"type":"text","value":" is available in global window. You can use "},{"type":"element","tag":"a","props":{"href":"https://infura.io","rel":["nofollow"]},"children":[{"type":"text","value":"Infura"}]},{"type":"text","value":" or your node instead:"}]},{"type":"element","tag":"code","props":{"code":"import Web3 from 'web3';\n\n// URL of your node\nconst PROVIDER_URL = 'https://...';\n\nexport const web3 = new Web3(Web3.givenProvider || PROVIDER_URL);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'web3'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0a81e7"},"children":[{"type":"text","value":"// URL of your node"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c91062"},"children":[{"type":"text","value":"PROVIDER_URL"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'https://...'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c91062"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"givenProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c91062"},"children":[{"type":"text","value":"PROVIDER_URL"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":");"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"getting-wallet-balance"},"children":[{"type":"text","value":"Getting wallet balance"}]},{"type":"element","tag":"code","props":{"code":"const getBalance = async (address: string) => {\n return await web3.eth.getBalance(address);\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dfc9dd"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-de9cf1"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2b9286"},"children":[{"type":"text","value":"getBalance"}]},{"type":"element","tag":"span","props":{"class":"ct-de9cf1"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1f936b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-de9cf1"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dfc9dd"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-de9cf1"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ecd2f7"},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"span","props":{"class":"ct-1f936b"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-de9cf1"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a77722"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-de9cf1"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-dfc9dd"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-de9cf1"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"getBalance"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"getting-wallet-address"},"children":[{"type":"text","value":"Getting wallet address"}]},{"type":"element","tag":"code","props":{"code":"// first we need to authorize\nconst authorize = async () => {\n await web3.currentProvider.request({ method: 'eth_requestAccounts' });\n}\n\n// then we can get wallet address\nconst getCurrentAddressUser = () => {\n return web3.currentProvider.selectedAddress;\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0a81e7"},"children":[{"type":"text","value":"// first we need to authorize"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"authorize"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"currentProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"({ method: "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'eth_requestAccounts'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0a81e7"},"children":[{"type":"text","value":"// then we can get wallet address"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"getCurrentAddressUser"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"currentProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"selectedAddress"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"sending-transaction"},"children":[{"type":"text","value":"Sending transaction"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sending "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"value"}]},{"type":"text","value":" tokens with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"memo"}]},{"type":"text","value":" as value:"}]},{"type":"element","tag":"code","props":{"code":"\nconst transfer = async ({ \n from, \n to, \n value, \n memo, \n privateKey, \n gasLimit = 44000 \n}) => {\n const nonce = await web3.eth.getTransactionCount(from);\n const gasPrice = await web3.eth.getGasPrice();\n \n const rawTx = {\n from,\n to,\n value: web3.utils.toHex(Web3.utils.toWei(value, 'ether')),\n gasLimit: web3.utils.toHex(gasLimit),\n gasPrice: web3.utils.toHex(gasPrice),\n nonce: web3.utils.toHex(nonce),\n data: memo,\n };\n \n const privateKeyBuffer = EthUtil.toBuffer(privateKey);\n \n const tx = new Transaction(rawTx);\n \n tx.sign(privateKeyBuffer);\n const serializedTx = tx.serialize();\n \n return this.web3.eth.sendSignedTransaction(\n `0x${serializedTx.toString('hex')}`\n );\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"transfer"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" ({ "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"to"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"memo"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"privateKey"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"gasLimit"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"}) "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c91062"},"children":[{"type":"text","value":"nonce"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"getTransactionCount"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c91062"},"children":[{"type":"text","value":"gasPrice"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"getGasPrice"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c91062"},"children":[{"type":"text","value":"rawTx"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"to"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" value: "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"toHex"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"toWei"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'ether'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":")),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" gasLimit: "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"toHex"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"gasLimit"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" gasPrice: "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"toHex"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"gasPrice"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" nonce: "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"toHex"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"nonce"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" data: "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"memo"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c91062"},"children":[{"type":"text","value":"privateKeyBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"EthUtil"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"toBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"privateKey"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c91062"},"children":[{"type":"text","value":"tx"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"Transaction"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"rawTx"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"tx"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"sign"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"privateKeyBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c91062"},"children":[{"type":"text","value":"serializedTx"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"tx"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"serialize"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c91062"},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"sendSignedTransaction"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"`0x${"}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"serializedTx"}]},{"type":"element","tag":"span","props":{"class":"ct-fd0f2b"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"toString"}]},{"type":"element","tag":"span","props":{"class":"ct-fd0f2b"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'hex'"}]},{"type":"element","tag":"span","props":{"class":"ct-fd0f2b"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"}`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"estimating-transaction-fee"},"children":[{"type":"text","value":"Estimating transaction FEE"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Useful to get fixed amount of tokens from user with pre-estimated fee."}]},{"type":"element","tag":"code","props":{"code":"import { web3 } from '.';\n\nconst estimateFee = async ({\n from,\n to,\n value,\n memo,\n}) => {\n const gasPrice = await web3.eth.getGasPrice();\n const gasLimit = await web3.eth.estimateGas({\n from,\n to,\n value: web3.utils.toHex(web3.utils.toWei(value, 'ether')),\n data: web3.utils.asciiToHex(memo),\n }).call();\n \n return web3.utils.fromWei(\n BigInt(gasPrice.toString())\n .multiply(BigInt(gasLimit.toString()))\n .toString()\n );\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'.'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"estimateFee"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" ({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"to"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"memo"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"}) "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c91062"},"children":[{"type":"text","value":"gasPrice"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"getGasPrice"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c91062"},"children":[{"type":"text","value":"gasLimit"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"estimateGas"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"to"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" value: "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"toHex"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"toWei"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'ether'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":")),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" data: "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"asciiToHex"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"memo"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" })."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"call"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"fromWei"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2eedec"},"children":[{"type":"text","value":"BigInt"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"gasPrice"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"toString"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"())"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"multiply"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2eedec"},"children":[{"type":"text","value":"BigInt"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"gasLimit"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"toString"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"()))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"toString"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"subscribing-to-wallet-address-change"},"children":[{"type":"text","value":"Subscribing to wallet address change"}]},{"type":"element","tag":"code","props":{"code":"import { web3 } from '.';\n\nweb3.currentProvider.on('accountsChanged', callback);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'.'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"currentProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'accountsChanged'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"callback"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":");"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"watching-network-change"},"children":[{"type":"text","value":"Watching network change"}]},{"type":"element","tag":"code","props":{"code":"ethereum.on('chainChanged', handler: (chainId: string) => void);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"ethereum"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'chainChanged'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"handler"}]},{"type":"element","tag":"span","props":{"class":"ct-20099f"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"adding-custom-token-to-wallet"},"children":[{"type":"text","value":"Adding custom token to wallet"}]},{"type":"element","tag":"code","props":{"code":"window.ethereum\n .request({\n method: 'wallet_watchAsset',\n params: {\n type: 'ERC20',\n options: {\n address: '0xb60e8dd61c5d32be8058bb8eb970870f07233155',\n symbol: 'FOO',\n decimals: 18,\n image: 'https://foo.io/token-image.svg',\n },\n },\n })\n .then((success) => {\n if (success) {\n console.log('FOO successfully added to wallet!')\n } else {\n throw new Error('Something went wrong.')\n }\n })\n .catch(console.error)\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"window"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"ethereum"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" method: "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'wallet_watchAsset'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" params: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" type: "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'ERC20'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" options: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" address: "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'0xb60e8dd61c5d32be8058bb8eb970870f07233155'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" symbol: "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'FOO'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" decimals: "}]},{"type":"element","tag":"span","props":{"class":"ct-894d23"},"children":[{"type":"text","value":"18"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" image: "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'https://foo.io/token-image.svg'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-de9cf1"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-2b9286"},"children":[{"type":"text","value":"then"}]},{"type":"element","tag":"span","props":{"class":"ct-de9cf1"},"children":[{"type":"text","value":"(("}]},{"type":"element","tag":"span","props":{"class":"ct-ecd2f7"},"children":[{"type":"text","value":"success"}]},{"type":"element","tag":"span","props":{"class":"ct-de9cf1"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-dfc9dd"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-de9cf1"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"success"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'FOO successfully added to wallet!'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"else"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2eedec"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'Something went wrong.'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":")"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"changing-network-to-custom"},"children":[{"type":"text","value":"Changing network to custom"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Checking current chainId:"}]},{"type":"element","tag":"code","props":{"code":"const getChainID = async () => {\n return ethereum.request({ method: 'eth_chainId' })\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"getChainID"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bf2"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"ethereum"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"({ method: "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'eth_chainId'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Asking wallet to change current network:"}]},{"type":"element","tag":"code","props":{"code":"try {\n await window.ethereum.request({\n method: 'wallet_switchEthereumChain',\n params: [{ chainId: '0x03' }], // ropsten chainID (3) in hex\n });\n} catch (switchError) {\n // This error code indicates that the chain has not been added to MetaMask.\n if (error.code === 4902) {\n try {\n await window.ethereum.request({\n method: 'wallet_addEthereumChain',\n params: [{ \n chainId: '0x03', // ropsten chainID (3) in hex\n chainName: 'Ropsten Test Network', \n nativeCurrency: { \n name: 'ETH',\n symbol: 'ETH',\n decimals: 18\n }, \n rpcUrls: ['https://ropsten.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161'], \n blockExplorerUrls: ['https://ropsten.etherscan.io'] \n }] ,\n });\n } catch (addError) {\n // handle \"add\" error\n }\n }\n // handle other \"switch\" errors\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"try"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"window"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"ethereum"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" method: "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'wallet_switchEthereumChain'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" params: [{ chainId: "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'0x03'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" }], "}]},{"type":"element","tag":"span","props":{"class":"ct-0a81e7"},"children":[{"type":"text","value":"// ropsten chainID (3) in hex"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"} "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"switchError"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0a81e7"},"children":[{"type":"text","value":"// This error code indicates that the chain has not been added to MetaMask."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"code"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"==="}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-894d23"},"children":[{"type":"text","value":"4902"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"try"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"window"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"ethereum"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a728a9"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" method: "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'wallet_addEthereumChain'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" params: [{ "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" chainId: "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'0x03'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0a81e7"},"children":[{"type":"text","value":"// ropsten chainID (3) in hex"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" chainName: "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'Ropsten Test Network'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" nativeCurrency: { "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" name: "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'ETH'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" symbol: "}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'ETH'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" decimals: "}]},{"type":"element","tag":"span","props":{"class":"ct-894d23"},"children":[{"type":"text","value":"18"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" }, "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" rpcUrls: ["}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'https://ropsten.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"], "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" blockExplorerUrls: ["}]},{"type":"element","tag":"span","props":{"class":"ct-e80568"},"children":[{"type":"text","value":"'https://ropsten.etherscan.io'"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"] "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" }] ,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-414e6d"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-58e1b5"},"children":[{"type":"text","value":"addError"}]},{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0a81e7"},"children":[{"type":"text","value":"// handle \"add\" error"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0a81e7"},"children":[{"type":"text","value":"// handle other \"switch\" errors"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec66b6"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-894d23{color:#79C0FF}.ct-20099f{color:#C9D1D9}.ct-2eedec{color:#79C0FF}.ct-fd0f2b{color:#A5D6FF}.ct-a77722{color:#79C0FF}.ct-ecd2f7{color:#FFA657}.ct-1f936b{color:#FF7B72}.ct-2b9286{color:#D2A8FF}.ct-de9cf1{color:#C9D1D9}.ct-dfc9dd{color:#FF7B72}.ct-a728a9{color:#D2A8FF}.ct-c91062{color:#79C0FF}.ct-fe8bf2{color:#FF7B72}.ct-0a81e7{color:#8B949E}.ct-e80568{color:#A5D6FF}.ct-58e1b5{color:#C9D1D9}.ct-ec66b6{color:#C9D1D9}.ct-414e6d{color:#FF7B72}.light .ct-414e6d{color:#859900}.light .ct-ec66b6{color:#657B83}.light .ct-58e1b5{color:#268BD2}.light .ct-e80568{color:#2AA198}.light .ct-0a81e7{color:#93A1A1}.light .ct-fe8bf2{color:#073642}.light .ct-c91062{color:#268BD2}.light .ct-a728a9{color:#268BD2}.light .ct-dfc9dd{color:#073642}.light .ct-de9cf1{color:#657B83}.light .ct-2b9286{color:#268BD2}.light .ct-1f936b{color:#859900}.light .ct-ecd2f7{color:#657B83}.light .ct-a77722{color:#859900}.light .ct-fd0f2b{color:#657B83}.light .ct-2eedec{color:#859900}.light .ct-20099f{color:#859900}.light .ct-894d23{color:#D33682}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"connecting-to-node","depth":2,"text":"Connecting to node"},{"id":"getting-wallet-balance","depth":2,"text":"Getting wallet balance"},{"id":"getting-wallet-address","depth":2,"text":"Getting wallet address"},{"id":"sending-transaction","depth":2,"text":"Sending transaction"},{"id":"estimating-transaction-fee","depth":2,"text":"Estimating transaction FEE"},{"id":"subscribing-to-wallet-address-change","depth":2,"text":"Subscribing to wallet address change"},{"id":"watching-network-change","depth":2,"text":"Watching network change"},{"id":"adding-custom-token-to-wallet","depth":2,"text":"Adding custom token to wallet"},{"id":"changing-network-to-custom","depth":2,"text":"Changing network to custom"}]}},"_type":"markdown","_id":"content:Blockchain:Common typescript examples.md","_source":"content","_file":"Blockchain/Common typescript examples.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/blockchain/common-typescript-examples","_dir":"blockchain","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Common Typescript Examples","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Simple #dapp example for tests: "},{"type":"element","tag":"a","props":{"href":"https://metamask.github.io/test-dapp/","rel":["nofollow"]},"children":[{"type":"text","value":"https://metamask.github.io/test-dapp/"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Interaction with smart contracts described in "},{"type":"element","tag":"a","props":{"href":"Smart%20contracts"},"children":[{"type":"text","value":"Smart contracts"}]}]}]},{"type":"element","tag":"h2","props":{"id":"connecting-to-node"},"children":[{"type":"text","value":"Connecting to node"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If #Metamask extension installed, "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Web3.givenProvider"}]},{"type":"text","value":" is available in global window. You can use "},{"type":"element","tag":"a","props":{"href":"https://infura.io","rel":["nofollow"]},"children":[{"type":"text","value":"Infura"}]},{"type":"text","value":" or your node instead:"}]},{"type":"element","tag":"code","props":{"code":"import Web3 from 'web3';\n\n// URL of your node\nconst PROVIDER_URL = 'https://...';\n\nexport const web3 = new Web3(Web3.givenProvider || PROVIDER_URL);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import Web3 from 'web3';\n\n// URL of your node\nconst PROVIDER_URL = 'https://...';\n\nexport const web3 = new Web3(Web3.givenProvider || PROVIDER_URL);\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"getting-wallet-balance"},"children":[{"type":"text","value":"Getting wallet balance"}]},{"type":"element","tag":"code","props":{"code":"const getBalance = async (address: string) => {\n return await web3.eth.getBalance(address);\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const getBalance = async (address: string) => {\n return await web3.eth.getBalance(address);\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"getting-wallet-address"},"children":[{"type":"text","value":"Getting wallet address"}]},{"type":"element","tag":"code","props":{"code":"// first we need to authorize\nconst authorize = async () => {\n await web3.currentProvider.request({ method: 'eth_requestAccounts' });\n}\n\n// then we can get wallet address\nconst getCurrentAddressUser = () => {\n return web3.currentProvider.selectedAddress;\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// first we need to authorize\nconst authorize = async () => {\n await web3.currentProvider.request({ method: 'eth_requestAccounts' });\n}\n\n// then we can get wallet address\nconst getCurrentAddressUser = () => {\n return web3.currentProvider.selectedAddress;\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"sending-transaction"},"children":[{"type":"text","value":"Sending transaction"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sending "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"value"}]},{"type":"text","value":" tokens with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"memo"}]},{"type":"text","value":" as value:"}]},{"type":"element","tag":"code","props":{"code":"\nconst transfer = async ({ \n from, \n to, \n value, \n memo, \n privateKey, \n gasLimit = 44000 \n}) => {\n const nonce = await web3.eth.getTransactionCount(from);\n const gasPrice = await web3.eth.getGasPrice();\n \n const rawTx = {\n from,\n to,\n value: web3.utils.toHex(Web3.utils.toWei(value, 'ether')),\n gasLimit: web3.utils.toHex(gasLimit),\n gasPrice: web3.utils.toHex(gasPrice),\n nonce: web3.utils.toHex(nonce),\n data: memo,\n };\n \n const privateKeyBuffer = EthUtil.toBuffer(privateKey);\n \n const tx = new Transaction(rawTx);\n \n tx.sign(privateKeyBuffer);\n const serializedTx = tx.serialize();\n \n return this.web3.eth.sendSignedTransaction(\n `0x${serializedTx.toString('hex')}`\n );\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\nconst transfer = async ({ \n from, \n to, \n value, \n memo, \n privateKey, \n gasLimit = 44000 \n}) => {\n const nonce = await web3.eth.getTransactionCount(from);\n const gasPrice = await web3.eth.getGasPrice();\n \n const rawTx = {\n from,\n to,\n value: web3.utils.toHex(Web3.utils.toWei(value, 'ether')),\n gasLimit: web3.utils.toHex(gasLimit),\n gasPrice: web3.utils.toHex(gasPrice),\n nonce: web3.utils.toHex(nonce),\n data: memo,\n };\n \n const privateKeyBuffer = EthUtil.toBuffer(privateKey);\n \n const tx = new Transaction(rawTx);\n \n tx.sign(privateKeyBuffer);\n const serializedTx = tx.serialize();\n \n return this.web3.eth.sendSignedTransaction(\n `0x${serializedTx.toString('hex')}`\n );\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"estimating-transaction-fee"},"children":[{"type":"text","value":"Estimating transaction FEE"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Useful to get fixed amount of tokens from user with pre-estimated fee."}]},{"type":"element","tag":"code","props":{"code":"import { web3 } from '.';\n\nconst estimateFee = async ({\n from,\n to,\n value,\n memo,\n}) => {\n const gasPrice = await web3.eth.getGasPrice();\n const gasLimit = await web3.eth.estimateGas({\n from,\n to,\n value: web3.utils.toHex(web3.utils.toWei(value, 'ether')),\n data: web3.utils.asciiToHex(memo),\n }).call();\n \n return web3.utils.fromWei(\n BigInt(gasPrice.toString())\n .multiply(BigInt(gasLimit.toString()))\n .toString()\n );\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { web3 } from '.';\n\nconst estimateFee = async ({\n from,\n to,\n value,\n memo,\n}) => {\n const gasPrice = await web3.eth.getGasPrice();\n const gasLimit = await web3.eth.estimateGas({\n from,\n to,\n value: web3.utils.toHex(web3.utils.toWei(value, 'ether')),\n data: web3.utils.asciiToHex(memo),\n }).call();\n \n return web3.utils.fromWei(\n BigInt(gasPrice.toString())\n .multiply(BigInt(gasLimit.toString()))\n .toString()\n );\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"subscribing-to-wallet-address-change"},"children":[{"type":"text","value":"Subscribing to wallet address change"}]},{"type":"element","tag":"code","props":{"code":"import { web3 } from '.';\n\nweb3.currentProvider.on('accountsChanged', callback);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { web3 } from '.';\n\nweb3.currentProvider.on('accountsChanged', callback);\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"watching-network-change"},"children":[{"type":"text","value":"Watching network change"}]},{"type":"element","tag":"code","props":{"code":"ethereum.on('chainChanged', handler: (chainId: string) => void);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"ethereum.on('chainChanged', handler: (chainId: string) => void);\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"adding-custom-token-to-wallet"},"children":[{"type":"text","value":"Adding custom token to wallet"}]},{"type":"element","tag":"code","props":{"code":"window.ethereum\n .request({\n method: 'wallet_watchAsset',\n params: {\n type: 'ERC20',\n options: {\n address: '0xb60e8dd61c5d32be8058bb8eb970870f07233155',\n symbol: 'FOO',\n decimals: 18,\n image: 'https://foo.io/token-image.svg',\n },\n },\n })\n .then((success) => {\n if (success) {\n console.log('FOO successfully added to wallet!')\n } else {\n throw new Error('Something went wrong.')\n }\n })\n .catch(console.error)\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"window.ethereum\n .request({\n method: 'wallet_watchAsset',\n params: {\n type: 'ERC20',\n options: {\n address: '0xb60e8dd61c5d32be8058bb8eb970870f07233155',\n symbol: 'FOO',\n decimals: 18,\n image: 'https://foo.io/token-image.svg',\n },\n },\n })\n .then((success) => {\n if (success) {\n console.log('FOO successfully added to wallet!')\n } else {\n throw new Error('Something went wrong.')\n }\n })\n .catch(console.error)\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"changing-network-to-custom"},"children":[{"type":"text","value":"Changing network to custom"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Checking current chainId:"}]},{"type":"element","tag":"code","props":{"code":"const getChainID = async () => {\n return ethereum.request({ method: 'eth_chainId' })\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const getChainID = async () => {\n return ethereum.request({ method: 'eth_chainId' })\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Asking wallet to change current network:"}]},{"type":"element","tag":"code","props":{"code":"try {\n await window.ethereum.request({\n method: 'wallet_switchEthereumChain',\n params: [{ chainId: '0x03' }], // ropsten chainID (3) in hex\n });\n} catch (switchError) {\n // This error code indicates that the chain has not been added to MetaMask.\n if (error.code === 4902) {\n try {\n await window.ethereum.request({\n method: 'wallet_addEthereumChain',\n params: [{ \n chainId: '0x03', // ropsten chainID (3) in hex\n chainName: 'Ropsten Test Network', \n nativeCurrency: { \n name: 'ETH',\n symbol: 'ETH',\n decimals: 18\n }, \n rpcUrls: ['https://ropsten.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161'], \n blockExplorerUrls: ['https://ropsten.etherscan.io'] \n }] ,\n });\n } catch (addError) {\n // handle \"add\" error\n }\n }\n // handle other \"switch\" errors\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"try {\n await window.ethereum.request({\n method: 'wallet_switchEthereumChain',\n params: [{ chainId: '0x03' }], // ropsten chainID (3) in hex\n });\n} catch (switchError) {\n // This error code indicates that the chain has not been added to MetaMask.\n if (error.code === 4902) {\n try {\n await window.ethereum.request({\n method: 'wallet_addEthereumChain',\n params: [{ \n chainId: '0x03', // ropsten chainID (3) in hex\n chainName: 'Ropsten Test Network', \n nativeCurrency: { \n name: 'ETH',\n symbol: 'ETH',\n decimals: 18\n }, \n rpcUrls: ['https://ropsten.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161'], \n blockExplorerUrls: ['https://ropsten.etherscan.io'] \n }] ,\n });\n } catch (addError) {\n // handle \"add\" error\n }\n }\n // handle other \"switch\" errors\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Simple #dapp example for tests: "},{"type":"element","tag":"a","props":{"href":"https://metamask.github.io/test-dapp/","rel":["nofollow"]},"children":[{"type":"text","value":"https://metamask.github.io/test-dapp/"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Interaction with smart contracts described in "},{"type":"element","tag":"a","props":{"href":"Smart%20contracts"},"children":[{"type":"text","value":"Smart contracts"}]}]}]},{"type":"element","tag":"h2","props":{"id":"connecting-to-node"},"children":[{"type":"text","value":"Connecting to node"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If #Metamask extension installed, "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Web3.givenProvider"}]},{"type":"text","value":" is available in global window. You can use "},{"type":"element","tag":"a","props":{"href":"https://infura.io","rel":["nofollow"]},"children":[{"type":"text","value":"Infura"}]},{"type":"text","value":" or your node instead:"}]},{"type":"element","tag":"code","props":{"code":"import Web3 from 'web3';\n\n// URL of your node\nconst PROVIDER_URL = 'https://...';\n\nexport const web3 = new Web3(Web3.givenProvider || PROVIDER_URL);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'web3'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-178967"},"children":[{"type":"text","value":"// URL of your node"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6a4a5"},"children":[{"type":"text","value":"PROVIDER_URL"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'https://...'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6a4a5"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"givenProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6a4a5"},"children":[{"type":"text","value":"PROVIDER_URL"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":");"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"getting-wallet-balance"},"children":[{"type":"text","value":"Getting wallet balance"}]},{"type":"element","tag":"code","props":{"code":"const getBalance = async (address: string) => {\n return await web3.eth.getBalance(address);\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-839cc0"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-56d6bf"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bc1a9e"},"children":[{"type":"text","value":"getBalance"}]},{"type":"element","tag":"span","props":{"class":"ct-56d6bf"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-17069f"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-56d6bf"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-839cc0"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-56d6bf"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-3b06ef"},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"span","props":{"class":"ct-17069f"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-56d6bf"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2bc6be"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-56d6bf"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-839cc0"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-56d6bf"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"getBalance"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"getting-wallet-address"},"children":[{"type":"text","value":"Getting wallet address"}]},{"type":"element","tag":"code","props":{"code":"// first we need to authorize\nconst authorize = async () => {\n await web3.currentProvider.request({ method: 'eth_requestAccounts' });\n}\n\n// then we can get wallet address\nconst getCurrentAddressUser = () => {\n return web3.currentProvider.selectedAddress;\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-178967"},"children":[{"type":"text","value":"// first we need to authorize"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"authorize"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"currentProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"({ method: "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'eth_requestAccounts'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-178967"},"children":[{"type":"text","value":"// then we can get wallet address"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"getCurrentAddressUser"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"currentProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"selectedAddress"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"sending-transaction"},"children":[{"type":"text","value":"Sending transaction"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sending "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"value"}]},{"type":"text","value":" tokens with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"memo"}]},{"type":"text","value":" as value:"}]},{"type":"element","tag":"code","props":{"code":"\nconst transfer = async ({ \n from, \n to, \n value, \n memo, \n privateKey, \n gasLimit = 44000 \n}) => {\n const nonce = await web3.eth.getTransactionCount(from);\n const gasPrice = await web3.eth.getGasPrice();\n \n const rawTx = {\n from,\n to,\n value: web3.utils.toHex(Web3.utils.toWei(value, 'ether')),\n gasLimit: web3.utils.toHex(gasLimit),\n gasPrice: web3.utils.toHex(gasPrice),\n nonce: web3.utils.toHex(nonce),\n data: memo,\n };\n \n const privateKeyBuffer = EthUtil.toBuffer(privateKey);\n \n const tx = new Transaction(rawTx);\n \n tx.sign(privateKeyBuffer);\n const serializedTx = tx.serialize();\n \n return this.web3.eth.sendSignedTransaction(\n `0x${serializedTx.toString('hex')}`\n );\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"transfer"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" ({ "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"to"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"memo"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"privateKey"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"gasLimit"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"}) "}]},{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6a4a5"},"children":[{"type":"text","value":"nonce"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"getTransactionCount"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6a4a5"},"children":[{"type":"text","value":"gasPrice"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"getGasPrice"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6a4a5"},"children":[{"type":"text","value":"rawTx"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"to"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" value: "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"toHex"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"toWei"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'ether'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":")),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" gasLimit: "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"toHex"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"gasLimit"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" gasPrice: "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"toHex"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"gasPrice"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" nonce: "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"toHex"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"nonce"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" data: "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"memo"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6a4a5"},"children":[{"type":"text","value":"privateKeyBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"EthUtil"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"toBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"privateKey"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6a4a5"},"children":[{"type":"text","value":"tx"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"Transaction"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"rawTx"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"tx"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"sign"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"privateKeyBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6a4a5"},"children":[{"type":"text","value":"serializedTx"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"tx"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"serialize"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6a4a5"},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"sendSignedTransaction"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"`0x${"}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"serializedTx"}]},{"type":"element","tag":"span","props":{"class":"ct-5229fc"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"toString"}]},{"type":"element","tag":"span","props":{"class":"ct-5229fc"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'hex'"}]},{"type":"element","tag":"span","props":{"class":"ct-5229fc"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"}`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"estimating-transaction-fee"},"children":[{"type":"text","value":"Estimating transaction FEE"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Useful to get fixed amount of tokens from user with pre-estimated fee."}]},{"type":"element","tag":"code","props":{"code":"import { web3 } from '.';\n\nconst estimateFee = async ({\n from,\n to,\n value,\n memo,\n}) => {\n const gasPrice = await web3.eth.getGasPrice();\n const gasLimit = await web3.eth.estimateGas({\n from,\n to,\n value: web3.utils.toHex(web3.utils.toWei(value, 'ether')),\n data: web3.utils.asciiToHex(memo),\n }).call();\n \n return web3.utils.fromWei(\n BigInt(gasPrice.toString())\n .multiply(BigInt(gasLimit.toString()))\n .toString()\n );\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'.'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"estimateFee"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" ({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"to"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"memo"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"}) "}]},{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6a4a5"},"children":[{"type":"text","value":"gasPrice"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"getGasPrice"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6a4a5"},"children":[{"type":"text","value":"gasLimit"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"estimateGas"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"to"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" value: "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"toHex"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"toWei"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'ether'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":")),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" data: "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"asciiToHex"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"memo"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" })."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"call"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"fromWei"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-254526"},"children":[{"type":"text","value":"BigInt"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"gasPrice"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"toString"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"())"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"multiply"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-254526"},"children":[{"type":"text","value":"BigInt"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"gasLimit"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"toString"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"()))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"toString"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"subscribing-to-wallet-address-change"},"children":[{"type":"text","value":"Subscribing to wallet address change"}]},{"type":"element","tag":"code","props":{"code":"import { web3 } from '.';\n\nweb3.currentProvider.on('accountsChanged', callback);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'.'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"currentProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'accountsChanged'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"callback"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":");"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"watching-network-change"},"children":[{"type":"text","value":"Watching network change"}]},{"type":"element","tag":"code","props":{"code":"ethereum.on('chainChanged', handler: (chainId: string) => void);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"ethereum"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'chainChanged'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"handler"}]},{"type":"element","tag":"span","props":{"class":"ct-21a018"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"adding-custom-token-to-wallet"},"children":[{"type":"text","value":"Adding custom token to wallet"}]},{"type":"element","tag":"code","props":{"code":"window.ethereum\n .request({\n method: 'wallet_watchAsset',\n params: {\n type: 'ERC20',\n options: {\n address: '0xb60e8dd61c5d32be8058bb8eb970870f07233155',\n symbol: 'FOO',\n decimals: 18,\n image: 'https://foo.io/token-image.svg',\n },\n },\n })\n .then((success) => {\n if (success) {\n console.log('FOO successfully added to wallet!')\n } else {\n throw new Error('Something went wrong.')\n }\n })\n .catch(console.error)\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"window"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"ethereum"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" method: "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'wallet_watchAsset'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" params: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" type: "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'ERC20'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" options: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" address: "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'0xb60e8dd61c5d32be8058bb8eb970870f07233155'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" symbol: "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'FOO'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" decimals: "}]},{"type":"element","tag":"span","props":{"class":"ct-814f05"},"children":[{"type":"text","value":"18"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" image: "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'https://foo.io/token-image.svg'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56d6bf"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-bc1a9e"},"children":[{"type":"text","value":"then"}]},{"type":"element","tag":"span","props":{"class":"ct-56d6bf"},"children":[{"type":"text","value":"(("}]},{"type":"element","tag":"span","props":{"class":"ct-3b06ef"},"children":[{"type":"text","value":"success"}]},{"type":"element","tag":"span","props":{"class":"ct-56d6bf"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-839cc0"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-56d6bf"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"success"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'FOO successfully added to wallet!'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"else"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-254526"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'Something went wrong.'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":")"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"changing-network-to-custom"},"children":[{"type":"text","value":"Changing network to custom"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Checking current chainId:"}]},{"type":"element","tag":"code","props":{"code":"const getChainID = async () => {\n return ethereum.request({ method: 'eth_chainId' })\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"getChainID"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-1bac9e"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"ethereum"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"({ method: "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'eth_chainId'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Asking wallet to change current network:"}]},{"type":"element","tag":"code","props":{"code":"try {\n await window.ethereum.request({\n method: 'wallet_switchEthereumChain',\n params: [{ chainId: '0x03' }], // ropsten chainID (3) in hex\n });\n} catch (switchError) {\n // This error code indicates that the chain has not been added to MetaMask.\n if (error.code === 4902) {\n try {\n await window.ethereum.request({\n method: 'wallet_addEthereumChain',\n params: [{ \n chainId: '0x03', // ropsten chainID (3) in hex\n chainName: 'Ropsten Test Network', \n nativeCurrency: { \n name: 'ETH',\n symbol: 'ETH',\n decimals: 18\n }, \n rpcUrls: ['https://ropsten.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161'], \n blockExplorerUrls: ['https://ropsten.etherscan.io'] \n }] ,\n });\n } catch (addError) {\n // handle \"add\" error\n }\n }\n // handle other \"switch\" errors\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"try"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"window"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"ethereum"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" method: "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'wallet_switchEthereumChain'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" params: [{ chainId: "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'0x03'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" }], "}]},{"type":"element","tag":"span","props":{"class":"ct-178967"},"children":[{"type":"text","value":"// ropsten chainID (3) in hex"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"} "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"switchError"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-178967"},"children":[{"type":"text","value":"// This error code indicates that the chain has not been added to MetaMask."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"code"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"==="}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-814f05"},"children":[{"type":"text","value":"4902"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"try"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"window"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"ethereum"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1119a1"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" method: "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'wallet_addEthereumChain'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" params: [{ "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" chainId: "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'0x03'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-178967"},"children":[{"type":"text","value":"// ropsten chainID (3) in hex"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" chainName: "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'Ropsten Test Network'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" nativeCurrency: { "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" name: "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'ETH'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" symbol: "}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'ETH'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" decimals: "}]},{"type":"element","tag":"span","props":{"class":"ct-814f05"},"children":[{"type":"text","value":"18"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" }, "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" rpcUrls: ["}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'https://ropsten.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"], "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" blockExplorerUrls: ["}]},{"type":"element","tag":"span","props":{"class":"ct-7a16c5"},"children":[{"type":"text","value":"'https://ropsten.etherscan.io'"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"] "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" }] ,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-d8c97c"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ac9394"},"children":[{"type":"text","value":"addError"}]},{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-178967"},"children":[{"type":"text","value":"// handle \"add\" error"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-178967"},"children":[{"type":"text","value":"// handle other \"switch\" errors"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d4545"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-814f05{color:#79C0FF}.ct-21a018{color:#C9D1D9}.ct-254526{color:#79C0FF}.ct-5229fc{color:#A5D6FF}.ct-2bc6be{color:#79C0FF}.ct-3b06ef{color:#FFA657}.ct-17069f{color:#FF7B72}.ct-bc1a9e{color:#D2A8FF}.ct-56d6bf{color:#C9D1D9}.ct-839cc0{color:#FF7B72}.ct-1119a1{color:#D2A8FF}.ct-f6a4a5{color:#79C0FF}.ct-1bac9e{color:#FF7B72}.ct-178967{color:#8B949E}.ct-7a16c5{color:#A5D6FF}.ct-ac9394{color:#C9D1D9}.ct-2d4545{color:#C9D1D9}.ct-d8c97c{color:#FF7B72}.light .ct-d8c97c{color:#859900}.light .ct-2d4545{color:#657B83}.light .ct-ac9394{color:#268BD2}.light .ct-7a16c5{color:#2AA198}.light .ct-178967{color:#93A1A1}.light .ct-1bac9e{color:#073642}.light .ct-f6a4a5{color:#268BD2}.light .ct-1119a1{color:#268BD2}.light .ct-839cc0{color:#073642}.light .ct-56d6bf{color:#657B83}.light .ct-bc1a9e{color:#268BD2}.light .ct-17069f{color:#859900}.light .ct-3b06ef{color:#657B83}.light .ct-2bc6be{color:#859900}.light .ct-5229fc{color:#657B83}.light .ct-254526{color:#859900}.light .ct-21a018{color:#859900}.light .ct-814f05{color:#D33682}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"connecting-to-node","depth":2,"text":"Connecting to node"},{"id":"getting-wallet-balance","depth":2,"text":"Getting wallet balance"},{"id":"getting-wallet-address","depth":2,"text":"Getting wallet address"},{"id":"sending-transaction","depth":2,"text":"Sending transaction"},{"id":"estimating-transaction-fee","depth":2,"text":"Estimating transaction FEE"},{"id":"subscribing-to-wallet-address-change","depth":2,"text":"Subscribing to wallet address change"},{"id":"watching-network-change","depth":2,"text":"Watching network change"},{"id":"adding-custom-token-to-wallet","depth":2,"text":"Adding custom token to wallet"},{"id":"changing-network-to-custom","depth":2,"text":"Changing network to custom"}]}},"_type":"markdown","_id":"content:Blockchain:Common typescript examples.md","_source":"content","_file":"Blockchain/Common typescript examples.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/CMMQ5oxSPg.json b/docs/api/_content/query/CMMQ5oxSPg.json
index 2c0e91b..a64c549 100644
--- a/docs/api/_content/query/CMMQ5oxSPg.json
+++ b/docs/api/_content/query/CMMQ5oxSPg.json
@@ -1 +1 @@
-{"_path":"/frontend/react/axios-with-abortcontroller","_dir":"react","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Axios With AbortController","description":"If you need to cancel some request, use axios with AbortController. Previously axios used cancellation token, but now it's deprecated.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you need to cancel some request, use "},{"type":"element","tag":"a","props":{"href":"https://axios-http.com/docs/cancellation","rel":["nofollow"]},"children":[{"type":"text","value":"axios with AbortController"}]},{"type":"text","value":". Previously axios used cancellation token, but now it's deprecated."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"AbortController"}]},{"type":"text","value":" can be used with a multiple requests to cancel them at once."}]},{"type":"element","tag":"code","props":{"code":"import { useCallback, useRef } from \"react\";\nimport axios from 'axios';\n\nconst client = axios.create();\n\nexport const useGetUsers = () => {\n const controller = useRef(new AbortController());\n \n const get = useCallback(async () => {\n const result = await client.get(\"/\", {\n // params and props here\n signal: controller.current.signal,\n });\n\n return result.data;\n }, []);\n\n const cancel = useCallback(() => {\n controller.current.abort();\n \n // controller should be rewritten or all requests will fail\n controller.current = new AbortController();\n }, [controller]);\n\n return { get, cancel };\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { useCallback, useRef } from \"react\";\nimport axios from 'axios';\n\nconst client = axios.create();\n\nexport const useGetUsers = () => {\n const controller = useRef(new AbortController());\n \n const get = useCallback(async () => {\n const result = await client.get(\"/\", {\n // params and props here\n signal: controller.current.signal,\n });\n\n return result.data;\n }, []);\n\n const cancel = useCallback(() => {\n controller.current.abort();\n \n // controller should be rewritten or all requests will fail\n controller.current = new AbortController();\n }, [controller]);\n\n return { get, cancel };\n};\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you need to cancel some request, use "},{"type":"element","tag":"a","props":{"href":"https://axios-http.com/docs/cancellation","rel":["nofollow"]},"children":[{"type":"text","value":"axios with AbortController"}]},{"type":"text","value":". Previously axios used cancellation token, but now it's deprecated."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"AbortController"}]},{"type":"text","value":" can be used with a multiple requests to cancel them at once."}]},{"type":"element","tag":"code","props":{"code":"import { useCallback, useRef } from \"react\";\nimport axios from 'axios';\n\nconst client = axios.create();\n\nexport const useGetUsers = () => {\n const controller = useRef(new AbortController());\n \n const get = useCallback(async () => {\n const result = await client.get(\"/\", {\n // params and props here\n signal: controller.current.signal,\n });\n\n return result.data;\n }, []);\n\n const cancel = useCallback(() => {\n controller.current.abort();\n \n // controller should be rewritten or all requests will fail\n controller.current = new AbortController();\n }, [controller]);\n\n return { get, cancel };\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-189664"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-22d699"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-22d699"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-189664"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-76a571"},"children":[{"type":"text","value":"\"react\""}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-189664"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-22d699"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-189664"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-76a571"},"children":[{"type":"text","value":"'axios'"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a571a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-348230"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-189664"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-22d699"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-63c11c"},"children":[{"type":"text","value":"create"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-189664"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5a571a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63c11c"},"children":[{"type":"text","value":"useGetUsers"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-189664"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-5a571a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5a571a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-348230"},"children":[{"type":"text","value":"controller"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-189664"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63c11c"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-189664"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63c11c"},"children":[{"type":"text","value":"AbortController"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":"());"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5a571a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-348230"},"children":[{"type":"text","value":"get"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-189664"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63c11c"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-5a571a"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-5a571a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5a571a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-348230"},"children":[{"type":"text","value":"result"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-189664"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-189664"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-22d699"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-63c11c"},"children":[{"type":"text","value":"get"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-76a571"},"children":[{"type":"text","value":"\"/\""}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":", {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-39834c"},"children":[{"type":"text","value":"// params and props here"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" signal: "}]},{"type":"element","tag":"span","props":{"class":"ct-22d699"},"children":[{"type":"text","value":"controller"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-22d699"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-22d699"},"children":[{"type":"text","value":"signal"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-189664"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-22d699"},"children":[{"type":"text","value":"result"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-22d699"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" }, []);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5a571a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-348230"},"children":[{"type":"text","value":"cancel"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-189664"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63c11c"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-5a571a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-22d699"},"children":[{"type":"text","value":"controller"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-22d699"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-63c11c"},"children":[{"type":"text","value":"abort"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-39834c"},"children":[{"type":"text","value":"// controller should be rewritten or all requests will fail"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-22d699"},"children":[{"type":"text","value":"controller"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-22d699"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-189664"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-189664"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63c11c"},"children":[{"type":"text","value":"AbortController"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" }, ["}]},{"type":"element","tag":"span","props":{"class":"ct-22d699"},"children":[{"type":"text","value":"controller"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":"]);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-189664"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-22d699"},"children":[{"type":"text","value":"get"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-22d699"},"children":[{"type":"text","value":"cancel"}]},{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ccb8b9"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-39834c{color:#8B949E}.ct-63c11c{color:#D2A8FF}.ct-348230{color:#79C0FF}.ct-5a571a{color:#FF7B72}.ct-76a571{color:#A5D6FF}.ct-22d699{color:#C9D1D9}.ct-ccb8b9{color:#C9D1D9}.ct-189664{color:#FF7B72}.light .ct-189664{color:#859900}.light .ct-ccb8b9{color:#657B83}.light .ct-22d699{color:#268BD2}.light .ct-76a571{color:#2AA198}.light .ct-5a571a{color:#073642}.light .ct-348230{color:#268BD2}.light .ct-63c11c{color:#268BD2}.light .ct-39834c{color:#93A1A1}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Frontend:React:Axios with AbortController.md","_source":"content","_file":"Frontend/React/Axios with AbortController.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/frontend/react/axios-with-abortcontroller","_dir":"react","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Axios With AbortController","description":"If you need to cancel some request, use axios with AbortController. Previously axios used cancellation token, but now it's deprecated.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you need to cancel some request, use "},{"type":"element","tag":"a","props":{"href":"https://axios-http.com/docs/cancellation","rel":["nofollow"]},"children":[{"type":"text","value":"axios with AbortController"}]},{"type":"text","value":". Previously axios used cancellation token, but now it's deprecated."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"AbortController"}]},{"type":"text","value":" can be used with a multiple requests to cancel them at once."}]},{"type":"element","tag":"code","props":{"code":"import { useCallback, useRef } from \"react\";\nimport axios from 'axios';\n\nconst client = axios.create();\n\nexport const useGetUsers = () => {\n const controller = useRef(new AbortController());\n \n const get = useCallback(async () => {\n const result = await client.get(\"/\", {\n // params and props here\n signal: controller.current.signal,\n });\n\n return result.data;\n }, []);\n\n const cancel = useCallback(() => {\n controller.current.abort();\n \n // controller should be rewritten or all requests will fail\n controller.current = new AbortController();\n }, [controller]);\n\n return { get, cancel };\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { useCallback, useRef } from \"react\";\nimport axios from 'axios';\n\nconst client = axios.create();\n\nexport const useGetUsers = () => {\n const controller = useRef(new AbortController());\n \n const get = useCallback(async () => {\n const result = await client.get(\"/\", {\n // params and props here\n signal: controller.current.signal,\n });\n\n return result.data;\n }, []);\n\n const cancel = useCallback(() => {\n controller.current.abort();\n \n // controller should be rewritten or all requests will fail\n controller.current = new AbortController();\n }, [controller]);\n\n return { get, cancel };\n};\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you need to cancel some request, use "},{"type":"element","tag":"a","props":{"href":"https://axios-http.com/docs/cancellation","rel":["nofollow"]},"children":[{"type":"text","value":"axios with AbortController"}]},{"type":"text","value":". Previously axios used cancellation token, but now it's deprecated."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"AbortController"}]},{"type":"text","value":" can be used with a multiple requests to cancel them at once."}]},{"type":"element","tag":"code","props":{"code":"import { useCallback, useRef } from \"react\";\nimport axios from 'axios';\n\nconst client = axios.create();\n\nexport const useGetUsers = () => {\n const controller = useRef(new AbortController());\n \n const get = useCallback(async () => {\n const result = await client.get(\"/\", {\n // params and props here\n signal: controller.current.signal,\n });\n\n return result.data;\n }, []);\n\n const cancel = useCallback(() => {\n controller.current.abort();\n \n // controller should be rewritten or all requests will fail\n controller.current = new AbortController();\n }, [controller]);\n\n return { get, cancel };\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8addff"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-842a9e"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-842a9e"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-8addff"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-577293"},"children":[{"type":"text","value":"\"react\""}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8addff"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-842a9e"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8addff"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-577293"},"children":[{"type":"text","value":"'axios'"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5cff5b"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a2042d"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8addff"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-842a9e"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-690655"},"children":[{"type":"text","value":"create"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8addff"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5cff5b"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690655"},"children":[{"type":"text","value":"useGetUsers"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8addff"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-5cff5b"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5cff5b"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a2042d"},"children":[{"type":"text","value":"controller"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8addff"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690655"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-8addff"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690655"},"children":[{"type":"text","value":"AbortController"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":"());"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5cff5b"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a2042d"},"children":[{"type":"text","value":"get"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8addff"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690655"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-5cff5b"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-5cff5b"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5cff5b"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a2042d"},"children":[{"type":"text","value":"result"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8addff"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8addff"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-842a9e"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-690655"},"children":[{"type":"text","value":"get"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-577293"},"children":[{"type":"text","value":"\"/\""}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":", {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-baf212"},"children":[{"type":"text","value":"// params and props here"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" signal: "}]},{"type":"element","tag":"span","props":{"class":"ct-842a9e"},"children":[{"type":"text","value":"controller"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-842a9e"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-842a9e"},"children":[{"type":"text","value":"signal"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8addff"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-842a9e"},"children":[{"type":"text","value":"result"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-842a9e"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" }, []);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5cff5b"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a2042d"},"children":[{"type":"text","value":"cancel"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8addff"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690655"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-5cff5b"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-842a9e"},"children":[{"type":"text","value":"controller"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-842a9e"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-690655"},"children":[{"type":"text","value":"abort"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-baf212"},"children":[{"type":"text","value":"// controller should be rewritten or all requests will fail"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-842a9e"},"children":[{"type":"text","value":"controller"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-842a9e"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8addff"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8addff"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690655"},"children":[{"type":"text","value":"AbortController"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" }, ["}]},{"type":"element","tag":"span","props":{"class":"ct-842a9e"},"children":[{"type":"text","value":"controller"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":"]);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8addff"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-842a9e"},"children":[{"type":"text","value":"get"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-842a9e"},"children":[{"type":"text","value":"cancel"}]},{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-96e232"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-baf212{color:#8B949E}.ct-690655{color:#D2A8FF}.ct-a2042d{color:#79C0FF}.ct-5cff5b{color:#FF7B72}.ct-577293{color:#A5D6FF}.ct-842a9e{color:#C9D1D9}.ct-96e232{color:#C9D1D9}.ct-8addff{color:#FF7B72}.light .ct-8addff{color:#859900}.light .ct-96e232{color:#657B83}.light .ct-842a9e{color:#268BD2}.light .ct-577293{color:#2AA198}.light .ct-5cff5b{color:#073642}.light .ct-a2042d{color:#268BD2}.light .ct-690655{color:#268BD2}.light .ct-baf212{color:#93A1A1}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Frontend:React:Axios with AbortController.md","_source":"content","_file":"Frontend/React/Axios with AbortController.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/DliR2N9mzp.json b/docs/api/_content/query/DliR2N9mzp.json
index 0e31a0c..4776bc1 100644
--- a/docs/api/_content/query/DliR2N9mzp.json
+++ b/docs/api/_content/query/DliR2N9mzp.json
@@ -1 +1 @@
-{"_path":"/linux/setting-up-nginx","_dir":"linux","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Setting Up NGINX","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"fallback-url-for-spa-s"},"children":[{"type":"text","value":"Fallback url for SPA-s"}]},{"type":"element","tag":"code","props":{"code":"server {\n # ...\n location / {\n # First attempt to serve request as file, then\n # as directory, then fall back to displaying a 404.\n try_files $uri $uri/ =404;\n }\n # ...\n}\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"server {\n # ...\n location / {\n # First attempt to serve request as file, then\n # as directory, then fall back to displaying a 404.\n try_files $uri $uri/ =404;\n }\n # ...\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"set-up-for-uploads"},"children":[{"type":"text","value":"Set up for uploads"}]},{"type":"element","tag":"code","props":{"code":"server {\n # ...\n client_max_body_size 200M;\n # ...\n}\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"server {\n # ...\n client_max_body_size 200M;\n # ...\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"reverse-proxy-for-https"},"children":[{"type":"text","value":"Reverse proxy for https"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Given config forwards "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"https"}]},{"type":"text","value":" traffic to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"http"}]},{"type":"text","value":" on port "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"8080"}]},{"type":"text","value":" for "},{"type":"element","tag":"a","props":{"href":"https://next.vault48.org","rel":["nofollow"]},"children":[{"type":"text","value":"https://next.vault48.org"}]},{"type":"text","value":"\nwith http2 support if possible."}]},{"type":"element","tag":"code","props":{"code":"server {\n listen 80;\n server_name next.vault48.org;\n return 301 https://next.vault48.org$request_uri;\n}\n\nserver {\n listen 443 ssl http2;\n listen [::]:443 ssl http2;\n \n # managed by Certbot\n ssl_certificate /etc/letsencrypt/live/vault48.org/fullchain.pem; \n ssl_certificate_key /etc/letsencrypt/live/vault48.org/privkey.pem; \n ssl_trusted_certificate /etc/letsencrypt/live/vault48.org/chain.pem;\n \n server_name next.vault48.org;\n \n location / {\n proxy_redirect off;\n proxy_set_header Host $host;\n proxy_set_header X-Real-IP $remote_addr;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n \n proxy_pass http://127.0.0.1:8080;\n }\n}\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"server {\n listen 80;\n server_name next.vault48.org;\n return 301 https://next.vault48.org$request_uri;\n}\n\nserver {\n listen 443 ssl http2;\n listen [::]:443 ssl http2;\n \n # managed by Certbot\n ssl_certificate /etc/letsencrypt/live/vault48.org/fullchain.pem; \n ssl_certificate_key /etc/letsencrypt/live/vault48.org/privkey.pem; \n ssl_trusted_certificate /etc/letsencrypt/live/vault48.org/chain.pem;\n \n server_name next.vault48.org;\n \n location / {\n proxy_redirect off;\n proxy_set_header Host $host;\n proxy_set_header X-Real-IP $remote_addr;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n \n proxy_pass http://127.0.0.1:8080;\n }\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"fallback-url-for-spa-s"},"children":[{"type":"text","value":"Fallback url for SPA-s"}]},{"type":"element","tag":"code","props":{"code":"server {\n # ...\n location / {\n # First attempt to serve request as file, then\n # as directory, then fall back to displaying a 404.\n try_files $uri $uri/ =404;\n }\n # ...\n}\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fa5e82"},"children":[{"type":"text","value":"server"}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-31233e"},"children":[{"type":"text","value":"# ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6f5a8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ce83bc"},"children":[{"type":"text","value":"location"}]},{"type":"element","tag":"span","props":{"class":"ct-f6f5a8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7fc9b0"},"children":[{"type":"text","value":"/ "}]},{"type":"element","tag":"span","props":{"class":"ct-f6f5a8"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-31233e"},"children":[{"type":"text","value":"# First attempt to serve request as file, then"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-31233e"},"children":[{"type":"text","value":"# as directory, then fall back to displaying a 404."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bab19a"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-31233e"},"children":[{"type":"text","value":"# ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"set-up-for-uploads"},"children":[{"type":"text","value":"Set up for uploads"}]},{"type":"element","tag":"code","props":{"code":"server {\n # ...\n client_max_body_size 200M;\n # ...\n}\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fa5e82"},"children":[{"type":"text","value":"server"}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-31233e"},"children":[{"type":"text","value":"# ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26cf0f"},"children":[{"type":"text","value":" client_max_body_size "}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":"200M;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-31233e"},"children":[{"type":"text","value":"# ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"reverse-proxy-for-https"},"children":[{"type":"text","value":"Reverse proxy for https"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Given config forwards "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"https"}]},{"type":"text","value":" traffic to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"http"}]},{"type":"text","value":" on port "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"8080"}]},{"type":"text","value":" for "},{"type":"element","tag":"a","props":{"href":"https://next.vault48.org","rel":["nofollow"]},"children":[{"type":"text","value":"https://next.vault48.org"}]},{"type":"text","value":"\nwith http2 support if possible."}]},{"type":"element","tag":"code","props":{"code":"server {\n listen 80;\n server_name next.vault48.org;\n return 301 https://next.vault48.org$request_uri;\n}\n\nserver {\n listen 443 ssl http2;\n listen [::]:443 ssl http2;\n \n # managed by Certbot\n ssl_certificate /etc/letsencrypt/live/vault48.org/fullchain.pem; \n ssl_certificate_key /etc/letsencrypt/live/vault48.org/privkey.pem; \n ssl_trusted_certificate /etc/letsencrypt/live/vault48.org/chain.pem;\n \n server_name next.vault48.org;\n \n location / {\n proxy_redirect off;\n proxy_set_header Host $host;\n proxy_set_header X-Real-IP $remote_addr;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n \n proxy_pass http://127.0.0.1:8080;\n }\n}\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fa5e82"},"children":[{"type":"text","value":"server"}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26cf0f"},"children":[{"type":"text","value":" listen "}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":"80;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26cf0f"},"children":[{"type":"text","value":" server_name "}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":"next.vault48.org;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26cf0f"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a505ca"},"children":[{"type":"text","value":"301"}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" https://next.vault48.org"}]},{"type":"element","tag":"span","props":{"class":"ct-07bbf5"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-f93802"},"children":[{"type":"text","value":"request_uri"}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fa5e82"},"children":[{"type":"text","value":"server"}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26cf0f"},"children":[{"type":"text","value":" listen "}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":"443 ssl http2;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26cf0f"},"children":[{"type":"text","value":" listen "}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":"[::]:443 ssl http2;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-31233e"},"children":[{"type":"text","value":"# managed by Certbot"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26cf0f"},"children":[{"type":"text","value":" ssl_certificate "}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":"/etc/letsencrypt/live/vault48.org/fullchain.pem; "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26cf0f"},"children":[{"type":"text","value":" ssl_certificate_key "}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":"/etc/letsencrypt/live/vault48.org/privkey.pem; "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26cf0f"},"children":[{"type":"text","value":" ssl_trusted_certificate "}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":"/etc/letsencrypt/live/vault48.org/chain.pem;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26cf0f"},"children":[{"type":"text","value":" server_name "}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":"next.vault48.org;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6f5a8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ce83bc"},"children":[{"type":"text","value":"location"}]},{"type":"element","tag":"span","props":{"class":"ct-f6f5a8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7fc9b0"},"children":[{"type":"text","value":"/ "}]},{"type":"element","tag":"span","props":{"class":"ct-f6f5a8"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26cf0f"},"children":[{"type":"text","value":" proxy_redirect "}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":"off;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26cf0f"},"children":[{"type":"text","value":" proxy_set_header "}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":"Host "}]},{"type":"element","tag":"span","props":{"class":"ct-07bbf5"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-f93802"},"children":[{"type":"text","value":"host"}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26cf0f"},"children":[{"type":"text","value":" proxy_set_header "}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":"X-Real-IP "}]},{"type":"element","tag":"span","props":{"class":"ct-07bbf5"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-f93802"},"children":[{"type":"text","value":"remote_addr"}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26cf0f"},"children":[{"type":"text","value":" proxy_set_header "}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":"X-Forwarded-For "}]},{"type":"element","tag":"span","props":{"class":"ct-07bbf5"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-f93802"},"children":[{"type":"text","value":"proxy_add_x_forwarded_for"}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26cf0f"},"children":[{"type":"text","value":" proxy_pass "}]},{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":"http://127.0.0.1:8080;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92caed"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-f93802{color:#C9D1D9}.ct-07bbf5{color:#C9D1D9}.ct-a505ca{color:#79C0FF}.ct-26cf0f{color:#FF7B72}.ct-bab19a{color:#FF7B72}.ct-7fc9b0{color:#FFA657}.ct-ce83bc{color:#FF7B72}.ct-f6f5a8{color:#C9D1D9}.ct-31233e{color:#8B949E}.ct-92caed{color:#C9D1D9}.ct-fa5e82{color:#FF7B72}.light .ct-fa5e82{color:#073642}.light .ct-92caed{color:#657B83}.light .ct-31233e{color:#93A1A1}.light .ct-f6f5a8{color:#657B83}.light .ct-ce83bc{color:#073642}.light .ct-7fc9b0{color:#657B83}.light .ct-bab19a{color:#657B83}.light .ct-26cf0f{color:#859900}.light .ct-a505ca{color:#D33682}.light .ct-07bbf5{color:#859900}.light .ct-f93802{color:#268BD2}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"fallback-url-for-spa-s","depth":2,"text":"Fallback url for SPA-s"},{"id":"set-up-for-uploads","depth":2,"text":"Set up for uploads"},{"id":"reverse-proxy-for-https","depth":2,"text":"Reverse proxy for https"}]}},"_type":"markdown","_id":"content:Linux:Setting up NGINX.md","_source":"content","_file":"Linux/Setting up NGINX.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/linux/setting-up-nginx","_dir":"linux","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Setting Up NGINX","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"fallback-url-for-spa-s"},"children":[{"type":"text","value":"Fallback url for SPA-s"}]},{"type":"element","tag":"code","props":{"code":"server {\n # ...\n location / {\n # First attempt to serve request as file, then\n # as directory, then fall back to displaying a 404.\n try_files $uri $uri/ =404;\n }\n # ...\n}\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"server {\n # ...\n location / {\n # First attempt to serve request as file, then\n # as directory, then fall back to displaying a 404.\n try_files $uri $uri/ =404;\n }\n # ...\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"set-up-for-uploads"},"children":[{"type":"text","value":"Set up for uploads"}]},{"type":"element","tag":"code","props":{"code":"server {\n # ...\n client_max_body_size 200M;\n # ...\n}\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"server {\n # ...\n client_max_body_size 200M;\n # ...\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"reverse-proxy-for-https"},"children":[{"type":"text","value":"Reverse proxy for https"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Given config forwards "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"https"}]},{"type":"text","value":" traffic to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"http"}]},{"type":"text","value":" on port "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"8080"}]},{"type":"text","value":" for "},{"type":"element","tag":"a","props":{"href":"https://next.vault48.org","rel":["nofollow"]},"children":[{"type":"text","value":"https://next.vault48.org"}]},{"type":"text","value":"\nwith http2 support if possible."}]},{"type":"element","tag":"code","props":{"code":"server {\n listen 80;\n server_name next.vault48.org;\n return 301 https://next.vault48.org$request_uri;\n}\n\nserver {\n listen 443 ssl http2;\n listen [::]:443 ssl http2;\n \n # managed by Certbot\n ssl_certificate /etc/letsencrypt/live/vault48.org/fullchain.pem; \n ssl_certificate_key /etc/letsencrypt/live/vault48.org/privkey.pem; \n ssl_trusted_certificate /etc/letsencrypt/live/vault48.org/chain.pem;\n \n server_name next.vault48.org;\n \n location / {\n proxy_redirect off;\n proxy_set_header Host $host;\n proxy_set_header X-Real-IP $remote_addr;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n \n proxy_pass http://127.0.0.1:8080;\n }\n}\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"server {\n listen 80;\n server_name next.vault48.org;\n return 301 https://next.vault48.org$request_uri;\n}\n\nserver {\n listen 443 ssl http2;\n listen [::]:443 ssl http2;\n \n # managed by Certbot\n ssl_certificate /etc/letsencrypt/live/vault48.org/fullchain.pem; \n ssl_certificate_key /etc/letsencrypt/live/vault48.org/privkey.pem; \n ssl_trusted_certificate /etc/letsencrypt/live/vault48.org/chain.pem;\n \n server_name next.vault48.org;\n \n location / {\n proxy_redirect off;\n proxy_set_header Host $host;\n proxy_set_header X-Real-IP $remote_addr;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n \n proxy_pass http://127.0.0.1:8080;\n }\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"fallback-url-for-spa-s"},"children":[{"type":"text","value":"Fallback url for SPA-s"}]},{"type":"element","tag":"code","props":{"code":"server {\n # ...\n location / {\n # First attempt to serve request as file, then\n # as directory, then fall back to displaying a 404.\n try_files $uri $uri/ =404;\n }\n # ...\n}\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ce1709"},"children":[{"type":"text","value":"server"}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9e3ec0"},"children":[{"type":"text","value":"# ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f5ead"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-14e2f1"},"children":[{"type":"text","value":"location"}]},{"type":"element","tag":"span","props":{"class":"ct-1f5ead"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-32f766"},"children":[{"type":"text","value":"/ "}]},{"type":"element","tag":"span","props":{"class":"ct-1f5ead"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9e3ec0"},"children":[{"type":"text","value":"# First attempt to serve request as file, then"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9e3ec0"},"children":[{"type":"text","value":"# as directory, then fall back to displaying a 404."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2277dc"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9e3ec0"},"children":[{"type":"text","value":"# ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"set-up-for-uploads"},"children":[{"type":"text","value":"Set up for uploads"}]},{"type":"element","tag":"code","props":{"code":"server {\n # ...\n client_max_body_size 200M;\n # ...\n}\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ce1709"},"children":[{"type":"text","value":"server"}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9e3ec0"},"children":[{"type":"text","value":"# ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e0762"},"children":[{"type":"text","value":" client_max_body_size "}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":"200M;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9e3ec0"},"children":[{"type":"text","value":"# ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"reverse-proxy-for-https"},"children":[{"type":"text","value":"Reverse proxy for https"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Given config forwards "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"https"}]},{"type":"text","value":" traffic to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"http"}]},{"type":"text","value":" on port "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"8080"}]},{"type":"text","value":" for "},{"type":"element","tag":"a","props":{"href":"https://next.vault48.org","rel":["nofollow"]},"children":[{"type":"text","value":"https://next.vault48.org"}]},{"type":"text","value":"\nwith http2 support if possible."}]},{"type":"element","tag":"code","props":{"code":"server {\n listen 80;\n server_name next.vault48.org;\n return 301 https://next.vault48.org$request_uri;\n}\n\nserver {\n listen 443 ssl http2;\n listen [::]:443 ssl http2;\n \n # managed by Certbot\n ssl_certificate /etc/letsencrypt/live/vault48.org/fullchain.pem; \n ssl_certificate_key /etc/letsencrypt/live/vault48.org/privkey.pem; \n ssl_trusted_certificate /etc/letsencrypt/live/vault48.org/chain.pem;\n \n server_name next.vault48.org;\n \n location / {\n proxy_redirect off;\n proxy_set_header Host $host;\n proxy_set_header X-Real-IP $remote_addr;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n \n proxy_pass http://127.0.0.1:8080;\n }\n}\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ce1709"},"children":[{"type":"text","value":"server"}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e0762"},"children":[{"type":"text","value":" listen "}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":"80;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e0762"},"children":[{"type":"text","value":" server_name "}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":"next.vault48.org;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e0762"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-77ae0e"},"children":[{"type":"text","value":"301"}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" https://next.vault48.org"}]},{"type":"element","tag":"span","props":{"class":"ct-969cf7"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-52e8a3"},"children":[{"type":"text","value":"request_uri"}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ce1709"},"children":[{"type":"text","value":"server"}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e0762"},"children":[{"type":"text","value":" listen "}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":"443 ssl http2;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e0762"},"children":[{"type":"text","value":" listen "}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":"[::]:443 ssl http2;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9e3ec0"},"children":[{"type":"text","value":"# managed by Certbot"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e0762"},"children":[{"type":"text","value":" ssl_certificate "}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":"/etc/letsencrypt/live/vault48.org/fullchain.pem; "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e0762"},"children":[{"type":"text","value":" ssl_certificate_key "}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":"/etc/letsencrypt/live/vault48.org/privkey.pem; "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e0762"},"children":[{"type":"text","value":" ssl_trusted_certificate "}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":"/etc/letsencrypt/live/vault48.org/chain.pem;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e0762"},"children":[{"type":"text","value":" server_name "}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":"next.vault48.org;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f5ead"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-14e2f1"},"children":[{"type":"text","value":"location"}]},{"type":"element","tag":"span","props":{"class":"ct-1f5ead"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-32f766"},"children":[{"type":"text","value":"/ "}]},{"type":"element","tag":"span","props":{"class":"ct-1f5ead"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e0762"},"children":[{"type":"text","value":" proxy_redirect "}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":"off;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e0762"},"children":[{"type":"text","value":" proxy_set_header "}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":"Host "}]},{"type":"element","tag":"span","props":{"class":"ct-969cf7"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-52e8a3"},"children":[{"type":"text","value":"host"}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e0762"},"children":[{"type":"text","value":" proxy_set_header "}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":"X-Real-IP "}]},{"type":"element","tag":"span","props":{"class":"ct-969cf7"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-52e8a3"},"children":[{"type":"text","value":"remote_addr"}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e0762"},"children":[{"type":"text","value":" proxy_set_header "}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":"X-Forwarded-For "}]},{"type":"element","tag":"span","props":{"class":"ct-969cf7"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-52e8a3"},"children":[{"type":"text","value":"proxy_add_x_forwarded_for"}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e0762"},"children":[{"type":"text","value":" proxy_pass "}]},{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":"http://127.0.0.1:8080;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e3323"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-52e8a3{color:#C9D1D9}.ct-969cf7{color:#C9D1D9}.ct-77ae0e{color:#79C0FF}.ct-1e0762{color:#FF7B72}.ct-2277dc{color:#FF7B72}.ct-32f766{color:#FFA657}.ct-14e2f1{color:#FF7B72}.ct-1f5ead{color:#C9D1D9}.ct-9e3ec0{color:#8B949E}.ct-6e3323{color:#C9D1D9}.ct-ce1709{color:#FF7B72}.light .ct-ce1709{color:#073642}.light .ct-6e3323{color:#657B83}.light .ct-9e3ec0{color:#93A1A1}.light .ct-1f5ead{color:#657B83}.light .ct-14e2f1{color:#073642}.light .ct-32f766{color:#657B83}.light .ct-2277dc{color:#657B83}.light .ct-1e0762{color:#859900}.light .ct-77ae0e{color:#D33682}.light .ct-969cf7{color:#859900}.light .ct-52e8a3{color:#268BD2}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"fallback-url-for-spa-s","depth":2,"text":"Fallback url for SPA-s"},{"id":"set-up-for-uploads","depth":2,"text":"Set up for uploads"},{"id":"reverse-proxy-for-https","depth":2,"text":"Reverse proxy for https"}]}},"_type":"markdown","_id":"content:Linux:Setting up NGINX.md","_source":"content","_file":"Linux/Setting up NGINX.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/EH6LeCIDqM.json b/docs/api/_content/query/EH6LeCIDqM.json
index eff3de3..4041f85 100644
--- a/docs/api/_content/query/EH6LeCIDqM.json
+++ b/docs/api/_content/query/EH6LeCIDqM.json
@@ -1 +1 @@
-{"_path":"/docker/private-docker-registry","_dir":"docker","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Private Docker Registry","description":"Suitable to work with Drone-ci for hosting private #docker images.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Suitable to work with "},{"type":"element","tag":"a","props":{"href":"Drone-ci"},"children":[{"type":"text","value":"Drone-ci"}]},{"type":"text","value":" for hosting private #docker images."}]},{"type":"element","tag":"h2","props":{"id":"sample-docker-compose-for-custom-docker-registry"},"children":[{"type":"text","value":"Sample docker-compose for custom docker registry"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This one brings up private docker registry with ui. First you'll need to generate password for it:"}]},{"type":"element","tag":"code","props":{"code":"docker run \\\n --entrypoint htpasswd registry:2 \\\n -Bbn user mypassword > auth/registry.password\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"docker run \\\n --entrypoint htpasswd registry:2 \\\n -Bbn user mypassword > auth/registry.password\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"version: \"3\"\nservices:\n registry:\n container_name: docker__registry\n image: registry:2\n ports:\n - 5000:5000\n restart: always\n environment:\n - REGISTRY_STORAGE_FILESYSTEM_ROOTDIRECTORY=/data\n - REGISTRY_AUTH=htpasswd\n - REGISTRY_AUTH_HTPASSWD_REALM=Registry\n - REGISTRY_AUTH_HTPASSWD_PATH=/auth/registry.password\n - REGISTRY_HTTP_SECRET=password\n - REGISTRY_STORAGE_DELETE_ENABLED=true\n volumes:\n - ./registry/auth:/auth\n - ./registry/data:/data\n ui:\n container_name: docker__ui\n image: parabuzzle/craneoperator:latest\n ports:\n - 80:80\n restart: always\n environment:\n - REGISTRY_HOST=registry\n - REGISTRY_PORT=5000\n - REGISTRY_PROTOCOL=http\n - ALLOW_REGISTRY_LOGIN=true\n - REGISTRY_ALLOW_DELETE=true\n - USERNAME=registry\n - PASSWORD=password\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"version: \"3\"\nservices:\n registry:\n container_name: docker__registry\n image: registry:2\n ports:\n - 5000:5000\n restart: always\n environment:\n - REGISTRY_STORAGE_FILESYSTEM_ROOTDIRECTORY=/data\n - REGISTRY_AUTH=htpasswd\n - REGISTRY_AUTH_HTPASSWD_REALM=Registry\n - REGISTRY_AUTH_HTPASSWD_PATH=/auth/registry.password\n - REGISTRY_HTTP_SECRET=password\n - REGISTRY_STORAGE_DELETE_ENABLED=true\n volumes:\n - ./registry/auth:/auth\n - ./registry/data:/data\n ui:\n container_name: docker__ui\n image: parabuzzle/craneoperator:latest\n ports:\n - 80:80\n restart: always\n environment:\n - REGISTRY_HOST=registry\n - REGISTRY_PORT=5000\n - REGISTRY_PROTOCOL=http\n - ALLOW_REGISTRY_LOGIN=true\n - REGISTRY_ALLOW_DELETE=true\n - USERNAME=registry\n - PASSWORD=password\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"squash-layers-on-registry"},"children":[{"type":"text","value":"Squash layers on registry"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes you need to squash all layers in docker registry to free up disk space."}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Run this command to mark oldest layers"}]}]},{"type":"element","tag":"code","props":{"code":"# Try this first\ndocker run \\\n --rm anoxis/registry-cli \\\n -r https://registry.url \\\n -l user:password \\\n --delete \\\n --num 2\n\n# Then this \ndocker run -it \\\n -v /path/to/registry/data:/registry \\\n -e REGISTRY_URL=https://registry.url \\\n -e DRY_RUN=\"false\" \\\n -e REGISTRY_AUTH=\"user:password\" \\\n mortensrasmussen/docker-registry-manifest-cleanup\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"# Try this first\ndocker run \\\n --rm anoxis/registry-cli \\\n -r https://registry.url \\\n -l user:password \\\n --delete \\\n --num 2\n\n# Then this \ndocker run -it \\\n -v /path/to/registry/data:/registry \\\n -e REGISTRY_URL=https://registry.url \\\n -e DRY_RUN=\"false\" \\\n -e REGISTRY_AUTH=\"user:password\" \\\n mortensrasmussen/docker-registry-manifest-cleanup\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Suitable to work with "},{"type":"element","tag":"a","props":{"href":"Drone-ci"},"children":[{"type":"text","value":"Drone-ci"}]},{"type":"text","value":" for hosting private #docker images."}]},{"type":"element","tag":"h2","props":{"id":"sample-docker-compose-for-custom-docker-registry"},"children":[{"type":"text","value":"Sample docker-compose for custom docker registry"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This one brings up private docker registry with ui. First you'll need to generate password for it:"}]},{"type":"element","tag":"code","props":{"code":"docker run \\\n --entrypoint htpasswd registry:2 \\\n -Bbn user mypassword > auth/registry.password\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":"docker run \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" --entrypoint htpasswd registry:2 \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" -Bbn user mypassword "}]},{"type":"element","tag":"span","props":{"class":"ct-438f39"},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" auth/registry.password"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"version: \"3\"\nservices:\n registry:\n container_name: docker__registry\n image: registry:2\n ports:\n - 5000:5000\n restart: always\n environment:\n - REGISTRY_STORAGE_FILESYSTEM_ROOTDIRECTORY=/data\n - REGISTRY_AUTH=htpasswd\n - REGISTRY_AUTH_HTPASSWD_REALM=Registry\n - REGISTRY_AUTH_HTPASSWD_PATH=/auth/registry.password\n - REGISTRY_HTTP_SECRET=password\n - REGISTRY_STORAGE_DELETE_ENABLED=true\n volumes:\n - ./registry/auth:/auth\n - ./registry/data:/data\n ui:\n container_name: docker__ui\n image: parabuzzle/craneoperator:latest\n ports:\n - 80:80\n restart: always\n environment:\n - REGISTRY_HOST=registry\n - REGISTRY_PORT=5000\n - REGISTRY_PROTOCOL=http\n - ALLOW_REGISTRY_LOGIN=true\n - REGISTRY_ALLOW_DELETE=true\n - USERNAME=registry\n - PASSWORD=password\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9aa4ac"},"children":[{"type":"text","value":"version"}]},{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"\"3\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9aa4ac"},"children":[{"type":"text","value":"services"}]},{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aa4ac"},"children":[{"type":"text","value":"registry"}]},{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aa4ac"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"docker__registry"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aa4ac"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"registry:2"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aa4ac"},"children":[{"type":"text","value":"ports"}]},{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"5000:5000"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aa4ac"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"always"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aa4ac"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"REGISTRY_STORAGE_FILESYSTEM_ROOTDIRECTORY=/data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"REGISTRY_AUTH=htpasswd"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"REGISTRY_AUTH_HTPASSWD_REALM=Registry"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"REGISTRY_AUTH_HTPASSWD_PATH=/auth/registry.password"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"REGISTRY_HTTP_SECRET=password"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"REGISTRY_STORAGE_DELETE_ENABLED=true"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aa4ac"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"./registry/auth:/auth"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"./registry/data:/data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aa4ac"},"children":[{"type":"text","value":"ui"}]},{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aa4ac"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"docker__ui"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aa4ac"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"parabuzzle/craneoperator:latest"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aa4ac"},"children":[{"type":"text","value":"ports"}]},{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"80:80"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aa4ac"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"always"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aa4ac"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"REGISTRY_HOST=registry"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"REGISTRY_PORT=5000"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"REGISTRY_PROTOCOL=http"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"ALLOW_REGISTRY_LOGIN=true"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"REGISTRY_ALLOW_DELETE=true"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"USERNAME=registry"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"PASSWORD=password"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"squash-layers-on-registry"},"children":[{"type":"text","value":"Squash layers on registry"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes you need to squash all layers in docker registry to free up disk space."}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Run this command to mark oldest layers"}]}]},{"type":"element","tag":"code","props":{"code":"# Try this first\ndocker run \\\n --rm anoxis/registry-cli \\\n -r https://registry.url \\\n -l user:password \\\n --delete \\\n --num 2\n\n# Then this \ndocker run -it \\\n -v /path/to/registry/data:/registry \\\n -e REGISTRY_URL=https://registry.url \\\n -e DRY_RUN=\"false\" \\\n -e REGISTRY_AUTH=\"user:password\" \\\n mortensrasmussen/docker-registry-manifest-cleanup\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a54b1a"},"children":[{"type":"text","value":"# Try this first"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":"docker run \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" --rm anoxis/registry-cli \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" -r https://registry.url \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" -l user:password \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" --delete \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" --num 2"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a54b1a"},"children":[{"type":"text","value":"# Then this "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":"docker run -it \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" -v /path/to/registry/data:/registry \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" -e REGISTRY_URL=https://registry.url \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" -e DRY_RUN="}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" -e REGISTRY_AUTH="}]},{"type":"element","tag":"span","props":{"class":"ct-793975"},"children":[{"type":"text","value":"\"user:password\""}]},{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d03b6c"},"children":[{"type":"text","value":" mortensrasmussen/docker-registry-manifest-cleanup"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-a54b1a{color:#8B949E}.ct-793975{color:#A5D6FF}.ct-9aa4ac{color:#7EE787}.ct-438f39{color:#FF7B72}.ct-d03b6c{color:#C9D1D9}.light .ct-d03b6c{color:#657B83}.light .ct-438f39{color:#859900}.light .ct-9aa4ac{color:#268BD2}.light .ct-793975{color:#2AA198}.light .ct-a54b1a{color:#93A1A1}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"sample-docker-compose-for-custom-docker-registry","depth":2,"text":"Sample docker-compose for custom docker registry"},{"id":"squash-layers-on-registry","depth":2,"text":"Squash layers on registry"}]}},"_type":"markdown","_id":"content:Docker:Private docker registry.md","_source":"content","_file":"Docker/Private docker registry.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/docker/private-docker-registry","_dir":"docker","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Private Docker Registry","description":"Suitable to work with Drone-ci for hosting private #docker images.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Suitable to work with "},{"type":"element","tag":"a","props":{"href":"Drone-ci"},"children":[{"type":"text","value":"Drone-ci"}]},{"type":"text","value":" for hosting private #docker images."}]},{"type":"element","tag":"h2","props":{"id":"sample-docker-compose-for-custom-docker-registry"},"children":[{"type":"text","value":"Sample docker-compose for custom docker registry"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This one brings up private docker registry with ui. First you'll need to generate password for it:"}]},{"type":"element","tag":"code","props":{"code":"docker run \\\n --entrypoint htpasswd registry:2 \\\n -Bbn user mypassword > auth/registry.password\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"docker run \\\n --entrypoint htpasswd registry:2 \\\n -Bbn user mypassword > auth/registry.password\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"version: \"3\"\nservices:\n registry:\n container_name: docker__registry\n image: registry:2\n ports:\n - 5000:5000\n restart: always\n environment:\n - REGISTRY_STORAGE_FILESYSTEM_ROOTDIRECTORY=/data\n - REGISTRY_AUTH=htpasswd\n - REGISTRY_AUTH_HTPASSWD_REALM=Registry\n - REGISTRY_AUTH_HTPASSWD_PATH=/auth/registry.password\n - REGISTRY_HTTP_SECRET=password\n - REGISTRY_STORAGE_DELETE_ENABLED=true\n volumes:\n - ./registry/auth:/auth\n - ./registry/data:/data\n ui:\n container_name: docker__ui\n image: parabuzzle/craneoperator:latest\n ports:\n - 80:80\n restart: always\n environment:\n - REGISTRY_HOST=registry\n - REGISTRY_PORT=5000\n - REGISTRY_PROTOCOL=http\n - ALLOW_REGISTRY_LOGIN=true\n - REGISTRY_ALLOW_DELETE=true\n - USERNAME=registry\n - PASSWORD=password\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"version: \"3\"\nservices:\n registry:\n container_name: docker__registry\n image: registry:2\n ports:\n - 5000:5000\n restart: always\n environment:\n - REGISTRY_STORAGE_FILESYSTEM_ROOTDIRECTORY=/data\n - REGISTRY_AUTH=htpasswd\n - REGISTRY_AUTH_HTPASSWD_REALM=Registry\n - REGISTRY_AUTH_HTPASSWD_PATH=/auth/registry.password\n - REGISTRY_HTTP_SECRET=password\n - REGISTRY_STORAGE_DELETE_ENABLED=true\n volumes:\n - ./registry/auth:/auth\n - ./registry/data:/data\n ui:\n container_name: docker__ui\n image: parabuzzle/craneoperator:latest\n ports:\n - 80:80\n restart: always\n environment:\n - REGISTRY_HOST=registry\n - REGISTRY_PORT=5000\n - REGISTRY_PROTOCOL=http\n - ALLOW_REGISTRY_LOGIN=true\n - REGISTRY_ALLOW_DELETE=true\n - USERNAME=registry\n - PASSWORD=password\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"squash-layers-on-registry"},"children":[{"type":"text","value":"Squash layers on registry"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes you need to squash all layers in docker registry to free up disk space."}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Run this command to mark oldest layers"}]}]},{"type":"element","tag":"code","props":{"code":"# Try this first\ndocker run \\\n --rm anoxis/registry-cli \\\n -r https://registry.url \\\n -l user:password \\\n --delete \\\n --num 2\n\n# Then this \ndocker run -it \\\n -v /path/to/registry/data:/registry \\\n -e REGISTRY_URL=https://registry.url \\\n -e DRY_RUN=\"false\" \\\n -e REGISTRY_AUTH=\"user:password\" \\\n mortensrasmussen/docker-registry-manifest-cleanup\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"# Try this first\ndocker run \\\n --rm anoxis/registry-cli \\\n -r https://registry.url \\\n -l user:password \\\n --delete \\\n --num 2\n\n# Then this \ndocker run -it \\\n -v /path/to/registry/data:/registry \\\n -e REGISTRY_URL=https://registry.url \\\n -e DRY_RUN=\"false\" \\\n -e REGISTRY_AUTH=\"user:password\" \\\n mortensrasmussen/docker-registry-manifest-cleanup\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Suitable to work with "},{"type":"element","tag":"a","props":{"href":"Drone-ci"},"children":[{"type":"text","value":"Drone-ci"}]},{"type":"text","value":" for hosting private #docker images."}]},{"type":"element","tag":"h2","props":{"id":"sample-docker-compose-for-custom-docker-registry"},"children":[{"type":"text","value":"Sample docker-compose for custom docker registry"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This one brings up private docker registry with ui. First you'll need to generate password for it:"}]},{"type":"element","tag":"code","props":{"code":"docker run \\\n --entrypoint htpasswd registry:2 \\\n -Bbn user mypassword > auth/registry.password\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":"docker run \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" --entrypoint htpasswd registry:2 \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" -Bbn user mypassword "}]},{"type":"element","tag":"span","props":{"class":"ct-5d2f73"},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" auth/registry.password"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"version: \"3\"\nservices:\n registry:\n container_name: docker__registry\n image: registry:2\n ports:\n - 5000:5000\n restart: always\n environment:\n - REGISTRY_STORAGE_FILESYSTEM_ROOTDIRECTORY=/data\n - REGISTRY_AUTH=htpasswd\n - REGISTRY_AUTH_HTPASSWD_REALM=Registry\n - REGISTRY_AUTH_HTPASSWD_PATH=/auth/registry.password\n - REGISTRY_HTTP_SECRET=password\n - REGISTRY_STORAGE_DELETE_ENABLED=true\n volumes:\n - ./registry/auth:/auth\n - ./registry/data:/data\n ui:\n container_name: docker__ui\n image: parabuzzle/craneoperator:latest\n ports:\n - 80:80\n restart: always\n environment:\n - REGISTRY_HOST=registry\n - REGISTRY_PORT=5000\n - REGISTRY_PROTOCOL=http\n - ALLOW_REGISTRY_LOGIN=true\n - REGISTRY_ALLOW_DELETE=true\n - USERNAME=registry\n - PASSWORD=password\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b81191"},"children":[{"type":"text","value":"version"}]},{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"\"3\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b81191"},"children":[{"type":"text","value":"services"}]},{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b81191"},"children":[{"type":"text","value":"registry"}]},{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b81191"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"docker__registry"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b81191"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"registry:2"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b81191"},"children":[{"type":"text","value":"ports"}]},{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"5000:5000"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b81191"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"always"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b81191"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"REGISTRY_STORAGE_FILESYSTEM_ROOTDIRECTORY=/data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"REGISTRY_AUTH=htpasswd"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"REGISTRY_AUTH_HTPASSWD_REALM=Registry"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"REGISTRY_AUTH_HTPASSWD_PATH=/auth/registry.password"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"REGISTRY_HTTP_SECRET=password"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"REGISTRY_STORAGE_DELETE_ENABLED=true"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b81191"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"./registry/auth:/auth"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"./registry/data:/data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b81191"},"children":[{"type":"text","value":"ui"}]},{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b81191"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"docker__ui"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b81191"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"parabuzzle/craneoperator:latest"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b81191"},"children":[{"type":"text","value":"ports"}]},{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"80:80"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b81191"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"always"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b81191"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"REGISTRY_HOST=registry"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"REGISTRY_PORT=5000"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"REGISTRY_PROTOCOL=http"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"ALLOW_REGISTRY_LOGIN=true"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"REGISTRY_ALLOW_DELETE=true"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"USERNAME=registry"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"PASSWORD=password"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"squash-layers-on-registry"},"children":[{"type":"text","value":"Squash layers on registry"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes you need to squash all layers in docker registry to free up disk space."}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Run this command to mark oldest layers"}]}]},{"type":"element","tag":"code","props":{"code":"# Try this first\ndocker run \\\n --rm anoxis/registry-cli \\\n -r https://registry.url \\\n -l user:password \\\n --delete \\\n --num 2\n\n# Then this \ndocker run -it \\\n -v /path/to/registry/data:/registry \\\n -e REGISTRY_URL=https://registry.url \\\n -e DRY_RUN=\"false\" \\\n -e REGISTRY_AUTH=\"user:password\" \\\n mortensrasmussen/docker-registry-manifest-cleanup\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ce2ef3"},"children":[{"type":"text","value":"# Try this first"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":"docker run \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" --rm anoxis/registry-cli \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" -r https://registry.url \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" -l user:password \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" --delete \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" --num 2"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ce2ef3"},"children":[{"type":"text","value":"# Then this "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":"docker run -it \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" -v /path/to/registry/data:/registry \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" -e REGISTRY_URL=https://registry.url \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" -e DRY_RUN="}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" -e REGISTRY_AUTH="}]},{"type":"element","tag":"span","props":{"class":"ct-b5cc20"},"children":[{"type":"text","value":"\"user:password\""}]},{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0ef0d6"},"children":[{"type":"text","value":" mortensrasmussen/docker-registry-manifest-cleanup"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-ce2ef3{color:#8B949E}.ct-b5cc20{color:#A5D6FF}.ct-b81191{color:#7EE787}.ct-5d2f73{color:#FF7B72}.ct-0ef0d6{color:#C9D1D9}.light .ct-0ef0d6{color:#657B83}.light .ct-5d2f73{color:#859900}.light .ct-b81191{color:#268BD2}.light .ct-b5cc20{color:#2AA198}.light .ct-ce2ef3{color:#93A1A1}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"sample-docker-compose-for-custom-docker-registry","depth":2,"text":"Sample docker-compose for custom docker registry"},{"id":"squash-layers-on-registry","depth":2,"text":"Squash layers on registry"}]}},"_type":"markdown","_id":"content:Docker:Private docker registry.md","_source":"content","_file":"Docker/Private docker registry.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/FLiVxDo2qK.json b/docs/api/_content/query/FLiVxDo2qK.json
index fdfff7a..52f2e9b 100644
--- a/docs/api/_content/query/FLiVxDo2qK.json
+++ b/docs/api/_content/query/FLiVxDo2qK.json
@@ -1 +1 @@
-{"_path":"/typescript/add-global-variable-to-window","_dir":"typescript","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Add Global Variable To Window","description":"Sometimes you want to add global variable to your window. That thing's called global module augmentation.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes you want to add global variable to your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window"}]},{"type":"text","value":". That thing's called "},{"type":"element","tag":"a","props":{"href":"https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation","rel":["nofollow"]},"children":[{"type":"text","value":"global module augmentation"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Say you need to call "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window.doFancyThings()"}]},{"type":"text","value":". For that you should augment global "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window"}]},{"type":"text","value":" interface in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"*.d.ts"}]},{"type":"text","value":" file:"}]},{"type":"element","tag":"code","props":{"code":"declare global {\n interface Window {\n doFancyThings: () => void;\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"declare global {\n interface Window {\n doFancyThings: () => void;\n }\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is useful for declaring global "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window.ethereum"}]},{"type":"text","value":" (or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window.web3"}]},{"type":"text","value":") in "},{"type":"element","tag":"a","props":{"href":"/blockchain/Common%20typescript%20examples"},"children":[{"type":"text","value":"blockchain"}]},{"type":"text","value":" projects with typescript, which use wallet browser extensions."}]},{"type":"element","tag":"h2","props":{"id":"augmenting-existing-interface"},"children":[{"type":"text","value":"Augmenting existing interface"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, you have class "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Sample"}]},{"type":"text","value":" without any functionality:"}]},{"type":"element","tag":"code","props":{"code":"// Sample.ts\n\nexport class Sample {\n // nothing :-)\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// Sample.ts\n\nexport class Sample {\n // nothing :-)\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then you want extend it with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"doFancyThings()"}]},{"type":"text","value":" method. That can be achieved with said "},{"type":"element","tag":"a","props":{"href":"https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation","rel":["nofollow"]},"children":[{"type":"text","value":"module augmentation"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"// fancyThings.ts\nimport { Sample } from \"./Sample\";\n\ndeclare module \"./Sample\" {\n interface Sample {\n doFancyThings: () => void;\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// fancyThings.ts\nimport { Sample } from \"./Sample\";\n\ndeclare module \"./Sample\" {\n interface Sample {\n doFancyThings: () => void;\n }\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Now you can call "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sample.doFancyThings()"}]},{"type":"text","value":" by importing both "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".ts"}]},{"type":"text","value":" files:"}]},{"type":"element","tag":"code","props":{"code":"import { Sample } from \"./sample\";\nimport \"./fancyThings\";\n\nconst sample = new Sample();\nsample.doFancyThings(); // ok\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { Sample } from \"./sample\";\nimport \"./fancyThings\";\n\nconst sample = new Sample();\nsample.doFancyThings(); // ok\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This example is useful for "},{"type":"element","tag":"a","props":{"href":"./Frontend/Vue/Adding%20global%20properties%20to%20component"},"children":[{"type":"text","value":"adding global properties to component"}]},{"type":"text","value":" in vue.js."}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes you want to add global variable to your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window"}]},{"type":"text","value":". That thing's called "},{"type":"element","tag":"a","props":{"href":"https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation","rel":["nofollow"]},"children":[{"type":"text","value":"global module augmentation"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Say you need to call "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window.doFancyThings()"}]},{"type":"text","value":". For that you should augment global "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window"}]},{"type":"text","value":" interface in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"*.d.ts"}]},{"type":"text","value":" file:"}]},{"type":"element","tag":"code","props":{"code":"declare global {\n interface Window {\n doFancyThings: () => void;\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-05d7fc"},"children":[{"type":"text","value":"declare"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4278e1"},"children":[{"type":"text","value":"global"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-05d7fc"},"children":[{"type":"text","value":"interface"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-24d477"},"children":[{"type":"text","value":"Window"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-233ec4"},"children":[{"type":"text","value":"doFancyThings"}]},{"type":"element","tag":"span","props":{"class":"ct-c7b69f"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-05d7fc"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0b4a2b"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is useful for declaring global "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window.ethereum"}]},{"type":"text","value":" (or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window.web3"}]},{"type":"text","value":") in "},{"type":"element","tag":"a","props":{"href":"/blockchain/Common%20typescript%20examples"},"children":[{"type":"text","value":"blockchain"}]},{"type":"text","value":" projects with typescript, which use wallet browser extensions."}]},{"type":"element","tag":"h2","props":{"id":"augmenting-existing-interface"},"children":[{"type":"text","value":"Augmenting existing interface"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, you have class "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Sample"}]},{"type":"text","value":" without any functionality:"}]},{"type":"element","tag":"code","props":{"code":"// Sample.ts\n\nexport class Sample {\n // nothing :-)\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-efa672"},"children":[{"type":"text","value":"// Sample.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c7b69f"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-05d7fc"},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-24d477"},"children":[{"type":"text","value":"Sample"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-efa672"},"children":[{"type":"text","value":"// nothing :-)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then you want extend it with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"doFancyThings()"}]},{"type":"text","value":" method. That can be achieved with said "},{"type":"element","tag":"a","props":{"href":"https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation","rel":["nofollow"]},"children":[{"type":"text","value":"module augmentation"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"// fancyThings.ts\nimport { Sample } from \"./Sample\";\n\ndeclare module \"./Sample\" {\n interface Sample {\n doFancyThings: () => void;\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-efa672"},"children":[{"type":"text","value":"// fancyThings.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c7b69f"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-4278e1"},"children":[{"type":"text","value":"Sample"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-c7b69f"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d12e32"},"children":[{"type":"text","value":"\"./Sample\""}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-05d7fc"},"children":[{"type":"text","value":"declare"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-05d7fc"},"children":[{"type":"text","value":"module"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d12e32"},"children":[{"type":"text","value":"\"./Sample\""}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-05d7fc"},"children":[{"type":"text","value":"interface"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-24d477"},"children":[{"type":"text","value":"Sample"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-233ec4"},"children":[{"type":"text","value":"doFancyThings"}]},{"type":"element","tag":"span","props":{"class":"ct-c7b69f"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-05d7fc"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0b4a2b"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Now you can call "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sample.doFancyThings()"}]},{"type":"text","value":" by importing both "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".ts"}]},{"type":"text","value":" files:"}]},{"type":"element","tag":"code","props":{"code":"import { Sample } from \"./sample\";\nimport \"./fancyThings\";\n\nconst sample = new Sample();\nsample.doFancyThings(); // ok\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c7b69f"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-4278e1"},"children":[{"type":"text","value":"Sample"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-c7b69f"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d12e32"},"children":[{"type":"text","value":"\"./sample\""}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c7b69f"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d12e32"},"children":[{"type":"text","value":"\"./fancyThings\""}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-05d7fc"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f10d77"},"children":[{"type":"text","value":"sample"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7b69f"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7b69f"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-233ec4"},"children":[{"type":"text","value":"Sample"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4278e1"},"children":[{"type":"text","value":"sample"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-233ec4"},"children":[{"type":"text","value":"doFancyThings"}]},{"type":"element","tag":"span","props":{"class":"ct-b2c08f"},"children":[{"type":"text","value":"(); "}]},{"type":"element","tag":"span","props":{"class":"ct-efa672"},"children":[{"type":"text","value":"// ok"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This example is useful for "},{"type":"element","tag":"a","props":{"href":"./Frontend/Vue/Adding%20global%20properties%20to%20component"},"children":[{"type":"text","value":"adding global properties to component"}]},{"type":"text","value":" in vue.js."}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-f10d77{color:#79C0FF}.ct-d12e32{color:#A5D6FF}.ct-efa672{color:#8B949E}.ct-0b4a2b{color:#79C0FF}.ct-c7b69f{color:#FF7B72}.ct-233ec4{color:#D2A8FF}.ct-24d477{color:#FFA657}.ct-4278e1{color:#C9D1D9}.ct-b2c08f{color:#C9D1D9}.ct-05d7fc{color:#FF7B72}.light .ct-05d7fc{color:#073642}.light .ct-b2c08f{color:#657B83}.light .ct-4278e1{color:#268BD2}.light .ct-24d477{color:#268BD2}.light .ct-233ec4{color:#268BD2}.light .ct-c7b69f{color:#859900}.light .ct-0b4a2b{color:#859900}.light .ct-efa672{color:#93A1A1}.light .ct-d12e32{color:#2AA198}.light .ct-f10d77{color:#268BD2}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"augmenting-existing-interface","depth":2,"text":"Augmenting existing interface"}]}},"_type":"markdown","_id":"content:Typescript:Add global variable to window.md","_source":"content","_file":"Typescript/Add global variable to window.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/typescript/add-global-variable-to-window","_dir":"typescript","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Add Global Variable To Window","description":"Sometimes you want to add global variable to your window. That thing's called global module augmentation.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes you want to add global variable to your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window"}]},{"type":"text","value":". That thing's called "},{"type":"element","tag":"a","props":{"href":"https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation","rel":["nofollow"]},"children":[{"type":"text","value":"global module augmentation"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Say you need to call "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window.doFancyThings()"}]},{"type":"text","value":". For that you should augment global "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window"}]},{"type":"text","value":" interface in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"*.d.ts"}]},{"type":"text","value":" file:"}]},{"type":"element","tag":"code","props":{"code":"declare global {\n interface Window {\n doFancyThings: () => void;\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"declare global {\n interface Window {\n doFancyThings: () => void;\n }\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is useful for declaring global "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window.ethereum"}]},{"type":"text","value":" (or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window.web3"}]},{"type":"text","value":") in "},{"type":"element","tag":"a","props":{"href":"/blockchain/Common%20typescript%20examples"},"children":[{"type":"text","value":"blockchain"}]},{"type":"text","value":" projects with typescript, which use wallet browser extensions."}]},{"type":"element","tag":"h2","props":{"id":"augmenting-existing-interface"},"children":[{"type":"text","value":"Augmenting existing interface"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, you have class "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Sample"}]},{"type":"text","value":" without any functionality:"}]},{"type":"element","tag":"code","props":{"code":"// Sample.ts\n\nexport class Sample {\n // nothing :-)\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// Sample.ts\n\nexport class Sample {\n // nothing :-)\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then you want extend it with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"doFancyThings()"}]},{"type":"text","value":" method. That can be achieved with said "},{"type":"element","tag":"a","props":{"href":"https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation","rel":["nofollow"]},"children":[{"type":"text","value":"module augmentation"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"// fancyThings.ts\nimport { Sample } from \"./Sample\";\n\ndeclare module \"./Sample\" {\n interface Sample {\n doFancyThings: () => void;\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// fancyThings.ts\nimport { Sample } from \"./Sample\";\n\ndeclare module \"./Sample\" {\n interface Sample {\n doFancyThings: () => void;\n }\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Now you can call "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sample.doFancyThings()"}]},{"type":"text","value":" by importing both "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".ts"}]},{"type":"text","value":" files:"}]},{"type":"element","tag":"code","props":{"code":"import { Sample } from \"./sample\";\nimport \"./fancyThings\";\n\nconst sample = new Sample();\nsample.doFancyThings(); // ok\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { Sample } from \"./sample\";\nimport \"./fancyThings\";\n\nconst sample = new Sample();\nsample.doFancyThings(); // ok\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This example is useful for "},{"type":"element","tag":"a","props":{"href":"./Frontend/Vue/Adding%20global%20properties%20to%20component"},"children":[{"type":"text","value":"adding global properties to component"}]},{"type":"text","value":" in vue.js."}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes you want to add global variable to your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window"}]},{"type":"text","value":". That thing's called "},{"type":"element","tag":"a","props":{"href":"https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation","rel":["nofollow"]},"children":[{"type":"text","value":"global module augmentation"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Say you need to call "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window.doFancyThings()"}]},{"type":"text","value":". For that you should augment global "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window"}]},{"type":"text","value":" interface in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"*.d.ts"}]},{"type":"text","value":" file:"}]},{"type":"element","tag":"code","props":{"code":"declare global {\n interface Window {\n doFancyThings: () => void;\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b2af0d"},"children":[{"type":"text","value":"declare"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3a5851"},"children":[{"type":"text","value":"global"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b2af0d"},"children":[{"type":"text","value":"interface"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-494734"},"children":[{"type":"text","value":"Window"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9a4dd"},"children":[{"type":"text","value":"doFancyThings"}]},{"type":"element","tag":"span","props":{"class":"ct-66d539"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-b2af0d"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-756283"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is useful for declaring global "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window.ethereum"}]},{"type":"text","value":" (or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"window.web3"}]},{"type":"text","value":") in "},{"type":"element","tag":"a","props":{"href":"/blockchain/Common%20typescript%20examples"},"children":[{"type":"text","value":"blockchain"}]},{"type":"text","value":" projects with typescript, which use wallet browser extensions."}]},{"type":"element","tag":"h2","props":{"id":"augmenting-existing-interface"},"children":[{"type":"text","value":"Augmenting existing interface"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, you have class "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Sample"}]},{"type":"text","value":" without any functionality:"}]},{"type":"element","tag":"code","props":{"code":"// Sample.ts\n\nexport class Sample {\n // nothing :-)\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1265ec"},"children":[{"type":"text","value":"// Sample.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-66d539"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b2af0d"},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-494734"},"children":[{"type":"text","value":"Sample"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1265ec"},"children":[{"type":"text","value":"// nothing :-)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then you want extend it with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"doFancyThings()"}]},{"type":"text","value":" method. That can be achieved with said "},{"type":"element","tag":"a","props":{"href":"https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation","rel":["nofollow"]},"children":[{"type":"text","value":"module augmentation"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"// fancyThings.ts\nimport { Sample } from \"./Sample\";\n\ndeclare module \"./Sample\" {\n interface Sample {\n doFancyThings: () => void;\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1265ec"},"children":[{"type":"text","value":"// fancyThings.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-66d539"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-3a5851"},"children":[{"type":"text","value":"Sample"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-66d539"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-214b42"},"children":[{"type":"text","value":"\"./Sample\""}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b2af0d"},"children":[{"type":"text","value":"declare"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b2af0d"},"children":[{"type":"text","value":"module"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-214b42"},"children":[{"type":"text","value":"\"./Sample\""}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b2af0d"},"children":[{"type":"text","value":"interface"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-494734"},"children":[{"type":"text","value":"Sample"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9a4dd"},"children":[{"type":"text","value":"doFancyThings"}]},{"type":"element","tag":"span","props":{"class":"ct-66d539"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-b2af0d"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-756283"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Now you can call "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sample.doFancyThings()"}]},{"type":"text","value":" by importing both "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".ts"}]},{"type":"text","value":" files:"}]},{"type":"element","tag":"code","props":{"code":"import { Sample } from \"./sample\";\nimport \"./fancyThings\";\n\nconst sample = new Sample();\nsample.doFancyThings(); // ok\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-66d539"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-3a5851"},"children":[{"type":"text","value":"Sample"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-66d539"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-214b42"},"children":[{"type":"text","value":"\"./sample\""}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-66d539"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-214b42"},"children":[{"type":"text","value":"\"./fancyThings\""}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b2af0d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-35e71a"},"children":[{"type":"text","value":"sample"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-66d539"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-66d539"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9a4dd"},"children":[{"type":"text","value":"Sample"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3a5851"},"children":[{"type":"text","value":"sample"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e9a4dd"},"children":[{"type":"text","value":"doFancyThings"}]},{"type":"element","tag":"span","props":{"class":"ct-44d604"},"children":[{"type":"text","value":"(); "}]},{"type":"element","tag":"span","props":{"class":"ct-1265ec"},"children":[{"type":"text","value":"// ok"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This example is useful for "},{"type":"element","tag":"a","props":{"href":"./Frontend/Vue/Adding%20global%20properties%20to%20component"},"children":[{"type":"text","value":"adding global properties to component"}]},{"type":"text","value":" in vue.js."}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-35e71a{color:#79C0FF}.ct-214b42{color:#A5D6FF}.ct-1265ec{color:#8B949E}.ct-756283{color:#79C0FF}.ct-66d539{color:#FF7B72}.ct-e9a4dd{color:#D2A8FF}.ct-494734{color:#FFA657}.ct-3a5851{color:#C9D1D9}.ct-44d604{color:#C9D1D9}.ct-b2af0d{color:#FF7B72}.light .ct-b2af0d{color:#073642}.light .ct-44d604{color:#657B83}.light .ct-3a5851{color:#268BD2}.light .ct-494734{color:#268BD2}.light .ct-e9a4dd{color:#268BD2}.light .ct-66d539{color:#859900}.light .ct-756283{color:#859900}.light .ct-1265ec{color:#93A1A1}.light .ct-214b42{color:#2AA198}.light .ct-35e71a{color:#268BD2}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"augmenting-existing-interface","depth":2,"text":"Augmenting existing interface"}]}},"_type":"markdown","_id":"content:Typescript:Add global variable to window.md","_source":"content","_file":"Typescript/Add global variable to window.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/FVXoGazg6u.json b/docs/api/_content/query/FVXoGazg6u.json
index 92f4e34..cbde0db 100644
--- a/docs/api/_content/query/FVXoGazg6u.json
+++ b/docs/api/_content/query/FVXoGazg6u.json
@@ -1 +1 @@
-{"_path":"/linux/find-out-who-uses-swap","_dir":"linux","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Find Out Who Uses Swap","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"code","props":{"code":"for file in /proc/*/status ; do awk '/VmSwap|Name/{printf $2 \" \" $3}END{ print \"\"}' $file; done | sort -k 2 -n -r | less\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"for file in /proc/*/status ; do awk '/VmSwap|Name/{printf $2 \" \" $3}END{ print \"\"}' $file; done | sort -k 2 -n -r | less\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"code","props":{"code":"for file in /proc/*/status ; do awk '/VmSwap|Name/{printf $2 \" \" $3}END{ print \"\"}' $file; done | sort -k 2 -n -r | less\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b91087"},"children":[{"type":"text","value":"for"}]},{"type":"element","tag":"span","props":{"class":"ct-bbbdc4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8ee681"},"children":[{"type":"text","value":"file"}]},{"type":"element","tag":"span","props":{"class":"ct-bbbdc4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b91087"},"children":[{"type":"text","value":"in"}]},{"type":"element","tag":"span","props":{"class":"ct-bbbdc4"},"children":[{"type":"text","value":" /proc/"}]},{"type":"element","tag":"span","props":{"class":"ct-b91087"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-bbbdc4"},"children":[{"type":"text","value":"/status "}]},{"type":"element","tag":"span","props":{"class":"ct-b91087"},"children":[{"type":"text","value":";"}]},{"type":"element","tag":"span","props":{"class":"ct-bbbdc4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b91087"},"children":[{"type":"text","value":"do"}]},{"type":"element","tag":"span","props":{"class":"ct-bbbdc4"},"children":[{"type":"text","value":" awk "}]},{"type":"element","tag":"span","props":{"class":"ct-1d7396"},"children":[{"type":"text","value":"'/VmSwap|Name/{printf $2 \" \" $3}END{ print \"\"}'"}]},{"type":"element","tag":"span","props":{"class":"ct-bbbdc4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b91087"},"children":[{"type":"text","value":"done"}]},{"type":"element","tag":"span","props":{"class":"ct-bbbdc4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b91087"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-bbbdc4"},"children":[{"type":"text","value":" sort -k 2 -n -r "}]},{"type":"element","tag":"span","props":{"class":"ct-b91087"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-bbbdc4"},"children":[{"type":"text","value":" less"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-1d7396{color:#A5D6FF}.ct-8ee681{color:#C9D1D9}.ct-bbbdc4{color:#C9D1D9}.ct-b91087{color:#FF7B72}.light .ct-b91087{color:#859900}.light .ct-bbbdc4{color:#657B83}.light .ct-8ee681{color:#268BD2}.light .ct-1d7396{color:#2AA198}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Linux:Find out who uses swap.md","_source":"content","_file":"Linux/Find out who uses swap.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/linux/find-out-who-uses-swap","_dir":"linux","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Find Out Who Uses Swap","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"code","props":{"code":"for file in /proc/*/status ; do awk '/VmSwap|Name/{printf $2 \" \" $3}END{ print \"\"}' $file; done | sort -k 2 -n -r | less\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"for file in /proc/*/status ; do awk '/VmSwap|Name/{printf $2 \" \" $3}END{ print \"\"}' $file; done | sort -k 2 -n -r | less\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"code","props":{"code":"for file in /proc/*/status ; do awk '/VmSwap|Name/{printf $2 \" \" $3}END{ print \"\"}' $file; done | sort -k 2 -n -r | less\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0eb2c3"},"children":[{"type":"text","value":"for"}]},{"type":"element","tag":"span","props":{"class":"ct-30c242"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a91e4d"},"children":[{"type":"text","value":"file"}]},{"type":"element","tag":"span","props":{"class":"ct-30c242"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0eb2c3"},"children":[{"type":"text","value":"in"}]},{"type":"element","tag":"span","props":{"class":"ct-30c242"},"children":[{"type":"text","value":" /proc/"}]},{"type":"element","tag":"span","props":{"class":"ct-0eb2c3"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-30c242"},"children":[{"type":"text","value":"/status "}]},{"type":"element","tag":"span","props":{"class":"ct-0eb2c3"},"children":[{"type":"text","value":";"}]},{"type":"element","tag":"span","props":{"class":"ct-30c242"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0eb2c3"},"children":[{"type":"text","value":"do"}]},{"type":"element","tag":"span","props":{"class":"ct-30c242"},"children":[{"type":"text","value":" awk "}]},{"type":"element","tag":"span","props":{"class":"ct-812a0c"},"children":[{"type":"text","value":"'/VmSwap|Name/{printf $2 \" \" $3}END{ print \"\"}'"}]},{"type":"element","tag":"span","props":{"class":"ct-30c242"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0eb2c3"},"children":[{"type":"text","value":"done"}]},{"type":"element","tag":"span","props":{"class":"ct-30c242"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0eb2c3"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-30c242"},"children":[{"type":"text","value":" sort -k 2 -n -r "}]},{"type":"element","tag":"span","props":{"class":"ct-0eb2c3"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-30c242"},"children":[{"type":"text","value":" less"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-812a0c{color:#A5D6FF}.ct-a91e4d{color:#C9D1D9}.ct-30c242{color:#C9D1D9}.ct-0eb2c3{color:#FF7B72}.light .ct-0eb2c3{color:#859900}.light .ct-30c242{color:#657B83}.light .ct-a91e4d{color:#268BD2}.light .ct-812a0c{color:#2AA198}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Linux:Find out who uses swap.md","_source":"content","_file":"Linux/Find out who uses swap.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/KIXVn92YTN.json b/docs/api/_content/query/KIXVn92YTN.json
index 5812cab..5b21a05 100644
--- a/docs/api/_content/query/KIXVn92YTN.json
+++ b/docs/api/_content/query/KIXVn92YTN.json
@@ -1 +1 @@
-{"_path":"/frontend/react/axios-refresh-token-on-react","_dir":"react","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Axios Refresh Token On React","description":"<ApiProvider /> component, that will handle token refresh if needed. Refresh function should, probably, be passed through component props.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<ApiProvider />"}]},{"type":"text","value":" component, that will handle token refresh if needed. Refresh function should, probably, be passed through component props."}]},{"type":"element","tag":"code","props":{"code":"import axios from \"axios\";\nimport React, {\n createContext,\n FC,\n PropsWithChildren,\n useCallback,\n useContext,\n useEffect,\n useRef,\n} from \"react\";\n\ninterface APIProviderProps extends PropsWithChildren {\n tokens: {\n access: string;\n refresh: string;\n };\n logout: () => void;\n}\n\nconst APIContext = createContext({\n client: axios.create({\n baseURL: process.env.NEXT_PUBLIC_API_ENDPOINT,\n }),\n});\n\nconst APIProvider: FC<APIProviderProps> = ({ \n tokens, \n logout, \n children,\n}) => {\n const client = useRef(\n axios.create({\n baseURL: process.env.NEXT_PUBLIC_API_ENDPOINT,\n })\n ).current;\n\n const refreshTokens = useCallback<() => string>(() => {\n // TODO: implement me\n throw new Error(\"not implemented\");\n }, []);\n\n useEffect(() => {\n if (!tokens.access) {\n return;\n }\n\n // append `access` token to all requests\n const req = client.interceptors.request.use(\n async (config) => {\n config.headers = {\n Authorization: `Bearer ${tokens.access}`,\n };\n return config;\n },\n (error) => {\n Promise.reject(error);\n }\n );\n\n // refreshing interceptor\n const resp = client.interceptors.response.use(\n (response) => {\n return response;\n },\n async function (error) {\n const originalRequest = error.config;\n\n if (error.response.status === 401 && !originalRequest._retry) {\n originalRequest._retry = true;\n\n const newToken = refreshTokens;\n\n return axios({\n ...originalRequest,\n headers: {\n ...originalRequest.headers,\n Authorization: \"Bearer \" + newToken,\n },\n });\n }\n\n logout();\n return Promise.reject(error);\n }\n );\n\n return () => {\n axios.interceptors.request.eject(req);\n axios.interceptors.request.eject(resp);\n };\n }, [client, tokens.access, tokens.refresh, refreshTokens, logout]);\n\n return (\n <APIContext.Provider value={{ client }}>\n {children}\n </APIContext.Provider>\n );\n};\n\nexport const useAPI = () => useContext(APIContext).client;\n\nexport { APIProvider };\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import axios from \"axios\";\nimport React, {\n createContext,\n FC,\n PropsWithChildren,\n useCallback,\n useContext,\n useEffect,\n useRef,\n} from \"react\";\n\ninterface APIProviderProps extends PropsWithChildren {\n tokens: {\n access: string;\n refresh: string;\n };\n logout: () => void;\n}\n\nconst APIContext = createContext({\n client: axios.create({\n baseURL: process.env.NEXT_PUBLIC_API_ENDPOINT,\n }),\n});\n\nconst APIProvider: FC<APIProviderProps> = ({ \n tokens, \n logout, \n children,\n}) => {\n const client = useRef(\n axios.create({\n baseURL: process.env.NEXT_PUBLIC_API_ENDPOINT,\n })\n ).current;\n\n const refreshTokens = useCallback<() => string>(() => {\n // TODO: implement me\n throw new Error(\"not implemented\");\n }, []);\n\n useEffect(() => {\n if (!tokens.access) {\n return;\n }\n\n // append `access` token to all requests\n const req = client.interceptors.request.use(\n async (config) => {\n config.headers = {\n Authorization: `Bearer ${tokens.access}`,\n };\n return config;\n },\n (error) => {\n Promise.reject(error);\n }\n );\n\n // refreshing interceptor\n const resp = client.interceptors.response.use(\n (response) => {\n return response;\n },\n async function (error) {\n const originalRequest = error.config;\n\n if (error.response.status === 401 && !originalRequest._retry) {\n originalRequest._retry = true;\n\n const newToken = refreshTokens;\n\n return axios({\n ...originalRequest,\n headers: {\n ...originalRequest.headers,\n Authorization: \"Bearer \" + newToken,\n },\n });\n }\n\n logout();\n return Promise.reject(error);\n }\n );\n\n return () => {\n axios.interceptors.request.eject(req);\n axios.interceptors.request.eject(resp);\n };\n }, [client, tokens.access, tokens.refresh, refreshTokens, logout]);\n\n return (\n <APIContext.Provider value={{ client }}>\n {children}\n </APIContext.Provider>\n );\n};\n\nexport const useAPI = () => useContext(APIContext).client;\n\nexport { APIProvider };\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<ApiProvider />"}]},{"type":"text","value":" component, that will handle token refresh if needed. Refresh function should, probably, be passed through component props."}]},{"type":"element","tag":"code","props":{"code":"import axios from \"axios\";\nimport React, {\n createContext,\n FC,\n PropsWithChildren,\n useCallback,\n useContext,\n useEffect,\n useRef,\n} from \"react\";\n\ninterface APIProviderProps extends PropsWithChildren {\n tokens: {\n access: string;\n refresh: string;\n };\n logout: () => void;\n}\n\nconst APIContext = createContext({\n client: axios.create({\n baseURL: process.env.NEXT_PUBLIC_API_ENDPOINT,\n }),\n});\n\nconst APIProvider: FC<APIProviderProps> = ({ \n tokens, \n logout, \n children,\n}) => {\n const client = useRef(\n axios.create({\n baseURL: process.env.NEXT_PUBLIC_API_ENDPOINT,\n })\n ).current;\n\n const refreshTokens = useCallback<() => string>(() => {\n // TODO: implement me\n throw new Error(\"not implemented\");\n }, []);\n\n useEffect(() => {\n if (!tokens.access) {\n return;\n }\n\n // append `access` token to all requests\n const req = client.interceptors.request.use(\n async (config) => {\n config.headers = {\n Authorization: `Bearer ${tokens.access}`,\n };\n return config;\n },\n (error) => {\n Promise.reject(error);\n }\n );\n\n // refreshing interceptor\n const resp = client.interceptors.response.use(\n (response) => {\n return response;\n },\n async function (error) {\n const originalRequest = error.config;\n\n if (error.response.status === 401 && !originalRequest._retry) {\n originalRequest._retry = true;\n\n const newToken = refreshTokens;\n\n return axios({\n ...originalRequest,\n headers: {\n ...originalRequest.headers,\n Authorization: \"Bearer \" + newToken,\n },\n });\n }\n\n logout();\n return Promise.reject(error);\n }\n );\n\n return () => {\n axios.interceptors.request.eject(req);\n axios.interceptors.request.eject(resp);\n };\n }, [client, tokens.access, tokens.refresh, refreshTokens, logout]);\n\n return (\n <APIContext.Provider value={{ client }}>\n {children}\n </APIContext.Provider>\n );\n};\n\nexport const useAPI = () => useContext(APIContext).client;\n\nexport { APIProvider };\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ffccda"},"children":[{"type":"text","value":"\"axios\""}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"React"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":", {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"createContext"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"FC"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"PropsWithChildren"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"useContext"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"useEffect"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"} "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ffccda"},"children":[{"type":"text","value":"\"react\""}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d2feec"},"children":[{"type":"text","value":"interface"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c38e35"},"children":[{"type":"text","value":"APIProviderProps"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d2feec"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1c2886"},"children":[{"type":"text","value":"PropsWithChildren"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ed897c"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-b7492e"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ed897c"},"children":[{"type":"text","value":"access"}]},{"type":"element","tag":"span","props":{"class":"ct-b7492e"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f2f6ff"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ed897c"},"children":[{"type":"text","value":"refresh"}]},{"type":"element","tag":"span","props":{"class":"ct-b7492e"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f2f6ff"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-82accf"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-bfa659"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-694fc0"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bfa659"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-646245"},"children":[{"type":"text","value":"APIContext"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-82accf"},"children":[{"type":"text","value":"createContext"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" client: "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-82accf"},"children":[{"type":"text","value":"create"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" baseURL: "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-646245"},"children":[{"type":"text","value":"NEXT_PUBLIC_API_ENDPOINT"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"});"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bfa659"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-82accf"},"children":[{"type":"text","value":"APIProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-255c64"},"children":[{"type":"text","value":"FC"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-255c64"},"children":[{"type":"text","value":"APIProviderProps"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" ({ "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"children"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"}) "}]},{"type":"element","tag":"span","props":{"class":"ct-bfa659"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bfa659"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-646245"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-82accf"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-82accf"},"children":[{"type":"text","value":"create"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" baseURL: "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-646245"},"children":[{"type":"text","value":"NEXT_PUBLIC_API_ENDPOINT"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" )."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bfa659"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-646245"},"children":[{"type":"text","value":"refreshTokens"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-82accf"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"<() "}]},{"type":"element","tag":"span","props":{"class":"ct-bfa659"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-694fc0"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":">(() "}]},{"type":"element","tag":"span","props":{"class":"ct-bfa659"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b6b8f5"},"children":[{"type":"text","value":"// TODO: implement me"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-694fc0"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ffccda"},"children":[{"type":"text","value":"\"not implemented\""}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" }, []);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-82accf"},"children":[{"type":"text","value":"useEffect"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-bfa659"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"access"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b6b8f5"},"children":[{"type":"text","value":"// append `access` token to all requests"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bfa659"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-646245"},"children":[{"type":"text","value":"req"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"interceptors"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-82accf"},"children":[{"type":"text","value":"use"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d2feec"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ed897c"},"children":[{"type":"text","value":"config"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-d2feec"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"config"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" Authorization: "}]},{"type":"element","tag":"span","props":{"class":"ct-ffccda"},"children":[{"type":"text","value":"`Bearer ${"}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-57838d"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"access"}]},{"type":"element","tag":"span","props":{"class":"ct-ffccda"},"children":[{"type":"text","value":"}`"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"config"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ed897c"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-d2feec"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-694fc0"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-82accf"},"children":[{"type":"text","value":"reject"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b6b8f5"},"children":[{"type":"text","value":"// refreshing interceptor"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bfa659"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-646245"},"children":[{"type":"text","value":"resp"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"interceptors"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"response"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-82accf"},"children":[{"type":"text","value":"use"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ed897c"},"children":[{"type":"text","value":"response"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-d2feec"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"response"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d2feec"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d2feec"},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ed897c"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bfa659"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-646245"},"children":[{"type":"text","value":"originalRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"config"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"response"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"status"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"==="}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-68b8e3"},"children":[{"type":"text","value":"401"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"originalRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"_retry"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"originalRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"_retry"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-01fcd4"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bfa659"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-646245"},"children":[{"type":"text","value":"newToken"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"refreshTokens"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-82accf"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"originalRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" headers: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"originalRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" Authorization: "}]},{"type":"element","tag":"span","props":{"class":"ct-ffccda"},"children":[{"type":"text","value":"\"Bearer \""}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"newToken"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-82accf"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-694fc0"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-82accf"},"children":[{"type":"text","value":"reject"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-bfa659"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"interceptors"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-82accf"},"children":[{"type":"text","value":"eject"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"req"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"interceptors"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-82accf"},"children":[{"type":"text","value":"eject"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"resp"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" }, ["}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"access"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"refresh"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"refreshTokens"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"]);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"APIContext"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"Provider"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"{{ "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" }}"}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":" {"}]},{"type":"element","tag":"span","props":{"class":"ct-ed897c"},"children":[{"type":"text","value":"children"}]},{"type":"element","tag":"span","props":{"class":"ct-d6d1bd"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"APIContext"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"Provider"}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bfa659"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-82accf"},"children":[{"type":"text","value":"useAPI"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-bfa659"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-82accf"},"children":[{"type":"text","value":"useContext"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"APIContext"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f402a3"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-3427e6"},"children":[{"type":"text","value":"APIProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-9d2291"},"children":[{"type":"text","value":" };"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-01fcd4{color:#79C0FF}.ct-68b8e3{color:#79C0FF}.ct-57838d{color:#A5D6FF}.ct-b6b8f5{color:#8B949E}.ct-255c64{color:#FFA657}.ct-646245{color:#79C0FF}.ct-694fc0{color:#79C0FF}.ct-bfa659{color:#FF7B72}.ct-82accf{color:#D2A8FF}.ct-f2f6ff{color:#79C0FF}.ct-b7492e{color:#FF7B72}.ct-ed897c{color:#FFA657}.ct-1c2886{color:#79C0FF}.ct-c38e35{color:#FFA657}.ct-d6d1bd{color:#C9D1D9}.ct-d2feec{color:#FF7B72}.ct-ffccda{color:#A5D6FF}.ct-3427e6{color:#C9D1D9}.ct-9d2291{color:#C9D1D9}.ct-f402a3{color:#FF7B72}.light .ct-f402a3{color:#859900}.light .ct-9d2291{color:#657B83}.light .ct-3427e6{color:#268BD2}.light .ct-ffccda{color:#2AA198}.light .ct-d2feec{color:#073642}.light .ct-d6d1bd{color:#657B83}.light .ct-c38e35{color:#268BD2}.light .ct-1c2886{color:#657B83}.light .ct-ed897c{color:#657B83}.light .ct-b7492e{color:#859900}.light .ct-f2f6ff{color:#859900}.light .ct-82accf{color:#268BD2}.light .ct-bfa659{color:#073642}.light .ct-694fc0{color:#859900}.light .ct-646245{color:#268BD2}.light .ct-255c64{color:#268BD2}.light .ct-b6b8f5{color:#93A1A1}.light .ct-57838d{color:#657B83}.light .ct-68b8e3{color:#D33682}.light .ct-01fcd4{color:#B58900}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Frontend:React:Axios refresh token on React.md","_source":"content","_file":"Frontend/React/Axios refresh token on React.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/frontend/react/axios-refresh-token-on-react","_dir":"react","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Axios Refresh Token On React","description":"<ApiProvider /> component, that will handle token refresh if needed. Refresh function should, probably, be passed through component props.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<ApiProvider />"}]},{"type":"text","value":" component, that will handle token refresh if needed. Refresh function should, probably, be passed through component props."}]},{"type":"element","tag":"code","props":{"code":"import axios from \"axios\";\nimport React, {\n createContext,\n FC,\n PropsWithChildren,\n useCallback,\n useContext,\n useEffect,\n useRef,\n} from \"react\";\n\ninterface APIProviderProps extends PropsWithChildren {\n tokens: {\n access: string;\n refresh: string;\n };\n logout: () => void;\n}\n\nconst APIContext = createContext({\n client: axios.create({\n baseURL: process.env.NEXT_PUBLIC_API_ENDPOINT,\n }),\n});\n\nconst APIProvider: FC<APIProviderProps> = ({ \n tokens, \n logout, \n children,\n}) => {\n const client = useRef(\n axios.create({\n baseURL: process.env.NEXT_PUBLIC_API_ENDPOINT,\n })\n ).current;\n\n const refreshTokens = useCallback<() => string>(() => {\n // TODO: implement me\n throw new Error(\"not implemented\");\n }, []);\n\n useEffect(() => {\n if (!tokens.access) {\n return;\n }\n\n // append `access` token to all requests\n const req = client.interceptors.request.use(\n async (config) => {\n config.headers = {\n Authorization: `Bearer ${tokens.access}`,\n };\n return config;\n },\n (error) => {\n Promise.reject(error);\n }\n );\n\n // refreshing interceptor\n const resp = client.interceptors.response.use(\n (response) => {\n return response;\n },\n async function (error) {\n const originalRequest = error.config;\n\n if (error.response.status === 401 && !originalRequest._retry) {\n originalRequest._retry = true;\n\n const newToken = refreshTokens;\n\n return axios({\n ...originalRequest,\n headers: {\n ...originalRequest.headers,\n Authorization: \"Bearer \" + newToken,\n },\n });\n }\n\n logout();\n return Promise.reject(error);\n }\n );\n\n return () => {\n axios.interceptors.request.eject(req);\n axios.interceptors.request.eject(resp);\n };\n }, [client, tokens.access, tokens.refresh, refreshTokens, logout]);\n\n return (\n <APIContext.Provider value={{ client }}>\n {children}\n </APIContext.Provider>\n );\n};\n\nexport const useAPI = () => useContext(APIContext).client;\n\nexport { APIProvider };\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import axios from \"axios\";\nimport React, {\n createContext,\n FC,\n PropsWithChildren,\n useCallback,\n useContext,\n useEffect,\n useRef,\n} from \"react\";\n\ninterface APIProviderProps extends PropsWithChildren {\n tokens: {\n access: string;\n refresh: string;\n };\n logout: () => void;\n}\n\nconst APIContext = createContext({\n client: axios.create({\n baseURL: process.env.NEXT_PUBLIC_API_ENDPOINT,\n }),\n});\n\nconst APIProvider: FC<APIProviderProps> = ({ \n tokens, \n logout, \n children,\n}) => {\n const client = useRef(\n axios.create({\n baseURL: process.env.NEXT_PUBLIC_API_ENDPOINT,\n })\n ).current;\n\n const refreshTokens = useCallback<() => string>(() => {\n // TODO: implement me\n throw new Error(\"not implemented\");\n }, []);\n\n useEffect(() => {\n if (!tokens.access) {\n return;\n }\n\n // append `access` token to all requests\n const req = client.interceptors.request.use(\n async (config) => {\n config.headers = {\n Authorization: `Bearer ${tokens.access}`,\n };\n return config;\n },\n (error) => {\n Promise.reject(error);\n }\n );\n\n // refreshing interceptor\n const resp = client.interceptors.response.use(\n (response) => {\n return response;\n },\n async function (error) {\n const originalRequest = error.config;\n\n if (error.response.status === 401 && !originalRequest._retry) {\n originalRequest._retry = true;\n\n const newToken = refreshTokens;\n\n return axios({\n ...originalRequest,\n headers: {\n ...originalRequest.headers,\n Authorization: \"Bearer \" + newToken,\n },\n });\n }\n\n logout();\n return Promise.reject(error);\n }\n );\n\n return () => {\n axios.interceptors.request.eject(req);\n axios.interceptors.request.eject(resp);\n };\n }, [client, tokens.access, tokens.refresh, refreshTokens, logout]);\n\n return (\n <APIContext.Provider value={{ client }}>\n {children}\n </APIContext.Provider>\n );\n};\n\nexport const useAPI = () => useContext(APIContext).client;\n\nexport { APIProvider };\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<ApiProvider />"}]},{"type":"text","value":" component, that will handle token refresh if needed. Refresh function should, probably, be passed through component props."}]},{"type":"element","tag":"code","props":{"code":"import axios from \"axios\";\nimport React, {\n createContext,\n FC,\n PropsWithChildren,\n useCallback,\n useContext,\n useEffect,\n useRef,\n} from \"react\";\n\ninterface APIProviderProps extends PropsWithChildren {\n tokens: {\n access: string;\n refresh: string;\n };\n logout: () => void;\n}\n\nconst APIContext = createContext({\n client: axios.create({\n baseURL: process.env.NEXT_PUBLIC_API_ENDPOINT,\n }),\n});\n\nconst APIProvider: FC<APIProviderProps> = ({ \n tokens, \n logout, \n children,\n}) => {\n const client = useRef(\n axios.create({\n baseURL: process.env.NEXT_PUBLIC_API_ENDPOINT,\n })\n ).current;\n\n const refreshTokens = useCallback<() => string>(() => {\n // TODO: implement me\n throw new Error(\"not implemented\");\n }, []);\n\n useEffect(() => {\n if (!tokens.access) {\n return;\n }\n\n // append `access` token to all requests\n const req = client.interceptors.request.use(\n async (config) => {\n config.headers = {\n Authorization: `Bearer ${tokens.access}`,\n };\n return config;\n },\n (error) => {\n Promise.reject(error);\n }\n );\n\n // refreshing interceptor\n const resp = client.interceptors.response.use(\n (response) => {\n return response;\n },\n async function (error) {\n const originalRequest = error.config;\n\n if (error.response.status === 401 && !originalRequest._retry) {\n originalRequest._retry = true;\n\n const newToken = refreshTokens;\n\n return axios({\n ...originalRequest,\n headers: {\n ...originalRequest.headers,\n Authorization: \"Bearer \" + newToken,\n },\n });\n }\n\n logout();\n return Promise.reject(error);\n }\n );\n\n return () => {\n axios.interceptors.request.eject(req);\n axios.interceptors.request.eject(resp);\n };\n }, [client, tokens.access, tokens.refresh, refreshTokens, logout]);\n\n return (\n <APIContext.Provider value={{ client }}>\n {children}\n </APIContext.Provider>\n );\n};\n\nexport const useAPI = () => useContext(APIContext).client;\n\nexport { APIProvider };\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-aa5e40"},"children":[{"type":"text","value":"\"axios\""}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"React"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":", {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"createContext"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"FC"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"PropsWithChildren"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"useContext"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"useEffect"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"} "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-aa5e40"},"children":[{"type":"text","value":"\"react\""}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-571508"},"children":[{"type":"text","value":"interface"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-46134e"},"children":[{"type":"text","value":"APIProviderProps"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-571508"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-08c798"},"children":[{"type":"text","value":"PropsWithChildren"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac7baf"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-52b50f"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac7baf"},"children":[{"type":"text","value":"access"}]},{"type":"element","tag":"span","props":{"class":"ct-52b50f"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f9619c"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac7baf"},"children":[{"type":"text","value":"refresh"}]},{"type":"element","tag":"span","props":{"class":"ct-52b50f"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f9619c"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3837d1"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-872860"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1d4139"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-872860"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed17"},"children":[{"type":"text","value":"APIContext"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3837d1"},"children":[{"type":"text","value":"createContext"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" client: "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3837d1"},"children":[{"type":"text","value":"create"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" baseURL: "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-20ed17"},"children":[{"type":"text","value":"NEXT_PUBLIC_API_ENDPOINT"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"});"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-872860"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3837d1"},"children":[{"type":"text","value":"APIProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a8703d"},"children":[{"type":"text","value":"FC"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-a8703d"},"children":[{"type":"text","value":"APIProviderProps"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" ({ "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"children"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"}) "}]},{"type":"element","tag":"span","props":{"class":"ct-872860"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-872860"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed17"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3837d1"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3837d1"},"children":[{"type":"text","value":"create"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" baseURL: "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-20ed17"},"children":[{"type":"text","value":"NEXT_PUBLIC_API_ENDPOINT"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" )."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-872860"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed17"},"children":[{"type":"text","value":"refreshTokens"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3837d1"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"<() "}]},{"type":"element","tag":"span","props":{"class":"ct-872860"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1d4139"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":">(() "}]},{"type":"element","tag":"span","props":{"class":"ct-872860"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-211469"},"children":[{"type":"text","value":"// TODO: implement me"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1d4139"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-aa5e40"},"children":[{"type":"text","value":"\"not implemented\""}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" }, []);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3837d1"},"children":[{"type":"text","value":"useEffect"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-872860"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"access"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-211469"},"children":[{"type":"text","value":"// append `access` token to all requests"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-872860"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed17"},"children":[{"type":"text","value":"req"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"interceptors"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3837d1"},"children":[{"type":"text","value":"use"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-571508"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ac7baf"},"children":[{"type":"text","value":"config"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-571508"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"config"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" Authorization: "}]},{"type":"element","tag":"span","props":{"class":"ct-aa5e40"},"children":[{"type":"text","value":"`Bearer ${"}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-7758a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"access"}]},{"type":"element","tag":"span","props":{"class":"ct-aa5e40"},"children":[{"type":"text","value":"}`"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"config"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ac7baf"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-571508"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1d4139"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3837d1"},"children":[{"type":"text","value":"reject"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-211469"},"children":[{"type":"text","value":"// refreshing interceptor"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-872860"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed17"},"children":[{"type":"text","value":"resp"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"interceptors"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"response"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3837d1"},"children":[{"type":"text","value":"use"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ac7baf"},"children":[{"type":"text","value":"response"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-571508"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"response"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-571508"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-571508"},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ac7baf"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-872860"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed17"},"children":[{"type":"text","value":"originalRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"config"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"response"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"status"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"==="}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-51d764"},"children":[{"type":"text","value":"401"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"originalRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"_retry"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"originalRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"_retry"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7edaa2"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-872860"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed17"},"children":[{"type":"text","value":"newToken"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"refreshTokens"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3837d1"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"originalRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" headers: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"originalRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" Authorization: "}]},{"type":"element","tag":"span","props":{"class":"ct-aa5e40"},"children":[{"type":"text","value":"\"Bearer \""}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"newToken"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3837d1"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1d4139"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3837d1"},"children":[{"type":"text","value":"reject"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-872860"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"interceptors"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3837d1"},"children":[{"type":"text","value":"eject"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"req"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"interceptors"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3837d1"},"children":[{"type":"text","value":"eject"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"resp"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" }, ["}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"access"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"refresh"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"refreshTokens"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"]);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"APIContext"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"Provider"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"{{ "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" }}"}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":" {"}]},{"type":"element","tag":"span","props":{"class":"ct-ac7baf"},"children":[{"type":"text","value":"children"}]},{"type":"element","tag":"span","props":{"class":"ct-6c447f"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"APIContext"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"Provider"}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-872860"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3837d1"},"children":[{"type":"text","value":"useAPI"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-872860"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3837d1"},"children":[{"type":"text","value":"useContext"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"APIContext"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-441895"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-eb8e65"},"children":[{"type":"text","value":"APIProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-509eb2"},"children":[{"type":"text","value":" };"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-7edaa2{color:#79C0FF}.ct-51d764{color:#79C0FF}.ct-7758a7{color:#A5D6FF}.ct-211469{color:#8B949E}.ct-a8703d{color:#FFA657}.ct-20ed17{color:#79C0FF}.ct-1d4139{color:#79C0FF}.ct-872860{color:#FF7B72}.ct-3837d1{color:#D2A8FF}.ct-f9619c{color:#79C0FF}.ct-52b50f{color:#FF7B72}.ct-ac7baf{color:#FFA657}.ct-08c798{color:#79C0FF}.ct-46134e{color:#FFA657}.ct-6c447f{color:#C9D1D9}.ct-571508{color:#FF7B72}.ct-aa5e40{color:#A5D6FF}.ct-eb8e65{color:#C9D1D9}.ct-509eb2{color:#C9D1D9}.ct-441895{color:#FF7B72}.light .ct-441895{color:#859900}.light .ct-509eb2{color:#657B83}.light .ct-eb8e65{color:#268BD2}.light .ct-aa5e40{color:#2AA198}.light .ct-571508{color:#073642}.light .ct-6c447f{color:#657B83}.light .ct-46134e{color:#268BD2}.light .ct-08c798{color:#657B83}.light .ct-ac7baf{color:#657B83}.light .ct-52b50f{color:#859900}.light .ct-f9619c{color:#859900}.light .ct-3837d1{color:#268BD2}.light .ct-872860{color:#073642}.light .ct-1d4139{color:#859900}.light .ct-20ed17{color:#268BD2}.light .ct-a8703d{color:#268BD2}.light .ct-211469{color:#93A1A1}.light .ct-7758a7{color:#657B83}.light .ct-51d764{color:#D33682}.light .ct-7edaa2{color:#B58900}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Frontend:React:Axios refresh token on React.md","_source":"content","_file":"Frontend/React/Axios refresh token on React.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/LKdFxpydAG.json b/docs/api/_content/query/LKdFxpydAG.json
index 27cbf14..c2fe50c 100644
--- a/docs/api/_content/query/LKdFxpydAG.json
+++ b/docs/api/_content/query/LKdFxpydAG.json
@@ -1 +1 @@
-{"_path":"/sql/postgress-setup","_dir":"sql","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Postgress Setup","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"install-postgresql-12-on-ubuntu-2004-lts"},"children":[{"type":"text","value":"Install PostgreSQL 12 on Ubuntu 20.04 LTS"}]},{"type":"element","tag":"code","props":{"code":"sudo apt update\nsudo apt install -y postgresql postgresql-contrib postgresql-client\nsudo systemctl status postgresql.service\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"sudo apt update\nsudo apt install -y postgresql postgresql-contrib postgresql-client\nsudo systemctl status postgresql.service\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"initial-database-connection"},"children":[{"type":"text","value":"Initial database connection"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A local connection (from the database server) can be done by the following command:"}]},{"type":"element","tag":"code","props":{"code":"sudo -u postgres psql\n\npsql (12.12 (Ubuntu 12.12-0ubuntu0.20.04.1))\nType \"help\" for help.\n\npostgres=#\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"sudo -u postgres psql\n\npsql (12.12 (Ubuntu 12.12-0ubuntu0.20.04.1))\nType \"help\" for help.\n\npostgres=#\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"set-password-for-postgres-database-user"},"children":[{"type":"text","value":"Set password for postgres database user"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The password for the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"postgres"}]},{"type":"text","value":" database user can be set the the quick command "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"\\password"}]},{"type":"text","value":"\nor by "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"alter user postgres password 'Supersecret'"}]},{"type":"text","value":". A connection using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"postgres"}]},{"type":"text","value":" user\nis still not possible from the \"outside\" hence to the default settings in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pg_hba.conf"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"update-pg_hbaconf-to-allow-postgres-user-connections-with-password"},"children":[{"type":"text","value":"Update pg_hba.conf to allow postgres user connections with password"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In order to allow connections of the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"postgres"}]},{"type":"text","value":" database user not using OS user\nauthentication, you have to update the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pg_hba.conf"}]},{"type":"text","value":" which can be found under\n"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/postgresql/12/main/pg_hba.conf"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"sudo vi /etc/postgresql/12/main/pg_hba.conf\n\n...\nlocal all postgres peer\n...\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"sudo vi /etc/postgresql/12/main/pg_hba.conf\n\n...\nlocal all postgres peer\n...\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Change the last section of the above line to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"md5"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"local all postgres md5\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"local all postgres md5\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A restart is required in order to apply the new configuration:"}]},{"type":"element","tag":"code","props":{"code":"sudo systemctl restart postgresql\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"sudo systemctl restart postgresql\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Now a connection from outside the database host is possible e.g."}]},{"type":"element","tag":"code","props":{"code":"psql -U postgres -d postgres -h databasehostname\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"psql -U postgres -d postgres -h databasehostname\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"creation-of-additional-database-users"},"children":[{"type":"text","value":"Creation of additional database users"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A database user can be created by the following command:"}]},{"type":"element","tag":"code","props":{"code":"create user myuser with encrypted password 'Supersecret';\nCREATE ROLE\n\npostgres=# \\du\n List of roles\n Role name | Attributes | Member of\n-----------+------------------------------------------------------------+-----------\n myuser | | {}\n postgres | Superuser, Create role, Create DB, Replication, Bypass RLS | {}\n","language":"sql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"create user myuser with encrypted password 'Supersecret';\nCREATE ROLE\n\npostgres=# \\du\n List of roles\n Role name | Attributes | Member of\n-----------+------------------------------------------------------------+-----------\n myuser | | {}\n postgres | Superuser, Create role, Create DB, Replication, Bypass RLS | {}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"creation-of-additional-databases"},"children":[{"type":"text","value":"Creation of additional databases"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"One can create new Postgres databases within an instance. Therefore you can use the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"psql"}]},{"type":"text","value":"\ncommand to login (see above)."}]},{"type":"element","tag":"code","props":{"code":"CREATE DATABASE dbname OWNER myuser;\nCREATE DATABASE\n\npostgres=# \\l\n List of databases\n Name | Owner | Encoding | Collate | Ctype | Access privileges\n-----------+----------+----------+-------------+-------------+-----------------------\n dbname | myuser | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n postgres | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n template0 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c/postgres +\n | | | | | postgres=CTc/postgres\n template1 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c/postgres +\n | | | | | postgres=CTc/postgres\n","language":"sql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"CREATE DATABASE dbname OWNER myuser;\nCREATE DATABASE\n\npostgres=# \\l\n List of databases\n Name | Owner | Encoding | Collate | Ctype | Access privileges\n-----------+----------+----------+-------------+-------------+-----------------------\n dbname | myuser | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n postgres | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n template0 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c/postgres +\n | | | | | postgres=CTc/postgres\n template1 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c/postgres +\n | | | | | postgres=CTc/postgres\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can leave the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"OWNER"}]},{"type":"text","value":" section of the command, when doing so, the current user will become\nowner of the newly created database."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To change the owner of an existing database later, you can use the following command:"}]},{"type":"element","tag":"code","props":{"code":"postgres=# alter database dbname owner to myuser;\nALTER DATABASE\n","language":"sql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"postgres=# alter database dbname owner to myuser;\nALTER DATABASE\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"install-postgresql-12-on-ubuntu-2004-lts"},"children":[{"type":"text","value":"Install PostgreSQL 12 on Ubuntu 20.04 LTS"}]},{"type":"element","tag":"code","props":{"code":"sudo apt update\nsudo apt install -y postgresql postgresql-contrib postgresql-client\nsudo systemctl status postgresql.service\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b382d3"},"children":[{"type":"text","value":"sudo apt update"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b382d3"},"children":[{"type":"text","value":"sudo apt install -y postgresql postgresql-contrib postgresql-client"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b382d3"},"children":[{"type":"text","value":"sudo systemctl status postgresql.service"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"initial-database-connection"},"children":[{"type":"text","value":"Initial database connection"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A local connection (from the database server) can be done by the following command:"}]},{"type":"element","tag":"code","props":{"code":"sudo -u postgres psql\n\npsql (12.12 (Ubuntu 12.12-0ubuntu0.20.04.1))\nType \"help\" for help.\n\npostgres=#\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b382d3"},"children":[{"type":"text","value":"sudo -u postgres psql"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b382d3"},"children":[{"type":"text","value":"psql (12.12 (Ubuntu 12.12-0ubuntu0.20.04.1))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b382d3"},"children":[{"type":"text","value":"Type "}]},{"type":"element","tag":"span","props":{"class":"ct-3c3be0"},"children":[{"type":"text","value":"\"help\""}]},{"type":"element","tag":"span","props":{"class":"ct-b382d3"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-99cc06"},"children":[{"type":"text","value":"for"}]},{"type":"element","tag":"span","props":{"class":"ct-b382d3"},"children":[{"type":"text","value":" help."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b382d3"},"children":[{"type":"text","value":"postgres="}]},{"type":"element","tag":"span","props":{"class":"ct-6808e5"},"children":[{"type":"text","value":"#"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"set-password-for-postgres-database-user"},"children":[{"type":"text","value":"Set password for postgres database user"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The password for the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"postgres"}]},{"type":"text","value":" database user can be set the the quick command "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"\\password"}]},{"type":"text","value":"\nor by "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"alter user postgres password 'Supersecret'"}]},{"type":"text","value":". A connection using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"postgres"}]},{"type":"text","value":" user\nis still not possible from the \"outside\" hence to the default settings in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pg_hba.conf"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"update-pg_hbaconf-to-allow-postgres-user-connections-with-password"},"children":[{"type":"text","value":"Update pg_hba.conf to allow postgres user connections with password"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In order to allow connections of the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"postgres"}]},{"type":"text","value":" database user not using OS user\nauthentication, you have to update the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pg_hba.conf"}]},{"type":"text","value":" which can be found under\n"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/postgresql/12/main/pg_hba.conf"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"sudo vi /etc/postgresql/12/main/pg_hba.conf\n\n...\nlocal all postgres peer\n...\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b382d3"},"children":[{"type":"text","value":"sudo vi /etc/postgresql/12/main/pg_hba.conf"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b382d3"},"children":[{"type":"text","value":"..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-51dc37"},"children":[{"type":"text","value":"local"}]},{"type":"element","tag":"span","props":{"class":"ct-b382d3"},"children":[{"type":"text","value":" all postgres peer"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b382d3"},"children":[{"type":"text","value":"..."}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Change the last section of the above line to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"md5"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"local all postgres md5\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"local all postgres md5"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A restart is required in order to apply the new configuration:"}]},{"type":"element","tag":"code","props":{"code":"sudo systemctl restart postgresql\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b382d3"},"children":[{"type":"text","value":"sudo systemctl restart postgresql"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Now a connection from outside the database host is possible e.g."}]},{"type":"element","tag":"code","props":{"code":"psql -U postgres -d postgres -h databasehostname\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b382d3"},"children":[{"type":"text","value":"psql -U postgres -d postgres -h databasehostname"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"creation-of-additional-database-users"},"children":[{"type":"text","value":"Creation of additional database users"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A database user can be created by the following command:"}]},{"type":"element","tag":"code","props":{"code":"create user myuser with encrypted password 'Supersecret';\nCREATE ROLE\n\npostgres=# \\du\n List of roles\n Role name | Attributes | Member of\n-----------+------------------------------------------------------------+-----------\n myuser | | {}\n postgres | Superuser, Create role, Create DB, Replication, Bypass RLS | {}\n","language":"sql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"create user myuser with encrypted password 'Supersecret';\nCREATE ROLE\n\npostgres=# \\du\n List of roles\n Role name | Attributes | Member of\n-----------+------------------------------------------------------------+-----------\n myuser | | {}\n postgres | Superuser, Create role, Create DB, Replication, Bypass RLS | {}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"creation-of-additional-databases"},"children":[{"type":"text","value":"Creation of additional databases"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"One can create new Postgres databases within an instance. Therefore you can use the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"psql"}]},{"type":"text","value":"\ncommand to login (see above)."}]},{"type":"element","tag":"code","props":{"code":"CREATE DATABASE dbname OWNER myuser;\nCREATE DATABASE\n\npostgres=# \\l\n List of databases\n Name | Owner | Encoding | Collate | Ctype | Access privileges\n-----------+----------+----------+-------------+-------------+-----------------------\n dbname | myuser | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n postgres | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n template0 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c/postgres +\n | | | | | postgres=CTc/postgres\n template1 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c/postgres +\n | | | | | postgres=CTc/postgres\n","language":"sql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"CREATE DATABASE dbname OWNER myuser;\nCREATE DATABASE\n\npostgres=# \\l\n List of databases\n Name | Owner | Encoding | Collate | Ctype | Access privileges\n-----------+----------+----------+-------------+-------------+-----------------------\n dbname | myuser | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n postgres | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n template0 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c/postgres +\n | | | | | postgres=CTc/postgres\n template1 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c/postgres +\n | | | | | postgres=CTc/postgres"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can leave the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"OWNER"}]},{"type":"text","value":" section of the command, when doing so, the current user will become\nowner of the newly created database."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To change the owner of an existing database later, you can use the following command:"}]},{"type":"element","tag":"code","props":{"code":"postgres=# alter database dbname owner to myuser;\nALTER DATABASE\n","language":"sql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"postgres=# alter database dbname owner to myuser;\nALTER DATABASE"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-51dc37{color:#FF7B72}.ct-6808e5{color:#8B949E}.ct-99cc06{color:#FF7B72}.ct-3c3be0{color:#A5D6FF}.ct-b382d3{color:#C9D1D9}.light .ct-b382d3{color:#657B83}.light .ct-3c3be0{color:#2AA198}.light .ct-99cc06{color:#859900}.light .ct-6808e5{color:#93A1A1}.light .ct-51dc37{color:#073642}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"install-postgresql-12-on-ubuntu-2004-lts","depth":2,"text":"Install PostgreSQL 12 on Ubuntu 20.04 LTS"},{"id":"initial-database-connection","depth":2,"text":"Initial database connection"},{"id":"set-password-for-postgres-database-user","depth":2,"text":"Set password for postgres database user","children":[{"id":"update-pg_hbaconf-to-allow-postgres-user-connections-with-password","depth":3,"text":"Update pg_hba.conf to allow postgres user connections with password"}]},{"id":"creation-of-additional-database-users","depth":2,"text":"Creation of additional database users"},{"id":"creation-of-additional-databases","depth":2,"text":"Creation of additional databases"}]}},"_type":"markdown","_id":"content:SQL:Postgress setup.md","_source":"content","_file":"SQL/Postgress setup.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/sql/postgress-setup","_dir":"sql","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Postgress Setup","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"install-postgresql-12-on-ubuntu-2004-lts"},"children":[{"type":"text","value":"Install PostgreSQL 12 on Ubuntu 20.04 LTS"}]},{"type":"element","tag":"code","props":{"code":"sudo apt update\nsudo apt install -y postgresql postgresql-contrib postgresql-client\nsudo systemctl status postgresql.service\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"sudo apt update\nsudo apt install -y postgresql postgresql-contrib postgresql-client\nsudo systemctl status postgresql.service\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"initial-database-connection"},"children":[{"type":"text","value":"Initial database connection"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A local connection (from the database server) can be done by the following command:"}]},{"type":"element","tag":"code","props":{"code":"sudo -u postgres psql\n\npsql (12.12 (Ubuntu 12.12-0ubuntu0.20.04.1))\nType \"help\" for help.\n\npostgres=#\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"sudo -u postgres psql\n\npsql (12.12 (Ubuntu 12.12-0ubuntu0.20.04.1))\nType \"help\" for help.\n\npostgres=#\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"set-password-for-postgres-database-user"},"children":[{"type":"text","value":"Set password for postgres database user"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The password for the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"postgres"}]},{"type":"text","value":" database user can be set the the quick command "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"\\password"}]},{"type":"text","value":"\nor by "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"alter user postgres password 'Supersecret'"}]},{"type":"text","value":". A connection using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"postgres"}]},{"type":"text","value":" user\nis still not possible from the \"outside\" hence to the default settings in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pg_hba.conf"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"update-pg_hbaconf-to-allow-postgres-user-connections-with-password"},"children":[{"type":"text","value":"Update pg_hba.conf to allow postgres user connections with password"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In order to allow connections of the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"postgres"}]},{"type":"text","value":" database user not using OS user\nauthentication, you have to update the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pg_hba.conf"}]},{"type":"text","value":" which can be found under\n"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/postgresql/12/main/pg_hba.conf"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"sudo vi /etc/postgresql/12/main/pg_hba.conf\n\n...\nlocal all postgres peer\n...\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"sudo vi /etc/postgresql/12/main/pg_hba.conf\n\n...\nlocal all postgres peer\n...\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Change the last section of the above line to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"md5"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"local all postgres md5\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"local all postgres md5\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A restart is required in order to apply the new configuration:"}]},{"type":"element","tag":"code","props":{"code":"sudo systemctl restart postgresql\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"sudo systemctl restart postgresql\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Now a connection from outside the database host is possible e.g."}]},{"type":"element","tag":"code","props":{"code":"psql -U postgres -d postgres -h databasehostname\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"psql -U postgres -d postgres -h databasehostname\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"creation-of-additional-database-users"},"children":[{"type":"text","value":"Creation of additional database users"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A database user can be created by the following command:"}]},{"type":"element","tag":"code","props":{"code":"create user myuser with encrypted password 'Supersecret';\nCREATE ROLE\n\npostgres=# \\du\n List of roles\n Role name | Attributes | Member of\n-----------+------------------------------------------------------------+-----------\n myuser | | {}\n postgres | Superuser, Create role, Create DB, Replication, Bypass RLS | {}\n","language":"sql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"create user myuser with encrypted password 'Supersecret';\nCREATE ROLE\n\npostgres=# \\du\n List of roles\n Role name | Attributes | Member of\n-----------+------------------------------------------------------------+-----------\n myuser | | {}\n postgres | Superuser, Create role, Create DB, Replication, Bypass RLS | {}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"creation-of-additional-databases"},"children":[{"type":"text","value":"Creation of additional databases"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"One can create new Postgres databases within an instance. Therefore you can use the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"psql"}]},{"type":"text","value":"\ncommand to login (see above)."}]},{"type":"element","tag":"code","props":{"code":"CREATE DATABASE dbname OWNER myuser;\nCREATE DATABASE\n\npostgres=# \\l\n List of databases\n Name | Owner | Encoding | Collate | Ctype | Access privileges\n-----------+----------+----------+-------------+-------------+-----------------------\n dbname | myuser | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n postgres | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n template0 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c/postgres +\n | | | | | postgres=CTc/postgres\n template1 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c/postgres +\n | | | | | postgres=CTc/postgres\n","language":"sql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"CREATE DATABASE dbname OWNER myuser;\nCREATE DATABASE\n\npostgres=# \\l\n List of databases\n Name | Owner | Encoding | Collate | Ctype | Access privileges\n-----------+----------+----------+-------------+-------------+-----------------------\n dbname | myuser | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n postgres | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n template0 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c/postgres +\n | | | | | postgres=CTc/postgres\n template1 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c/postgres +\n | | | | | postgres=CTc/postgres\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can leave the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"OWNER"}]},{"type":"text","value":" section of the command, when doing so, the current user will become\nowner of the newly created database."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To change the owner of an existing database later, you can use the following command:"}]},{"type":"element","tag":"code","props":{"code":"postgres=# alter database dbname owner to myuser;\nALTER DATABASE\n","language":"sql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"postgres=# alter database dbname owner to myuser;\nALTER DATABASE\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"install-postgresql-12-on-ubuntu-2004-lts"},"children":[{"type":"text","value":"Install PostgreSQL 12 on Ubuntu 20.04 LTS"}]},{"type":"element","tag":"code","props":{"code":"sudo apt update\nsudo apt install -y postgresql postgresql-contrib postgresql-client\nsudo systemctl status postgresql.service\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3c68ed"},"children":[{"type":"text","value":"sudo apt update"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3c68ed"},"children":[{"type":"text","value":"sudo apt install -y postgresql postgresql-contrib postgresql-client"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3c68ed"},"children":[{"type":"text","value":"sudo systemctl status postgresql.service"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"initial-database-connection"},"children":[{"type":"text","value":"Initial database connection"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A local connection (from the database server) can be done by the following command:"}]},{"type":"element","tag":"code","props":{"code":"sudo -u postgres psql\n\npsql (12.12 (Ubuntu 12.12-0ubuntu0.20.04.1))\nType \"help\" for help.\n\npostgres=#\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3c68ed"},"children":[{"type":"text","value":"sudo -u postgres psql"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3c68ed"},"children":[{"type":"text","value":"psql (12.12 (Ubuntu 12.12-0ubuntu0.20.04.1))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3c68ed"},"children":[{"type":"text","value":"Type "}]},{"type":"element","tag":"span","props":{"class":"ct-cff873"},"children":[{"type":"text","value":"\"help\""}]},{"type":"element","tag":"span","props":{"class":"ct-3c68ed"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-18a817"},"children":[{"type":"text","value":"for"}]},{"type":"element","tag":"span","props":{"class":"ct-3c68ed"},"children":[{"type":"text","value":" help."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3c68ed"},"children":[{"type":"text","value":"postgres="}]},{"type":"element","tag":"span","props":{"class":"ct-127309"},"children":[{"type":"text","value":"#"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"set-password-for-postgres-database-user"},"children":[{"type":"text","value":"Set password for postgres database user"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The password for the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"postgres"}]},{"type":"text","value":" database user can be set the the quick command "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"\\password"}]},{"type":"text","value":"\nor by "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"alter user postgres password 'Supersecret'"}]},{"type":"text","value":". A connection using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"postgres"}]},{"type":"text","value":" user\nis still not possible from the \"outside\" hence to the default settings in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pg_hba.conf"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"update-pg_hbaconf-to-allow-postgres-user-connections-with-password"},"children":[{"type":"text","value":"Update pg_hba.conf to allow postgres user connections with password"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In order to allow connections of the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"postgres"}]},{"type":"text","value":" database user not using OS user\nauthentication, you have to update the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pg_hba.conf"}]},{"type":"text","value":" which can be found under\n"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/postgresql/12/main/pg_hba.conf"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"sudo vi /etc/postgresql/12/main/pg_hba.conf\n\n...\nlocal all postgres peer\n...\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3c68ed"},"children":[{"type":"text","value":"sudo vi /etc/postgresql/12/main/pg_hba.conf"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3c68ed"},"children":[{"type":"text","value":"..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b12528"},"children":[{"type":"text","value":"local"}]},{"type":"element","tag":"span","props":{"class":"ct-3c68ed"},"children":[{"type":"text","value":" all postgres peer"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3c68ed"},"children":[{"type":"text","value":"..."}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Change the last section of the above line to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"md5"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"local all postgres md5\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"local all postgres md5"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A restart is required in order to apply the new configuration:"}]},{"type":"element","tag":"code","props":{"code":"sudo systemctl restart postgresql\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3c68ed"},"children":[{"type":"text","value":"sudo systemctl restart postgresql"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Now a connection from outside the database host is possible e.g."}]},{"type":"element","tag":"code","props":{"code":"psql -U postgres -d postgres -h databasehostname\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3c68ed"},"children":[{"type":"text","value":"psql -U postgres -d postgres -h databasehostname"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"creation-of-additional-database-users"},"children":[{"type":"text","value":"Creation of additional database users"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A database user can be created by the following command:"}]},{"type":"element","tag":"code","props":{"code":"create user myuser with encrypted password 'Supersecret';\nCREATE ROLE\n\npostgres=# \\du\n List of roles\n Role name | Attributes | Member of\n-----------+------------------------------------------------------------+-----------\n myuser | | {}\n postgres | Superuser, Create role, Create DB, Replication, Bypass RLS | {}\n","language":"sql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"create user myuser with encrypted password 'Supersecret';\nCREATE ROLE\n\npostgres=# \\du\n List of roles\n Role name | Attributes | Member of\n-----------+------------------------------------------------------------+-----------\n myuser | | {}\n postgres | Superuser, Create role, Create DB, Replication, Bypass RLS | {}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"creation-of-additional-databases"},"children":[{"type":"text","value":"Creation of additional databases"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"One can create new Postgres databases within an instance. Therefore you can use the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"psql"}]},{"type":"text","value":"\ncommand to login (see above)."}]},{"type":"element","tag":"code","props":{"code":"CREATE DATABASE dbname OWNER myuser;\nCREATE DATABASE\n\npostgres=# \\l\n List of databases\n Name | Owner | Encoding | Collate | Ctype | Access privileges\n-----------+----------+----------+-------------+-------------+-----------------------\n dbname | myuser | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n postgres | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n template0 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c/postgres +\n | | | | | postgres=CTc/postgres\n template1 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c/postgres +\n | | | | | postgres=CTc/postgres\n","language":"sql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"CREATE DATABASE dbname OWNER myuser;\nCREATE DATABASE\n\npostgres=# \\l\n List of databases\n Name | Owner | Encoding | Collate | Ctype | Access privileges\n-----------+----------+----------+-------------+-------------+-----------------------\n dbname | myuser | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n postgres | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n template0 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c/postgres +\n | | | | | postgres=CTc/postgres\n template1 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c/postgres +\n | | | | | postgres=CTc/postgres"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can leave the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"OWNER"}]},{"type":"text","value":" section of the command, when doing so, the current user will become\nowner of the newly created database."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To change the owner of an existing database later, you can use the following command:"}]},{"type":"element","tag":"code","props":{"code":"postgres=# alter database dbname owner to myuser;\nALTER DATABASE\n","language":"sql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"postgres=# alter database dbname owner to myuser;\nALTER DATABASE"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-b12528{color:#FF7B72}.ct-127309{color:#8B949E}.ct-18a817{color:#FF7B72}.ct-cff873{color:#A5D6FF}.ct-3c68ed{color:#C9D1D9}.light .ct-3c68ed{color:#657B83}.light .ct-cff873{color:#2AA198}.light .ct-18a817{color:#859900}.light .ct-127309{color:#93A1A1}.light .ct-b12528{color:#073642}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"install-postgresql-12-on-ubuntu-2004-lts","depth":2,"text":"Install PostgreSQL 12 on Ubuntu 20.04 LTS"},{"id":"initial-database-connection","depth":2,"text":"Initial database connection"},{"id":"set-password-for-postgres-database-user","depth":2,"text":"Set password for postgres database user","children":[{"id":"update-pg_hbaconf-to-allow-postgres-user-connections-with-password","depth":3,"text":"Update pg_hba.conf to allow postgres user connections with password"}]},{"id":"creation-of-additional-database-users","depth":2,"text":"Creation of additional database users"},{"id":"creation-of-additional-databases","depth":2,"text":"Creation of additional databases"}]}},"_type":"markdown","_id":"content:SQL:Postgress setup.md","_source":"content","_file":"SQL/Postgress setup.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/Llpj9LBd4i.json b/docs/api/_content/query/Llpj9LBd4i.json
index 3f2486f..3ef0a0d 100644
--- a/docs/api/_content/query/Llpj9LBd4i.json
+++ b/docs/api/_content/query/Llpj9LBd4i.json
@@ -1 +1 @@
-{"_path":"/frontend/vue/adding-global-properties-to-component","_dir":"vue","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Adding Global Properties To Component","description":"The topic's fully covered in the official documentation and in Add global variable to window.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The topic's fully covered in the "},{"type":"element","tag":"a","props":{"href":"https://vuejs.org/guide/typescript/options-api.html#augmenting-global-properties","rel":["nofollow"]},"children":[{"type":"text","value":"official documentation"}]},{"type":"text","value":" and in "},{"type":"element","tag":"a","props":{"href":"Add%20global%20variable%20to%20window"},"children":[{"type":"text","value":"Add global variable to window"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, you want to add global "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$http"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$translate"}]},{"type":"text","value":" services to all of project's components:"}]},{"type":"element","tag":"code","props":{"code":"// ~/index.d.ts or ~/custom.d.ts\n\nimport axios from 'axios'\n\ndeclare module 'vue' {\n interface ComponentCustomProperties {\n $http: typeof axios\n $translate: (key: string) => string\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// ~/index.d.ts or ~/custom.d.ts\n\nimport axios from 'axios'\n\ndeclare module 'vue' {\n interface ComponentCustomProperties {\n $http: typeof axios\n $translate: (key: string) => string\n }\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The topic's fully covered in the "},{"type":"element","tag":"a","props":{"href":"https://vuejs.org/guide/typescript/options-api.html#augmenting-global-properties","rel":["nofollow"]},"children":[{"type":"text","value":"official documentation"}]},{"type":"text","value":" and in "},{"type":"element","tag":"a","props":{"href":"Add%20global%20variable%20to%20window"},"children":[{"type":"text","value":"Add global variable to window"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, you want to add global "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$http"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$translate"}]},{"type":"text","value":" services to all of project's components:"}]},{"type":"element","tag":"code","props":{"code":"// ~/index.d.ts or ~/custom.d.ts\n\nimport axios from 'axios'\n\ndeclare module 'vue' {\n interface ComponentCustomProperties {\n $http: typeof axios\n $translate: (key: string) => string\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ada566"},"children":[{"type":"text","value":"// ~/index.d.ts or ~/custom.d.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b065a7"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-78ee38"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-406e37"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-78ee38"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b065a7"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-78ee38"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-56b8cc"},"children":[{"type":"text","value":"'axios'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-50c256"},"children":[{"type":"text","value":"declare"}]},{"type":"element","tag":"span","props":{"class":"ct-78ee38"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-50c256"},"children":[{"type":"text","value":"module"}]},{"type":"element","tag":"span","props":{"class":"ct-78ee38"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-56b8cc"},"children":[{"type":"text","value":"'vue'"}]},{"type":"element","tag":"span","props":{"class":"ct-78ee38"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-78ee38"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-50c256"},"children":[{"type":"text","value":"interface"}]},{"type":"element","tag":"span","props":{"class":"ct-78ee38"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42e974"},"children":[{"type":"text","value":"ComponentCustomProperties"}]},{"type":"element","tag":"span","props":{"class":"ct-78ee38"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-78ee38"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-78ee38"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39238e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d401b3"},"children":[{"type":"text","value":"$translate"}]},{"type":"element","tag":"span","props":{"class":"ct-249487"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-39238e"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-0bbf07"},"children":[{"type":"text","value":"key"}]},{"type":"element","tag":"span","props":{"class":"ct-249487"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-39238e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-49170c"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-39238e"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-1c5ec4"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-39238e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-49170c"},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-78ee38"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-78ee38"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-1c5ec4{color:#FF7B72}.ct-49170c{color:#79C0FF}.ct-0bbf07{color:#FFA657}.ct-249487{color:#FF7B72}.ct-d401b3{color:#D2A8FF}.ct-39238e{color:#C9D1D9}.ct-42e974{color:#FFA657}.ct-50c256{color:#FF7B72}.ct-56b8cc{color:#A5D6FF}.ct-406e37{color:#C9D1D9}.ct-78ee38{color:#C9D1D9}.ct-b065a7{color:#FF7B72}.ct-ada566{color:#8B949E}.light .ct-ada566{color:#93A1A1}.light .ct-b065a7{color:#859900}.light .ct-78ee38{color:#657B83}.light .ct-406e37{color:#268BD2}.light .ct-56b8cc{color:#2AA198}.light .ct-50c256{color:#073642}.light .ct-42e974{color:#268BD2}.light .ct-39238e{color:#657B83}.light .ct-d401b3{color:#268BD2}.light .ct-249487{color:#859900}.light .ct-0bbf07{color:#657B83}.light .ct-49170c{color:#859900}.light .ct-1c5ec4{color:#073642}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Frontend:Vue:Adding global properties to component.md","_source":"content","_file":"Frontend/Vue/Adding global properties to component.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/frontend/vue/adding-global-properties-to-component","_dir":"vue","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Adding Global Properties To Component","description":"The topic's fully covered in the official documentation and in Add global variable to window.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The topic's fully covered in the "},{"type":"element","tag":"a","props":{"href":"https://vuejs.org/guide/typescript/options-api.html#augmenting-global-properties","rel":["nofollow"]},"children":[{"type":"text","value":"official documentation"}]},{"type":"text","value":" and in "},{"type":"element","tag":"a","props":{"href":"Add%20global%20variable%20to%20window"},"children":[{"type":"text","value":"Add global variable to window"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, you want to add global "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$http"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$translate"}]},{"type":"text","value":" services to all of project's components:"}]},{"type":"element","tag":"code","props":{"code":"// ~/index.d.ts or ~/custom.d.ts\n\nimport axios from 'axios'\n\ndeclare module 'vue' {\n interface ComponentCustomProperties {\n $http: typeof axios\n $translate: (key: string) => string\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// ~/index.d.ts or ~/custom.d.ts\n\nimport axios from 'axios'\n\ndeclare module 'vue' {\n interface ComponentCustomProperties {\n $http: typeof axios\n $translate: (key: string) => string\n }\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The topic's fully covered in the "},{"type":"element","tag":"a","props":{"href":"https://vuejs.org/guide/typescript/options-api.html#augmenting-global-properties","rel":["nofollow"]},"children":[{"type":"text","value":"official documentation"}]},{"type":"text","value":" and in "},{"type":"element","tag":"a","props":{"href":"Add%20global%20variable%20to%20window"},"children":[{"type":"text","value":"Add global variable to window"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, you want to add global "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$http"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$translate"}]},{"type":"text","value":" services to all of project's components:"}]},{"type":"element","tag":"code","props":{"code":"// ~/index.d.ts or ~/custom.d.ts\n\nimport axios from 'axios'\n\ndeclare module 'vue' {\n interface ComponentCustomProperties {\n $http: typeof axios\n $translate: (key: string) => string\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-740ef2"},"children":[{"type":"text","value":"// ~/index.d.ts or ~/custom.d.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-326306"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-491344"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cf3e27"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-491344"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-326306"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-491344"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5caf7b"},"children":[{"type":"text","value":"'axios'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2520f9"},"children":[{"type":"text","value":"declare"}]},{"type":"element","tag":"span","props":{"class":"ct-491344"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2520f9"},"children":[{"type":"text","value":"module"}]},{"type":"element","tag":"span","props":{"class":"ct-491344"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5caf7b"},"children":[{"type":"text","value":"'vue'"}]},{"type":"element","tag":"span","props":{"class":"ct-491344"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-491344"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2520f9"},"children":[{"type":"text","value":"interface"}]},{"type":"element","tag":"span","props":{"class":"ct-491344"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe9ad3"},"children":[{"type":"text","value":"ComponentCustomProperties"}]},{"type":"element","tag":"span","props":{"class":"ct-491344"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-491344"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-491344"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a9f03c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-293188"},"children":[{"type":"text","value":"$translate"}]},{"type":"element","tag":"span","props":{"class":"ct-92e12e"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-a9f03c"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-3a318d"},"children":[{"type":"text","value":"key"}]},{"type":"element","tag":"span","props":{"class":"ct-92e12e"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-a9f03c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d6573a"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-a9f03c"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-6d6723"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-a9f03c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d6573a"},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-491344"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-491344"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-6d6723{color:#FF7B72}.ct-d6573a{color:#79C0FF}.ct-3a318d{color:#FFA657}.ct-92e12e{color:#FF7B72}.ct-293188{color:#D2A8FF}.ct-a9f03c{color:#C9D1D9}.ct-fe9ad3{color:#FFA657}.ct-2520f9{color:#FF7B72}.ct-5caf7b{color:#A5D6FF}.ct-cf3e27{color:#C9D1D9}.ct-491344{color:#C9D1D9}.ct-326306{color:#FF7B72}.ct-740ef2{color:#8B949E}.light .ct-740ef2{color:#93A1A1}.light .ct-326306{color:#859900}.light .ct-491344{color:#657B83}.light .ct-cf3e27{color:#268BD2}.light .ct-5caf7b{color:#2AA198}.light .ct-2520f9{color:#073642}.light .ct-fe9ad3{color:#268BD2}.light .ct-a9f03c{color:#657B83}.light .ct-293188{color:#268BD2}.light .ct-92e12e{color:#859900}.light .ct-3a318d{color:#657B83}.light .ct-d6573a{color:#859900}.light .ct-6d6723{color:#073642}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Frontend:Vue:Adding global properties to component.md","_source":"content","_file":"Frontend/Vue/Adding global properties to component.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/O9PBAkuWXG.json b/docs/api/_content/query/O9PBAkuWXG.json
index 25f364d..10e122d 100644
--- a/docs/api/_content/query/O9PBAkuWXG.json
+++ b/docs/api/_content/query/O9PBAkuWXG.json
@@ -1 +1 @@
-{"_path":"/graphql/refresh-token-in-apollo-client","_dir":"graphql","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Refresh Token In Apollo Client","description":"If your GraphQL api needs token refresh option, you can pass custom fetch function for Apollo Client.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If your GraphQL api needs token refresh option, you can pass custom fetch function for Apollo Client."}]},{"type":"element","tag":"code","props":{"code":"export const createApolloClient = (\n url: string,\n logout: () => void,\n getAuthorizationData: () => { authorization: string },\n refreshToken: () => Promise<\n { accessToken: string; refreshToken: string } | undefined\n >,\n) =>\n new ApolloClientBase({\n // ...other options\n link: ApolloLink.from([\n // ...other options\n setContext(async (_, { headers }) => {\n return {\n headers: {\n ...headers,\n ...getAuthorizationData(),\n },\n };\n }),\n new HttpLink({\n uri: url,\n fetch: fetchWithTokenRefresh(logout, refreshToken),\n }),\n ]),\n });\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export const createApolloClient = (\n url: string,\n logout: () => void,\n getAuthorizationData: () => { authorization: string },\n refreshToken: () => Promise<\n { accessToken: string; refreshToken: string } | undefined\n >,\n) =>\n new ApolloClientBase({\n // ...other options\n link: ApolloLink.from([\n // ...other options\n setContext(async (_, { headers }) => {\n return {\n headers: {\n ...headers,\n ...getAuthorizationData(),\n },\n };\n }),\n new HttpLink({\n uri: url,\n fetch: fetchWithTokenRefresh(logout, refreshToken),\n }),\n ]),\n });\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Custom fetch function for this request. You should tune "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"hasUnauthorizedError"}]},{"type":"text","value":" and\n"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"isRefreshRequestOptions"}]},{"type":"text","value":" to match your api."}]},{"type":"element","tag":"code","props":{"code":"/** Global singleton for refreshing promise */\nlet refreshingPromise: Promise<string> | null = null;\n\n/** Checks if GraphQl errors has unauthenticated error */\nconst hasUnauthorizedError = (errors: Array<{ code?: ErrorCode }>): boolean =>\n Array.isArray(errors) &&\n errors.some(error => {\n return error.status === 401; // Distinguish unauthorized error here\n });\n\n/** Detects if customFetch is sending refresh request */\nconst isRefreshRequestOptions = (options: RequestInit) => {\n try {\n const body = JSON.parse(options?.body as string);\n return body.operationName === 'RefreshToken';\n } catch (e) {\n return false;\n }\n};\n\n/** fetchWithTokenRefresh is a custom fetch function with token refresh for apollo */\nexport const fetchWithTokenRefresh =\n (\n logout: () => void,\n refreshToken: () => Promise<\n { accessToken: string; refreshToken: string } | undefined\n >,\n ) =>\n async (uri: string, options: RequestInit): Promise<Response> => {\n // already refreshing token, wait for it and then use refreshed token\n // or use empty authorization if refreshing failed\n if (\n !isRefreshRequestOptions(options) &&\n refreshingPromise &&\n (options.headers as Record<string, string>)?.authorization\n ) {\n const newAccessToken = await refreshingPromise\n .catch(() => {\n // refreshing token from other request failed, retry without authorization\n return '';\n });\n \n options.headers = {\n ...(options.headers || {}),\n authorization: newAccessToken,\n };\n }\n\n return fetch(uri, options).then(async response => {\n const text = await response.text();\n const json = JSON.parse(text);\n\n // check for unauthorized errors, if not present, just return result\n if (\n isRefreshRequestOptions(options) ||\n !json?.errors ||\n !Array.isArray(json.errors) ||\n !hasUnauthorizedError(json.errors)\n ) {\n return {\n ...response,\n ok: true,\n json: async () =>\n new Promise<unknown>(resolve => {\n resolve(json);\n }),\n text: async () =>\n new Promise<string>(resolve => {\n resolve(text);\n }),\n };\n }\n\n // If unauthorized, refresh token and try again\n if (!refreshingPromise) {\n refreshingPromise = refreshToken()\n .then(async (tokens): Promise<string> => {\n refreshingPromise = null;\n\n if (!tokens?.accessToken) {\n throw new Error('Session expired');\n }\n\n return tokens?.accessToken;\n })\n .catch(() => {\n refreshingPromise = null;\n\n // can't refresh token. logging out\n logout();\n throw new Error('Session expired');\n });\n }\n\n // success or any non-auth error\n return refreshingPromise\n .then(async (newAccessToken: string) => {\n // wait for other request's refreshing query to finish, when retry\n\n return fetch(uri, {\n ...options,\n headers: {\n ...(options.headers || {}),\n authorization: newAccessToken,\n },\n });\n })\n .catch(async () => {\n // refreshing token from other request failed, retry without authorization\n\n return fetch(uri, {\n ...options,\n headers: {\n ...(options.headers || {}),\n authorization: '',\n },\n });\n });\n });\n };\n\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"/** Global singleton for refreshing promise */\nlet refreshingPromise: Promise<string> | null = null;\n\n/** Checks if GraphQl errors has unauthenticated error */\nconst hasUnauthorizedError = (errors: Array<{ code?: ErrorCode }>): boolean =>\n Array.isArray(errors) &&\n errors.some(error => {\n return error.status === 401; // Distinguish unauthorized error here\n });\n\n/** Detects if customFetch is sending refresh request */\nconst isRefreshRequestOptions = (options: RequestInit) => {\n try {\n const body = JSON.parse(options?.body as string);\n return body.operationName === 'RefreshToken';\n } catch (e) {\n return false;\n }\n};\n\n/** fetchWithTokenRefresh is a custom fetch function with token refresh for apollo */\nexport const fetchWithTokenRefresh =\n (\n logout: () => void,\n refreshToken: () => Promise<\n { accessToken: string; refreshToken: string } | undefined\n >,\n ) =>\n async (uri: string, options: RequestInit): Promise<Response> => {\n // already refreshing token, wait for it and then use refreshed token\n // or use empty authorization if refreshing failed\n if (\n !isRefreshRequestOptions(options) &&\n refreshingPromise &&\n (options.headers as Record<string, string>)?.authorization\n ) {\n const newAccessToken = await refreshingPromise\n .catch(() => {\n // refreshing token from other request failed, retry without authorization\n return '';\n });\n \n options.headers = {\n ...(options.headers || {}),\n authorization: newAccessToken,\n };\n }\n\n return fetch(uri, options).then(async response => {\n const text = await response.text();\n const json = JSON.parse(text);\n\n // check for unauthorized errors, if not present, just return result\n if (\n isRefreshRequestOptions(options) ||\n !json?.errors ||\n !Array.isArray(json.errors) ||\n !hasUnauthorizedError(json.errors)\n ) {\n return {\n ...response,\n ok: true,\n json: async () =>\n new Promise<unknown>(resolve => {\n resolve(json);\n }),\n text: async () =>\n new Promise<string>(resolve => {\n resolve(text);\n }),\n };\n }\n\n // If unauthorized, refresh token and try again\n if (!refreshingPromise) {\n refreshingPromise = refreshToken()\n .then(async (tokens): Promise<string> => {\n refreshingPromise = null;\n\n if (!tokens?.accessToken) {\n throw new Error('Session expired');\n }\n\n return tokens?.accessToken;\n })\n .catch(() => {\n refreshingPromise = null;\n\n // can't refresh token. logging out\n logout();\n throw new Error('Session expired');\n });\n }\n\n // success or any non-auth error\n return refreshingPromise\n .then(async (newAccessToken: string) => {\n // wait for other request's refreshing query to finish, when retry\n\n return fetch(uri, {\n ...options,\n headers: {\n ...(options.headers || {}),\n authorization: newAccessToken,\n },\n });\n })\n .catch(async () => {\n // refreshing token from other request failed, retry without authorization\n\n return fetch(uri, {\n ...options,\n headers: {\n ...(options.headers || {}),\n authorization: '',\n },\n });\n });\n });\n };\n\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If your GraphQL api needs token refresh option, you can pass custom fetch function for Apollo Client."}]},{"type":"element","tag":"code","props":{"code":"export const createApolloClient = (\n url: string,\n logout: () => void,\n getAuthorizationData: () => { authorization: string },\n refreshToken: () => Promise<\n { accessToken: string; refreshToken: string } | undefined\n >,\n) =>\n new ApolloClientBase({\n // ...other options\n link: ApolloLink.from([\n // ...other options\n setContext(async (_, { headers }) => {\n return {\n headers: {\n ...headers,\n ...getAuthorizationData(),\n },\n };\n }),\n new HttpLink({\n uri: url,\n fetch: fetchWithTokenRefresh(logout, refreshToken),\n }),\n ]),\n });\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"createApolloClient"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ccde27"},"children":[{"type":"text","value":"url"}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b1d52"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a52df4"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-448587"},"children":[{"type":"text","value":"getAuthorizationData"}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-b4fcca"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-ccde27"},"children":[{"type":"text","value":"authorization"}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b1d52"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"refreshToken"}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d2ac08"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"<"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-ccde27"},"children":[{"type":"text","value":"accessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b1d52"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":"; "}]},{"type":"element","tag":"span","props":{"class":"ct-ccde27"},"children":[{"type":"text","value":"refreshToken"}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b1d52"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b1d52"},"children":[{"type":"text","value":"undefined"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" >,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"=>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"ApolloClientBase"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c48f8"},"children":[{"type":"text","value":"// ...other options"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" link: "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"ApolloLink"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"(["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c48f8"},"children":[{"type":"text","value":"// ...other options"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-448587"},"children":[{"type":"text","value":"setContext"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-b4fcca"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ccde27"},"children":[{"type":"text","value":"_"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":", { "}]},{"type":"element","tag":"span","props":{"class":"ct-ccde27"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" }) "}]},{"type":"element","tag":"span","props":{"class":"ct-b4fcca"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" headers: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"getAuthorizationData"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"(),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"HttpLink"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" uri: "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"url"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" fetch: "}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"fetchWithTokenRefresh"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"refreshToken"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" ]),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" });"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Custom fetch function for this request. You should tune "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"hasUnauthorizedError"}]},{"type":"text","value":" and\n"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"isRefreshRequestOptions"}]},{"type":"text","value":" to match your api."}]},{"type":"element","tag":"code","props":{"code":"/** Global singleton for refreshing promise */\nlet refreshingPromise: Promise<string> | null = null;\n\n/** Checks if GraphQl errors has unauthenticated error */\nconst hasUnauthorizedError = (errors: Array<{ code?: ErrorCode }>): boolean =>\n Array.isArray(errors) &&\n errors.some(error => {\n return error.status === 401; // Distinguish unauthorized error here\n });\n\n/** Detects if customFetch is sending refresh request */\nconst isRefreshRequestOptions = (options: RequestInit) => {\n try {\n const body = JSON.parse(options?.body as string);\n return body.operationName === 'RefreshToken';\n } catch (e) {\n return false;\n }\n};\n\n/** fetchWithTokenRefresh is a custom fetch function with token refresh for apollo */\nexport const fetchWithTokenRefresh =\n (\n logout: () => void,\n refreshToken: () => Promise<\n { accessToken: string; refreshToken: string } | undefined\n >,\n ) =>\n async (uri: string, options: RequestInit): Promise<Response> => {\n // already refreshing token, wait for it and then use refreshed token\n // or use empty authorization if refreshing failed\n if (\n !isRefreshRequestOptions(options) &&\n refreshingPromise &&\n (options.headers as Record<string, string>)?.authorization\n ) {\n const newAccessToken = await refreshingPromise\n .catch(() => {\n // refreshing token from other request failed, retry without authorization\n return '';\n });\n \n options.headers = {\n ...(options.headers || {}),\n authorization: newAccessToken,\n };\n }\n\n return fetch(uri, options).then(async response => {\n const text = await response.text();\n const json = JSON.parse(text);\n\n // check for unauthorized errors, if not present, just return result\n if (\n isRefreshRequestOptions(options) ||\n !json?.errors ||\n !Array.isArray(json.errors) ||\n !hasUnauthorizedError(json.errors)\n ) {\n return {\n ...response,\n ok: true,\n json: async () =>\n new Promise<unknown>(resolve => {\n resolve(json);\n }),\n text: async () =>\n new Promise<string>(resolve => {\n resolve(text);\n }),\n };\n }\n\n // If unauthorized, refresh token and try again\n if (!refreshingPromise) {\n refreshingPromise = refreshToken()\n .then(async (tokens): Promise<string> => {\n refreshingPromise = null;\n\n if (!tokens?.accessToken) {\n throw new Error('Session expired');\n }\n\n return tokens?.accessToken;\n })\n .catch(() => {\n refreshingPromise = null;\n\n // can't refresh token. logging out\n logout();\n throw new Error('Session expired');\n });\n }\n\n // success or any non-auth error\n return refreshingPromise\n .then(async (newAccessToken: string) => {\n // wait for other request's refreshing query to finish, when retry\n\n return fetch(uri, {\n ...options,\n headers: {\n ...(options.headers || {}),\n authorization: newAccessToken,\n },\n });\n })\n .catch(async () => {\n // refreshing token from other request failed, retry without authorization\n\n return fetch(uri, {\n ...options,\n headers: {\n ...(options.headers || {}),\n authorization: '',\n },\n });\n });\n });\n };\n\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c48f8"},"children":[{"type":"text","value":"/** Global singleton for refreshing promise */"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"refreshingPromise"}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d2ac08"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-a52df4"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a52df4"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d14a0c"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c48f8"},"children":[{"type":"text","value":"/** Checks if GraphQl errors has unauthenticated error */"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b4fcca"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-448587"},"children":[{"type":"text","value":"hasUnauthorizedError"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ccde27"},"children":[{"type":"text","value":"errors"}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a8c405"},"children":[{"type":"text","value":"Array"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":"<{ "}]},{"type":"element","tag":"span","props":{"class":"ct-ccde27"},"children":[{"type":"text","value":"code"}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":"?:"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a8c405"},"children":[{"type":"text","value":"ErrorCode"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" }>)"}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b4fcca"},"children":[{"type":"text","value":"=>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a52df4"},"children":[{"type":"text","value":"Array"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"isArray"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"errors"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"&&"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"errors"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"some"}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"status"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"==="}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86c70f"},"children":[{"type":"text","value":"401"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"; "}]},{"type":"element","tag":"span","props":{"class":"ct-0c48f8"},"children":[{"type":"text","value":"// Distinguish unauthorized error here"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c48f8"},"children":[{"type":"text","value":"/** Detects if customFetch is sending refresh request */"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b4fcca"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-448587"},"children":[{"type":"text","value":"isRefreshRequestOptions"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ccde27"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a8c405"},"children":[{"type":"text","value":"RequestInit"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-b4fcca"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"try"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e8360"},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a52df4"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"operationName"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"==="}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-529b21"},"children":[{"type":"text","value":"'RefreshToken'"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"e"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d14a0c"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c48f8"},"children":[{"type":"text","value":"/** fetchWithTokenRefresh is a custom fetch function with token refresh for apollo */"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e8360"},"children":[{"type":"text","value":"fetchWithTokenRefresh"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"="}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":": () "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"refreshToken"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":": () "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" { accessToken: "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"; "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"refreshToken"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d14a0c"},"children":[{"type":"text","value":"undefined"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" ) "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"=>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b4fcca"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ccde27"},"children":[{"type":"text","value":"uri"}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b1d52"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-ccde27"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a8c405"},"children":[{"type":"text","value":"RequestInit"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a8c405"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-a8c405"},"children":[{"type":"text","value":"Response"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-b4fcca"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c48f8"},"children":[{"type":"text","value":"// already refreshing token, wait for it and then use refreshed token"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c48f8"},"children":[{"type":"text","value":"// or use empty authorization if refreshing failed"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"isRefreshRequestOptions"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"&&"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"refreshingPromise"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"&&"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"as"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d2ac08"},"children":[{"type":"text","value":"Record"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-a52df4"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52df4"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":">)?."}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"authorization"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" ) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e8360"},"children":[{"type":"text","value":"newAccessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"refreshingPromise"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c48f8"},"children":[{"type":"text","value":"// refreshing token from other request failed, retry without authorization"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-529b21"},"children":[{"type":"text","value":"''"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" {}),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" authorization: "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"newAccessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"fetch"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"uri"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"then"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"async"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e8360"},"children":[{"type":"text","value":"text"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"response"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"text"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e8360"},"children":[{"type":"text","value":"json"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"="}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c48f8"},"children":[{"type":"text","value":"// check for unauthorized errors, if not present, just return result"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"isRefreshRequestOptions"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"||"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"json"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"errors"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"||"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"hasUnauthorizedError"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"json"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"errors"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" ) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"response"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" ok: "}]},{"type":"element","tag":"span","props":{"class":"ct-d14a0c"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"json"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"=>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b1d52"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-1b1d52"},"children":[{"type":"text","value":"unknown"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":">("}]},{"type":"element","tag":"span","props":{"class":"ct-ccde27"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b4fcca"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"json"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"text"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"=>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b1d52"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-1b1d52"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":">("}]},{"type":"element","tag":"span","props":{"class":"ct-ccde27"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b4fcca"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"text"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c48f8"},"children":[{"type":"text","value":"// If unauthorized, refresh token and try again"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"refreshingPromise"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"refreshingPromise"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"refreshToken"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-448587"},"children":[{"type":"text","value":"then"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-b4fcca"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ccde27"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a8c405"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-1b1d52"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-b4fcca"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"refreshingPromise"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d14a0c"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"accessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a52df4"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-529b21"},"children":[{"type":"text","value":"'Session expired'"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"accessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"refreshingPromise"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d14a0c"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c48f8"},"children":[{"type":"text","value":"// can't refresh token. logging out"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a52df4"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-529b21"},"children":[{"type":"text","value":"'Session expired'"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c48f8"},"children":[{"type":"text","value":"// success or any non-auth error"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"refreshingPromise"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-448587"},"children":[{"type":"text","value":"then"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-b4fcca"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ccde27"},"children":[{"type":"text","value":"newAccessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-9b0fbf"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b1d52"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-b4fcca"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-e3bda2"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c48f8"},"children":[{"type":"text","value":"// wait for other request's refreshing query to finish, when retry"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"fetch"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"uri"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":", {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" headers: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" {}),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" authorization: "}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"newAccessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-5f37b9"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c48f8"},"children":[{"type":"text","value":"// refreshing token from other request failed, retry without authorization"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fffc71"},"children":[{"type":"text","value":"fetch"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"uri"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":", {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" headers: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ad26cc"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-882cc3"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" {}),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" authorization: "}]},{"type":"element","tag":"span","props":{"class":"ct-529b21"},"children":[{"type":"text","value":"''"}]},{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1fdfa4"},"children":[{"type":"text","value":" };"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-529b21{color:#A5D6FF}.ct-6e8360{color:#79C0FF}.ct-86c70f{color:#79C0FF}.ct-a8c405{color:#FFA657}.ct-d14a0c{color:#79C0FF}.ct-ad26cc{color:#C9D1D9}.ct-0c48f8{color:#8B949E}.ct-d2ac08{color:#FFA657}.ct-b4fcca{color:#FF7B72}.ct-448587{color:#D2A8FF}.ct-a52df4{color:#79C0FF}.ct-1b1d52{color:#79C0FF}.ct-9b0fbf{color:#FF7B72}.ct-ccde27{color:#FFA657}.ct-e3bda2{color:#C9D1D9}.ct-fffc71{color:#D2A8FF}.ct-5f37b9{color:#FF7B72}.ct-1fdfa4{color:#C9D1D9}.ct-882cc3{color:#FF7B72}.light .ct-882cc3{color:#859900}.light .ct-1fdfa4{color:#657B83}.light .ct-5f37b9{color:#073642}.light .ct-fffc71{color:#268BD2}.light .ct-e3bda2{color:#657B83}.light .ct-ccde27{color:#657B83}.light .ct-9b0fbf{color:#859900}.light .ct-1b1d52{color:#859900}.light .ct-a52df4{color:#859900}.light .ct-448587{color:#268BD2}.light .ct-b4fcca{color:#073642}.light .ct-d2ac08{color:#268BD2}.light .ct-0c48f8{color:#93A1A1}.light .ct-ad26cc{color:#268BD2}.light .ct-d14a0c{color:#B58900}.light .ct-a8c405{color:#268BD2}.light .ct-86c70f{color:#D33682}.light .ct-6e8360{color:#268BD2}.light .ct-529b21{color:#2AA198}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:GraphQL:Refresh token in Apollo client.md","_source":"content","_file":"GraphQL/Refresh token in Apollo client.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/graphql/refresh-token-in-apollo-client","_dir":"graphql","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Refresh Token In Apollo Client","description":"If your GraphQL api needs token refresh option, you can pass custom fetch function for Apollo Client.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If your GraphQL api needs token refresh option, you can pass custom fetch function for Apollo Client."}]},{"type":"element","tag":"code","props":{"code":"export const createApolloClient = (\n url: string,\n logout: () => void,\n getAuthorizationData: () => { authorization: string },\n refreshToken: () => Promise<\n { accessToken: string; refreshToken: string } | undefined\n >,\n) =>\n new ApolloClientBase({\n // ...other options\n link: ApolloLink.from([\n // ...other options\n setContext(async (_, { headers }) => {\n return {\n headers: {\n ...headers,\n ...getAuthorizationData(),\n },\n };\n }),\n new HttpLink({\n uri: url,\n fetch: fetchWithTokenRefresh(logout, refreshToken),\n }),\n ]),\n });\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export const createApolloClient = (\n url: string,\n logout: () => void,\n getAuthorizationData: () => { authorization: string },\n refreshToken: () => Promise<\n { accessToken: string; refreshToken: string } | undefined\n >,\n) =>\n new ApolloClientBase({\n // ...other options\n link: ApolloLink.from([\n // ...other options\n setContext(async (_, { headers }) => {\n return {\n headers: {\n ...headers,\n ...getAuthorizationData(),\n },\n };\n }),\n new HttpLink({\n uri: url,\n fetch: fetchWithTokenRefresh(logout, refreshToken),\n }),\n ]),\n });\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Custom fetch function for this request. You should tune "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"hasUnauthorizedError"}]},{"type":"text","value":" and\n"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"isRefreshRequestOptions"}]},{"type":"text","value":" to match your api."}]},{"type":"element","tag":"code","props":{"code":"/** Global singleton for refreshing promise */\nlet refreshingPromise: Promise<string> | null = null;\n\n/** Checks if GraphQl errors has unauthenticated error */\nconst hasUnauthorizedError = (errors: Array<{ code?: ErrorCode }>): boolean =>\n Array.isArray(errors) &&\n errors.some(error => {\n return error.status === 401; // Distinguish unauthorized error here\n });\n\n/** Detects if customFetch is sending refresh request */\nconst isRefreshRequestOptions = (options: RequestInit) => {\n try {\n const body = JSON.parse(options?.body as string);\n return body.operationName === 'RefreshToken';\n } catch (e) {\n return false;\n }\n};\n\n/** fetchWithTokenRefresh is a custom fetch function with token refresh for apollo */\nexport const fetchWithTokenRefresh =\n (\n logout: () => void,\n refreshToken: () => Promise<\n { accessToken: string; refreshToken: string } | undefined\n >,\n ) =>\n async (uri: string, options: RequestInit): Promise<Response> => {\n // already refreshing token, wait for it and then use refreshed token\n // or use empty authorization if refreshing failed\n if (\n !isRefreshRequestOptions(options) &&\n refreshingPromise &&\n (options.headers as Record<string, string>)?.authorization\n ) {\n const newAccessToken = await refreshingPromise\n .catch(() => {\n // refreshing token from other request failed, retry without authorization\n return '';\n });\n \n options.headers = {\n ...(options.headers || {}),\n authorization: newAccessToken,\n };\n }\n\n return fetch(uri, options).then(async response => {\n const text = await response.text();\n const json = JSON.parse(text);\n\n // check for unauthorized errors, if not present, just return result\n if (\n isRefreshRequestOptions(options) ||\n !json?.errors ||\n !Array.isArray(json.errors) ||\n !hasUnauthorizedError(json.errors)\n ) {\n return {\n ...response,\n ok: true,\n json: async () =>\n new Promise<unknown>(resolve => {\n resolve(json);\n }),\n text: async () =>\n new Promise<string>(resolve => {\n resolve(text);\n }),\n };\n }\n\n // If unauthorized, refresh token and try again\n if (!refreshingPromise) {\n refreshingPromise = refreshToken()\n .then(async (tokens): Promise<string> => {\n refreshingPromise = null;\n\n if (!tokens?.accessToken) {\n throw new Error('Session expired');\n }\n\n return tokens?.accessToken;\n })\n .catch(() => {\n refreshingPromise = null;\n\n // can't refresh token. logging out\n logout();\n throw new Error('Session expired');\n });\n }\n\n // success or any non-auth error\n return refreshingPromise\n .then(async (newAccessToken: string) => {\n // wait for other request's refreshing query to finish, when retry\n\n return fetch(uri, {\n ...options,\n headers: {\n ...(options.headers || {}),\n authorization: newAccessToken,\n },\n });\n })\n .catch(async () => {\n // refreshing token from other request failed, retry without authorization\n\n return fetch(uri, {\n ...options,\n headers: {\n ...(options.headers || {}),\n authorization: '',\n },\n });\n });\n });\n };\n\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"/** Global singleton for refreshing promise */\nlet refreshingPromise: Promise<string> | null = null;\n\n/** Checks if GraphQl errors has unauthenticated error */\nconst hasUnauthorizedError = (errors: Array<{ code?: ErrorCode }>): boolean =>\n Array.isArray(errors) &&\n errors.some(error => {\n return error.status === 401; // Distinguish unauthorized error here\n });\n\n/** Detects if customFetch is sending refresh request */\nconst isRefreshRequestOptions = (options: RequestInit) => {\n try {\n const body = JSON.parse(options?.body as string);\n return body.operationName === 'RefreshToken';\n } catch (e) {\n return false;\n }\n};\n\n/** fetchWithTokenRefresh is a custom fetch function with token refresh for apollo */\nexport const fetchWithTokenRefresh =\n (\n logout: () => void,\n refreshToken: () => Promise<\n { accessToken: string; refreshToken: string } | undefined\n >,\n ) =>\n async (uri: string, options: RequestInit): Promise<Response> => {\n // already refreshing token, wait for it and then use refreshed token\n // or use empty authorization if refreshing failed\n if (\n !isRefreshRequestOptions(options) &&\n refreshingPromise &&\n (options.headers as Record<string, string>)?.authorization\n ) {\n const newAccessToken = await refreshingPromise\n .catch(() => {\n // refreshing token from other request failed, retry without authorization\n return '';\n });\n \n options.headers = {\n ...(options.headers || {}),\n authorization: newAccessToken,\n };\n }\n\n return fetch(uri, options).then(async response => {\n const text = await response.text();\n const json = JSON.parse(text);\n\n // check for unauthorized errors, if not present, just return result\n if (\n isRefreshRequestOptions(options) ||\n !json?.errors ||\n !Array.isArray(json.errors) ||\n !hasUnauthorizedError(json.errors)\n ) {\n return {\n ...response,\n ok: true,\n json: async () =>\n new Promise<unknown>(resolve => {\n resolve(json);\n }),\n text: async () =>\n new Promise<string>(resolve => {\n resolve(text);\n }),\n };\n }\n\n // If unauthorized, refresh token and try again\n if (!refreshingPromise) {\n refreshingPromise = refreshToken()\n .then(async (tokens): Promise<string> => {\n refreshingPromise = null;\n\n if (!tokens?.accessToken) {\n throw new Error('Session expired');\n }\n\n return tokens?.accessToken;\n })\n .catch(() => {\n refreshingPromise = null;\n\n // can't refresh token. logging out\n logout();\n throw new Error('Session expired');\n });\n }\n\n // success or any non-auth error\n return refreshingPromise\n .then(async (newAccessToken: string) => {\n // wait for other request's refreshing query to finish, when retry\n\n return fetch(uri, {\n ...options,\n headers: {\n ...(options.headers || {}),\n authorization: newAccessToken,\n },\n });\n })\n .catch(async () => {\n // refreshing token from other request failed, retry without authorization\n\n return fetch(uri, {\n ...options,\n headers: {\n ...(options.headers || {}),\n authorization: '',\n },\n });\n });\n });\n };\n\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If your GraphQL api needs token refresh option, you can pass custom fetch function for Apollo Client."}]},{"type":"element","tag":"code","props":{"code":"export const createApolloClient = (\n url: string,\n logout: () => void,\n getAuthorizationData: () => { authorization: string },\n refreshToken: () => Promise<\n { accessToken: string; refreshToken: string } | undefined\n >,\n) =>\n new ApolloClientBase({\n // ...other options\n link: ApolloLink.from([\n // ...other options\n setContext(async (_, { headers }) => {\n return {\n headers: {\n ...headers,\n ...getAuthorizationData(),\n },\n };\n }),\n new HttpLink({\n uri: url,\n fetch: fetchWithTokenRefresh(logout, refreshToken),\n }),\n ]),\n });\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"createApolloClient"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8a16f8"},"children":[{"type":"text","value":"url"}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-51c055"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b5b795"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-95749a"},"children":[{"type":"text","value":"getAuthorizationData"}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-74652a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-8a16f8"},"children":[{"type":"text","value":"authorization"}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-51c055"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"refreshToken"}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-21f98f"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"<"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-8a16f8"},"children":[{"type":"text","value":"accessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-51c055"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":"; "}]},{"type":"element","tag":"span","props":{"class":"ct-8a16f8"},"children":[{"type":"text","value":"refreshToken"}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-51c055"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-51c055"},"children":[{"type":"text","value":"undefined"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" >,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"=>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"ApolloClientBase"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b7707f"},"children":[{"type":"text","value":"// ...other options"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" link: "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"ApolloLink"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"(["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b7707f"},"children":[{"type":"text","value":"// ...other options"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-95749a"},"children":[{"type":"text","value":"setContext"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-74652a"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-8a16f8"},"children":[{"type":"text","value":"_"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":", { "}]},{"type":"element","tag":"span","props":{"class":"ct-8a16f8"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" }) "}]},{"type":"element","tag":"span","props":{"class":"ct-74652a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" headers: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"getAuthorizationData"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"(),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"HttpLink"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" uri: "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"url"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" fetch: "}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"fetchWithTokenRefresh"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"refreshToken"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" ]),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" });"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Custom fetch function for this request. You should tune "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"hasUnauthorizedError"}]},{"type":"text","value":" and\n"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"isRefreshRequestOptions"}]},{"type":"text","value":" to match your api."}]},{"type":"element","tag":"code","props":{"code":"/** Global singleton for refreshing promise */\nlet refreshingPromise: Promise<string> | null = null;\n\n/** Checks if GraphQl errors has unauthenticated error */\nconst hasUnauthorizedError = (errors: Array<{ code?: ErrorCode }>): boolean =>\n Array.isArray(errors) &&\n errors.some(error => {\n return error.status === 401; // Distinguish unauthorized error here\n });\n\n/** Detects if customFetch is sending refresh request */\nconst isRefreshRequestOptions = (options: RequestInit) => {\n try {\n const body = JSON.parse(options?.body as string);\n return body.operationName === 'RefreshToken';\n } catch (e) {\n return false;\n }\n};\n\n/** fetchWithTokenRefresh is a custom fetch function with token refresh for apollo */\nexport const fetchWithTokenRefresh =\n (\n logout: () => void,\n refreshToken: () => Promise<\n { accessToken: string; refreshToken: string } | undefined\n >,\n ) =>\n async (uri: string, options: RequestInit): Promise<Response> => {\n // already refreshing token, wait for it and then use refreshed token\n // or use empty authorization if refreshing failed\n if (\n !isRefreshRequestOptions(options) &&\n refreshingPromise &&\n (options.headers as Record<string, string>)?.authorization\n ) {\n const newAccessToken = await refreshingPromise\n .catch(() => {\n // refreshing token from other request failed, retry without authorization\n return '';\n });\n \n options.headers = {\n ...(options.headers || {}),\n authorization: newAccessToken,\n };\n }\n\n return fetch(uri, options).then(async response => {\n const text = await response.text();\n const json = JSON.parse(text);\n\n // check for unauthorized errors, if not present, just return result\n if (\n isRefreshRequestOptions(options) ||\n !json?.errors ||\n !Array.isArray(json.errors) ||\n !hasUnauthorizedError(json.errors)\n ) {\n return {\n ...response,\n ok: true,\n json: async () =>\n new Promise<unknown>(resolve => {\n resolve(json);\n }),\n text: async () =>\n new Promise<string>(resolve => {\n resolve(text);\n }),\n };\n }\n\n // If unauthorized, refresh token and try again\n if (!refreshingPromise) {\n refreshingPromise = refreshToken()\n .then(async (tokens): Promise<string> => {\n refreshingPromise = null;\n\n if (!tokens?.accessToken) {\n throw new Error('Session expired');\n }\n\n return tokens?.accessToken;\n })\n .catch(() => {\n refreshingPromise = null;\n\n // can't refresh token. logging out\n logout();\n throw new Error('Session expired');\n });\n }\n\n // success or any non-auth error\n return refreshingPromise\n .then(async (newAccessToken: string) => {\n // wait for other request's refreshing query to finish, when retry\n\n return fetch(uri, {\n ...options,\n headers: {\n ...(options.headers || {}),\n authorization: newAccessToken,\n },\n });\n })\n .catch(async () => {\n // refreshing token from other request failed, retry without authorization\n\n return fetch(uri, {\n ...options,\n headers: {\n ...(options.headers || {}),\n authorization: '',\n },\n });\n });\n });\n };\n\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b7707f"},"children":[{"type":"text","value":"/** Global singleton for refreshing promise */"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"refreshingPromise"}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-21f98f"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b5b795"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b5b795"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c909fd"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b7707f"},"children":[{"type":"text","value":"/** Checks if GraphQl errors has unauthenticated error */"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-74652a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-95749a"},"children":[{"type":"text","value":"hasUnauthorizedError"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-8a16f8"},"children":[{"type":"text","value":"errors"}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-998e75"},"children":[{"type":"text","value":"Array"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":"<{ "}]},{"type":"element","tag":"span","props":{"class":"ct-8a16f8"},"children":[{"type":"text","value":"code"}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":"?:"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-998e75"},"children":[{"type":"text","value":"ErrorCode"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" }>)"}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74652a"},"children":[{"type":"text","value":"=>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b5b795"},"children":[{"type":"text","value":"Array"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"isArray"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"errors"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"&&"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"errors"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"some"}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"status"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"==="}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dd29d5"},"children":[{"type":"text","value":"401"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"; "}]},{"type":"element","tag":"span","props":{"class":"ct-b7707f"},"children":[{"type":"text","value":"// Distinguish unauthorized error here"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b7707f"},"children":[{"type":"text","value":"/** Detects if customFetch is sending refresh request */"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-74652a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-95749a"},"children":[{"type":"text","value":"isRefreshRequestOptions"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-8a16f8"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-998e75"},"children":[{"type":"text","value":"RequestInit"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-74652a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"try"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-53ce96"},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b5b795"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"operationName"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"==="}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1451a3"},"children":[{"type":"text","value":"'RefreshToken'"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"e"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c909fd"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b7707f"},"children":[{"type":"text","value":"/** fetchWithTokenRefresh is a custom fetch function with token refresh for apollo */"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-53ce96"},"children":[{"type":"text","value":"fetchWithTokenRefresh"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"="}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":": () "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"refreshToken"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":": () "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" { accessToken: "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"; "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"refreshToken"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c909fd"},"children":[{"type":"text","value":"undefined"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" ) "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"=>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74652a"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-8a16f8"},"children":[{"type":"text","value":"uri"}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-51c055"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-8a16f8"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-998e75"},"children":[{"type":"text","value":"RequestInit"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-998e75"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-998e75"},"children":[{"type":"text","value":"Response"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-74652a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b7707f"},"children":[{"type":"text","value":"// already refreshing token, wait for it and then use refreshed token"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b7707f"},"children":[{"type":"text","value":"// or use empty authorization if refreshing failed"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"isRefreshRequestOptions"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"&&"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"refreshingPromise"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"&&"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"as"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-21f98f"},"children":[{"type":"text","value":"Record"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b5b795"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b5b795"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":">)?."}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"authorization"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" ) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-53ce96"},"children":[{"type":"text","value":"newAccessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"refreshingPromise"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b7707f"},"children":[{"type":"text","value":"// refreshing token from other request failed, retry without authorization"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1451a3"},"children":[{"type":"text","value":"''"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" {}),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" authorization: "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"newAccessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"fetch"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"uri"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"then"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"async"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-53ce96"},"children":[{"type":"text","value":"text"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"response"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"text"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-53ce96"},"children":[{"type":"text","value":"json"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"="}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b7707f"},"children":[{"type":"text","value":"// check for unauthorized errors, if not present, just return result"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"isRefreshRequestOptions"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"||"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"json"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"errors"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"||"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"hasUnauthorizedError"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"json"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"errors"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" ) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"response"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" ok: "}]},{"type":"element","tag":"span","props":{"class":"ct-c909fd"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"json"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"=>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-51c055"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-51c055"},"children":[{"type":"text","value":"unknown"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":">("}]},{"type":"element","tag":"span","props":{"class":"ct-8a16f8"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74652a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"json"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"text"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"=>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-51c055"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-51c055"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":">("}]},{"type":"element","tag":"span","props":{"class":"ct-8a16f8"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74652a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"text"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b7707f"},"children":[{"type":"text","value":"// If unauthorized, refresh token and try again"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"refreshingPromise"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"refreshingPromise"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"refreshToken"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-95749a"},"children":[{"type":"text","value":"then"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-74652a"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-8a16f8"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-998e75"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-51c055"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-74652a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"refreshingPromise"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c909fd"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"accessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b5b795"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-1451a3"},"children":[{"type":"text","value":"'Session expired'"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"accessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"refreshingPromise"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c909fd"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b7707f"},"children":[{"type":"text","value":"// can't refresh token. logging out"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b5b795"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-1451a3"},"children":[{"type":"text","value":"'Session expired'"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b7707f"},"children":[{"type":"text","value":"// success or any non-auth error"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"refreshingPromise"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-95749a"},"children":[{"type":"text","value":"then"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-74652a"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-8a16f8"},"children":[{"type":"text","value":"newAccessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-75053d"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-51c055"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-74652a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-009fff"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b7707f"},"children":[{"type":"text","value":"// wait for other request's refreshing query to finish, when retry"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"fetch"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"uri"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":", {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" headers: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" {}),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" authorization: "}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"newAccessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-341544"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b7707f"},"children":[{"type":"text","value":"// refreshing token from other request failed, retry without authorization"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3df2f"},"children":[{"type":"text","value":"fetch"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"uri"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":", {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" headers: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e74100"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9dab"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" {}),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" authorization: "}]},{"type":"element","tag":"span","props":{"class":"ct-1451a3"},"children":[{"type":"text","value":"''"}]},{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43d640"},"children":[{"type":"text","value":" };"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-1451a3{color:#A5D6FF}.ct-53ce96{color:#79C0FF}.ct-dd29d5{color:#79C0FF}.ct-998e75{color:#FFA657}.ct-c909fd{color:#79C0FF}.ct-e74100{color:#C9D1D9}.ct-b7707f{color:#8B949E}.ct-21f98f{color:#FFA657}.ct-74652a{color:#FF7B72}.ct-95749a{color:#D2A8FF}.ct-b5b795{color:#79C0FF}.ct-51c055{color:#79C0FF}.ct-75053d{color:#FF7B72}.ct-8a16f8{color:#FFA657}.ct-009fff{color:#C9D1D9}.ct-c3df2f{color:#D2A8FF}.ct-341544{color:#FF7B72}.ct-43d640{color:#C9D1D9}.ct-3b9dab{color:#FF7B72}.light .ct-3b9dab{color:#859900}.light .ct-43d640{color:#657B83}.light .ct-341544{color:#073642}.light .ct-c3df2f{color:#268BD2}.light .ct-009fff{color:#657B83}.light .ct-8a16f8{color:#657B83}.light .ct-75053d{color:#859900}.light .ct-51c055{color:#859900}.light .ct-b5b795{color:#859900}.light .ct-95749a{color:#268BD2}.light .ct-74652a{color:#073642}.light .ct-21f98f{color:#268BD2}.light .ct-b7707f{color:#93A1A1}.light .ct-e74100{color:#268BD2}.light .ct-c909fd{color:#B58900}.light .ct-998e75{color:#268BD2}.light .ct-dd29d5{color:#D33682}.light .ct-53ce96{color:#268BD2}.light .ct-1451a3{color:#2AA198}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:GraphQL:Refresh token in Apollo client.md","_source":"content","_file":"GraphQL/Refresh token in Apollo client.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/PwERR4vHv2.json b/docs/api/_content/query/PwERR4vHv2.json
index 62269e3..bbaf8ac 100644
--- a/docs/api/_content/query/PwERR4vHv2.json
+++ b/docs/api/_content/query/PwERR4vHv2.json
@@ -1 +1 @@
-{"_path":"/frontend/react-native/oauth2-login","_dir":"react-native","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"OAuth2 Login","description":"Use #oauth2 login with React-Native","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use #oauth2 login with React-Native"}]},{"type":"element","tag":"h2","props":{"id":"common-oauth2-providers"},"children":[{"type":"text","value":"Common OAuth2 providers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Can be handled by "},{"type":"element","tag":"a","props":{"href":"react-native-app-auth"},"children":[{"type":"text","value":"react-native-app-auth"}]},{"type":"text","value":" by redirecting to url "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"com.yourapp://oauth2provider"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"example-for-google"},"children":[{"type":"text","value":"Example for #Google"}]},{"type":"element","tag":"code","props":{"code":"import { authorize } from 'react-native-app-auth';\n\nconst GOOGLE_OAUTH_CLIENT = '...';\n\n// ...\nconst authState = await authorize({\n issuer: 'https://accounts.google.com',\n clientId: `${GOOGLE_OAUTH_CLIENT}.apps.googleusercontent.com`,\n redirectUrl: `com.yourapp:/oauth2redirect/google`,\n scopes: ['openid', 'profile'],\n dangerouslyAllowInsecureHttpRequests: true,\n});\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { authorize } from 'react-native-app-auth';\n\nconst GOOGLE_OAUTH_CLIENT = '...';\n\n// ...\nconst authState = await authorize({\n issuer: 'https://accounts.google.com',\n clientId: `${GOOGLE_OAUTH_CLIENT}.apps.googleusercontent.com`,\n redirectUrl: `com.yourapp:/oauth2redirect/google`,\n scopes: ['openid', 'profile'],\n dangerouslyAllowInsecureHttpRequests: true,\n});\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"example-for-yandex"},"children":[{"type":"text","value":"Example for #Yandex"}]},{"type":"element","tag":"code","props":{"code":"const YANDEX_OAUTH_CLIENT = '...';\nconst YANDEX_OAUTH_SECRET = '...'; // better hide it somehow\nconst APP_ID = 'com.yourapp';\n\nconst authState = await authorize({\n serviceConfiguration: {\n authorizationEndpoint: `https://oauth.yandex.ru/authorize?response_type=code&client_id=${YANDEX_OAUTH_CLIENT}&redirect_uri=${APP_ID}:/oauth2redirect`,\n // TODO: replace it with your own backend to secure client_secret:\n tokenEndpoint: `https://oauth.yandex.ru/token?grant_type=authorization_code&client_id=${YANDEX_OAUTH_CLIENT}&client_secret=${YANDEX_OAUTH_SECRET}`,\n },\n clientId: YANDEX_OAUTH_CLIENT,\n redirectUrl: `${APP_ID}:/oauth2redirect`,\n scopes: ['login:info', 'login:avatar'],\n dangerouslyAllowInsecureHttpRequests: true,\n});\n\ncallback(authState.accessToken);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const YANDEX_OAUTH_CLIENT = '...';\nconst YANDEX_OAUTH_SECRET = '...'; // better hide it somehow\nconst APP_ID = 'com.yourapp';\n\nconst authState = await authorize({\n serviceConfiguration: {\n authorizationEndpoint: `https://oauth.yandex.ru/authorize?response_type=code&client_id=${YANDEX_OAUTH_CLIENT}&redirect_uri=${APP_ID}:/oauth2redirect`,\n // TODO: replace it with your own backend to secure client_secret:\n tokenEndpoint: `https://oauth.yandex.ru/token?grant_type=authorization_code&client_id=${YANDEX_OAUTH_CLIENT}&client_secret=${YANDEX_OAUTH_SECRET}`,\n },\n clientId: YANDEX_OAUTH_CLIENT,\n redirectUrl: `${APP_ID}:/oauth2redirect`,\n scopes: ['login:info', 'login:avatar'],\n dangerouslyAllowInsecureHttpRequests: true,\n});\n\ncallback(authState.accessToken);\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"apple-id-login"},"children":[{"type":"text","value":"Apple ID login"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/invertase/react-native-apple-authentication","rel":["nofollow"]},"children":[{"type":"text","value":"react-native-apple-authentication"}]},{"type":"text","value":" has its own "},{"type":"element","tag":"a","props":{"href":"https://github.com/invertase/react-native-apple-authentication/tree/main/docs","rel":["nofollow"]},"children":[{"type":"text","value":"documentation"}]},{"type":"text","value":" on setting up OAuth using Apple ID."}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use #oauth2 login with React-Native"}]},{"type":"element","tag":"h2","props":{"id":"common-oauth2-providers"},"children":[{"type":"text","value":"Common OAuth2 providers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Can be handled by "},{"type":"element","tag":"a","props":{"href":"react-native-app-auth"},"children":[{"type":"text","value":"react-native-app-auth"}]},{"type":"text","value":" by redirecting to url "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"com.yourapp://oauth2provider"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"example-for-google"},"children":[{"type":"text","value":"Example for #Google"}]},{"type":"element","tag":"code","props":{"code":"import { authorize } from 'react-native-app-auth';\n\nconst GOOGLE_OAUTH_CLIENT = '...';\n\n// ...\nconst authState = await authorize({\n issuer: 'https://accounts.google.com',\n clientId: `${GOOGLE_OAUTH_CLIENT}.apps.googleusercontent.com`,\n redirectUrl: `com.yourapp:/oauth2redirect/google`,\n scopes: ['openid', 'profile'],\n dangerouslyAllowInsecureHttpRequests: true,\n});\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4522d3"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-beebff"},"children":[{"type":"text","value":"authorize"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-4522d3"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"'react-native-app-auth'"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-069a1d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9bf1e2"},"children":[{"type":"text","value":"GOOGLE_OAUTH_CLIENT"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4522d3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"'...'"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-69c1e5"},"children":[{"type":"text","value":"// ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-069a1d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9bf1e2"},"children":[{"type":"text","value":"authState"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4522d3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4522d3"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c658e4"},"children":[{"type":"text","value":"authorize"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" issuer: "}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"'https://accounts.google.com'"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" clientId: "}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"`${"}]},{"type":"element","tag":"span","props":{"class":"ct-9bf1e2"},"children":[{"type":"text","value":"GOOGLE_OAUTH_CLIENT"}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"}.apps.googleusercontent.com`"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" redirectUrl: "}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"`com.yourapp:/oauth2redirect/google`"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" scopes: ["}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"'openid'"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"'profile'"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":"],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" dangerouslyAllowInsecureHttpRequests: "}]},{"type":"element","tag":"span","props":{"class":"ct-0e6b1b"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":"});"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"example-for-yandex"},"children":[{"type":"text","value":"Example for #Yandex"}]},{"type":"element","tag":"code","props":{"code":"const YANDEX_OAUTH_CLIENT = '...';\nconst YANDEX_OAUTH_SECRET = '...'; // better hide it somehow\nconst APP_ID = 'com.yourapp';\n\nconst authState = await authorize({\n serviceConfiguration: {\n authorizationEndpoint: `https://oauth.yandex.ru/authorize?response_type=code&client_id=${YANDEX_OAUTH_CLIENT}&redirect_uri=${APP_ID}:/oauth2redirect`,\n // TODO: replace it with your own backend to secure client_secret:\n tokenEndpoint: `https://oauth.yandex.ru/token?grant_type=authorization_code&client_id=${YANDEX_OAUTH_CLIENT}&client_secret=${YANDEX_OAUTH_SECRET}`,\n },\n clientId: YANDEX_OAUTH_CLIENT,\n redirectUrl: `${APP_ID}:/oauth2redirect`,\n scopes: ['login:info', 'login:avatar'],\n dangerouslyAllowInsecureHttpRequests: true,\n});\n\ncallback(authState.accessToken);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-069a1d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9bf1e2"},"children":[{"type":"text","value":"YANDEX_OAUTH_CLIENT"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4522d3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"'...'"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-069a1d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9bf1e2"},"children":[{"type":"text","value":"YANDEX_OAUTH_SECRET"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4522d3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"'...'"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":"; "}]},{"type":"element","tag":"span","props":{"class":"ct-69c1e5"},"children":[{"type":"text","value":"// better hide it somehow"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-069a1d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9bf1e2"},"children":[{"type":"text","value":"APP_ID"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4522d3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"'com.yourapp'"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-069a1d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9bf1e2"},"children":[{"type":"text","value":"authState"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4522d3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4522d3"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c658e4"},"children":[{"type":"text","value":"authorize"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" serviceConfiguration: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" authorizationEndpoint: "}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"`https://oauth.yandex.ru/authorize?response_type=code&client_id=${"}]},{"type":"element","tag":"span","props":{"class":"ct-9bf1e2"},"children":[{"type":"text","value":"YANDEX_OAUTH_CLIENT"}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"}&redirect_uri=${"}]},{"type":"element","tag":"span","props":{"class":"ct-9bf1e2"},"children":[{"type":"text","value":"APP_ID"}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"}:/oauth2redirect`"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-69c1e5"},"children":[{"type":"text","value":"// TODO: replace it with your own backend to secure client_secret:"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" tokenEndpoint: "}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"`https://oauth.yandex.ru/token?grant_type=authorization_code&client_id=${"}]},{"type":"element","tag":"span","props":{"class":"ct-9bf1e2"},"children":[{"type":"text","value":"YANDEX_OAUTH_CLIENT"}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"}&client_secret=${"}]},{"type":"element","tag":"span","props":{"class":"ct-9bf1e2"},"children":[{"type":"text","value":"YANDEX_OAUTH_SECRET"}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"}`"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" clientId: "}]},{"type":"element","tag":"span","props":{"class":"ct-9bf1e2"},"children":[{"type":"text","value":"YANDEX_OAUTH_CLIENT"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" redirectUrl: "}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"`${"}]},{"type":"element","tag":"span","props":{"class":"ct-9bf1e2"},"children":[{"type":"text","value":"APP_ID"}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"}:/oauth2redirect`"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" scopes: ["}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"'login:info'"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-bfb93a"},"children":[{"type":"text","value":"'login:avatar'"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":"],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":" dangerouslyAllowInsecureHttpRequests: "}]},{"type":"element","tag":"span","props":{"class":"ct-0e6b1b"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":"});"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c658e4"},"children":[{"type":"text","value":"callback"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-beebff"},"children":[{"type":"text","value":"authState"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-beebff"},"children":[{"type":"text","value":"accessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-62c49c"},"children":[{"type":"text","value":");"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"apple-id-login"},"children":[{"type":"text","value":"Apple ID login"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/invertase/react-native-apple-authentication","rel":["nofollow"]},"children":[{"type":"text","value":"react-native-apple-authentication"}]},{"type":"text","value":" has its own "},{"type":"element","tag":"a","props":{"href":"https://github.com/invertase/react-native-apple-authentication/tree/main/docs","rel":["nofollow"]},"children":[{"type":"text","value":"documentation"}]},{"type":"text","value":" on setting up OAuth using Apple ID."}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-0e6b1b{color:#79C0FF}.ct-c658e4{color:#D2A8FF}.ct-69c1e5{color:#8B949E}.ct-9bf1e2{color:#79C0FF}.ct-069a1d{color:#FF7B72}.ct-bfb93a{color:#A5D6FF}.ct-beebff{color:#C9D1D9}.ct-62c49c{color:#C9D1D9}.ct-4522d3{color:#FF7B72}.light .ct-4522d3{color:#859900}.light .ct-62c49c{color:#657B83}.light .ct-beebff{color:#268BD2}.light .ct-bfb93a{color:#2AA198}.light .ct-069a1d{color:#073642}.light .ct-9bf1e2{color:#268BD2}.light .ct-69c1e5{color:#93A1A1}.light .ct-c658e4{color:#268BD2}.light .ct-0e6b1b{color:#B58900}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"common-oauth2-providers","depth":2,"text":"Common OAuth2 providers","children":[{"id":"example-for-google","depth":3,"text":"Example for #Google"},{"id":"example-for-yandex","depth":3,"text":"Example for #Yandex"}]},{"id":"apple-id-login","depth":2,"text":"Apple ID login"}]}},"_type":"markdown","_id":"content:Frontend:React Native:OAuth2 login.md","_source":"content","_file":"Frontend/React Native/OAuth2 login.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/frontend/react-native/oauth2-login","_dir":"react-native","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"OAuth2 Login","description":"Use #oauth2 login with React-Native","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use #oauth2 login with React-Native"}]},{"type":"element","tag":"h2","props":{"id":"common-oauth2-providers"},"children":[{"type":"text","value":"Common OAuth2 providers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Can be handled by "},{"type":"element","tag":"a","props":{"href":"react-native-app-auth"},"children":[{"type":"text","value":"react-native-app-auth"}]},{"type":"text","value":" by redirecting to url "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"com.yourapp://oauth2provider"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"example-for-google"},"children":[{"type":"text","value":"Example for #Google"}]},{"type":"element","tag":"code","props":{"code":"import { authorize } from 'react-native-app-auth';\n\nconst GOOGLE_OAUTH_CLIENT = '...';\n\n// ...\nconst authState = await authorize({\n issuer: 'https://accounts.google.com',\n clientId: `${GOOGLE_OAUTH_CLIENT}.apps.googleusercontent.com`,\n redirectUrl: `com.yourapp:/oauth2redirect/google`,\n scopes: ['openid', 'profile'],\n dangerouslyAllowInsecureHttpRequests: true,\n});\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { authorize } from 'react-native-app-auth';\n\nconst GOOGLE_OAUTH_CLIENT = '...';\n\n// ...\nconst authState = await authorize({\n issuer: 'https://accounts.google.com',\n clientId: `${GOOGLE_OAUTH_CLIENT}.apps.googleusercontent.com`,\n redirectUrl: `com.yourapp:/oauth2redirect/google`,\n scopes: ['openid', 'profile'],\n dangerouslyAllowInsecureHttpRequests: true,\n});\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"example-for-yandex"},"children":[{"type":"text","value":"Example for #Yandex"}]},{"type":"element","tag":"code","props":{"code":"const YANDEX_OAUTH_CLIENT = '...';\nconst YANDEX_OAUTH_SECRET = '...'; // better hide it somehow\nconst APP_ID = 'com.yourapp';\n\nconst authState = await authorize({\n serviceConfiguration: {\n authorizationEndpoint: `https://oauth.yandex.ru/authorize?response_type=code&client_id=${YANDEX_OAUTH_CLIENT}&redirect_uri=${APP_ID}:/oauth2redirect`,\n // TODO: replace it with your own backend to secure client_secret:\n tokenEndpoint: `https://oauth.yandex.ru/token?grant_type=authorization_code&client_id=${YANDEX_OAUTH_CLIENT}&client_secret=${YANDEX_OAUTH_SECRET}`,\n },\n clientId: YANDEX_OAUTH_CLIENT,\n redirectUrl: `${APP_ID}:/oauth2redirect`,\n scopes: ['login:info', 'login:avatar'],\n dangerouslyAllowInsecureHttpRequests: true,\n});\n\ncallback(authState.accessToken);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const YANDEX_OAUTH_CLIENT = '...';\nconst YANDEX_OAUTH_SECRET = '...'; // better hide it somehow\nconst APP_ID = 'com.yourapp';\n\nconst authState = await authorize({\n serviceConfiguration: {\n authorizationEndpoint: `https://oauth.yandex.ru/authorize?response_type=code&client_id=${YANDEX_OAUTH_CLIENT}&redirect_uri=${APP_ID}:/oauth2redirect`,\n // TODO: replace it with your own backend to secure client_secret:\n tokenEndpoint: `https://oauth.yandex.ru/token?grant_type=authorization_code&client_id=${YANDEX_OAUTH_CLIENT}&client_secret=${YANDEX_OAUTH_SECRET}`,\n },\n clientId: YANDEX_OAUTH_CLIENT,\n redirectUrl: `${APP_ID}:/oauth2redirect`,\n scopes: ['login:info', 'login:avatar'],\n dangerouslyAllowInsecureHttpRequests: true,\n});\n\ncallback(authState.accessToken);\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"apple-id-login"},"children":[{"type":"text","value":"Apple ID login"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/invertase/react-native-apple-authentication","rel":["nofollow"]},"children":[{"type":"text","value":"react-native-apple-authentication"}]},{"type":"text","value":" has its own "},{"type":"element","tag":"a","props":{"href":"https://github.com/invertase/react-native-apple-authentication/tree/main/docs","rel":["nofollow"]},"children":[{"type":"text","value":"documentation"}]},{"type":"text","value":" on setting up OAuth using Apple ID."}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use #oauth2 login with React-Native"}]},{"type":"element","tag":"h2","props":{"id":"common-oauth2-providers"},"children":[{"type":"text","value":"Common OAuth2 providers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Can be handled by "},{"type":"element","tag":"a","props":{"href":"react-native-app-auth"},"children":[{"type":"text","value":"react-native-app-auth"}]},{"type":"text","value":" by redirecting to url "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"com.yourapp://oauth2provider"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"example-for-google"},"children":[{"type":"text","value":"Example for #Google"}]},{"type":"element","tag":"code","props":{"code":"import { authorize } from 'react-native-app-auth';\n\nconst GOOGLE_OAUTH_CLIENT = '...';\n\n// ...\nconst authState = await authorize({\n issuer: 'https://accounts.google.com',\n clientId: `${GOOGLE_OAUTH_CLIENT}.apps.googleusercontent.com`,\n redirectUrl: `com.yourapp:/oauth2redirect/google`,\n scopes: ['openid', 'profile'],\n dangerouslyAllowInsecureHttpRequests: true,\n});\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-db1a1c"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-25a6af"},"children":[{"type":"text","value":"authorize"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-db1a1c"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"'react-native-app-auth'"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bd73c0"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20d3ba"},"children":[{"type":"text","value":"GOOGLE_OAUTH_CLIENT"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-db1a1c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"'...'"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f3a5ee"},"children":[{"type":"text","value":"// ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bd73c0"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20d3ba"},"children":[{"type":"text","value":"authState"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-db1a1c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-db1a1c"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0bd357"},"children":[{"type":"text","value":"authorize"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" issuer: "}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"'https://accounts.google.com'"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" clientId: "}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"`${"}]},{"type":"element","tag":"span","props":{"class":"ct-20d3ba"},"children":[{"type":"text","value":"GOOGLE_OAUTH_CLIENT"}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"}.apps.googleusercontent.com`"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" redirectUrl: "}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"`com.yourapp:/oauth2redirect/google`"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" scopes: ["}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"'openid'"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"'profile'"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":"],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" dangerouslyAllowInsecureHttpRequests: "}]},{"type":"element","tag":"span","props":{"class":"ct-8f934a"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":"});"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"example-for-yandex"},"children":[{"type":"text","value":"Example for #Yandex"}]},{"type":"element","tag":"code","props":{"code":"const YANDEX_OAUTH_CLIENT = '...';\nconst YANDEX_OAUTH_SECRET = '...'; // better hide it somehow\nconst APP_ID = 'com.yourapp';\n\nconst authState = await authorize({\n serviceConfiguration: {\n authorizationEndpoint: `https://oauth.yandex.ru/authorize?response_type=code&client_id=${YANDEX_OAUTH_CLIENT}&redirect_uri=${APP_ID}:/oauth2redirect`,\n // TODO: replace it with your own backend to secure client_secret:\n tokenEndpoint: `https://oauth.yandex.ru/token?grant_type=authorization_code&client_id=${YANDEX_OAUTH_CLIENT}&client_secret=${YANDEX_OAUTH_SECRET}`,\n },\n clientId: YANDEX_OAUTH_CLIENT,\n redirectUrl: `${APP_ID}:/oauth2redirect`,\n scopes: ['login:info', 'login:avatar'],\n dangerouslyAllowInsecureHttpRequests: true,\n});\n\ncallback(authState.accessToken);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bd73c0"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20d3ba"},"children":[{"type":"text","value":"YANDEX_OAUTH_CLIENT"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-db1a1c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"'...'"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bd73c0"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20d3ba"},"children":[{"type":"text","value":"YANDEX_OAUTH_SECRET"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-db1a1c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"'...'"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":"; "}]},{"type":"element","tag":"span","props":{"class":"ct-f3a5ee"},"children":[{"type":"text","value":"// better hide it somehow"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bd73c0"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20d3ba"},"children":[{"type":"text","value":"APP_ID"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-db1a1c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"'com.yourapp'"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bd73c0"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20d3ba"},"children":[{"type":"text","value":"authState"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-db1a1c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-db1a1c"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0bd357"},"children":[{"type":"text","value":"authorize"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" serviceConfiguration: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" authorizationEndpoint: "}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"`https://oauth.yandex.ru/authorize?response_type=code&client_id=${"}]},{"type":"element","tag":"span","props":{"class":"ct-20d3ba"},"children":[{"type":"text","value":"YANDEX_OAUTH_CLIENT"}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"}&redirect_uri=${"}]},{"type":"element","tag":"span","props":{"class":"ct-20d3ba"},"children":[{"type":"text","value":"APP_ID"}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"}:/oauth2redirect`"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f3a5ee"},"children":[{"type":"text","value":"// TODO: replace it with your own backend to secure client_secret:"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" tokenEndpoint: "}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"`https://oauth.yandex.ru/token?grant_type=authorization_code&client_id=${"}]},{"type":"element","tag":"span","props":{"class":"ct-20d3ba"},"children":[{"type":"text","value":"YANDEX_OAUTH_CLIENT"}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"}&client_secret=${"}]},{"type":"element","tag":"span","props":{"class":"ct-20d3ba"},"children":[{"type":"text","value":"YANDEX_OAUTH_SECRET"}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"}`"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" clientId: "}]},{"type":"element","tag":"span","props":{"class":"ct-20d3ba"},"children":[{"type":"text","value":"YANDEX_OAUTH_CLIENT"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" redirectUrl: "}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"`${"}]},{"type":"element","tag":"span","props":{"class":"ct-20d3ba"},"children":[{"type":"text","value":"APP_ID"}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"}:/oauth2redirect`"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" scopes: ["}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"'login:info'"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-d3e5b1"},"children":[{"type":"text","value":"'login:avatar'"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":"],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":" dangerouslyAllowInsecureHttpRequests: "}]},{"type":"element","tag":"span","props":{"class":"ct-8f934a"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":"});"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0bd357"},"children":[{"type":"text","value":"callback"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-25a6af"},"children":[{"type":"text","value":"authState"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-25a6af"},"children":[{"type":"text","value":"accessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-7e4aea"},"children":[{"type":"text","value":");"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"apple-id-login"},"children":[{"type":"text","value":"Apple ID login"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/invertase/react-native-apple-authentication","rel":["nofollow"]},"children":[{"type":"text","value":"react-native-apple-authentication"}]},{"type":"text","value":" has its own "},{"type":"element","tag":"a","props":{"href":"https://github.com/invertase/react-native-apple-authentication/tree/main/docs","rel":["nofollow"]},"children":[{"type":"text","value":"documentation"}]},{"type":"text","value":" on setting up OAuth using Apple ID."}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-8f934a{color:#79C0FF}.ct-0bd357{color:#D2A8FF}.ct-f3a5ee{color:#8B949E}.ct-20d3ba{color:#79C0FF}.ct-bd73c0{color:#FF7B72}.ct-d3e5b1{color:#A5D6FF}.ct-25a6af{color:#C9D1D9}.ct-7e4aea{color:#C9D1D9}.ct-db1a1c{color:#FF7B72}.light .ct-db1a1c{color:#859900}.light .ct-7e4aea{color:#657B83}.light .ct-25a6af{color:#268BD2}.light .ct-d3e5b1{color:#2AA198}.light .ct-bd73c0{color:#073642}.light .ct-20d3ba{color:#268BD2}.light .ct-f3a5ee{color:#93A1A1}.light .ct-0bd357{color:#268BD2}.light .ct-8f934a{color:#B58900}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"common-oauth2-providers","depth":2,"text":"Common OAuth2 providers","children":[{"id":"example-for-google","depth":3,"text":"Example for #Google"},{"id":"example-for-yandex","depth":3,"text":"Example for #Yandex"}]},{"id":"apple-id-login","depth":2,"text":"Apple ID login"}]}},"_type":"markdown","_id":"content:Frontend:React Native:OAuth2 login.md","_source":"content","_file":"Frontend/React Native/OAuth2 login.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/QqziXmSF9l.json b/docs/api/_content/query/QqziXmSF9l.json
index a6482b1..37256d2 100644
--- a/docs/api/_content/query/QqziXmSF9l.json
+++ b/docs/api/_content/query/QqziXmSF9l.json
@@ -1 +1 @@
-{"_path":"/frontend/react-native/useful-comands","_dir":"react-native","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Useful Comands","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"show-android-logcat"},"children":[{"type":"text","value":"Show android logcat"}]},{"type":"element","tag":"code","props":{"code":"adb logcat com.application:I \"*:S\"\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"adb logcat com.application:I \"*:S\"\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"get-apks-sha-256"},"children":[{"type":"text","value":"Get .apk's SHA-256"}]},{"type":"element","tag":"code","props":{"code":"keytool -printcert -jarfile \"$1\"\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"keytool -printcert -jarfile \"$1\"\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"assemble-debug-release-on-android"},"children":[{"type":"text","value":"Assemble debug release on Android"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Packages release with bundled resources."}]},{"type":"element","tag":"code","props":{"code":"npx react-native bundle \\\n --platform android \\\n --dev false \\\n --entry-file index.js \\\n --bundle-output android/app/src/main/assets/index.android.bundle \\\n --assets-dest android/app/src/main/res/\n\ncd android && ./gradlew assembleDebug\n\n# do your stuff\n\n./gradlew clean\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npx react-native bundle \\\n --platform android \\\n --dev false \\\n --entry-file index.js \\\n --bundle-output android/app/src/main/assets/index.android.bundle \\\n --assets-dest android/app/src/main/res/\n\ncd android && ./gradlew assembleDebug\n\n# do your stuff\n\n./gradlew clean\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"send-release-to-android-device"},"children":[{"type":"text","value":"Send release to Android device"}]},{"type":"element","tag":"code","props":{"code":"cd ./android \\\n && ./gradlew assembleRelease \\\n && adb install ./app/build/outputs/apk/release/app-release.apk\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"cd ./android \\\n && ./gradlew assembleRelease \\\n && adb install ./app/build/outputs/apk/release/app-release.apk\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"deep-links"},"children":[{"type":"text","value":"Deep links"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://zarah.dev/2022/02/08/android12-deeplinks.html","rel":["nofollow"]},"children":[{"type":"text","value":"https://zarah.dev/2022/02/08/android12-deeplinks.html"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://developer.android.com/training/app-links/verify-site-associations#invoke-domain-verification","rel":["nofollow"]},"children":[{"type":"text","value":"https://developer.android.com/training/app-links/verify-site-associations#invoke-domain-verification"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://digitalassetlinks.googleapis.com/v1/statements:list?source.web.site=https://miin.ru&relation=delegate_permission/common.handle_all_urls","rel":["nofollow"]},"children":[{"type":"text","value":"https://digitalassetlinks.googleapis.com/v1/statements:list?source.web.site=https://miin.ru&relation=delegate_permission/common.handle_all_urls"}]}]}]},{"type":"element","tag":"h3","props":{"id":"open-deep-links"},"children":[{"type":"text","value":"Open deep links"}]},{"type":"element","tag":"code","props":{"code":"# ios \nxcrun simctl openurl booted $1\n\n# android\nadb shell am start -W -a android.intent.action.VIEW -d $1 \\\ncom.application\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"# ios \nxcrun simctl openurl booted $1\n\n# android\nadb shell am start -W -a android.intent.action.VIEW -d $1 \\\ncom.application\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"reverify-links-on-android"},"children":[{"type":"text","value":"Reverify links on Android"}]},{"type":"element","tag":"code","props":{"code":"PACKAGE=\"com.application\"\n\nadb shell pm set-app-links --package $PACKAGE 0 all && \\\n adb shell pm verify-app-links --re-verify $PACKAGE\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"PACKAGE=\"com.application\"\n\nadb shell pm set-app-links --package $PACKAGE 0 all && \\\n adb shell pm verify-app-links --re-verify $PACKAGE\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"show-android-logcat"},"children":[{"type":"text","value":"Show android logcat"}]},{"type":"element","tag":"code","props":{"code":"adb logcat com.application:I \"*:S\"\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":"adb logcat com.application:I "}]},{"type":"element","tag":"span","props":{"class":"ct-c1ff0c"},"children":[{"type":"text","value":"\"*:S\""}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"get-apks-sha-256"},"children":[{"type":"text","value":"Get .apk's SHA-256"}]},{"type":"element","tag":"code","props":{"code":"keytool -printcert -jarfile \"$1\"\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":"keytool -printcert -jarfile "}]},{"type":"element","tag":"span","props":{"class":"ct-c1ff0c"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-251e83"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-b7705e"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-c1ff0c"},"children":[{"type":"text","value":"\""}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"assemble-debug-release-on-android"},"children":[{"type":"text","value":"Assemble debug release on Android"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Packages release with bundled resources."}]},{"type":"element","tag":"code","props":{"code":"npx react-native bundle \\\n --platform android \\\n --dev false \\\n --entry-file index.js \\\n --bundle-output android/app/src/main/assets/index.android.bundle \\\n --assets-dest android/app/src/main/res/\n\ncd android && ./gradlew assembleDebug\n\n# do your stuff\n\n./gradlew clean\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":"npx react-native bundle \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":" --platform android \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":" --dev "}]},{"type":"element","tag":"span","props":{"class":"ct-46f2e1"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":" \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":" --entry-file index.js \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":" --bundle-output android/app/src/main/assets/index.android.bundle \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":" --assets-dest android/app/src/main/res/"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-46f2e1"},"children":[{"type":"text","value":"cd"}]},{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":" android "}]},{"type":"element","tag":"span","props":{"class":"ct-ea093a"},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":" ./gradlew assembleDebug"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1fb94"},"children":[{"type":"text","value":"# do your stuff"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":"./gradlew clean"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"send-release-to-android-device"},"children":[{"type":"text","value":"Send release to Android device"}]},{"type":"element","tag":"code","props":{"code":"cd ./android \\\n && ./gradlew assembleRelease \\\n && adb install ./app/build/outputs/apk/release/app-release.apk\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-46f2e1"},"children":[{"type":"text","value":"cd"}]},{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":" ./android \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea093a"},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":" ./gradlew assembleRelease \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea093a"},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":" adb install ./app/build/outputs/apk/release/app-release.apk"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"deep-links"},"children":[{"type":"text","value":"Deep links"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://zarah.dev/2022/02/08/android12-deeplinks.html","rel":["nofollow"]},"children":[{"type":"text","value":"https://zarah.dev/2022/02/08/android12-deeplinks.html"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://developer.android.com/training/app-links/verify-site-associations#invoke-domain-verification","rel":["nofollow"]},"children":[{"type":"text","value":"https://developer.android.com/training/app-links/verify-site-associations#invoke-domain-verification"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://digitalassetlinks.googleapis.com/v1/statements:list?source.web.site=https://miin.ru&relation=delegate_permission/common.handle_all_urls","rel":["nofollow"]},"children":[{"type":"text","value":"https://digitalassetlinks.googleapis.com/v1/statements:list?source.web.site=https://miin.ru&relation=delegate_permission/common.handle_all_urls"}]}]}]},{"type":"element","tag":"h3","props":{"id":"open-deep-links"},"children":[{"type":"text","value":"Open deep links"}]},{"type":"element","tag":"code","props":{"code":"# ios \nxcrun simctl openurl booted $1\n\n# android\nadb shell am start -W -a android.intent.action.VIEW -d $1 \\\ncom.application\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1fb94"},"children":[{"type":"text","value":"# ios "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":"xcrun simctl openurl booted "}]},{"type":"element","tag":"span","props":{"class":"ct-251e83"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-b7705e"},"children":[{"type":"text","value":"1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1fb94"},"children":[{"type":"text","value":"# android"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":"adb shell am start -W -a android.intent.action.VIEW -d "}]},{"type":"element","tag":"span","props":{"class":"ct-251e83"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-b7705e"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":" \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":"com.application"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"reverify-links-on-android"},"children":[{"type":"text","value":"Reverify links on Android"}]},{"type":"element","tag":"code","props":{"code":"PACKAGE=\"com.application\"\n\nadb shell pm set-app-links --package $PACKAGE 0 all && \\\n adb shell pm verify-app-links --re-verify $PACKAGE\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":"PACKAGE="}]},{"type":"element","tag":"span","props":{"class":"ct-c1ff0c"},"children":[{"type":"text","value":"\"com.application\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":"adb shell pm set-app-links --package "}]},{"type":"element","tag":"span","props":{"class":"ct-251e83"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-b7705e"},"children":[{"type":"text","value":"PACKAGE"}]},{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":" 0 all "}]},{"type":"element","tag":"span","props":{"class":"ct-ea093a"},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":" \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65fc6f"},"children":[{"type":"text","value":" adb shell pm verify-app-links --re-verify "}]},{"type":"element","tag":"span","props":{"class":"ct-251e83"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-b7705e"},"children":[{"type":"text","value":"PACKAGE"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-b1fb94{color:#8B949E}.ct-ea093a{color:#FF7B72}.ct-46f2e1{color:#79C0FF}.ct-b7705e{color:#C9D1D9}.ct-251e83{color:#C9D1D9}.ct-c1ff0c{color:#A5D6FF}.ct-65fc6f{color:#C9D1D9}.light .ct-65fc6f{color:#657B83}.light .ct-c1ff0c{color:#2AA198}.light .ct-251e83{color:#859900}.light .ct-b7705e{color:#268BD2}.light .ct-46f2e1{color:#268BD2}.light .ct-ea093a{color:#859900}.light .ct-b1fb94{color:#93A1A1}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"show-android-logcat","depth":2,"text":"Show android logcat"},{"id":"get-apks-sha-256","depth":2,"text":"Get .apk's SHA-256"},{"id":"assemble-debug-release-on-android","depth":2,"text":"Assemble debug release on Android"},{"id":"send-release-to-android-device","depth":2,"text":"Send release to Android device"},{"id":"deep-links","depth":2,"text":"Deep links","children":[{"id":"open-deep-links","depth":3,"text":"Open deep links"},{"id":"reverify-links-on-android","depth":3,"text":"Reverify links on Android"}]}]}},"_type":"markdown","_id":"content:Frontend:React Native:Useful comands.md","_source":"content","_file":"Frontend/React Native/Useful comands.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/frontend/react-native/useful-comands","_dir":"react-native","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Useful Comands","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"show-android-logcat"},"children":[{"type":"text","value":"Show android logcat"}]},{"type":"element","tag":"code","props":{"code":"adb logcat com.application:I \"*:S\"\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"adb logcat com.application:I \"*:S\"\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"get-apks-sha-256"},"children":[{"type":"text","value":"Get .apk's SHA-256"}]},{"type":"element","tag":"code","props":{"code":"keytool -printcert -jarfile \"$1\"\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"keytool -printcert -jarfile \"$1\"\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"assemble-debug-release-on-android"},"children":[{"type":"text","value":"Assemble debug release on Android"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Packages release with bundled resources."}]},{"type":"element","tag":"code","props":{"code":"npx react-native bundle \\\n --platform android \\\n --dev false \\\n --entry-file index.js \\\n --bundle-output android/app/src/main/assets/index.android.bundle \\\n --assets-dest android/app/src/main/res/\n\ncd android && ./gradlew assembleDebug\n\n# do your stuff\n\n./gradlew clean\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npx react-native bundle \\\n --platform android \\\n --dev false \\\n --entry-file index.js \\\n --bundle-output android/app/src/main/assets/index.android.bundle \\\n --assets-dest android/app/src/main/res/\n\ncd android && ./gradlew assembleDebug\n\n# do your stuff\n\n./gradlew clean\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"send-release-to-android-device"},"children":[{"type":"text","value":"Send release to Android device"}]},{"type":"element","tag":"code","props":{"code":"cd ./android \\\n && ./gradlew assembleRelease \\\n && adb install ./app/build/outputs/apk/release/app-release.apk\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"cd ./android \\\n && ./gradlew assembleRelease \\\n && adb install ./app/build/outputs/apk/release/app-release.apk\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"deep-links"},"children":[{"type":"text","value":"Deep links"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://zarah.dev/2022/02/08/android12-deeplinks.html","rel":["nofollow"]},"children":[{"type":"text","value":"https://zarah.dev/2022/02/08/android12-deeplinks.html"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://developer.android.com/training/app-links/verify-site-associations#invoke-domain-verification","rel":["nofollow"]},"children":[{"type":"text","value":"https://developer.android.com/training/app-links/verify-site-associations#invoke-domain-verification"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://digitalassetlinks.googleapis.com/v1/statements:list?source.web.site=https://miin.ru&relation=delegate_permission/common.handle_all_urls","rel":["nofollow"]},"children":[{"type":"text","value":"https://digitalassetlinks.googleapis.com/v1/statements:list?source.web.site=https://miin.ru&relation=delegate_permission/common.handle_all_urls"}]}]}]},{"type":"element","tag":"h3","props":{"id":"open-deep-links"},"children":[{"type":"text","value":"Open deep links"}]},{"type":"element","tag":"code","props":{"code":"# ios \nxcrun simctl openurl booted $1\n\n# android\nadb shell am start -W -a android.intent.action.VIEW -d $1 \\\ncom.application\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"# ios \nxcrun simctl openurl booted $1\n\n# android\nadb shell am start -W -a android.intent.action.VIEW -d $1 \\\ncom.application\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"reverify-links-on-android"},"children":[{"type":"text","value":"Reverify links on Android"}]},{"type":"element","tag":"code","props":{"code":"PACKAGE=\"com.application\"\n\nadb shell pm set-app-links --package $PACKAGE 0 all && \\\n adb shell pm verify-app-links --re-verify $PACKAGE\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"PACKAGE=\"com.application\"\n\nadb shell pm set-app-links --package $PACKAGE 0 all && \\\n adb shell pm verify-app-links --re-verify $PACKAGE\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"show-android-logcat"},"children":[{"type":"text","value":"Show android logcat"}]},{"type":"element","tag":"code","props":{"code":"adb logcat com.application:I \"*:S\"\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":"adb logcat com.application:I "}]},{"type":"element","tag":"span","props":{"class":"ct-586fb5"},"children":[{"type":"text","value":"\"*:S\""}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"get-apks-sha-256"},"children":[{"type":"text","value":"Get .apk's SHA-256"}]},{"type":"element","tag":"code","props":{"code":"keytool -printcert -jarfile \"$1\"\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":"keytool -printcert -jarfile "}]},{"type":"element","tag":"span","props":{"class":"ct-586fb5"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-29bf92"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-0b6eba"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-586fb5"},"children":[{"type":"text","value":"\""}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"assemble-debug-release-on-android"},"children":[{"type":"text","value":"Assemble debug release on Android"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Packages release with bundled resources."}]},{"type":"element","tag":"code","props":{"code":"npx react-native bundle \\\n --platform android \\\n --dev false \\\n --entry-file index.js \\\n --bundle-output android/app/src/main/assets/index.android.bundle \\\n --assets-dest android/app/src/main/res/\n\ncd android && ./gradlew assembleDebug\n\n# do your stuff\n\n./gradlew clean\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":"npx react-native bundle \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":" --platform android \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":" --dev "}]},{"type":"element","tag":"span","props":{"class":"ct-3ff336"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":" \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":" --entry-file index.js \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":" --bundle-output android/app/src/main/assets/index.android.bundle \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":" --assets-dest android/app/src/main/res/"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3ff336"},"children":[{"type":"text","value":"cd"}]},{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":" android "}]},{"type":"element","tag":"span","props":{"class":"ct-de0bb9"},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":" ./gradlew assembleDebug"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-22d421"},"children":[{"type":"text","value":"# do your stuff"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":"./gradlew clean"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"send-release-to-android-device"},"children":[{"type":"text","value":"Send release to Android device"}]},{"type":"element","tag":"code","props":{"code":"cd ./android \\\n && ./gradlew assembleRelease \\\n && adb install ./app/build/outputs/apk/release/app-release.apk\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3ff336"},"children":[{"type":"text","value":"cd"}]},{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":" ./android \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de0bb9"},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":" ./gradlew assembleRelease \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de0bb9"},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":" adb install ./app/build/outputs/apk/release/app-release.apk"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"deep-links"},"children":[{"type":"text","value":"Deep links"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://zarah.dev/2022/02/08/android12-deeplinks.html","rel":["nofollow"]},"children":[{"type":"text","value":"https://zarah.dev/2022/02/08/android12-deeplinks.html"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://developer.android.com/training/app-links/verify-site-associations#invoke-domain-verification","rel":["nofollow"]},"children":[{"type":"text","value":"https://developer.android.com/training/app-links/verify-site-associations#invoke-domain-verification"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://digitalassetlinks.googleapis.com/v1/statements:list?source.web.site=https://miin.ru&relation=delegate_permission/common.handle_all_urls","rel":["nofollow"]},"children":[{"type":"text","value":"https://digitalassetlinks.googleapis.com/v1/statements:list?source.web.site=https://miin.ru&relation=delegate_permission/common.handle_all_urls"}]}]}]},{"type":"element","tag":"h3","props":{"id":"open-deep-links"},"children":[{"type":"text","value":"Open deep links"}]},{"type":"element","tag":"code","props":{"code":"# ios \nxcrun simctl openurl booted $1\n\n# android\nadb shell am start -W -a android.intent.action.VIEW -d $1 \\\ncom.application\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-22d421"},"children":[{"type":"text","value":"# ios "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":"xcrun simctl openurl booted "}]},{"type":"element","tag":"span","props":{"class":"ct-29bf92"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-0b6eba"},"children":[{"type":"text","value":"1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-22d421"},"children":[{"type":"text","value":"# android"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":"adb shell am start -W -a android.intent.action.VIEW -d "}]},{"type":"element","tag":"span","props":{"class":"ct-29bf92"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-0b6eba"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":" \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":"com.application"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"reverify-links-on-android"},"children":[{"type":"text","value":"Reverify links on Android"}]},{"type":"element","tag":"code","props":{"code":"PACKAGE=\"com.application\"\n\nadb shell pm set-app-links --package $PACKAGE 0 all && \\\n adb shell pm verify-app-links --re-verify $PACKAGE\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":"PACKAGE="}]},{"type":"element","tag":"span","props":{"class":"ct-586fb5"},"children":[{"type":"text","value":"\"com.application\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":"adb shell pm set-app-links --package "}]},{"type":"element","tag":"span","props":{"class":"ct-29bf92"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-0b6eba"},"children":[{"type":"text","value":"PACKAGE"}]},{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":" 0 all "}]},{"type":"element","tag":"span","props":{"class":"ct-de0bb9"},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":" \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-506d69"},"children":[{"type":"text","value":" adb shell pm verify-app-links --re-verify "}]},{"type":"element","tag":"span","props":{"class":"ct-29bf92"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-0b6eba"},"children":[{"type":"text","value":"PACKAGE"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-22d421{color:#8B949E}.ct-de0bb9{color:#FF7B72}.ct-3ff336{color:#79C0FF}.ct-0b6eba{color:#C9D1D9}.ct-29bf92{color:#C9D1D9}.ct-586fb5{color:#A5D6FF}.ct-506d69{color:#C9D1D9}.light .ct-506d69{color:#657B83}.light .ct-586fb5{color:#2AA198}.light .ct-29bf92{color:#859900}.light .ct-0b6eba{color:#268BD2}.light .ct-3ff336{color:#268BD2}.light .ct-de0bb9{color:#859900}.light .ct-22d421{color:#93A1A1}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"show-android-logcat","depth":2,"text":"Show android logcat"},{"id":"get-apks-sha-256","depth":2,"text":"Get .apk's SHA-256"},{"id":"assemble-debug-release-on-android","depth":2,"text":"Assemble debug release on Android"},{"id":"send-release-to-android-device","depth":2,"text":"Send release to Android device"},{"id":"deep-links","depth":2,"text":"Deep links","children":[{"id":"open-deep-links","depth":3,"text":"Open deep links"},{"id":"reverify-links-on-android","depth":3,"text":"Reverify links on Android"}]}]}},"_type":"markdown","_id":"content:Frontend:React Native:Useful comands.md","_source":"content","_file":"Frontend/React Native/Useful comands.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/R77EQlrPEJ.json b/docs/api/_content/query/R77EQlrPEJ.json
index c07c448..c5931a3 100644
--- a/docs/api/_content/query/R77EQlrPEJ.json
+++ b/docs/api/_content/query/R77EQlrPEJ.json
@@ -1 +1 @@
-{"_path":"/frontend/webgl/basics-of-webgl-(drawing-a-cube)","_dir":"webgl","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Basics Of WebGL (Drawing A Cube)","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"helpful-documentation"},"children":[{"type":"text","value":"Helpful documentation"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://open.gl/","rel":["nofollow"]},"children":[{"type":"text","value":"https://open.gl/"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"This youtube series: "},{"type":"element","tag":"a","props":{"href":"https://www.youtube.com/watch?v=kB0ZVUrI4Aw","rel":["nofollow"]},"children":[{"type":"text","value":"Basics"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://www.youtube.com/watch?v=3yLL9ADo-ko","rel":["nofollow"]},"children":[{"type":"text","value":"Making a cube, applying transformations"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://www.youtube.com/watch?v=hpnd11doMgc&t=52s","rel":["nofollow"]},"children":[{"type":"text","value":"Texturing"}]}]}]},{"type":"element","tag":"h2","props":{"id":"vertices-and-indices"},"children":[{"type":"text","value":"Vertices and Indices"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Vertices"}]},{"type":"text","value":" are points with specific coordinates "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{x,y,z}"}]},{"type":"text","value":" in a 3D-space. We can build any figure by connecting "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"vertices"}]},{"type":"text","value":" in triangles with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"indices"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"shaders"},"children":[{"type":"text","value":"Shaders"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Shaders are functions, written in C, which describe how to draw and color polygons to Graphic Card."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" describe "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"vertice"}]},{"type":"text","value":" positions, so Graphic Card can position them by connecting with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"indices"}]},{"type":"text","value":" and project to 2D canvas."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":" describe the way polygons should be colored by assigning colors to Vertices or by applying textures to polygons."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Shaders can have parameters passed from Javascript code ("},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"uniforms"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varyings"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"attributes"}]},{"type":"text","value":"). "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":" can also access data from "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" (that ones called "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varyings"}]},{"type":"text","value":")."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"https://open.gl/media/img/c2_pipeline.png"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"program"},"children":[{"type":"text","value":"Program"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Program, as far as I understand, is a scene, that's described with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Vertices"}]},{"type":"text","value":", "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Indices"}]},{"type":"text","value":", specific "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"applying-transformations"},"children":[{"type":"text","value":"Applying transformations"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The best way to change positions inside "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" or color in "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":" is to pass parameters (also called "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"uniforms"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varyings"}]},{"type":"text","value":")."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read about that at "},{"type":"element","tag":"a","props":{"href":"https://open.gl/transformations","rel":["nofollow"]},"children":[{"type":"text","value":"open.gl"}]},{"type":"text","value":" and at "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"source-code-with-explanations"},"children":[{"type":"text","value":"Source code with explanations"}]},{"type":"element","tag":"code","props":{"code":"// render-a-cube.ts\nimport { createShader } from \"./create-shader\";\nimport vxShader from \"./vertex.glsl?raw\";\nimport fgShader from \"./fragment.glsl?raw\";\n\nconst canvas = document.getElementyId('view');\nconst ctx = canvas.getRenderingContext('webgl');\n\n// should be put inside requestAnimationFrame\ndrawCube(ctx)(); \n\nfunction drawCube (\n gl: WebGL2RenderingContext, \n width: number,\n height: number\n) {\n // Initializing viewport\n gl.viewport(0, 0, width, height);\n gl.clearColor(0, 0, 0, 0);\n gl.clear(gl.COLOR_BUFFER_BIT);\n\n const prg = gl.createProgram();\n if (!prg) {\n throw new Error(\"Can't init programm\");\n }\n\n // Setting up VERTEX and FRAGMENT shaders\n const vx = createShader(gl, vxShader, gl.VERTEX_SHADER);\n gl.attachShader(prg, vx);\n const fx = createShader(gl, fgShader, gl.FRAGMENT_SHADER);\n gl.attachShader(prg, fx);\n gl.linkProgram(prg);\n if (!gl.getProgramParameter(prg, gl.LINK_STATUS)) {\n throw new Error(\"Could not initialise shaders\");\n }\n\n // Cube's vertices Array<[x,y,z]>, 8 items\n const vertices = [\n -1, -1, -1, // 0\n 1, -1, -1, // 1\n 1, 1, -1, // 2\n -1, 1, -1, // 3\n -1, -1, 1, // 4\n 1, -1, 1, // 5\n 1, 1, 1, // 6\n -1, 1, 1, // 7\n ];\n\n // indices, that form triangles, that form cube sides\n const indices = [\n 2, 1, 0, // side 0 (first triangle)\n 0, 3, 2, // side 0 (second triangle)\n 0, 4, 7, // side 1 (first triangle)\n 7, 3, 0, // side 1 (second triangle)\n 0, 1, 5, // ...\n 5, 4, 0, \n 1, 2, 6, \n 6, 5, 1, \n 2, 3, 7, \n 7, 6, 2, \n 4, 5, 6, \n 6, 7, 4,\n ];\n\n // createe a vertex buffer and bind vertices to it\n const squareVertexBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);\n gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);\n gl.bindBuffer(gl.ARRAY_BUFFER, null);\n\n // create a vertex buffer and bind indices to it\n const squareIndexBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, squareIndexBuffer);\n gl.bufferData(\n gl.ELEMENT_ARRAY_BUFFER,\n new Uint16Array(indices),\n gl.STATIC_DRAW\n );\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);\n\n // initial drawing\n gl.clearColor(0.0, 0.0, 0.0, 0.0);\n gl.enable(gl.DEPTH_TEST);\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n gl.viewport(0, 0, width, height);\n\n // bind squareVertexBuffer as vertex positions buffer\n gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);\n \n // send every 3 bytes from squareVertexBuffer as {x,y,z} for each verticle\n gl.vertexAttribPointer(\n gl.getAttribLocation(prg, \"aVertexPosition\"), \n 3, // 3 bytes-long\n gl.FLOAT,\n false, // don't normalize (int to float)\n 0, \n 0\n );\n // send vertice buffer as `aVertexPosition` attribute inside vertex shader\n gl.enableVertexAttribArray(\n gl.getAttribLocation(prg, \"aVertexPosition\")\n );\n\n let i = 0;\n let speed = 0.01;\n\n // that's the main rendering callback\n return () => {\n gl.useProgram(prg);\n\n const scale = i * 0.25 + 0.25;\n\n // used for scaling inside Vertex Shader\n gl.uniform1f(gl.getUniformLocation(prg, \"slide\"), scale);\n // GL Screen is square, so we need to fix it's aspect ration\n gl.uniform1f(gl.getUniformLocation(prg, \"aspect\"), height / width);\n\n gl.bindBuffer(\n gl.ELEMENT_ARRAY_BUFFER, \n squareIndexBuffer\n );\n \n gl.drawElements(\n gl.TRIANGLES, \n indices.length, \n gl.UNSIGNED_SHORT, \n 0,\n );\n\n if (i > 1 || i < 0) {\n speed = -speed;\n }\n\n i += speed;\n };\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// render-a-cube.ts\nimport { createShader } from \"./create-shader\";\nimport vxShader from \"./vertex.glsl?raw\";\nimport fgShader from \"./fragment.glsl?raw\";\n\nconst canvas = document.getElementyId('view');\nconst ctx = canvas.getRenderingContext('webgl');\n\n// should be put inside requestAnimationFrame\ndrawCube(ctx)(); \n\nfunction drawCube (\n gl: WebGL2RenderingContext, \n width: number,\n height: number\n) {\n // Initializing viewport\n gl.viewport(0, 0, width, height);\n gl.clearColor(0, 0, 0, 0);\n gl.clear(gl.COLOR_BUFFER_BIT);\n\n const prg = gl.createProgram();\n if (!prg) {\n throw new Error(\"Can't init programm\");\n }\n\n // Setting up VERTEX and FRAGMENT shaders\n const vx = createShader(gl, vxShader, gl.VERTEX_SHADER);\n gl.attachShader(prg, vx);\n const fx = createShader(gl, fgShader, gl.FRAGMENT_SHADER);\n gl.attachShader(prg, fx);\n gl.linkProgram(prg);\n if (!gl.getProgramParameter(prg, gl.LINK_STATUS)) {\n throw new Error(\"Could not initialise shaders\");\n }\n\n // Cube's vertices Array<[x,y,z]>, 8 items\n const vertices = [\n -1, -1, -1, // 0\n 1, -1, -1, // 1\n 1, 1, -1, // 2\n -1, 1, -1, // 3\n -1, -1, 1, // 4\n 1, -1, 1, // 5\n 1, 1, 1, // 6\n -1, 1, 1, // 7\n ];\n\n // indices, that form triangles, that form cube sides\n const indices = [\n 2, 1, 0, // side 0 (first triangle)\n 0, 3, 2, // side 0 (second triangle)\n 0, 4, 7, // side 1 (first triangle)\n 7, 3, 0, // side 1 (second triangle)\n 0, 1, 5, // ...\n 5, 4, 0, \n 1, 2, 6, \n 6, 5, 1, \n 2, 3, 7, \n 7, 6, 2, \n 4, 5, 6, \n 6, 7, 4,\n ];\n\n // createe a vertex buffer and bind vertices to it\n const squareVertexBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);\n gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);\n gl.bindBuffer(gl.ARRAY_BUFFER, null);\n\n // create a vertex buffer and bind indices to it\n const squareIndexBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, squareIndexBuffer);\n gl.bufferData(\n gl.ELEMENT_ARRAY_BUFFER,\n new Uint16Array(indices),\n gl.STATIC_DRAW\n );\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);\n\n // initial drawing\n gl.clearColor(0.0, 0.0, 0.0, 0.0);\n gl.enable(gl.DEPTH_TEST);\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n gl.viewport(0, 0, width, height);\n\n // bind squareVertexBuffer as vertex positions buffer\n gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);\n \n // send every 3 bytes from squareVertexBuffer as {x,y,z} for each verticle\n gl.vertexAttribPointer(\n gl.getAttribLocation(prg, \"aVertexPosition\"), \n 3, // 3 bytes-long\n gl.FLOAT,\n false, // don't normalize (int to float)\n 0, \n 0\n );\n // send vertice buffer as `aVertexPosition` attribute inside vertex shader\n gl.enableVertexAttribArray(\n gl.getAttribLocation(prg, \"aVertexPosition\")\n );\n\n let i = 0;\n let speed = 0.01;\n\n // that's the main rendering callback\n return () => {\n gl.useProgram(prg);\n\n const scale = i * 0.25 + 0.25;\n\n // used for scaling inside Vertex Shader\n gl.uniform1f(gl.getUniformLocation(prg, \"slide\"), scale);\n // GL Screen is square, so we need to fix it's aspect ration\n gl.uniform1f(gl.getUniformLocation(prg, \"aspect\"), height / width);\n\n gl.bindBuffer(\n gl.ELEMENT_ARRAY_BUFFER, \n squareIndexBuffer\n );\n \n gl.drawElements(\n gl.TRIANGLES, \n indices.length, \n gl.UNSIGNED_SHORT, \n 0,\n );\n\n if (i > 1 || i < 0) {\n speed = -speed;\n }\n\n i += speed;\n };\n};\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"shader-compiler"},"children":[{"type":"text","value":"Shader compiler"}]},{"type":"element","tag":"code","props":{"code":"// create-shader.ts\nexport const createShader = (\n gl: WebGL2RenderingContext,\n sourceCode: string,\n type: number, // gl.VERTEX_SHADER or gl.FRAGMENT_SHADER\n) => {\n const shader = gl.createShader(type);\n if (!shader) {\n throw new Error(`Can't init shader`);\n }\n\n gl.shaderSource(shader, sourceCode);\n gl.compileShader(shader);\n\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n const info = gl.getShaderInfoLog(shader);\n throw `Could not compile WebGL program. \\n\\n${info}`;\n }\n\n return shader;\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// create-shader.ts\nexport const createShader = (\n gl: WebGL2RenderingContext,\n sourceCode: string,\n type: number, // gl.VERTEX_SHADER or gl.FRAGMENT_SHADER\n) => {\n const shader = gl.createShader(type);\n if (!shader) {\n throw new Error(`Can't init shader`);\n }\n\n gl.shaderSource(shader, sourceCode);\n gl.compileShader(shader);\n\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n const info = gl.getShaderInfoLog(shader);\n throw `Could not compile WebGL program. \\n\\n${info}`;\n }\n\n return shader;\n};\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"vertex-shader-example"},"children":[{"type":"text","value":"Vertex Shader Example"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read more at "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]}]},{"type":"element","tag":"code","props":{"code":"// current vertice position {x,y,z,w}\nattribute vec4 aVertexPosition;\n// final vertice position with all transformations applied,\n// that will be passed to Fragment Shader\nvarying vec4 v_positionWithOffset;\n// Parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(){\n // float array of 4 elements, same as [slide,slide,slide,1]\n vec4 scale=vec4(vec3(slide),1);\n // float array of 4 elements, same as [aspect,1,1,1]\n vec4 aspectRatioFix=vec4(aspect,vec3(1));\n // vertice position, multiplied with matrices of scale and aspect ratio\n gl_Position=aVertexPosition*scale*aspectRatioFix,\n // vertice offset, that will be passed to fragment shader\n v_positionWithOffset=gl_Position+vec4(1,1,1,1);\n}\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// current vertice position {x,y,z,w}\nattribute vec4 aVertexPosition;\n// final vertice position with all transformations applied,\n// that will be passed to Fragment Shader\nvarying vec4 v_positionWithOffset;\n// Parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(){\n // float array of 4 elements, same as [slide,slide,slide,1]\n vec4 scale=vec4(vec3(slide),1);\n // float array of 4 elements, same as [aspect,1,1,1]\n vec4 aspectRatioFix=vec4(aspect,vec3(1));\n // vertice position, multiplied with matrices of scale and aspect ratio\n gl_Position=aVertexPosition*scale*aspectRatioFix,\n // vertice offset, that will be passed to fragment shader\n v_positionWithOffset=gl_Position+vec4(1,1,1,1);\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"fragment-shader-example"},"children":[{"type":"text","value":"Fragment Shader Example"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read more at "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"precision highp float;\n\n// parameter from Vertex Shader\nvarying vec4 v_positionWithOffset;\n\nvoid main(void){\n // color, attached to current verticle {r,g,b,alpha}\n // same a[\n // v_positionWithOffset.x,\n // v_positionWithOffset.y, \n // v_positionWithOffset.z, \n // 1\n // ]\n gl_FragColor=vec4(v_positionWithOffset.xyz,1);\n}\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"precision highp float;\n\n// parameter from Vertex Shader\nvarying vec4 v_positionWithOffset;\n\nvoid main(void){\n // color, attached to current verticle {r,g,b,alpha}\n // same a[\n // v_positionWithOffset.x,\n // v_positionWithOffset.y, \n // v_positionWithOffset.z, \n // 1\n // ]\n gl_FragColor=vec4(v_positionWithOffset.xyz,1);\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"helpful-documentation"},"children":[{"type":"text","value":"Helpful documentation"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://open.gl/","rel":["nofollow"]},"children":[{"type":"text","value":"https://open.gl/"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"This youtube series: "},{"type":"element","tag":"a","props":{"href":"https://www.youtube.com/watch?v=kB0ZVUrI4Aw","rel":["nofollow"]},"children":[{"type":"text","value":"Basics"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://www.youtube.com/watch?v=3yLL9ADo-ko","rel":["nofollow"]},"children":[{"type":"text","value":"Making a cube, applying transformations"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://www.youtube.com/watch?v=hpnd11doMgc&t=52s","rel":["nofollow"]},"children":[{"type":"text","value":"Texturing"}]}]}]},{"type":"element","tag":"h2","props":{"id":"vertices-and-indices"},"children":[{"type":"text","value":"Vertices and Indices"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Vertices"}]},{"type":"text","value":" are points with specific coordinates "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{x,y,z}"}]},{"type":"text","value":" in a 3D-space. We can build any figure by connecting "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"vertices"}]},{"type":"text","value":" in triangles with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"indices"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"shaders"},"children":[{"type":"text","value":"Shaders"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Shaders are functions, written in C, which describe how to draw and color polygons to Graphic Card."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" describe "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"vertice"}]},{"type":"text","value":" positions, so Graphic Card can position them by connecting with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"indices"}]},{"type":"text","value":" and project to 2D canvas."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":" describe the way polygons should be colored by assigning colors to Vertices or by applying textures to polygons."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Shaders can have parameters passed from Javascript code ("},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"uniforms"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varyings"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"attributes"}]},{"type":"text","value":"). "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":" can also access data from "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" (that ones called "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varyings"}]},{"type":"text","value":")."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"https://open.gl/media/img/c2_pipeline.png"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"program"},"children":[{"type":"text","value":"Program"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Program, as far as I understand, is a scene, that's described with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Vertices"}]},{"type":"text","value":", "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Indices"}]},{"type":"text","value":", specific "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"applying-transformations"},"children":[{"type":"text","value":"Applying transformations"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The best way to change positions inside "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" or color in "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":" is to pass parameters (also called "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"uniforms"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varyings"}]},{"type":"text","value":")."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read about that at "},{"type":"element","tag":"a","props":{"href":"https://open.gl/transformations","rel":["nofollow"]},"children":[{"type":"text","value":"open.gl"}]},{"type":"text","value":" and at "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"source-code-with-explanations"},"children":[{"type":"text","value":"Source code with explanations"}]},{"type":"element","tag":"code","props":{"code":"// render-a-cube.ts\nimport { createShader } from \"./create-shader\";\nimport vxShader from \"./vertex.glsl?raw\";\nimport fgShader from \"./fragment.glsl?raw\";\n\nconst canvas = document.getElementyId('view');\nconst ctx = canvas.getRenderingContext('webgl');\n\n// should be put inside requestAnimationFrame\ndrawCube(ctx)(); \n\nfunction drawCube (\n gl: WebGL2RenderingContext, \n width: number,\n height: number\n) {\n // Initializing viewport\n gl.viewport(0, 0, width, height);\n gl.clearColor(0, 0, 0, 0);\n gl.clear(gl.COLOR_BUFFER_BIT);\n\n const prg = gl.createProgram();\n if (!prg) {\n throw new Error(\"Can't init programm\");\n }\n\n // Setting up VERTEX and FRAGMENT shaders\n const vx = createShader(gl, vxShader, gl.VERTEX_SHADER);\n gl.attachShader(prg, vx);\n const fx = createShader(gl, fgShader, gl.FRAGMENT_SHADER);\n gl.attachShader(prg, fx);\n gl.linkProgram(prg);\n if (!gl.getProgramParameter(prg, gl.LINK_STATUS)) {\n throw new Error(\"Could not initialise shaders\");\n }\n\n // Cube's vertices Array<[x,y,z]>, 8 items\n const vertices = [\n -1, -1, -1, // 0\n 1, -1, -1, // 1\n 1, 1, -1, // 2\n -1, 1, -1, // 3\n -1, -1, 1, // 4\n 1, -1, 1, // 5\n 1, 1, 1, // 6\n -1, 1, 1, // 7\n ];\n\n // indices, that form triangles, that form cube sides\n const indices = [\n 2, 1, 0, // side 0 (first triangle)\n 0, 3, 2, // side 0 (second triangle)\n 0, 4, 7, // side 1 (first triangle)\n 7, 3, 0, // side 1 (second triangle)\n 0, 1, 5, // ...\n 5, 4, 0, \n 1, 2, 6, \n 6, 5, 1, \n 2, 3, 7, \n 7, 6, 2, \n 4, 5, 6, \n 6, 7, 4,\n ];\n\n // createe a vertex buffer and bind vertices to it\n const squareVertexBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);\n gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);\n gl.bindBuffer(gl.ARRAY_BUFFER, null);\n\n // create a vertex buffer and bind indices to it\n const squareIndexBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, squareIndexBuffer);\n gl.bufferData(\n gl.ELEMENT_ARRAY_BUFFER,\n new Uint16Array(indices),\n gl.STATIC_DRAW\n );\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);\n\n // initial drawing\n gl.clearColor(0.0, 0.0, 0.0, 0.0);\n gl.enable(gl.DEPTH_TEST);\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n gl.viewport(0, 0, width, height);\n\n // bind squareVertexBuffer as vertex positions buffer\n gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);\n \n // send every 3 bytes from squareVertexBuffer as {x,y,z} for each verticle\n gl.vertexAttribPointer(\n gl.getAttribLocation(prg, \"aVertexPosition\"), \n 3, // 3 bytes-long\n gl.FLOAT,\n false, // don't normalize (int to float)\n 0, \n 0\n );\n // send vertice buffer as `aVertexPosition` attribute inside vertex shader\n gl.enableVertexAttribArray(\n gl.getAttribLocation(prg, \"aVertexPosition\")\n );\n\n let i = 0;\n let speed = 0.01;\n\n // that's the main rendering callback\n return () => {\n gl.useProgram(prg);\n\n const scale = i * 0.25 + 0.25;\n\n // used for scaling inside Vertex Shader\n gl.uniform1f(gl.getUniformLocation(prg, \"slide\"), scale);\n // GL Screen is square, so we need to fix it's aspect ration\n gl.uniform1f(gl.getUniformLocation(prg, \"aspect\"), height / width);\n\n gl.bindBuffer(\n gl.ELEMENT_ARRAY_BUFFER, \n squareIndexBuffer\n );\n \n gl.drawElements(\n gl.TRIANGLES, \n indices.length, \n gl.UNSIGNED_SHORT, \n 0,\n );\n\n if (i > 1 || i < 0) {\n speed = -speed;\n }\n\n i += speed;\n };\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// render-a-cube.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"createShader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2e53f1"},"children":[{"type":"text","value":"\"./create-shader\""}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"vxShader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2e53f1"},"children":[{"type":"text","value":"\"./vertex.glsl?raw\""}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"fgShader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2e53f1"},"children":[{"type":"text","value":"\"./fragment.glsl?raw\""}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"document"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"getElementyId"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2e53f1"},"children":[{"type":"text","value":"'view'"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"getRenderingContext"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2e53f1"},"children":[{"type":"text","value":"'webgl'"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// should be put inside requestAnimationFrame"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"drawCube"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":")(); "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"drawCube"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8eb92a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6cdf8d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-80e1b8"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8eb92a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-feb2dc"},"children":[{"type":"text","value":"WebGL2RenderingContext"}]},{"type":"element","tag":"span","props":{"class":"ct-8eb92a"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8eb92a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6cdf8d"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-80e1b8"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8eb92a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-08630c"},"children":[{"type":"text","value":"number"}]},{"type":"element","tag":"span","props":{"class":"ct-8eb92a"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8eb92a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6cdf8d"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-80e1b8"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8eb92a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-08630c"},"children":[{"type":"text","value":"number"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// Initializing viewport"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"viewport"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"clearColor"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"clear"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"COLOR_BUFFER_BIT"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"createProgram"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-65a97f"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2e53f1"},"children":[{"type":"text","value":"\"Can't init programm\""}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// Setting up VERTEX and FRAGMENT shaders"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"vx"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"createShader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"vxShader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"VERTEX_SHADER"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"attachShader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"vx"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"fx"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"createShader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"fgShader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"FRAGMENT_SHADER"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"attachShader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"fx"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"linkProgram"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"getProgramParameter"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"LINK_STATUS"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":")) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-65a97f"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2e53f1"},"children":[{"type":"text","value":"\"Could not initialise shaders\""}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// Cube's vertices Array<[x,y,z]>, 8 items"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"vertices"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// 0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// 1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// 2"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// 3"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// 4"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// 5"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// 6"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// 7"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" ];"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// indices, that form triangles, that form cube sides"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"indices"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// side 0 (first triangle)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// side 0 (second triangle)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"7"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// side 1 (first triangle)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"7"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// side 1 (second triangle)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"6"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"6"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"7"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"7"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"6"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"6"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"6"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"7"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" ];"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// createe a vertex buffer and bind vertices to it"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"squareVertexBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"createBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"bindBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"squareVertexBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"bufferData"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-65a97f"},"children":[{"type":"text","value":"Float32Array"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"vertices"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"), "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"STATIC_DRAW"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"bindBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-336e7b"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// create a vertex buffer and bind indices to it"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"squareIndexBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"createBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"bindBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"ELEMENT_ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"squareIndexBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"bufferData"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"ELEMENT_ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-65a97f"},"children":[{"type":"text","value":"Uint16Array"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"indices"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"STATIC_DRAW"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"bindBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"ELEMENT_ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-336e7b"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// initial drawing"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"clearColor"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0.0"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0.0"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0.0"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"enable"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"DEPTH_TEST"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"clear"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"COLOR_BUFFER_BIT"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"DEPTH_BUFFER_BIT"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"viewport"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// bind squareVertexBuffer as vertex positions buffer"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"bindBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"squareVertexBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// send every 3 bytes from squareVertexBuffer as {x,y,z} for each verticle"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"vertexAttribPointer"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"getAttribLocation"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-2e53f1"},"children":[{"type":"text","value":"\"aVertexPosition\""}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"), "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// 3 bytes-long"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"FLOAT"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-336e7b"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// don't normalize (int to float)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// send vertice buffer as `aVertexPosition` attribute inside vertex shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"enableVertexAttribArray"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"getAttribLocation"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-2e53f1"},"children":[{"type":"text","value":"\"aVertexPosition\""}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"speed"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0.01"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// that's the main rendering callback"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"useProgram"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"scale"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0.25"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// used for scaling inside Vertex Shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"uniform1f"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"getUniformLocation"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-2e53f1"},"children":[{"type":"text","value":"\"slide\""}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"), "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"scale"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// GL Screen is square, so we need to fix it's aspect ration"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"uniform1f"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"getUniformLocation"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-2e53f1"},"children":[{"type":"text","value":"\"aspect\""}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"), "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"bindBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"ELEMENT_ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"squareIndexBuffer"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"drawElements"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"TRIANGLES"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"indices"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"UNSIGNED_SHORT"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"speed"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"speed"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"+="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"speed"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"shader-compiler"},"children":[{"type":"text","value":"Shader compiler"}]},{"type":"element","tag":"code","props":{"code":"// create-shader.ts\nexport const createShader = (\n gl: WebGL2RenderingContext,\n sourceCode: string,\n type: number, // gl.VERTEX_SHADER or gl.FRAGMENT_SHADER\n) => {\n const shader = gl.createShader(type);\n if (!shader) {\n throw new Error(`Can't init shader`);\n }\n\n gl.shaderSource(shader, sourceCode);\n gl.compileShader(shader);\n\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n const info = gl.getShaderInfoLog(shader);\n throw `Could not compile WebGL program. \\n\\n${info}`;\n }\n\n return shader;\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// create-shader.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"createShader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8eb92a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6cdf8d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-80e1b8"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8eb92a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-feb2dc"},"children":[{"type":"text","value":"WebGL2RenderingContext"}]},{"type":"element","tag":"span","props":{"class":"ct-8eb92a"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8eb92a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6cdf8d"},"children":[{"type":"text","value":"sourceCode"}]},{"type":"element","tag":"span","props":{"class":"ct-80e1b8"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8eb92a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-08630c"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-8eb92a"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8eb92a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6cdf8d"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-80e1b8"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8eb92a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-08630c"},"children":[{"type":"text","value":"number"}]},{"type":"element","tag":"span","props":{"class":"ct-8eb92a"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b23b27"},"children":[{"type":"text","value":"// gl.VERTEX_SHADER or gl.FRAGMENT_SHADER"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"createShader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-65a97f"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2e53f1"},"children":[{"type":"text","value":"`Can't init shader`"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"shaderSource"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"sourceCode"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"compileShader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"getShaderParameter"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"COMPILE_STATUS"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":")) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b321a9"},"children":[{"type":"text","value":"info"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"getShaderInfoLog"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2e53f1"},"children":[{"type":"text","value":"`Could not compile WebGL program. "}]},{"type":"element","tag":"span","props":{"class":"ct-814214"},"children":[{"type":"text","value":"\\n\\n"}]},{"type":"element","tag":"span","props":{"class":"ct-2e53f1"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"info"}]},{"type":"element","tag":"span","props":{"class":"ct-2e53f1"},"children":[{"type":"text","value":"}`"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"vertex-shader-example"},"children":[{"type":"text","value":"Vertex Shader Example"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read more at "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]}]},{"type":"element","tag":"code","props":{"code":"// current vertice position {x,y,z,w}\nattribute vec4 aVertexPosition;\n// final vertice position with all transformations applied,\n// that will be passed to Fragment Shader\nvarying vec4 v_positionWithOffset;\n// Parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(){\n // float array of 4 elements, same as [slide,slide,slide,1]\n vec4 scale=vec4(vec3(slide),1);\n // float array of 4 elements, same as [aspect,1,1,1]\n vec4 aspectRatioFix=vec4(aspect,vec3(1));\n // vertice position, multiplied with matrices of scale and aspect ratio\n gl_Position=aVertexPosition*scale*aspectRatioFix,\n // vertice offset, that will be passed to fragment shader\n v_positionWithOffset=gl_Position+vec4(1,1,1,1);\n}\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// current vertice position {x,y,z,w}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"attribute vec4 aVertexPosition;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// final vertice position with all transformations applied,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// that will be passed to Fragment Shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"varying vec4 v_positionWithOffset;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// Parameters passed from Javascript loop"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"uniform "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" slide;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"uniform "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" aspect;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"main"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"(){"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// float array of 4 elements, same as [slide,slide,slide,1]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" vec4 scale"}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"vec3"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"(slide),"}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// float array of 4 elements, same as [aspect,1,1,1]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" vec4 aspectRatioFix"}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"(aspect,"}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"vec3"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"));"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// vertice position, multiplied with matrices of scale and aspect ratio"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" gl_Position"}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"aVertexPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"scale"}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"aspectRatioFix,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// vertice offset, that will be passed to fragment shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" v_positionWithOffset"}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"gl_Position"}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"fragment-shader-example"},"children":[{"type":"text","value":"Fragment Shader Example"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read more at "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"precision highp float;\n\n// parameter from Vertex Shader\nvarying vec4 v_positionWithOffset;\n\nvoid main(void){\n // color, attached to current verticle {r,g,b,alpha}\n // same a[\n // v_positionWithOffset.x,\n // v_positionWithOffset.y, \n // v_positionWithOffset.z, \n // 1\n // ]\n gl_FragColor=vec4(v_positionWithOffset.xyz,1);\n}\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"precision highp "}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// parameter from Vertex Shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"varying vec4 v_positionWithOffset;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"main"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-20ed3f"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"){"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// color, attached to current verticle {r,g,b,alpha}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// same a["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// v_positionWithOffset.x,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// v_positionWithOffset.y, "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// v_positionWithOffset.z, "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// 1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-337041"},"children":[{"type":"text","value":"// ]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":" gl_FragColor"}]},{"type":"element","tag":"span","props":{"class":"ct-0c8b20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2909a9"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"v_positionWithOffset"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a7c351"},"children":[{"type":"text","value":"xyz"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-b68eea"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c11ea"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-814214{color:#79C0FF}.ct-b23b27{color:#8B949E}.ct-336e7b{color:#79C0FF}.ct-65a97f{color:#79C0FF}.ct-b68eea{color:#79C0FF}.ct-08630c{color:#79C0FF}.ct-feb2dc{color:#FFA657}.ct-80e1b8{color:#FF7B72}.ct-6cdf8d{color:#FFA657}.ct-8eb92a{color:#C9D1D9}.ct-2909a9{color:#D2A8FF}.ct-b321a9{color:#79C0FF}.ct-20ed3f{color:#FF7B72}.ct-2e53f1{color:#A5D6FF}.ct-a7c351{color:#C9D1D9}.ct-6c11ea{color:#C9D1D9}.ct-0c8b20{color:#FF7B72}.ct-337041{color:#8B949E}.light .ct-337041{color:#93A1A1}.light .ct-0c8b20{color:#859900}.light .ct-6c11ea{color:#657B83}.light .ct-a7c351{color:#268BD2}.light .ct-2e53f1{color:#2AA198}.light .ct-20ed3f{color:#073642}.light .ct-b321a9{color:#268BD2}.light .ct-2909a9{color:#268BD2}.light .ct-8eb92a{color:#657B83}.light .ct-6cdf8d{color:#657B83}.light .ct-80e1b8{color:#859900}.light .ct-feb2dc{color:#268BD2}.light .ct-08630c{color:#859900}.light .ct-b68eea{color:#D33682}.light .ct-65a97f{color:#859900}.light .ct-336e7b{color:#B58900}.light .ct-b23b27{color:#93A1A1}.light .ct-814214{color:#CB4B16}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"helpful-documentation","depth":2,"text":"Helpful documentation"},{"id":"vertices-and-indices","depth":2,"text":"Vertices and Indices"},{"id":"shaders","depth":2,"text":"Shaders"},{"id":"program","depth":2,"text":"Program"},{"id":"applying-transformations","depth":2,"text":"Applying transformations"},{"id":"source-code-with-explanations","depth":2,"text":"Source code with explanations"},{"id":"shader-compiler","depth":2,"text":"Shader compiler"},{"id":"vertex-shader-example","depth":2,"text":"Vertex Shader Example"},{"id":"fragment-shader-example","depth":2,"text":"Fragment Shader Example"}]}},"_type":"markdown","_id":"content:Frontend:WebGL:Basics of WebGL (Drawing a Cube).md","_source":"content","_file":"Frontend/WebGL/Basics of WebGL (Drawing a Cube).md","_extension":"md"}
\ No newline at end of file
+{"_path":"/frontend/webgl/basics-of-webgl-(drawing-a-cube)","_dir":"webgl","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Basics Of WebGL (Drawing A Cube)","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"helpful-documentation"},"children":[{"type":"text","value":"Helpful documentation"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://open.gl/","rel":["nofollow"]},"children":[{"type":"text","value":"https://open.gl/"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"This youtube series: "},{"type":"element","tag":"a","props":{"href":"https://www.youtube.com/watch?v=kB0ZVUrI4Aw","rel":["nofollow"]},"children":[{"type":"text","value":"Basics"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://www.youtube.com/watch?v=3yLL9ADo-ko","rel":["nofollow"]},"children":[{"type":"text","value":"Making a cube, applying transformations"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://www.youtube.com/watch?v=hpnd11doMgc&t=52s","rel":["nofollow"]},"children":[{"type":"text","value":"Texturing"}]}]}]},{"type":"element","tag":"h2","props":{"id":"vertices-and-indices"},"children":[{"type":"text","value":"Vertices and Indices"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Vertices"}]},{"type":"text","value":" are points with specific coordinates "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{x,y,z}"}]},{"type":"text","value":" in a 3D-space. We can build any figure by connecting "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"vertices"}]},{"type":"text","value":" in triangles with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"indices"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"shaders"},"children":[{"type":"text","value":"Shaders"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Shaders are functions, written in C, which describe how to draw and color polygons to Graphic Card."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" describe "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"vertice"}]},{"type":"text","value":" positions, so Graphic Card can position them by connecting with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"indices"}]},{"type":"text","value":" and project to 2D canvas."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":" describe the way polygons should be colored by assigning colors to Vertices or by applying textures to polygons."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Shaders can have parameters passed from Javascript code ("},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"uniforms"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varyings"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"attributes"}]},{"type":"text","value":"). "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":" can also access data from "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" (that ones called "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varyings"}]},{"type":"text","value":")."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"https://open.gl/media/img/c2_pipeline.png"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"program"},"children":[{"type":"text","value":"Program"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Program, as far as I understand, is a scene, that's described with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Vertices"}]},{"type":"text","value":", "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Indices"}]},{"type":"text","value":", specific "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"applying-transformations"},"children":[{"type":"text","value":"Applying transformations"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The best way to change positions inside "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" or color in "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":" is to pass parameters (also called "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"uniforms"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varyings"}]},{"type":"text","value":")."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read about that at "},{"type":"element","tag":"a","props":{"href":"https://open.gl/transformations","rel":["nofollow"]},"children":[{"type":"text","value":"open.gl"}]},{"type":"text","value":" and at "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"source-code-with-explanations"},"children":[{"type":"text","value":"Source code with explanations"}]},{"type":"element","tag":"code","props":{"code":"// render-a-cube.ts\nimport { createShader } from \"./create-shader\";\nimport vxShader from \"./vertex.glsl?raw\";\nimport fgShader from \"./fragment.glsl?raw\";\n\nconst canvas = document.getElementyId('view');\nconst ctx = canvas.getRenderingContext('webgl');\n\n// should be put inside requestAnimationFrame\ndrawCube(ctx)(); \n\nfunction drawCube (\n gl: WebGL2RenderingContext, \n width: number,\n height: number\n) {\n // Initializing viewport\n gl.viewport(0, 0, width, height);\n gl.clearColor(0, 0, 0, 0);\n gl.clear(gl.COLOR_BUFFER_BIT);\n\n const prg = gl.createProgram();\n if (!prg) {\n throw new Error(\"Can't init programm\");\n }\n\n // Setting up VERTEX and FRAGMENT shaders\n const vx = createShader(gl, vxShader, gl.VERTEX_SHADER);\n gl.attachShader(prg, vx);\n const fx = createShader(gl, fgShader, gl.FRAGMENT_SHADER);\n gl.attachShader(prg, fx);\n gl.linkProgram(prg);\n if (!gl.getProgramParameter(prg, gl.LINK_STATUS)) {\n throw new Error(\"Could not initialise shaders\");\n }\n\n // Cube's vertices Array<[x,y,z]>, 8 items\n const vertices = [\n -1, -1, -1, // 0\n 1, -1, -1, // 1\n 1, 1, -1, // 2\n -1, 1, -1, // 3\n -1, -1, 1, // 4\n 1, -1, 1, // 5\n 1, 1, 1, // 6\n -1, 1, 1, // 7\n ];\n\n // indices, that form triangles, that form cube sides\n const indices = [\n 2, 1, 0, // side 0 (first triangle)\n 0, 3, 2, // side 0 (second triangle)\n 0, 4, 7, // side 1 (first triangle)\n 7, 3, 0, // side 1 (second triangle)\n 0, 1, 5, // ...\n 5, 4, 0, \n 1, 2, 6, \n 6, 5, 1, \n 2, 3, 7, \n 7, 6, 2, \n 4, 5, 6, \n 6, 7, 4,\n ];\n\n // createe a vertex buffer and bind vertices to it\n const squareVertexBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);\n gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);\n gl.bindBuffer(gl.ARRAY_BUFFER, null);\n\n // create a vertex buffer and bind indices to it\n const squareIndexBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, squareIndexBuffer);\n gl.bufferData(\n gl.ELEMENT_ARRAY_BUFFER,\n new Uint16Array(indices),\n gl.STATIC_DRAW\n );\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);\n\n // initial drawing\n gl.clearColor(0.0, 0.0, 0.0, 0.0);\n gl.enable(gl.DEPTH_TEST);\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n gl.viewport(0, 0, width, height);\n\n // bind squareVertexBuffer as vertex positions buffer\n gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);\n \n // send every 3 bytes from squareVertexBuffer as {x,y,z} for each verticle\n gl.vertexAttribPointer(\n gl.getAttribLocation(prg, \"aVertexPosition\"), \n 3, // 3 bytes-long\n gl.FLOAT,\n false, // don't normalize (int to float)\n 0, \n 0\n );\n // send vertice buffer as `aVertexPosition` attribute inside vertex shader\n gl.enableVertexAttribArray(\n gl.getAttribLocation(prg, \"aVertexPosition\")\n );\n\n let i = 0;\n let speed = 0.01;\n\n // that's the main rendering callback\n return () => {\n gl.useProgram(prg);\n\n const scale = i * 0.25 + 0.25;\n\n // used for scaling inside Vertex Shader\n gl.uniform1f(gl.getUniformLocation(prg, \"slide\"), scale);\n // GL Screen is square, so we need to fix it's aspect ration\n gl.uniform1f(gl.getUniformLocation(prg, \"aspect\"), height / width);\n\n gl.bindBuffer(\n gl.ELEMENT_ARRAY_BUFFER, \n squareIndexBuffer\n );\n \n gl.drawElements(\n gl.TRIANGLES, \n indices.length, \n gl.UNSIGNED_SHORT, \n 0,\n );\n\n if (i > 1 || i < 0) {\n speed = -speed;\n }\n\n i += speed;\n };\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// render-a-cube.ts\nimport { createShader } from \"./create-shader\";\nimport vxShader from \"./vertex.glsl?raw\";\nimport fgShader from \"./fragment.glsl?raw\";\n\nconst canvas = document.getElementyId('view');\nconst ctx = canvas.getRenderingContext('webgl');\n\n// should be put inside requestAnimationFrame\ndrawCube(ctx)(); \n\nfunction drawCube (\n gl: WebGL2RenderingContext, \n width: number,\n height: number\n) {\n // Initializing viewport\n gl.viewport(0, 0, width, height);\n gl.clearColor(0, 0, 0, 0);\n gl.clear(gl.COLOR_BUFFER_BIT);\n\n const prg = gl.createProgram();\n if (!prg) {\n throw new Error(\"Can't init programm\");\n }\n\n // Setting up VERTEX and FRAGMENT shaders\n const vx = createShader(gl, vxShader, gl.VERTEX_SHADER);\n gl.attachShader(prg, vx);\n const fx = createShader(gl, fgShader, gl.FRAGMENT_SHADER);\n gl.attachShader(prg, fx);\n gl.linkProgram(prg);\n if (!gl.getProgramParameter(prg, gl.LINK_STATUS)) {\n throw new Error(\"Could not initialise shaders\");\n }\n\n // Cube's vertices Array<[x,y,z]>, 8 items\n const vertices = [\n -1, -1, -1, // 0\n 1, -1, -1, // 1\n 1, 1, -1, // 2\n -1, 1, -1, // 3\n -1, -1, 1, // 4\n 1, -1, 1, // 5\n 1, 1, 1, // 6\n -1, 1, 1, // 7\n ];\n\n // indices, that form triangles, that form cube sides\n const indices = [\n 2, 1, 0, // side 0 (first triangle)\n 0, 3, 2, // side 0 (second triangle)\n 0, 4, 7, // side 1 (first triangle)\n 7, 3, 0, // side 1 (second triangle)\n 0, 1, 5, // ...\n 5, 4, 0, \n 1, 2, 6, \n 6, 5, 1, \n 2, 3, 7, \n 7, 6, 2, \n 4, 5, 6, \n 6, 7, 4,\n ];\n\n // createe a vertex buffer and bind vertices to it\n const squareVertexBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);\n gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);\n gl.bindBuffer(gl.ARRAY_BUFFER, null);\n\n // create a vertex buffer and bind indices to it\n const squareIndexBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, squareIndexBuffer);\n gl.bufferData(\n gl.ELEMENT_ARRAY_BUFFER,\n new Uint16Array(indices),\n gl.STATIC_DRAW\n );\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);\n\n // initial drawing\n gl.clearColor(0.0, 0.0, 0.0, 0.0);\n gl.enable(gl.DEPTH_TEST);\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n gl.viewport(0, 0, width, height);\n\n // bind squareVertexBuffer as vertex positions buffer\n gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);\n \n // send every 3 bytes from squareVertexBuffer as {x,y,z} for each verticle\n gl.vertexAttribPointer(\n gl.getAttribLocation(prg, \"aVertexPosition\"), \n 3, // 3 bytes-long\n gl.FLOAT,\n false, // don't normalize (int to float)\n 0, \n 0\n );\n // send vertice buffer as `aVertexPosition` attribute inside vertex shader\n gl.enableVertexAttribArray(\n gl.getAttribLocation(prg, \"aVertexPosition\")\n );\n\n let i = 0;\n let speed = 0.01;\n\n // that's the main rendering callback\n return () => {\n gl.useProgram(prg);\n\n const scale = i * 0.25 + 0.25;\n\n // used for scaling inside Vertex Shader\n gl.uniform1f(gl.getUniformLocation(prg, \"slide\"), scale);\n // GL Screen is square, so we need to fix it's aspect ration\n gl.uniform1f(gl.getUniformLocation(prg, \"aspect\"), height / width);\n\n gl.bindBuffer(\n gl.ELEMENT_ARRAY_BUFFER, \n squareIndexBuffer\n );\n \n gl.drawElements(\n gl.TRIANGLES, \n indices.length, \n gl.UNSIGNED_SHORT, \n 0,\n );\n\n if (i > 1 || i < 0) {\n speed = -speed;\n }\n\n i += speed;\n };\n};\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"shader-compiler"},"children":[{"type":"text","value":"Shader compiler"}]},{"type":"element","tag":"code","props":{"code":"// create-shader.ts\nexport const createShader = (\n gl: WebGL2RenderingContext,\n sourceCode: string,\n type: number, // gl.VERTEX_SHADER or gl.FRAGMENT_SHADER\n) => {\n const shader = gl.createShader(type);\n if (!shader) {\n throw new Error(`Can't init shader`);\n }\n\n gl.shaderSource(shader, sourceCode);\n gl.compileShader(shader);\n\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n const info = gl.getShaderInfoLog(shader);\n throw `Could not compile WebGL program. \\n\\n${info}`;\n }\n\n return shader;\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// create-shader.ts\nexport const createShader = (\n gl: WebGL2RenderingContext,\n sourceCode: string,\n type: number, // gl.VERTEX_SHADER or gl.FRAGMENT_SHADER\n) => {\n const shader = gl.createShader(type);\n if (!shader) {\n throw new Error(`Can't init shader`);\n }\n\n gl.shaderSource(shader, sourceCode);\n gl.compileShader(shader);\n\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n const info = gl.getShaderInfoLog(shader);\n throw `Could not compile WebGL program. \\n\\n${info}`;\n }\n\n return shader;\n};\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"vertex-shader-example"},"children":[{"type":"text","value":"Vertex Shader Example"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read more at "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]}]},{"type":"element","tag":"code","props":{"code":"// current vertice position {x,y,z,w}\nattribute vec4 aVertexPosition;\n// final vertice position with all transformations applied,\n// that will be passed to Fragment Shader\nvarying vec4 v_positionWithOffset;\n// Parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(){\n // float array of 4 elements, same as [slide,slide,slide,1]\n vec4 scale=vec4(vec3(slide),1);\n // float array of 4 elements, same as [aspect,1,1,1]\n vec4 aspectRatioFix=vec4(aspect,vec3(1));\n // vertice position, multiplied with matrices of scale and aspect ratio\n gl_Position=aVertexPosition*scale*aspectRatioFix,\n // vertice offset, that will be passed to fragment shader\n v_positionWithOffset=gl_Position+vec4(1,1,1,1);\n}\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// current vertice position {x,y,z,w}\nattribute vec4 aVertexPosition;\n// final vertice position with all transformations applied,\n// that will be passed to Fragment Shader\nvarying vec4 v_positionWithOffset;\n// Parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(){\n // float array of 4 elements, same as [slide,slide,slide,1]\n vec4 scale=vec4(vec3(slide),1);\n // float array of 4 elements, same as [aspect,1,1,1]\n vec4 aspectRatioFix=vec4(aspect,vec3(1));\n // vertice position, multiplied with matrices of scale and aspect ratio\n gl_Position=aVertexPosition*scale*aspectRatioFix,\n // vertice offset, that will be passed to fragment shader\n v_positionWithOffset=gl_Position+vec4(1,1,1,1);\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"fragment-shader-example"},"children":[{"type":"text","value":"Fragment Shader Example"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read more at "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"precision highp float;\n\n// parameter from Vertex Shader\nvarying vec4 v_positionWithOffset;\n\nvoid main(void){\n // color, attached to current verticle {r,g,b,alpha}\n // same a[\n // v_positionWithOffset.x,\n // v_positionWithOffset.y, \n // v_positionWithOffset.z, \n // 1\n // ]\n gl_FragColor=vec4(v_positionWithOffset.xyz,1);\n}\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"precision highp float;\n\n// parameter from Vertex Shader\nvarying vec4 v_positionWithOffset;\n\nvoid main(void){\n // color, attached to current verticle {r,g,b,alpha}\n // same a[\n // v_positionWithOffset.x,\n // v_positionWithOffset.y, \n // v_positionWithOffset.z, \n // 1\n // ]\n gl_FragColor=vec4(v_positionWithOffset.xyz,1);\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"helpful-documentation"},"children":[{"type":"text","value":"Helpful documentation"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://open.gl/","rel":["nofollow"]},"children":[{"type":"text","value":"https://open.gl/"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"This youtube series: "},{"type":"element","tag":"a","props":{"href":"https://www.youtube.com/watch?v=kB0ZVUrI4Aw","rel":["nofollow"]},"children":[{"type":"text","value":"Basics"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://www.youtube.com/watch?v=3yLL9ADo-ko","rel":["nofollow"]},"children":[{"type":"text","value":"Making a cube, applying transformations"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://www.youtube.com/watch?v=hpnd11doMgc&t=52s","rel":["nofollow"]},"children":[{"type":"text","value":"Texturing"}]}]}]},{"type":"element","tag":"h2","props":{"id":"vertices-and-indices"},"children":[{"type":"text","value":"Vertices and Indices"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Vertices"}]},{"type":"text","value":" are points with specific coordinates "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{x,y,z}"}]},{"type":"text","value":" in a 3D-space. We can build any figure by connecting "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"vertices"}]},{"type":"text","value":" in triangles with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"indices"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"shaders"},"children":[{"type":"text","value":"Shaders"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Shaders are functions, written in C, which describe how to draw and color polygons to Graphic Card."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" describe "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"vertice"}]},{"type":"text","value":" positions, so Graphic Card can position them by connecting with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"indices"}]},{"type":"text","value":" and project to 2D canvas."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":" describe the way polygons should be colored by assigning colors to Vertices or by applying textures to polygons."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Shaders can have parameters passed from Javascript code ("},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"uniforms"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varyings"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"attributes"}]},{"type":"text","value":"). "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":" can also access data from "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" (that ones called "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varyings"}]},{"type":"text","value":")."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"https://open.gl/media/img/c2_pipeline.png"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"program"},"children":[{"type":"text","value":"Program"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Program, as far as I understand, is a scene, that's described with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Vertices"}]},{"type":"text","value":", "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Indices"}]},{"type":"text","value":", specific "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"applying-transformations"},"children":[{"type":"text","value":"Applying transformations"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The best way to change positions inside "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" or color in "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":" is to pass parameters (also called "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"uniforms"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varyings"}]},{"type":"text","value":")."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read about that at "},{"type":"element","tag":"a","props":{"href":"https://open.gl/transformations","rel":["nofollow"]},"children":[{"type":"text","value":"open.gl"}]},{"type":"text","value":" and at "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"source-code-with-explanations"},"children":[{"type":"text","value":"Source code with explanations"}]},{"type":"element","tag":"code","props":{"code":"// render-a-cube.ts\nimport { createShader } from \"./create-shader\";\nimport vxShader from \"./vertex.glsl?raw\";\nimport fgShader from \"./fragment.glsl?raw\";\n\nconst canvas = document.getElementyId('view');\nconst ctx = canvas.getRenderingContext('webgl');\n\n// should be put inside requestAnimationFrame\ndrawCube(ctx)(); \n\nfunction drawCube (\n gl: WebGL2RenderingContext, \n width: number,\n height: number\n) {\n // Initializing viewport\n gl.viewport(0, 0, width, height);\n gl.clearColor(0, 0, 0, 0);\n gl.clear(gl.COLOR_BUFFER_BIT);\n\n const prg = gl.createProgram();\n if (!prg) {\n throw new Error(\"Can't init programm\");\n }\n\n // Setting up VERTEX and FRAGMENT shaders\n const vx = createShader(gl, vxShader, gl.VERTEX_SHADER);\n gl.attachShader(prg, vx);\n const fx = createShader(gl, fgShader, gl.FRAGMENT_SHADER);\n gl.attachShader(prg, fx);\n gl.linkProgram(prg);\n if (!gl.getProgramParameter(prg, gl.LINK_STATUS)) {\n throw new Error(\"Could not initialise shaders\");\n }\n\n // Cube's vertices Array<[x,y,z]>, 8 items\n const vertices = [\n -1, -1, -1, // 0\n 1, -1, -1, // 1\n 1, 1, -1, // 2\n -1, 1, -1, // 3\n -1, -1, 1, // 4\n 1, -1, 1, // 5\n 1, 1, 1, // 6\n -1, 1, 1, // 7\n ];\n\n // indices, that form triangles, that form cube sides\n const indices = [\n 2, 1, 0, // side 0 (first triangle)\n 0, 3, 2, // side 0 (second triangle)\n 0, 4, 7, // side 1 (first triangle)\n 7, 3, 0, // side 1 (second triangle)\n 0, 1, 5, // ...\n 5, 4, 0, \n 1, 2, 6, \n 6, 5, 1, \n 2, 3, 7, \n 7, 6, 2, \n 4, 5, 6, \n 6, 7, 4,\n ];\n\n // createe a vertex buffer and bind vertices to it\n const squareVertexBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);\n gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);\n gl.bindBuffer(gl.ARRAY_BUFFER, null);\n\n // create a vertex buffer and bind indices to it\n const squareIndexBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, squareIndexBuffer);\n gl.bufferData(\n gl.ELEMENT_ARRAY_BUFFER,\n new Uint16Array(indices),\n gl.STATIC_DRAW\n );\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);\n\n // initial drawing\n gl.clearColor(0.0, 0.0, 0.0, 0.0);\n gl.enable(gl.DEPTH_TEST);\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n gl.viewport(0, 0, width, height);\n\n // bind squareVertexBuffer as vertex positions buffer\n gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);\n \n // send every 3 bytes from squareVertexBuffer as {x,y,z} for each verticle\n gl.vertexAttribPointer(\n gl.getAttribLocation(prg, \"aVertexPosition\"), \n 3, // 3 bytes-long\n gl.FLOAT,\n false, // don't normalize (int to float)\n 0, \n 0\n );\n // send vertice buffer as `aVertexPosition` attribute inside vertex shader\n gl.enableVertexAttribArray(\n gl.getAttribLocation(prg, \"aVertexPosition\")\n );\n\n let i = 0;\n let speed = 0.01;\n\n // that's the main rendering callback\n return () => {\n gl.useProgram(prg);\n\n const scale = i * 0.25 + 0.25;\n\n // used for scaling inside Vertex Shader\n gl.uniform1f(gl.getUniformLocation(prg, \"slide\"), scale);\n // GL Screen is square, so we need to fix it's aspect ration\n gl.uniform1f(gl.getUniformLocation(prg, \"aspect\"), height / width);\n\n gl.bindBuffer(\n gl.ELEMENT_ARRAY_BUFFER, \n squareIndexBuffer\n );\n \n gl.drawElements(\n gl.TRIANGLES, \n indices.length, \n gl.UNSIGNED_SHORT, \n 0,\n );\n\n if (i > 1 || i < 0) {\n speed = -speed;\n }\n\n i += speed;\n };\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// render-a-cube.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"createShader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2010d6"},"children":[{"type":"text","value":"\"./create-shader\""}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"vxShader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2010d6"},"children":[{"type":"text","value":"\"./vertex.glsl?raw\""}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"fgShader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2010d6"},"children":[{"type":"text","value":"\"./fragment.glsl?raw\""}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"document"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"getElementyId"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2010d6"},"children":[{"type":"text","value":"'view'"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"getRenderingContext"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2010d6"},"children":[{"type":"text","value":"'webgl'"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// should be put inside requestAnimationFrame"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"drawCube"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":")(); "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"drawCube"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aaa2c9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c4ba0e"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-2eab2c"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-aaa2c9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89a5fc"},"children":[{"type":"text","value":"WebGL2RenderingContext"}]},{"type":"element","tag":"span","props":{"class":"ct-aaa2c9"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aaa2c9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c4ba0e"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-2eab2c"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-aaa2c9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0555f3"},"children":[{"type":"text","value":"number"}]},{"type":"element","tag":"span","props":{"class":"ct-aaa2c9"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aaa2c9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c4ba0e"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-2eab2c"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-aaa2c9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0555f3"},"children":[{"type":"text","value":"number"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// Initializing viewport"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"viewport"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"clearColor"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"clear"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"COLOR_BUFFER_BIT"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"createProgram"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cd3b9c"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2010d6"},"children":[{"type":"text","value":"\"Can't init programm\""}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// Setting up VERTEX and FRAGMENT shaders"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"vx"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"createShader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"vxShader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"VERTEX_SHADER"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"attachShader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"vx"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"fx"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"createShader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"fgShader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"FRAGMENT_SHADER"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"attachShader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"fx"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"linkProgram"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"getProgramParameter"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"LINK_STATUS"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":")) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cd3b9c"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2010d6"},"children":[{"type":"text","value":"\"Could not initialise shaders\""}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// Cube's vertices Array<[x,y,z]>, 8 items"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"vertices"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// 0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// 1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// 2"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// 3"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// 4"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// 5"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// 6"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// 7"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" ];"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// indices, that form triangles, that form cube sides"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"indices"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// side 0 (first triangle)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// side 0 (second triangle)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"7"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// side 1 (first triangle)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"7"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// side 1 (second triangle)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"6"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"6"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"7"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"7"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"6"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"6"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"6"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"7"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" ];"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// createe a vertex buffer and bind vertices to it"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"squareVertexBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"createBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"bindBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"squareVertexBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"bufferData"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cd3b9c"},"children":[{"type":"text","value":"Float32Array"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"vertices"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"), "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"STATIC_DRAW"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"bindBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-02b732"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// create a vertex buffer and bind indices to it"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"squareIndexBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"createBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"bindBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"ELEMENT_ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"squareIndexBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"bufferData"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"ELEMENT_ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cd3b9c"},"children":[{"type":"text","value":"Uint16Array"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"indices"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"STATIC_DRAW"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"bindBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"ELEMENT_ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-02b732"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// initial drawing"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"clearColor"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0.0"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0.0"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0.0"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"enable"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"DEPTH_TEST"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"clear"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"COLOR_BUFFER_BIT"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"DEPTH_BUFFER_BIT"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"viewport"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// bind squareVertexBuffer as vertex positions buffer"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"bindBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"squareVertexBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// send every 3 bytes from squareVertexBuffer as {x,y,z} for each verticle"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"vertexAttribPointer"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"getAttribLocation"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-2010d6"},"children":[{"type":"text","value":"\"aVertexPosition\""}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"), "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// 3 bytes-long"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"FLOAT"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-02b732"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// don't normalize (int to float)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// send vertice buffer as `aVertexPosition` attribute inside vertex shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"enableVertexAttribArray"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"getAttribLocation"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-2010d6"},"children":[{"type":"text","value":"\"aVertexPosition\""}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"speed"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0.01"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// that's the main rendering callback"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"useProgram"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"scale"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0.25"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// used for scaling inside Vertex Shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"uniform1f"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"getUniformLocation"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-2010d6"},"children":[{"type":"text","value":"\"slide\""}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"), "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"scale"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// GL Screen is square, so we need to fix it's aspect ration"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"uniform1f"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"getUniformLocation"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-2010d6"},"children":[{"type":"text","value":"\"aspect\""}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"), "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"bindBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"ELEMENT_ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"squareIndexBuffer"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"drawElements"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"TRIANGLES"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"indices"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"UNSIGNED_SHORT"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"speed"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"speed"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"+="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"speed"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"shader-compiler"},"children":[{"type":"text","value":"Shader compiler"}]},{"type":"element","tag":"code","props":{"code":"// create-shader.ts\nexport const createShader = (\n gl: WebGL2RenderingContext,\n sourceCode: string,\n type: number, // gl.VERTEX_SHADER or gl.FRAGMENT_SHADER\n) => {\n const shader = gl.createShader(type);\n if (!shader) {\n throw new Error(`Can't init shader`);\n }\n\n gl.shaderSource(shader, sourceCode);\n gl.compileShader(shader);\n\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n const info = gl.getShaderInfoLog(shader);\n throw `Could not compile WebGL program. \\n\\n${info}`;\n }\n\n return shader;\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// create-shader.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"createShader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aaa2c9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c4ba0e"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-2eab2c"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-aaa2c9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89a5fc"},"children":[{"type":"text","value":"WebGL2RenderingContext"}]},{"type":"element","tag":"span","props":{"class":"ct-aaa2c9"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aaa2c9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c4ba0e"},"children":[{"type":"text","value":"sourceCode"}]},{"type":"element","tag":"span","props":{"class":"ct-2eab2c"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-aaa2c9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0555f3"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-aaa2c9"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aaa2c9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c4ba0e"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-2eab2c"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-aaa2c9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0555f3"},"children":[{"type":"text","value":"number"}]},{"type":"element","tag":"span","props":{"class":"ct-aaa2c9"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-aea678"},"children":[{"type":"text","value":"// gl.VERTEX_SHADER or gl.FRAGMENT_SHADER"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"createShader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cd3b9c"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2010d6"},"children":[{"type":"text","value":"`Can't init shader`"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"shaderSource"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"sourceCode"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"compileShader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"getShaderParameter"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"COMPILE_STATUS"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":")) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5011ab"},"children":[{"type":"text","value":"info"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"getShaderInfoLog"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2010d6"},"children":[{"type":"text","value":"`Could not compile WebGL program. "}]},{"type":"element","tag":"span","props":{"class":"ct-0b8227"},"children":[{"type":"text","value":"\\n\\n"}]},{"type":"element","tag":"span","props":{"class":"ct-2010d6"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"info"}]},{"type":"element","tag":"span","props":{"class":"ct-2010d6"},"children":[{"type":"text","value":"}`"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"vertex-shader-example"},"children":[{"type":"text","value":"Vertex Shader Example"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read more at "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]}]},{"type":"element","tag":"code","props":{"code":"// current vertice position {x,y,z,w}\nattribute vec4 aVertexPosition;\n// final vertice position with all transformations applied,\n// that will be passed to Fragment Shader\nvarying vec4 v_positionWithOffset;\n// Parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(){\n // float array of 4 elements, same as [slide,slide,slide,1]\n vec4 scale=vec4(vec3(slide),1);\n // float array of 4 elements, same as [aspect,1,1,1]\n vec4 aspectRatioFix=vec4(aspect,vec3(1));\n // vertice position, multiplied with matrices of scale and aspect ratio\n gl_Position=aVertexPosition*scale*aspectRatioFix,\n // vertice offset, that will be passed to fragment shader\n v_positionWithOffset=gl_Position+vec4(1,1,1,1);\n}\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// current vertice position {x,y,z,w}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"attribute vec4 aVertexPosition;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// final vertice position with all transformations applied,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// that will be passed to Fragment Shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"varying vec4 v_positionWithOffset;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// Parameters passed from Javascript loop"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"uniform "}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" slide;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"uniform "}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" aspect;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"main"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"(){"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// float array of 4 elements, same as [slide,slide,slide,1]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" vec4 scale"}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"vec3"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"(slide),"}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// float array of 4 elements, same as [aspect,1,1,1]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" vec4 aspectRatioFix"}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"(aspect,"}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"vec3"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"));"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// vertice position, multiplied with matrices of scale and aspect ratio"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" gl_Position"}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"aVertexPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"scale"}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"aspectRatioFix,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// vertice offset, that will be passed to fragment shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" v_positionWithOffset"}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"gl_Position"}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"fragment-shader-example"},"children":[{"type":"text","value":"Fragment Shader Example"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read more at "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"precision highp float;\n\n// parameter from Vertex Shader\nvarying vec4 v_positionWithOffset;\n\nvoid main(void){\n // color, attached to current verticle {r,g,b,alpha}\n // same a[\n // v_positionWithOffset.x,\n // v_positionWithOffset.y, \n // v_positionWithOffset.z, \n // 1\n // ]\n gl_FragColor=vec4(v_positionWithOffset.xyz,1);\n}\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"precision highp "}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// parameter from Vertex Shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"varying vec4 v_positionWithOffset;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"main"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-fd83b5"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"){"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// color, attached to current verticle {r,g,b,alpha}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// same a["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// v_positionWithOffset.x,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// v_positionWithOffset.y, "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// v_positionWithOffset.z, "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// 1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e2271"},"children":[{"type":"text","value":"// ]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":" gl_FragColor"}]},{"type":"element","tag":"span","props":{"class":"ct-532f07"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-7d5ed7"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"v_positionWithOffset"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-0c42a0"},"children":[{"type":"text","value":"xyz"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-f22312"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5a6e76"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-0b8227{color:#79C0FF}.ct-aea678{color:#8B949E}.ct-02b732{color:#79C0FF}.ct-cd3b9c{color:#79C0FF}.ct-f22312{color:#79C0FF}.ct-0555f3{color:#79C0FF}.ct-89a5fc{color:#FFA657}.ct-2eab2c{color:#FF7B72}.ct-c4ba0e{color:#FFA657}.ct-aaa2c9{color:#C9D1D9}.ct-7d5ed7{color:#D2A8FF}.ct-5011ab{color:#79C0FF}.ct-fd83b5{color:#FF7B72}.ct-2010d6{color:#A5D6FF}.ct-0c42a0{color:#C9D1D9}.ct-5a6e76{color:#C9D1D9}.ct-532f07{color:#FF7B72}.ct-6e2271{color:#8B949E}.light .ct-6e2271{color:#93A1A1}.light .ct-532f07{color:#859900}.light .ct-5a6e76{color:#657B83}.light .ct-0c42a0{color:#268BD2}.light .ct-2010d6{color:#2AA198}.light .ct-fd83b5{color:#073642}.light .ct-5011ab{color:#268BD2}.light .ct-7d5ed7{color:#268BD2}.light .ct-aaa2c9{color:#657B83}.light .ct-c4ba0e{color:#657B83}.light .ct-2eab2c{color:#859900}.light .ct-89a5fc{color:#268BD2}.light .ct-0555f3{color:#859900}.light .ct-f22312{color:#D33682}.light .ct-cd3b9c{color:#859900}.light .ct-02b732{color:#B58900}.light .ct-aea678{color:#93A1A1}.light .ct-0b8227{color:#CB4B16}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"helpful-documentation","depth":2,"text":"Helpful documentation"},{"id":"vertices-and-indices","depth":2,"text":"Vertices and Indices"},{"id":"shaders","depth":2,"text":"Shaders"},{"id":"program","depth":2,"text":"Program"},{"id":"applying-transformations","depth":2,"text":"Applying transformations"},{"id":"source-code-with-explanations","depth":2,"text":"Source code with explanations"},{"id":"shader-compiler","depth":2,"text":"Shader compiler"},{"id":"vertex-shader-example","depth":2,"text":"Vertex Shader Example"},{"id":"fragment-shader-example","depth":2,"text":"Fragment Shader Example"}]}},"_type":"markdown","_id":"content:Frontend:WebGL:Basics of WebGL (Drawing a Cube).md","_source":"content","_file":"Frontend/WebGL/Basics of WebGL (Drawing a Cube).md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/S7L9CBleOj.json b/docs/api/_content/query/S7L9CBleOj.json
index cb54f2e..3e75088 100644
--- a/docs/api/_content/query/S7L9CBleOj.json
+++ b/docs/api/_content/query/S7L9CBleOj.json
@@ -1 +1 @@
-{"_path":"/frontend/vue/make-nuxt-handle-obsidian-highlights","_dir":"vue","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Make Nuxt Handle Obsidian Highlights","description":"By default Nuxt Content Plugin not handling <span class=\"highlight\">highlight</span> links. To fix that we will create Nitro plugin:","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default "},{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org","rel":["nofollow"]},"children":[{"type":"text","value":"Nuxt Content Plugin"}]},{"type":"text","value":" not handling "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<span class=\"highlight\">highlight</span>"}]},{"type":"text","value":" links. To fix that we will create "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Nitro"}]},{"type":"text","value":" plugin:"}]},{"type":"element","tag":"code","props":{"code":"// ~/server/plugins/highlight.ts\nexport default defineNitroPlugin((nitroApp) => {\n nitroApp.hooks.hook(\"content:file:beforeParse\", (file) => {\n if (file._id.endsWith(\".md\")) {\n file.body = file.body.replace(\n /==([^=]+)==/gs,\n `<span class=\"highlight\">$1</span>`\n );\n }\n });\n});\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// ~/server/plugins/highlight.ts\nexport default defineNitroPlugin((nitroApp) => {\n nitroApp.hooks.hook(\"content:file:beforeParse\", (file) => {\n if (file._id.endsWith(\".md\")) {\n file.body = file.body.replace(\n /==([^=]+)==/gs,\n `<span class=\"highlight\">$1</span>`\n );\n }\n });\n});\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default "},{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org","rel":["nofollow"]},"children":[{"type":"text","value":"Nuxt Content Plugin"}]},{"type":"text","value":" not handling "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<span class=\"highlight\">highlight</span>"}]},{"type":"text","value":" links. To fix that we will create "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Nitro"}]},{"type":"text","value":" plugin:"}]},{"type":"element","tag":"code","props":{"code":"// ~/server/plugins/highlight.ts\nexport default defineNitroPlugin((nitroApp) => {\n nitroApp.hooks.hook(\"content:file:beforeParse\", (file) => {\n if (file._id.endsWith(\".md\")) {\n file.body = file.body.replace(\n /==([^=]+)==/gs,\n `<span class=\"highlight\">$1</span>`\n );\n }\n });\n});\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c6123b"},"children":[{"type":"text","value":"// ~/server/plugins/highlight.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-263241"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-246539"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-263241"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-246539"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7463ea"},"children":[{"type":"text","value":"defineNitroPlugin"}]},{"type":"element","tag":"span","props":{"class":"ct-246539"},"children":[{"type":"text","value":"((nitroApp) "}]},{"type":"element","tag":"span","props":{"class":"ct-6bbaf8"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-246539"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d99189"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-844015"},"children":[{"type":"text","value":"nitroApp"}]},{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-844015"},"children":[{"type":"text","value":"hooks"}]},{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-34b2ba"},"children":[{"type":"text","value":"hook"}]},{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-b25756"},"children":[{"type":"text","value":"\"content:file:beforeParse\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2c63bf"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-844015"},"children":[{"type":"text","value":"file"}]},{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-844015"},"children":[{"type":"text","value":"_id"}]},{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-34b2ba"},"children":[{"type":"text","value":"endsWith"}]},{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-b25756"},"children":[{"type":"text","value":"\".md\""}]},{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":")) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-844015"},"children":[{"type":"text","value":"file"}]},{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-844015"},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2c63bf"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-844015"},"children":[{"type":"text","value":"file"}]},{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-844015"},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-34b2ba"},"children":[{"type":"text","value":"replace"}]},{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bbef30"},"children":[{"type":"text","value":"/==("}]},{"type":"element","tag":"span","props":{"class":"ct-2d19d9"},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"class":"ct-2c63bf"},"children":[{"type":"text","value":"^"}]},{"type":"element","tag":"span","props":{"class":"ct-2d19d9"},"children":[{"type":"text","value":"=]"}]},{"type":"element","tag":"span","props":{"class":"ct-2c63bf"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-bbef30"},"children":[{"type":"text","value":")==/"}]},{"type":"element","tag":"span","props":{"class":"ct-2c63bf"},"children":[{"type":"text","value":"gs"}]},{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b25756"},"children":[{"type":"text","value":"`<span class=\"highlight\">$1</span>`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b3c5b8"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d99189"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-246539"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-d99189"},"children":[{"type":"text","value":";"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-2d19d9{color:#79C0FF}.ct-bbef30{color:#A5D6FF}.ct-2c63bf{color:#FF7B72}.ct-b25756{color:#A5D6FF}.ct-34b2ba{color:#D2A8FF}.ct-844015{color:#C9D1D9}.ct-b3c5b8{color:#C9D1D9}.ct-d99189{color:#C9D1D9}.ct-6bbaf8{color:#FF7B72}.ct-7463ea{color:#D2A8FF}.ct-246539{color:#FFA657}.ct-263241{color:#FF7B72}.ct-c6123b{color:#8B949E}.light .ct-c6123b{color:#93A1A1}.light .ct-263241{color:#859900}.light .ct-246539{color:#657B83}.light .ct-7463ea{color:#268BD2}.light .ct-6bbaf8{color:#073642}.light .ct-d99189{color:#657B83}.light .ct-b3c5b8{color:#657B83}.light .ct-844015{color:#268BD2}.light .ct-34b2ba{color:#268BD2}.light .ct-b25756{color:#2AA198}.light .ct-2c63bf{color:#859900}.light .ct-bbef30{color:#D30102}.light .ct-2d19d9{color:#CB4B16}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Frontend:Vue:Make Nuxt handle Obsidian highlights.md","_source":"content","_file":"Frontend/Vue/Make Nuxt handle Obsidian highlights.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/frontend/vue/make-nuxt-handle-obsidian-highlights","_dir":"vue","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Make Nuxt Handle Obsidian Highlights","description":"By default Nuxt Content Plugin not handling <span class=\"highlight\">highlight</span> links. To fix that we will create Nitro plugin:","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default "},{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org","rel":["nofollow"]},"children":[{"type":"text","value":"Nuxt Content Plugin"}]},{"type":"text","value":" not handling "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<span class=\"highlight\">highlight</span>"}]},{"type":"text","value":" links. To fix that we will create "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Nitro"}]},{"type":"text","value":" plugin:"}]},{"type":"element","tag":"code","props":{"code":"// ~/server/plugins/highlight.ts\nexport default defineNitroPlugin((nitroApp) => {\n nitroApp.hooks.hook(\"content:file:beforeParse\", (file) => {\n if (file._id.endsWith(\".md\")) {\n file.body = file.body.replace(\n /==([^=]+)==/gs,\n `<span class=\"highlight\">$1</span>`\n );\n }\n });\n});\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// ~/server/plugins/highlight.ts\nexport default defineNitroPlugin((nitroApp) => {\n nitroApp.hooks.hook(\"content:file:beforeParse\", (file) => {\n if (file._id.endsWith(\".md\")) {\n file.body = file.body.replace(\n /==([^=]+)==/gs,\n `<span class=\"highlight\">$1</span>`\n );\n }\n });\n});\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default "},{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org","rel":["nofollow"]},"children":[{"type":"text","value":"Nuxt Content Plugin"}]},{"type":"text","value":" not handling "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<span class=\"highlight\">highlight</span>"}]},{"type":"text","value":" links. To fix that we will create "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Nitro"}]},{"type":"text","value":" plugin:"}]},{"type":"element","tag":"code","props":{"code":"// ~/server/plugins/highlight.ts\nexport default defineNitroPlugin((nitroApp) => {\n nitroApp.hooks.hook(\"content:file:beforeParse\", (file) => {\n if (file._id.endsWith(\".md\")) {\n file.body = file.body.replace(\n /==([^=]+)==/gs,\n `<span class=\"highlight\">$1</span>`\n );\n }\n });\n});\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-98fed0"},"children":[{"type":"text","value":"// ~/server/plugins/highlight.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aa0bce"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-8f9ec7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-aa0bce"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-8f9ec7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b646cf"},"children":[{"type":"text","value":"defineNitroPlugin"}]},{"type":"element","tag":"span","props":{"class":"ct-8f9ec7"},"children":[{"type":"text","value":"((nitroApp) "}]},{"type":"element","tag":"span","props":{"class":"ct-7405fe"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-8f9ec7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7b3d71"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1eb4c1"},"children":[{"type":"text","value":"nitroApp"}]},{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1eb4c1"},"children":[{"type":"text","value":"hooks"}]},{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c70e5a"},"children":[{"type":"text","value":"hook"}]},{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-9cbfc0"},"children":[{"type":"text","value":"\"content:file:beforeParse\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-73bf2a"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-1eb4c1"},"children":[{"type":"text","value":"file"}]},{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1eb4c1"},"children":[{"type":"text","value":"_id"}]},{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c70e5a"},"children":[{"type":"text","value":"endsWith"}]},{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-9cbfc0"},"children":[{"type":"text","value":"\".md\""}]},{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":")) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1eb4c1"},"children":[{"type":"text","value":"file"}]},{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1eb4c1"},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-73bf2a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1eb4c1"},"children":[{"type":"text","value":"file"}]},{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1eb4c1"},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c70e5a"},"children":[{"type":"text","value":"replace"}]},{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-555ec3"},"children":[{"type":"text","value":"/==("}]},{"type":"element","tag":"span","props":{"class":"ct-ece131"},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"class":"ct-73bf2a"},"children":[{"type":"text","value":"^"}]},{"type":"element","tag":"span","props":{"class":"ct-ece131"},"children":[{"type":"text","value":"=]"}]},{"type":"element","tag":"span","props":{"class":"ct-73bf2a"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-555ec3"},"children":[{"type":"text","value":")==/"}]},{"type":"element","tag":"span","props":{"class":"ct-73bf2a"},"children":[{"type":"text","value":"gs"}]},{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9cbfc0"},"children":[{"type":"text","value":"`<span class=\"highlight\">$1</span>`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aee277"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7b3d71"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-8f9ec7"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-7b3d71"},"children":[{"type":"text","value":";"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-ece131{color:#79C0FF}.ct-555ec3{color:#A5D6FF}.ct-73bf2a{color:#FF7B72}.ct-9cbfc0{color:#A5D6FF}.ct-c70e5a{color:#D2A8FF}.ct-1eb4c1{color:#C9D1D9}.ct-aee277{color:#C9D1D9}.ct-7b3d71{color:#C9D1D9}.ct-7405fe{color:#FF7B72}.ct-b646cf{color:#D2A8FF}.ct-8f9ec7{color:#FFA657}.ct-aa0bce{color:#FF7B72}.ct-98fed0{color:#8B949E}.light .ct-98fed0{color:#93A1A1}.light .ct-aa0bce{color:#859900}.light .ct-8f9ec7{color:#657B83}.light .ct-b646cf{color:#268BD2}.light .ct-7405fe{color:#073642}.light .ct-7b3d71{color:#657B83}.light .ct-aee277{color:#657B83}.light .ct-1eb4c1{color:#268BD2}.light .ct-c70e5a{color:#268BD2}.light .ct-9cbfc0{color:#2AA198}.light .ct-73bf2a{color:#859900}.light .ct-555ec3{color:#D30102}.light .ct-ece131{color:#CB4B16}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Frontend:Vue:Make Nuxt handle Obsidian highlights.md","_source":"content","_file":"Frontend/Vue/Make Nuxt handle Obsidian highlights.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/SEkBVlx0jP.json b/docs/api/_content/query/SEkBVlx0jP.json
new file mode 100644
index 0000000..5d27002
--- /dev/null
+++ b/docs/api/_content/query/SEkBVlx0jP.json
@@ -0,0 +1 @@
+{"_path":"/frontend/react/detect-hook-deps-changes-with-usewhatschanged","_dir":"react","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Detect Hook Deps Changes With UseWhatsChanged","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"code","props":{"code":"import { useEffect, useRef } from 'react';\n\n/** Pass dictionary of `props` as argument and it will\n * tell you, which one changed after rerender.\n * Use `prefix` to distinguish props of different components.\n */\nexport const useWhatsChanged = (\n props: Record<string, unknown>,\n prefix = '',\n) => {\n const prevProps = useRef(props);\n\n useEffect(() => {\n Object.entries(props).forEach(([key, value]) => {\n if (\n !Object.prototype.hasOwnProperty.call(prevProps.current, key) ||\n prevProps.current[key] !== value\n ) {\n console.log(`${prefix} ${key} has changed`);\n }\n });\n\n prevProps.current = props;\n }, [props, prefix]);\n};\n\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { useEffect, useRef } from 'react';\n\n/** Pass dictionary of `props` as argument and it will\n * tell you, which one changed after rerender.\n * Use `prefix` to distinguish props of different components.\n */\nexport const useWhatsChanged = (\n props: Record<string, unknown>,\n prefix = '',\n) => {\n const prevProps = useRef(props);\n\n useEffect(() => {\n Object.entries(props).forEach(([key, value]) => {\n if (\n !Object.prototype.hasOwnProperty.call(prevProps.current, key) ||\n prevProps.current[key] !== value\n ) {\n console.log(`${prefix} ${key} has changed`);\n }\n });\n\n prevProps.current = props;\n }, [props, prefix]);\n};\n\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"code","props":{"code":"import { useEffect, useRef } from 'react';\n\n/** Pass dictionary of `props` as argument and it will\n * tell you, which one changed after rerender.\n * Use `prefix` to distinguish props of different components.\n */\nexport const useWhatsChanged = (\n props: Record<string, unknown>,\n prefix = '',\n) => {\n const prevProps = useRef(props);\n\n useEffect(() => {\n Object.entries(props).forEach(([key, value]) => {\n if (\n !Object.prototype.hasOwnProperty.call(prevProps.current, key) ||\n prevProps.current[key] !== value\n ) {\n console.log(`${prefix} ${key} has changed`);\n }\n });\n\n prevProps.current = props;\n }, [props, prefix]);\n};\n\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7ec539"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-3cce2a"},"children":[{"type":"text","value":"useEffect"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-3cce2a"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-7ec539"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6d5d08"},"children":[{"type":"text","value":"'react'"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7a0006"},"children":[{"type":"text","value":"/** Pass dictionary of `props` as argument and it will"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7a0006"},"children":[{"type":"text","value":" * tell you, which one changed after rerender."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7a0006"},"children":[{"type":"text","value":" * Use `prefix` to distinguish props of different components."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7a0006"},"children":[{"type":"text","value":" */"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7ec539"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e2ac3d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fddfb0"},"children":[{"type":"text","value":"useWhatsChanged"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7ec539"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7321a2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9c555a"},"children":[{"type":"text","value":"props"}]},{"type":"element","tag":"span","props":{"class":"ct-7c9693"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-7321a2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-682427"},"children":[{"type":"text","value":"Record"}]},{"type":"element","tag":"span","props":{"class":"ct-7321a2"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-e1c665"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-7321a2"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-e1c665"},"children":[{"type":"text","value":"unknown"}]},{"type":"element","tag":"span","props":{"class":"ct-7321a2"},"children":[{"type":"text","value":">,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3cce2a"},"children":[{"type":"text","value":"prefix"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7ec539"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6d5d08"},"children":[{"type":"text","value":"''"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-e2ac3d"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e2ac3d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7def83"},"children":[{"type":"text","value":"prevProps"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7ec539"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fddfb0"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-3cce2a"},"children":[{"type":"text","value":"props"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fddfb0"},"children":[{"type":"text","value":"useEffect"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-e2ac3d"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7321a2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e1c665"},"children":[{"type":"text","value":"Object"}]},{"type":"element","tag":"span","props":{"class":"ct-7321a2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af5044"},"children":[{"type":"text","value":"entries"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7ec539"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3cce2a"},"children":[{"type":"text","value":"prevProps"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3cce2a"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"class":"ct-3cce2a"},"children":[{"type":"text","value":"key"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":"] "}]},{"type":"element","tag":"span","props":{"class":"ct-7ec539"},"children":[{"type":"text","value":"!=="}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3cce2a"},"children":[{"type":"text","value":"value"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" ) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3cce2a"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-fddfb0"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-6d5d08"},"children":[{"type":"text","value":"`${"}]},{"type":"element","tag":"span","props":{"class":"ct-3cce2a"},"children":[{"type":"text","value":"prefix"}]},{"type":"element","tag":"span","props":{"class":"ct-6d5d08"},"children":[{"type":"text","value":"} ${"}]},{"type":"element","tag":"span","props":{"class":"ct-3cce2a"},"children":[{"type":"text","value":"key"}]},{"type":"element","tag":"span","props":{"class":"ct-6d5d08"},"children":[{"type":"text","value":"} has changed`"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3cce2a"},"children":[{"type":"text","value":"prevProps"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3cce2a"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7ec539"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3cce2a"},"children":[{"type":"text","value":"props"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":" }, ["}]},{"type":"element","tag":"span","props":{"class":"ct-3cce2a"},"children":[{"type":"text","value":"props"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-3cce2a"},"children":[{"type":"text","value":"prefix"}]},{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":"]);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1ee419"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-af5044{color:#D2A8FF}.ct-7def83{color:#79C0FF}.ct-e1c665{color:#79C0FF}.ct-682427{color:#FFA657}.ct-7c9693{color:#FF7B72}.ct-9c555a{color:#FFA657}.ct-7321a2{color:#C9D1D9}.ct-fddfb0{color:#D2A8FF}.ct-e2ac3d{color:#FF7B72}.ct-7a0006{color:#8B949E}.ct-6d5d08{color:#A5D6FF}.ct-3cce2a{color:#C9D1D9}.ct-1ee419{color:#C9D1D9}.ct-7ec539{color:#FF7B72}.light .ct-7ec539{color:#859900}.light .ct-1ee419{color:#657B83}.light .ct-3cce2a{color:#268BD2}.light .ct-6d5d08{color:#2AA198}.light .ct-7a0006{color:#93A1A1}.light .ct-e2ac3d{color:#073642}.light .ct-fddfb0{color:#268BD2}.light .ct-7321a2{color:#657B83}.light .ct-9c555a{color:#657B83}.light .ct-7c9693{color:#859900}.light .ct-682427{color:#268BD2}.light .ct-e1c665{color:#859900}.light .ct-7def83{color:#268BD2}.light .ct-af5044{color:#268BD2}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Frontend:React:Detect hook deps changes with useWhatsChanged.md","_source":"content","_file":"Frontend/React/Detect hook deps changes with useWhatsChanged.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/TvYXYGXdZ0.json b/docs/api/_content/query/TvYXYGXdZ0.json
index 9e8288e..104134a 100644
--- a/docs/api/_content/query/TvYXYGXdZ0.json
+++ b/docs/api/_content/query/TvYXYGXdZ0.json
@@ -1 +1 @@
-{"_path":"/sql/mysql-and-mariadb-setup","_dir":"sql","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"MySQL And MariaDB Setup","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"install-mariadb-on-ubuntu-2004-lts"},"children":[{"type":"text","value":"Install MariaDB on Ubuntu 20.04 LTS"}]},{"type":"element","tag":"code","props":{"code":"sudo apt update\nsudo apt install mariadb-server\nsudo mysql_secure_installation\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"sudo apt update\nsudo apt install mariadb-server\nsudo mysql_secure_installation\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"access-database-from-outside"},"children":[{"type":"text","value":"Access Database from outside"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Open "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/mysql/mariadb.conf.d/50-server.cnf"}]},{"type":"text","value":" and change the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"bind-address"}]},{"type":"text","value":" to:"}]},{"type":"element","tag":"code","props":{"code":"...\nbind-address = 0.0.0.0\n...\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"...\nbind-address = 0.0.0.0\n...\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"create-administrative-user"},"children":[{"type":"text","value":"Create Administrative User"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Create a new user "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"newuser"}]},{"type":"text","value":" for the host "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"localhost"}]},{"type":"text","value":" with a new "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"password"}]},{"type":"text","value":":"}]}]},{"type":"element","tag":"code","props":{"code":"CREATE USER 'newuser'@'localhost' IDENTIFIED BY 'password';\n","language":"mysql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"CREATE USER 'newuser'@'localhost' IDENTIFIED BY 'password';\n"}]}]}]},{"type":"element","tag":"ol","props":{"start":2},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Grant all permissions to the new user"}]}]},{"type":"element","tag":"code","props":{"code":"GRANT ALL PRIVILEGES ON * . * TO 'newuser'@'localhost';\n","language":"mysql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"GRANT ALL PRIVILEGES ON * . * TO 'newuser'@'localhost';\n"}]}]}]},{"type":"element","tag":"ol","props":{"start":3},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Update permissions"}]}]},{"type":"element","tag":"code","props":{"code":"FLUSH PRIVILEGES;\n","language":"mysql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"FLUSH PRIVILEGES;\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"install-mariadb-on-ubuntu-2004-lts"},"children":[{"type":"text","value":"Install MariaDB on Ubuntu 20.04 LTS"}]},{"type":"element","tag":"code","props":{"code":"sudo apt update\nsudo apt install mariadb-server\nsudo mysql_secure_installation\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-90435d"},"children":[{"type":"text","value":"sudo apt update"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-90435d"},"children":[{"type":"text","value":"sudo apt install mariadb-server"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-90435d"},"children":[{"type":"text","value":"sudo mysql_secure_installation"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"access-database-from-outside"},"children":[{"type":"text","value":"Access Database from outside"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Open "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/mysql/mariadb.conf.d/50-server.cnf"}]},{"type":"text","value":" and change the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"bind-address"}]},{"type":"text","value":" to:"}]},{"type":"element","tag":"code","props":{"code":"...\nbind-address = 0.0.0.0\n...\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-90435d"},"children":[{"type":"text","value":"..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-90435d"},"children":[{"type":"text","value":"bind-"}]},{"type":"element","tag":"span","props":{"class":"ct-dc41b2"},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"span","props":{"class":"ct-90435d"},"children":[{"type":"text","value":" = 0.0.0.0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-90435d"},"children":[{"type":"text","value":"..."}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"create-administrative-user"},"children":[{"type":"text","value":"Create Administrative User"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Create a new user "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"newuser"}]},{"type":"text","value":" for the host "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"localhost"}]},{"type":"text","value":" with a new "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"password"}]},{"type":"text","value":":"}]}]},{"type":"element","tag":"code","props":{"code":"CREATE USER 'newuser'@'localhost' IDENTIFIED BY 'password';\n","language":"mysql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"CREATE USER 'newuser'@'localhost' IDENTIFIED BY 'password';"}]}]}]}]}]},{"type":"element","tag":"ol","props":{"start":2},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Grant all permissions to the new user"}]}]},{"type":"element","tag":"code","props":{"code":"GRANT ALL PRIVILEGES ON * . * TO 'newuser'@'localhost';\n","language":"mysql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"GRANT ALL PRIVILEGES ON * . * TO 'newuser'@'localhost';"}]}]}]}]}]},{"type":"element","tag":"ol","props":{"start":3},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Update permissions"}]}]},{"type":"element","tag":"code","props":{"code":"FLUSH PRIVILEGES;\n","language":"mysql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"FLUSH PRIVILEGES;"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-dc41b2{color:#FF7B72}.ct-90435d{color:#C9D1D9}.light .ct-90435d{color:#657B83}.light .ct-dc41b2{color:#859900}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"install-mariadb-on-ubuntu-2004-lts","depth":2,"text":"Install MariaDB on Ubuntu 20.04 LTS"},{"id":"access-database-from-outside","depth":2,"text":"Access Database from outside"},{"id":"create-administrative-user","depth":2,"text":"Create Administrative User"}]}},"_type":"markdown","_id":"content:SQL:MySQL and MariaDB setup.md","_source":"content","_file":"SQL/MySQL and MariaDB setup.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/sql/mysql-and-mariadb-setup","_dir":"sql","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"MySQL And MariaDB Setup","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"install-mariadb-on-ubuntu-2004-lts"},"children":[{"type":"text","value":"Install MariaDB on Ubuntu 20.04 LTS"}]},{"type":"element","tag":"code","props":{"code":"sudo apt update\nsudo apt install mariadb-server\nsudo mysql_secure_installation\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"sudo apt update\nsudo apt install mariadb-server\nsudo mysql_secure_installation\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"access-database-from-outside"},"children":[{"type":"text","value":"Access Database from outside"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Open "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/mysql/mariadb.conf.d/50-server.cnf"}]},{"type":"text","value":" and change the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"bind-address"}]},{"type":"text","value":" to:"}]},{"type":"element","tag":"code","props":{"code":"...\nbind-address = 0.0.0.0\n...\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"...\nbind-address = 0.0.0.0\n...\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"create-administrative-user"},"children":[{"type":"text","value":"Create Administrative User"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Create a new user "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"newuser"}]},{"type":"text","value":" for the host "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"localhost"}]},{"type":"text","value":" with a new "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"password"}]},{"type":"text","value":":"}]}]},{"type":"element","tag":"code","props":{"code":"CREATE USER 'newuser'@'localhost' IDENTIFIED BY 'password';\n","language":"mysql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"CREATE USER 'newuser'@'localhost' IDENTIFIED BY 'password';\n"}]}]}]},{"type":"element","tag":"ol","props":{"start":2},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Grant all permissions to the new user"}]}]},{"type":"element","tag":"code","props":{"code":"GRANT ALL PRIVILEGES ON * . * TO 'newuser'@'localhost';\n","language":"mysql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"GRANT ALL PRIVILEGES ON * . * TO 'newuser'@'localhost';\n"}]}]}]},{"type":"element","tag":"ol","props":{"start":3},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Update permissions"}]}]},{"type":"element","tag":"code","props":{"code":"FLUSH PRIVILEGES;\n","language":"mysql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"FLUSH PRIVILEGES;\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"install-mariadb-on-ubuntu-2004-lts"},"children":[{"type":"text","value":"Install MariaDB on Ubuntu 20.04 LTS"}]},{"type":"element","tag":"code","props":{"code":"sudo apt update\nsudo apt install mariadb-server\nsudo mysql_secure_installation\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c1f08a"},"children":[{"type":"text","value":"sudo apt update"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c1f08a"},"children":[{"type":"text","value":"sudo apt install mariadb-server"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c1f08a"},"children":[{"type":"text","value":"sudo mysql_secure_installation"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"access-database-from-outside"},"children":[{"type":"text","value":"Access Database from outside"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Open "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/mysql/mariadb.conf.d/50-server.cnf"}]},{"type":"text","value":" and change the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"bind-address"}]},{"type":"text","value":" to:"}]},{"type":"element","tag":"code","props":{"code":"...\nbind-address = 0.0.0.0\n...\n","language":"nginx"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c1f08a"},"children":[{"type":"text","value":"..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c1f08a"},"children":[{"type":"text","value":"bind-"}]},{"type":"element","tag":"span","props":{"class":"ct-4287d3"},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"span","props":{"class":"ct-c1f08a"},"children":[{"type":"text","value":" = 0.0.0.0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c1f08a"},"children":[{"type":"text","value":"..."}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"create-administrative-user"},"children":[{"type":"text","value":"Create Administrative User"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Create a new user "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"newuser"}]},{"type":"text","value":" for the host "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"localhost"}]},{"type":"text","value":" with a new "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"password"}]},{"type":"text","value":":"}]}]},{"type":"element","tag":"code","props":{"code":"CREATE USER 'newuser'@'localhost' IDENTIFIED BY 'password';\n","language":"mysql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"CREATE USER 'newuser'@'localhost' IDENTIFIED BY 'password';"}]}]}]}]}]},{"type":"element","tag":"ol","props":{"start":2},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Grant all permissions to the new user"}]}]},{"type":"element","tag":"code","props":{"code":"GRANT ALL PRIVILEGES ON * . * TO 'newuser'@'localhost';\n","language":"mysql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"GRANT ALL PRIVILEGES ON * . * TO 'newuser'@'localhost';"}]}]}]}]}]},{"type":"element","tag":"ol","props":{"start":3},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Update permissions"}]}]},{"type":"element","tag":"code","props":{"code":"FLUSH PRIVILEGES;\n","language":"mysql"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"FLUSH PRIVILEGES;"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-4287d3{color:#FF7B72}.ct-c1f08a{color:#C9D1D9}.light .ct-c1f08a{color:#657B83}.light .ct-4287d3{color:#859900}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"install-mariadb-on-ubuntu-2004-lts","depth":2,"text":"Install MariaDB on Ubuntu 20.04 LTS"},{"id":"access-database-from-outside","depth":2,"text":"Access Database from outside"},{"id":"create-administrative-user","depth":2,"text":"Create Administrative User"}]}},"_type":"markdown","_id":"content:SQL:MySQL and MariaDB setup.md","_source":"content","_file":"SQL/MySQL and MariaDB setup.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/UBl6xR2vxQ.json b/docs/api/_content/query/UBl6xR2vxQ.json
index cf697d2..3b54726 100644
--- a/docs/api/_content/query/UBl6xR2vxQ.json
+++ b/docs/api/_content/query/UBl6xR2vxQ.json
@@ -1 +1 @@
-{"_path":"/docker/refresh-containers-on-pull","_dir":"docker","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Refresh Containers On Pull","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"setting-up-watchtower"},"children":[{"type":"text","value":"Setting up watchtower"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://containrrr.dev/watchtower/","rel":["nofollow"]},"children":[{"type":"text","value":"Watchtower"}]},{"type":"text","value":" will automatically pull updated #docker containers. Can be used with "},{"type":"element","tag":"a","props":{"href":"Private%20docker%20registry"},"children":[{"type":"text","value":"Private docker registry"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"Drone-ci"},"children":[{"type":"text","value":"Drone-ci"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"version: \"3\"\n\nservices:\n watchtower:\n container_name: docker__watchtower\n image: v2tec/watchtower\n restart: always\n volumes:\n - /var/run/docker.sock:/var/run/docker.sock\n - /home/user/.docker/config.json:/config.json\n command: --interval 60 image_1 image_2\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"version: \"3\"\n\nservices:\n watchtower:\n container_name: docker__watchtower\n image: v2tec/watchtower\n restart: always\n volumes:\n - /var/run/docker.sock:/var/run/docker.sock\n - /home/user/.docker/config.json:/config.json\n command: --interval 60 image_1 image_2\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"setting-up-watchtower"},"children":[{"type":"text","value":"Setting up watchtower"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://containrrr.dev/watchtower/","rel":["nofollow"]},"children":[{"type":"text","value":"Watchtower"}]},{"type":"text","value":" will automatically pull updated #docker containers. Can be used with "},{"type":"element","tag":"a","props":{"href":"Private%20docker%20registry"},"children":[{"type":"text","value":"Private docker registry"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"Drone-ci"},"children":[{"type":"text","value":"Drone-ci"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"version: \"3\"\n\nservices:\n watchtower:\n container_name: docker__watchtower\n image: v2tec/watchtower\n restart: always\n volumes:\n - /var/run/docker.sock:/var/run/docker.sock\n - /home/user/.docker/config.json:/config.json\n command: --interval 60 image_1 image_2\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-31f911"},"children":[{"type":"text","value":"version"}]},{"type":"element","tag":"span","props":{"class":"ct-1873fc"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1aa90a"},"children":[{"type":"text","value":"\"3\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-31f911"},"children":[{"type":"text","value":"services"}]},{"type":"element","tag":"span","props":{"class":"ct-1873fc"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1873fc"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-31f911"},"children":[{"type":"text","value":"watchtower"}]},{"type":"element","tag":"span","props":{"class":"ct-1873fc"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1873fc"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-31f911"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-1873fc"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1aa90a"},"children":[{"type":"text","value":"docker__watchtower"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1873fc"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-31f911"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-1873fc"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1aa90a"},"children":[{"type":"text","value":"v2tec/watchtower"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1873fc"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-31f911"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-1873fc"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1aa90a"},"children":[{"type":"text","value":"always"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1873fc"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-31f911"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-1873fc"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1873fc"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-1aa90a"},"children":[{"type":"text","value":"/var/run/docker.sock:/var/run/docker.sock"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1873fc"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-1aa90a"},"children":[{"type":"text","value":"/home/user/.docker/config.json:/config.json"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1873fc"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-31f911"},"children":[{"type":"text","value":"command"}]},{"type":"element","tag":"span","props":{"class":"ct-1873fc"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1aa90a"},"children":[{"type":"text","value":"--interval 60 image_1 image_2"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-1aa90a{color:#A5D6FF}.ct-1873fc{color:#C9D1D9}.ct-31f911{color:#7EE787}.light .ct-31f911{color:#268BD2}.light .ct-1873fc{color:#657B83}.light .ct-1aa90a{color:#2AA198}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"setting-up-watchtower","depth":2,"text":"Setting up watchtower"}]}},"_type":"markdown","_id":"content:Docker:Refresh containers on pull.md","_source":"content","_file":"Docker/Refresh containers on pull.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/docker/refresh-containers-on-pull","_dir":"docker","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Refresh Containers On Pull","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"setting-up-watchtower"},"children":[{"type":"text","value":"Setting up watchtower"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://containrrr.dev/watchtower/","rel":["nofollow"]},"children":[{"type":"text","value":"Watchtower"}]},{"type":"text","value":" will automatically pull updated #docker containers. Can be used with "},{"type":"element","tag":"a","props":{"href":"Private%20docker%20registry"},"children":[{"type":"text","value":"Private docker registry"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"Drone-ci"},"children":[{"type":"text","value":"Drone-ci"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"version: \"3\"\n\nservices:\n watchtower:\n container_name: docker__watchtower\n image: v2tec/watchtower\n restart: always\n volumes:\n - /var/run/docker.sock:/var/run/docker.sock\n - /home/user/.docker/config.json:/config.json\n command: --interval 60 image_1 image_2\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"version: \"3\"\n\nservices:\n watchtower:\n container_name: docker__watchtower\n image: v2tec/watchtower\n restart: always\n volumes:\n - /var/run/docker.sock:/var/run/docker.sock\n - /home/user/.docker/config.json:/config.json\n command: --interval 60 image_1 image_2\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"setting-up-watchtower"},"children":[{"type":"text","value":"Setting up watchtower"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://containrrr.dev/watchtower/","rel":["nofollow"]},"children":[{"type":"text","value":"Watchtower"}]},{"type":"text","value":" will automatically pull updated #docker containers. Can be used with "},{"type":"element","tag":"a","props":{"href":"Private%20docker%20registry"},"children":[{"type":"text","value":"Private docker registry"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"Drone-ci"},"children":[{"type":"text","value":"Drone-ci"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"version: \"3\"\n\nservices:\n watchtower:\n container_name: docker__watchtower\n image: v2tec/watchtower\n restart: always\n volumes:\n - /var/run/docker.sock:/var/run/docker.sock\n - /home/user/.docker/config.json:/config.json\n command: --interval 60 image_1 image_2\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fcd641"},"children":[{"type":"text","value":"version"}]},{"type":"element","tag":"span","props":{"class":"ct-2fce29"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b05832"},"children":[{"type":"text","value":"\"3\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fcd641"},"children":[{"type":"text","value":"services"}]},{"type":"element","tag":"span","props":{"class":"ct-2fce29"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2fce29"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fcd641"},"children":[{"type":"text","value":"watchtower"}]},{"type":"element","tag":"span","props":{"class":"ct-2fce29"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2fce29"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fcd641"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-2fce29"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b05832"},"children":[{"type":"text","value":"docker__watchtower"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2fce29"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fcd641"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-2fce29"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b05832"},"children":[{"type":"text","value":"v2tec/watchtower"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2fce29"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fcd641"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-2fce29"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b05832"},"children":[{"type":"text","value":"always"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2fce29"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fcd641"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-2fce29"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2fce29"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b05832"},"children":[{"type":"text","value":"/var/run/docker.sock:/var/run/docker.sock"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2fce29"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-b05832"},"children":[{"type":"text","value":"/home/user/.docker/config.json:/config.json"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2fce29"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fcd641"},"children":[{"type":"text","value":"command"}]},{"type":"element","tag":"span","props":{"class":"ct-2fce29"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-b05832"},"children":[{"type":"text","value":"--interval 60 image_1 image_2"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-b05832{color:#A5D6FF}.ct-2fce29{color:#C9D1D9}.ct-fcd641{color:#7EE787}.light .ct-fcd641{color:#268BD2}.light .ct-2fce29{color:#657B83}.light .ct-b05832{color:#2AA198}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"setting-up-watchtower","depth":2,"text":"Setting up watchtower"}]}},"_type":"markdown","_id":"content:Docker:Refresh containers on pull.md","_source":"content","_file":"Docker/Refresh containers on pull.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/WJQDeZ21lK.json b/docs/api/_content/query/WJQDeZ21lK.json
index 66f0cfb..797854c 100644
--- a/docs/api/_content/query/WJQDeZ21lK.json
+++ b/docs/api/_content/query/WJQDeZ21lK.json
@@ -1 +1 @@
-{"_path":"/git/git-aliases-and-useful-commands","_dir":"git","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Git Aliases And Useful Commands","description":"Shorthands for #git commands can be specified. Should be placed at ~/.gitconfig.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Shorthands for #git commands can be specified. Should be placed at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"~/.gitconfig"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"[alias]\n flush = git clean-branches branch | grep -v master | xargs git branch -D\n lol = log --oneline --graph\n l = lol\n c = commit -am\n cv = commit --no-verify -am\n p = push\n pf = p --force-with-lease\n ignore-now = update-index --skip-worktree\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"[alias]\n flush = git clean-branches branch | grep -v master | xargs git branch -D\n lol = log --oneline --graph\n l = lol\n c = commit -am\n cv = commit --no-verify -am\n p = push\n pf = p --force-with-lease\n ignore-now = update-index --skip-worktree\n"}]}]}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"command"}]}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"description"}]}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git flush"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"drops all branches, except master"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git lol"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"shows log"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git c"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"commits with message"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git cv"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"commits without hooks"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git p"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"pushes"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git pf"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"push with --force and additional check"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git ignore-now"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"starts ignoring file from now on"}]}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Shorthands for #git commands can be specified. Should be placed at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"~/.gitconfig"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"[alias]\n flush = git clean-branches branch | grep -v master | xargs git branch -D\n lol = log --oneline --graph\n l = lol\n c = commit -am\n cv = commit --no-verify -am\n p = push\n pf = p --force-with-lease\n ignore-now = update-index --skip-worktree\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":"[alias]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":" flush "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":" git clean"}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":"branches branch "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":" grep "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":"v master "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":" xargs git branch "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":"D"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":" lol "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":" log "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"--"}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":"oneline "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"--"}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":"graph"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":" l "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":" lol"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":" c "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":" commit "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":"am"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":" cv "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":" commit "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"--"}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":"no"}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":"verify "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":"am"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":" p "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":" push"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":" pf "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":" p "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"--"}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":"force"}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":"with"}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":"lease"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":" ignore"}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":"now "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":" update"}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":"index "}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"--"}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":"skip"}]},{"type":"element","tag":"span","props":{"class":"ct-949382"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-a2d84d"},"children":[{"type":"text","value":"worktree"}]}]}]}]}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"command"}]}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"description"}]}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git flush"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"drops all branches, except master"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git lol"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"shows log"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git c"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"commits with message"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git cv"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"commits without hooks"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git p"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"pushes"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git pf"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"push with --force and additional check"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git ignore-now"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"starts ignoring file from now on"}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-949382{color:#FF7B72}.ct-a2d84d{color:#C9D1D9}.light .ct-a2d84d{color:#657B83}.light .ct-949382{color:#859900}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Git:Git aliases and useful commands.md","_source":"content","_file":"Git/Git aliases and useful commands.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/git/git-aliases-and-useful-commands","_dir":"git","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Git Aliases And Useful Commands","description":"Shorthands for #git commands can be specified. Should be placed at ~/.gitconfig.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Shorthands for #git commands can be specified. Should be placed at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"~/.gitconfig"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"[alias]\n flush = git clean-branches branch | grep -v master | xargs git branch -D\n lol = log --oneline --graph\n l = lol\n c = commit -am\n cv = commit --no-verify -am\n p = push\n pf = p --force-with-lease\n ignore-now = update-index --skip-worktree\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"[alias]\n flush = git clean-branches branch | grep -v master | xargs git branch -D\n lol = log --oneline --graph\n l = lol\n c = commit -am\n cv = commit --no-verify -am\n p = push\n pf = p --force-with-lease\n ignore-now = update-index --skip-worktree\n"}]}]}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"command"}]}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"description"}]}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git flush"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"drops all branches, except master"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git lol"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"shows log"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git c"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"commits with message"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git cv"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"commits without hooks"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git p"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"pushes"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git pf"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"push with --force and additional check"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git ignore-now"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"starts ignoring file from now on"}]}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Shorthands for #git commands can be specified. Should be placed at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"~/.gitconfig"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"[alias]\n flush = git clean-branches branch | grep -v master | xargs git branch -D\n lol = log --oneline --graph\n l = lol\n c = commit -am\n cv = commit --no-verify -am\n p = push\n pf = p --force-with-lease\n ignore-now = update-index --skip-worktree\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":"[alias]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":" flush "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":" git clean"}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":"branches branch "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":" grep "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":"v master "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":" xargs git branch "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":"D"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":" lol "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":" log "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"--"}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":"oneline "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"--"}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":"graph"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":" l "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":" lol"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":" c "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":" commit "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":"am"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":" cv "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":" commit "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"--"}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":"no"}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":"verify "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":"am"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":" p "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":" push"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":" pf "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":" p "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"--"}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":"force"}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":"with"}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":"lease"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":" ignore"}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":"now "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":" update"}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":"index "}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"--"}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":"skip"}]},{"type":"element","tag":"span","props":{"class":"ct-00cd05"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-145c34"},"children":[{"type":"text","value":"worktree"}]}]}]}]}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"command"}]}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"description"}]}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git flush"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"drops all branches, except master"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git lol"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"shows log"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git c"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"commits with message"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git cv"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"commits without hooks"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git p"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"pushes"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git pf"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"push with --force and additional check"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"git ignore-now"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"starts ignoring file from now on"}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-00cd05{color:#FF7B72}.ct-145c34{color:#C9D1D9}.light .ct-145c34{color:#657B83}.light .ct-00cd05{color:#859900}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Git:Git aliases and useful commands.md","_source":"content","_file":"Git/Git aliases and useful commands.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/WO7KYRkFiw.json b/docs/api/_content/query/WO7KYRkFiw.json
index 7a127af..77dc1ec 100644
--- a/docs/api/_content/query/WO7KYRkFiw.json
+++ b/docs/api/_content/query/WO7KYRkFiw.json
@@ -1 +1 @@
-{"_path":"/blockchain/smart-contracts","_dir":"blockchain","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Smart Contracts","description":"For common functions see Common typescript examples.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For common functions see "},{"type":"element","tag":"a","props":{"href":"Common%20typescript%20examples"},"children":[{"type":"text","value":"Common typescript examples"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"getting-smart-contract-instance"},"children":[{"type":"text","value":"Getting smart contract instance"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Useful for calling smart contract methods:"}]},{"type":"element","tag":"code","props":{"code":"import { Contract } from 'web3-eth-contract';\nimport { web3 } from '.';\n\nconst getContract = (abi: object, address?: string): Contract => {\n const abiFromJson = JSON.parse(JSON.stringify(abi));\n return new web3.eth.Contract(abiFromJson, address);\n};\n\nexport default getContract;\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { Contract } from 'web3-eth-contract';\nimport { web3 } from '.';\n\nconst getContract = (abi: object, address?: string): Contract => {\n const abiFromJson = JSON.parse(JSON.stringify(abi));\n return new web3.eth.Contract(abiFromJson, address);\n};\n\nexport default getContract;\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"executing-contract-method"},"children":[{"type":"text","value":"Executing contract method"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Contract has "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"read"}]},{"type":"text","value":" and "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"write"}]},{"type":"text","value":" methods. To get a list of methods, you can paste contract address on "},{"type":"element","tag":"a","props":{"href":"https://etherscan.io/token/0xdac17f958d2ee523a2206206994597c13d831ec7#readContract","rel":["nofollow"]},"children":[{"type":"text","value":"https://etherscan.io/ ETH"}]},{"type":"text","value":" or any other service."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Read"}]},{"type":"text","value":" methods doesn't require spending "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"gas"}]},{"type":"text","value":". "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Write"}]},{"type":"text","value":" methods cost some amount of "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"gas"}]},{"type":"text","value":", hence they will be executed with confirmation from user."}]},{"type":"element","tag":"h3","props":{"id":"example-for-metamask-without-private-key"},"children":[{"type":"text","value":"Example for #Metamask without private key"}]},{"type":"element","tag":"code","props":{"code":"// see example below\nimport { getContract } from '.';\n\n// ABI of contract\nconst CONTRACT_ABI = { /* ... */ };\n // address for contract\nconst CONTRACT_ADDRESS = '0xdea164f67df4dbfe675d5271c9d404e0260f33bb';\n\nexport const executeContractMethod = async ({}) => {\n // getting contract\n const contract = getContract(CONTRACT_ABI, CONTRACT_ADDRESS);\n \n // Calling write method\n try {\n // authorizing with Metamask\n await web3.currentProvider.request({ method: 'eth_requestAccounts' });\n // getting wallet address\n const addressUser = web3.currentProvider.selectedAddress;\n // calling \"store\" store method for contract\n // payload should include `from` address, that matches\n // current user's wallet\n await contract.methods.store(0, 'Parameter').send({\n from: addressUser,\n });\n } catch (e) {\n throw new Error(e);\n }\n \n // calling read method\n try {\n // this method can return data\n const result = await contract.methods.retrieve().call();\n } catch (e) {\n throw new Error(e);\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// see example below\nimport { getContract } from '.';\n\n// ABI of contract\nconst CONTRACT_ABI = { /* ... */ };\n // address for contract\nconst CONTRACT_ADDRESS = '0xdea164f67df4dbfe675d5271c9d404e0260f33bb';\n\nexport const executeContractMethod = async ({}) => {\n // getting contract\n const contract = getContract(CONTRACT_ABI, CONTRACT_ADDRESS);\n \n // Calling write method\n try {\n // authorizing with Metamask\n await web3.currentProvider.request({ method: 'eth_requestAccounts' });\n // getting wallet address\n const addressUser = web3.currentProvider.selectedAddress;\n // calling \"store\" store method for contract\n // payload should include `from` address, that matches\n // current user's wallet\n await contract.methods.store(0, 'Parameter').send({\n from: addressUser,\n });\n } catch (e) {\n throw new Error(e);\n }\n \n // calling read method\n try {\n // this method can return data\n const result = await contract.methods.retrieve().call();\n } catch (e) {\n throw new Error(e);\n }\n}\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"nodejs-and-react-native-example"},"children":[{"type":"text","value":"Node.js and React Native example"}]},{"type":"element","tag":"code","props":{"code":"// see example below\nimport { getContract } from '.';\n\n// ABI контракта\nconst CONTRACT_ABI = { /* ... */ };\n// contract address\nconst CONTRACT_ADDRESS = '0xdea164f67df4dbfe675d5271c9d404e0260f33bb';\n// getting contract\nconst contract = getContract(CONTRACT_ABI, CONTRACT_ADDRESS);\n// account's private key\nconst privateKey = '...';\n\n// write-methods requires private key\nconst executeContractMethod = async (val: number) => {\n const transaction = contract.methods.store(val);\n const account = web3.eth.accounts.privateKeyToAccount(privateKey);\n const options = {\n to: CONTRACT_ADDRESS,\n data: transaction.encodeABI(),\n gas: await transaction.estimateGas({ from: account.address }),\n gasPrice: await web3.eth.getGasPrice(),\n };\n const signed = await web3.eth.accounts.signTransaction(\n options,\n privateKey,\n );\n await web3.eth.sendSignedTransaction(signed.rawTransaction!);\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// see example below\nimport { getContract } from '.';\n\n// ABI контракта\nconst CONTRACT_ABI = { /* ... */ };\n// contract address\nconst CONTRACT_ADDRESS = '0xdea164f67df4dbfe675d5271c9d404e0260f33bb';\n// getting contract\nconst contract = getContract(CONTRACT_ABI, CONTRACT_ADDRESS);\n// account's private key\nconst privateKey = '...';\n\n// write-methods requires private key\nconst executeContractMethod = async (val: number) => {\n const transaction = contract.methods.store(val);\n const account = web3.eth.accounts.privateKeyToAccount(privateKey);\n const options = {\n to: CONTRACT_ADDRESS,\n data: transaction.encodeABI(),\n gas: await transaction.estimateGas({ from: account.address }),\n gasPrice: await web3.eth.getGasPrice(),\n };\n const signed = await web3.eth.accounts.signTransaction(\n options,\n privateKey,\n );\n await web3.eth.sendSignedTransaction(signed.rawTransaction!);\n};\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"calling-a-batch-of-contracts-methods"},"children":[{"type":"text","value":"Calling a batch of contract's methods"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Function calls batch of requests, returning array of results. For example:"}]},{"type":"element","tag":"code","props":{"code":" const requests = [\n contract.method.balanceOf().call,\n contract.method.getStaked().call\n ]\n\n const result = await makeBatchRequest(request);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":" const requests = [\n contract.method.balanceOf().call,\n contract.method.getStaked().call\n ]\n\n const result = await makeBatchRequest(request);\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"const web3 = new Web3(Web3.givenProvider || PROVIDER_URL);\n\nconst makeBatchRequest = (calls: any[]) => {\n try {\n const web3 = getWeb3NoAccount();\n const batch = new web3.BatchRequest();\n\n const promises = calls.map((call) => {\n return new Promise((resolve, reject) => {\n batch.add(\n call.request({}, (err, result) => {\n if (err) {\n reject(err);\n } else {\n resolve(result);\n }\n })\n );\n });\n });\n\n batch.execute();\n\n return Promise.all(promises);\n } catch {\n return null;\n }\n};\n\nexport default makeBatchRequest;\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const web3 = new Web3(Web3.givenProvider || PROVIDER_URL);\n\nconst makeBatchRequest = (calls: any[]) => {\n try {\n const web3 = getWeb3NoAccount();\n const batch = new web3.BatchRequest();\n\n const promises = calls.map((call) => {\n return new Promise((resolve, reject) => {\n batch.add(\n call.request({}, (err, result) => {\n if (err) {\n reject(err);\n } else {\n resolve(result);\n }\n })\n );\n });\n });\n\n batch.execute();\n\n return Promise.all(promises);\n } catch {\n return null;\n }\n};\n\nexport default makeBatchRequest;\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"subscribing-to-smart-contract-events"},"children":[{"type":"text","value":"Subscribing to smart contract events"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There're different ways to subscribe for contract events. For all of them you will need following variables:"}]},{"type":"element","tag":"code","props":{"code":" import Web3 from 'web3';\n const web3 = new Web3('YOUR_RPC_ENDPOINT_HERE');\n const ABI = 'YOUR ABI HERE';\n const CONTRACT_ADDRESS = 'YOUR CONTRACT ADDRESS HERE';\n const myContract = new Web3.Contract(ABI, CONTRACT_ADDRESS);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":" import Web3 from 'web3';\n const web3 = new Web3('YOUR_RPC_ENDPOINT_HERE');\n const ABI = 'YOUR ABI HERE';\n const CONTRACT_ADDRESS = 'YOUR CONTRACT ADDRESS HERE';\n const myContract = new Web3.Contract(ABI, CONTRACT_ADDRESS);\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"by-accessing-contractevents"},"children":[{"type":"text","value":"By accessing contract.events"}]},{"type":"element","tag":"code","props":{"code":"referralProgramContract.events\n .RegisterUser()\n .on('connected', (subscriptionId: string) => {\n console.log(`| UserRegistered | events | ${subscriptionId}`);\n })\n .on(\n 'data',\n async (event: {\n removed: boolean;\n returnValues: RegisterUserResponseInterface;\n }) => {\n try {\n if (event.removed) {\n return;\n }\n const { user, referrer } = event.returnValues;\n console.log(user, referrer);\n } catch (e) {\n console.log(`| ONCE | ${e}`);\n }\n },\n )\n .on('error', (error: ErrnoException) => {\n console.log(error);\n });\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"referralProgramContract.events\n .RegisterUser()\n .on('connected', (subscriptionId: string) => {\n console.log(`| UserRegistered | events | ${subscriptionId}`);\n })\n .on(\n 'data',\n async (event: {\n removed: boolean;\n returnValues: RegisterUserResponseInterface;\n }) => {\n try {\n if (event.removed) {\n return;\n }\n const { user, referrer } = event.returnValues;\n console.log(user, referrer);\n } catch (e) {\n console.log(`| ONCE | ${e}`);\n }\n },\n )\n .on('error', (error: ErrnoException) => {\n console.log(error);\n });\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"with-filtering"},"children":[{"type":"text","value":"With filtering"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We're listening to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Transfer"}]},{"type":"text","value":" event here:"}]},{"type":"element","tag":"code","props":{"code":" let options = {\n filter: {\n value: [],\n },\n fromBlock: 0\n };\n\n myContract.events.Transfer(options)\n .on('data', event => console.log(event))\n .on('changed', changed => console.log(changed))\n .on('error', err => throw err)\n .on('connected', str => console.log(str))\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":" let options = {\n filter: {\n value: [],\n },\n fromBlock: 0\n };\n\n myContract.events.Transfer(options)\n .on('data', event => console.log(event))\n .on('changed', changed => console.log(changed))\n .on('error', err => throw err)\n .on('connected', str => console.log(str))\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"common-subscribe-method"},"children":[{"type":"text","value":"Common Subscribe method"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Filtering options can also be specified:"}]},{"type":"element","tag":"code","props":{"code":" let options = {\n fromBlock: 0,\n address: ['address-1', 'address-2'], //Only get events from specific addresses\n topics: [] //What topics to subscribe to\n };\n\n let subscription = ('logs', options, (err,event) => {\n if (!err)\n console.log(event)\n });\n\n subscription.on('data', event => console.log(event))\n subscription.on('changed', changed => console.log(changed))\n subscription.on('error', err => { throw err })\n subscription.on('connected', nr => console.log(nr))\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":" let options = {\n fromBlock: 0,\n address: ['address-1', 'address-2'], //Only get events from specific addresses\n topics: [] //What topics to subscribe to\n };\n\n let subscription = ('logs', options, (err,event) => {\n if (!err)\n console.log(event)\n });\n\n subscription.on('data', event => console.log(event))\n subscription.on('changed', changed => console.log(changed))\n subscription.on('error', err => { throw err })\n subscription.on('connected', nr => console.log(nr))\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"getting-event-history"},"children":[{"type":"text","value":"Getting event history"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Getting history for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Transfer"}]},{"type":"text","value":" events for specific values. More info can be found "},{"type":"element","tag":"a","props":{"href":"https://web3js.readthedocs.io/en/v1.2.11/web3-eth-subscribe.html#","rel":["nofollow"]},"children":[{"type":"text","value":"here"}]}]},{"type":"element","tag":"code","props":{"code":" //example options(optional)\n let options = {\n filter: {\n // only get events where transfer value was 1000 or 1337\n value: ['1000', '1337'] \n },\n // number | \"earliest\" | \"pending\" | \"latest\"\n fromBlock: 0, \n toBlock: 'latest'\n };\n\n myContract.getPastEvents('Transfer', options)\n .then(results => console.log(results))\n .catch(err => throw err);\n\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":" //example options(optional)\n let options = {\n filter: {\n // only get events where transfer value was 1000 or 1337\n value: ['1000', '1337'] \n },\n // number | \"earliest\" | \"pending\" | \"latest\"\n fromBlock: 0, \n toBlock: 'latest'\n };\n\n myContract.getPastEvents('Transfer', options)\n .then(results => console.log(results))\n .catch(err => throw err);\n\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For common functions see "},{"type":"element","tag":"a","props":{"href":"Common%20typescript%20examples"},"children":[{"type":"text","value":"Common typescript examples"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"getting-smart-contract-instance"},"children":[{"type":"text","value":"Getting smart contract instance"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Useful for calling smart contract methods:"}]},{"type":"element","tag":"code","props":{"code":"import { Contract } from 'web3-eth-contract';\nimport { web3 } from '.';\n\nconst getContract = (abi: object, address?: string): Contract => {\n const abiFromJson = JSON.parse(JSON.stringify(abi));\n return new web3.eth.Contract(abiFromJson, address);\n};\n\nexport default getContract;\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"Contract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'web3-eth-contract'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'.'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39fbef"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-98d685"},"children":[{"type":"text","value":"getContract"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7760"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-8d5659"},"children":[{"type":"text","value":"abi"}]},{"type":"element","tag":"span","props":{"class":"ct-ba7760"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e9d8e"},"children":[{"type":"text","value":"object"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-8d5659"},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"span","props":{"class":"ct-ba7760"},"children":[{"type":"text","value":"?:"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e9d8e"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-ba7760"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-39fbef"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-39fbef"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f3b352"},"children":[{"type":"text","value":"abiFromJson"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7760"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-82aa2e"},"children":[{"type":"text","value":"JSON"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f3b352"},"children":[{"type":"text","value":"parse"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"Contract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"abiFromJson"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-d2d503"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-d2d503"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"getContract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":";"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"executing-contract-method"},"children":[{"type":"text","value":"Executing contract method"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Contract has "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"read"}]},{"type":"text","value":" and "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"write"}]},{"type":"text","value":" methods. To get a list of methods, you can paste contract address on "},{"type":"element","tag":"a","props":{"href":"https://etherscan.io/token/0xdac17f958d2ee523a2206206994597c13d831ec7#readContract","rel":["nofollow"]},"children":[{"type":"text","value":"https://etherscan.io/ ETH"}]},{"type":"text","value":" or any other service."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Read"}]},{"type":"text","value":" methods doesn't require spending "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"gas"}]},{"type":"text","value":". "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Write"}]},{"type":"text","value":" methods cost some amount of "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"gas"}]},{"type":"text","value":", hence they will be executed with confirmation from user."}]},{"type":"element","tag":"h3","props":{"id":"example-for-metamask-without-private-key"},"children":[{"type":"text","value":"Example for #Metamask without private key"}]},{"type":"element","tag":"code","props":{"code":"// see example below\nimport { getContract } from '.';\n\n// ABI of contract\nconst CONTRACT_ABI = { /* ... */ };\n // address for contract\nconst CONTRACT_ADDRESS = '0xdea164f67df4dbfe675d5271c9d404e0260f33bb';\n\nexport const executeContractMethod = async ({}) => {\n // getting contract\n const contract = getContract(CONTRACT_ABI, CONTRACT_ADDRESS);\n \n // Calling write method\n try {\n // authorizing with Metamask\n await web3.currentProvider.request({ method: 'eth_requestAccounts' });\n // getting wallet address\n const addressUser = web3.currentProvider.selectedAddress;\n // calling \"store\" store method for contract\n // payload should include `from` address, that matches\n // current user's wallet\n await contract.methods.store(0, 'Parameter').send({\n from: addressUser,\n });\n } catch (e) {\n throw new Error(e);\n }\n \n // calling read method\n try {\n // this method can return data\n const result = await contract.methods.retrieve().call();\n } catch (e) {\n throw new Error(e);\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// see example below"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"getContract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'.'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// ABI of contract"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"CONTRACT_ABI"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"/* ... */"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// address for contract"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"CONTRACT_ADDRESS"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'0xdea164f67df4dbfe675d5271c9d404e0260f33bb'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"executeContractMethod"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" ({}) "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// getting contract"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"contract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"getContract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"CONTRACT_ABI"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"CONTRACT_ADDRESS"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// Calling write method"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"try"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// authorizing with Metamask"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"currentProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"({ method: "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'eth_requestAccounts'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// getting wallet address"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"addressUser"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"currentProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"selectedAddress"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// calling \"store\" store method for contract"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// payload should include `from` address, that matches"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// current user's wallet"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"contract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"methods"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"store"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-6138fb"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'Parameter'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"send"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" from: "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"addressUser"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"e"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ee6b52"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"e"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// calling read method"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"try"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// this method can return data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"result"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"contract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"methods"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"retrieve"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"()."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"call"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"e"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ee6b52"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"e"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"nodejs-and-react-native-example"},"children":[{"type":"text","value":"Node.js and React Native example"}]},{"type":"element","tag":"code","props":{"code":"// see example below\nimport { getContract } from '.';\n\n// ABI контракта\nconst CONTRACT_ABI = { /* ... */ };\n// contract address\nconst CONTRACT_ADDRESS = '0xdea164f67df4dbfe675d5271c9d404e0260f33bb';\n// getting contract\nconst contract = getContract(CONTRACT_ABI, CONTRACT_ADDRESS);\n// account's private key\nconst privateKey = '...';\n\n// write-methods requires private key\nconst executeContractMethod = async (val: number) => {\n const transaction = contract.methods.store(val);\n const account = web3.eth.accounts.privateKeyToAccount(privateKey);\n const options = {\n to: CONTRACT_ADDRESS,\n data: transaction.encodeABI(),\n gas: await transaction.estimateGas({ from: account.address }),\n gasPrice: await web3.eth.getGasPrice(),\n };\n const signed = await web3.eth.accounts.signTransaction(\n options,\n privateKey,\n );\n await web3.eth.sendSignedTransaction(signed.rawTransaction!);\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// see example below"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"getContract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'.'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// ABI контракта"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"CONTRACT_ABI"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"/* ... */"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// contract address"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"CONTRACT_ADDRESS"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'0xdea164f67df4dbfe675d5271c9d404e0260f33bb'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// getting contract"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"contract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"getContract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"CONTRACT_ABI"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"CONTRACT_ADDRESS"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// account's private key"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"privateKey"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'...'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// write-methods requires private key"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39fbef"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-98d685"},"children":[{"type":"text","value":"executeContractMethod"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7760"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-39fbef"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-8d5659"},"children":[{"type":"text","value":"val"}]},{"type":"element","tag":"span","props":{"class":"ct-ba7760"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e9d8e"},"children":[{"type":"text","value":"number"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-39fbef"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"transaction"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"contract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"methods"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"store"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"val"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"account"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"accounts"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"privateKeyToAccount"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"privateKey"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" to: "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"CONTRACT_ADDRESS"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" data: "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"transaction"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"encodeABI"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"(),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" gas: "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"transaction"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"estimateGas"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"({ from: "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"account"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" gasPrice: "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"getGasPrice"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"(),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"signed"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"accounts"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"signTransaction"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"privateKey"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"sendSignedTransaction"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"signed"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"rawTransaction"}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"calling-a-batch-of-contracts-methods"},"children":[{"type":"text","value":"Calling a batch of contract's methods"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Function calls batch of requests, returning array of results. For example:"}]},{"type":"element","tag":"code","props":{"code":" const requests = [\n contract.method.balanceOf().call,\n contract.method.getStaked().call\n ]\n\n const result = await makeBatchRequest(request);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"requests"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"contract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"method"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"balanceOf"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"()."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"call"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"contract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"method"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"getStaked"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"()."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"call"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" ]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"result"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"makeBatchRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"const web3 = new Web3(Web3.givenProvider || PROVIDER_URL);\n\nconst makeBatchRequest = (calls: any[]) => {\n try {\n const web3 = getWeb3NoAccount();\n const batch = new web3.BatchRequest();\n\n const promises = calls.map((call) => {\n return new Promise((resolve, reject) => {\n batch.add(\n call.request({}, (err, result) => {\n if (err) {\n reject(err);\n } else {\n resolve(result);\n }\n })\n );\n });\n });\n\n batch.execute();\n\n return Promise.all(promises);\n } catch {\n return null;\n }\n};\n\nexport default makeBatchRequest;\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"givenProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"PROVIDER_URL"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-39fbef"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-98d685"},"children":[{"type":"text","value":"makeBatchRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7760"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-8d5659"},"children":[{"type":"text","value":"calls"}]},{"type":"element","tag":"span","props":{"class":"ct-ba7760"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e9d8e"},"children":[{"type":"text","value":"any"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":"[]) "}]},{"type":"element","tag":"span","props":{"class":"ct-39fbef"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"try"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"getWeb3NoAccount"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"batch"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"BatchRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"promises"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"calls"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"map"}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7760"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7760"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e9d8e"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":"(("}]},{"type":"element","tag":"span","props":{"class":"ct-8d5659"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-8d5659"},"children":[{"type":"text","value":"reject"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-39fbef"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"batch"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"add"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"err"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"reject"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"err"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"else"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"result"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"batch"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"execute"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ee6b52"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"all"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"promises"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f1ea08"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-d2d503"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-d2d503"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"makeBatchRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":";"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"subscribing-to-smart-contract-events"},"children":[{"type":"text","value":"Subscribing to smart contract events"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There're different ways to subscribe for contract events. For all of them you will need following variables:"}]},{"type":"element","tag":"code","props":{"code":" import Web3 from 'web3';\n const web3 = new Web3('YOUR_RPC_ENDPOINT_HERE');\n const ABI = 'YOUR ABI HERE';\n const CONTRACT_ADDRESS = 'YOUR CONTRACT ADDRESS HERE';\n const myContract = new Web3.Contract(ABI, CONTRACT_ADDRESS);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'web3'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'YOUR_RPC_ENDPOINT_HERE'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"ABI"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'YOUR ABI HERE'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"CONTRACT_ADDRESS"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'YOUR CONTRACT ADDRESS HERE'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"myContract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"Contract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"ABI"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"CONTRACT_ADDRESS"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"by-accessing-contractevents"},"children":[{"type":"text","value":"By accessing contract.events"}]},{"type":"element","tag":"code","props":{"code":"referralProgramContract.events\n .RegisterUser()\n .on('connected', (subscriptionId: string) => {\n console.log(`| UserRegistered | events | ${subscriptionId}`);\n })\n .on(\n 'data',\n async (event: {\n removed: boolean;\n returnValues: RegisterUserResponseInterface;\n }) => {\n try {\n if (event.removed) {\n return;\n }\n const { user, referrer } = event.returnValues;\n console.log(user, referrer);\n } catch (e) {\n console.log(`| ONCE | ${e}`);\n }\n },\n )\n .on('error', (error: ErrnoException) => {\n console.log(error);\n });\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"referralProgramContract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"events"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"RegisterUser"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-98d685"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86b87d"},"children":[{"type":"text","value":"'connected'"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":", ("}]},{"type":"element","tag":"span","props":{"class":"ct-8d5659"},"children":[{"type":"text","value":"subscriptionId"}]},{"type":"element","tag":"span","props":{"class":"ct-ba7760"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e9d8e"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-39fbef"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"`| UserRegistered | events | ${"}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"subscriptionId"}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"}`"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'data'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-39fbef"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-8d5659"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-ba7760"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d5659"},"children":[{"type":"text","value":"removed"}]},{"type":"element","tag":"span","props":{"class":"ct-ba7760"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e9d8e"},"children":[{"type":"text","value":"boolean"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d5659"},"children":[{"type":"text","value":"returnValues"}]},{"type":"element","tag":"span","props":{"class":"ct-ba7760"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-156cde"},"children":[{"type":"text","value":"RegisterUserResponseInterface"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" }) "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"try"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"removed"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"user"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-d06ad1"},"children":[{"type":"text","value":"referrer"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"returnValues"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"user"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"referrer"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"e"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"`| ONCE | ${"}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"e"}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"}`"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" )"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-98d685"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86b87d"},"children":[{"type":"text","value":"'error'"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":", ("}]},{"type":"element","tag":"span","props":{"class":"ct-8d5659"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-ba7760"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-156cde"},"children":[{"type":"text","value":"ErrnoException"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-39fbef"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-303309"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" });"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"with-filtering"},"children":[{"type":"text","value":"With filtering"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We're listening to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Transfer"}]},{"type":"text","value":" event here:"}]},{"type":"element","tag":"code","props":{"code":" let options = {\n filter: {\n value: [],\n },\n fromBlock: 0\n };\n\n myContract.events.Transfer(options)\n .on('data', event => console.log(event))\n .on('changed', changed => console.log(changed))\n .on('error', err => throw err)\n .on('connected', str => console.log(str))\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" filter: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" value: [],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" fromBlock: "}]},{"type":"element","tag":"span","props":{"class":"ct-6138fb"},"children":[{"type":"text","value":"0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"myContract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"events"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"Transfer"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'data'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'changed'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"changed"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'error'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'connected'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"str"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"))"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"common-subscribe-method"},"children":[{"type":"text","value":"Common Subscribe method"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Filtering options can also be specified:"}]},{"type":"element","tag":"code","props":{"code":" let options = {\n fromBlock: 0,\n address: ['address-1', 'address-2'], //Only get events from specific addresses\n topics: [] //What topics to subscribe to\n };\n\n let subscription = ('logs', options, (err,event) => {\n if (!err)\n console.log(event)\n });\n\n subscription.on('data', event => console.log(event))\n subscription.on('changed', changed => console.log(changed))\n subscription.on('error', err => { throw err })\n subscription.on('connected', nr => console.log(nr))\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" fromBlock: "}]},{"type":"element","tag":"span","props":{"class":"ct-6138fb"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" address: ["}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'address-1'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'address-2'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"], "}]},{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"//Only get events from specific addresses"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" topics: [] "}]},{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"//What topics to subscribe to"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"subscription"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'logs'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"options"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"err"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"subscription"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'data'"}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"subscription"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'changed'"}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"changed"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"subscription"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'error'"}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"err"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"subscription"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'connected'"}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"nr"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"))"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"getting-event-history"},"children":[{"type":"text","value":"Getting event history"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Getting history for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Transfer"}]},{"type":"text","value":" events for specific values. More info can be found "},{"type":"element","tag":"a","props":{"href":"https://web3js.readthedocs.io/en/v1.2.11/web3-eth-subscribe.html#","rel":["nofollow"]},"children":[{"type":"text","value":"here"}]}]},{"type":"element","tag":"code","props":{"code":" //example options(optional)\n let options = {\n filter: {\n // only get events where transfer value was 1000 or 1337\n value: ['1000', '1337'] \n },\n // number | \"earliest\" | \"pending\" | \"latest\"\n fromBlock: 0, \n toBlock: 'latest'\n };\n\n myContract.getPastEvents('Transfer', options)\n .then(results => console.log(results))\n .catch(err => throw err);\n\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"//example options(optional)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cfc7d"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8ffb0"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" filter: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// only get events where transfer value was 1000 or 1337"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" value: ["}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'1000'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'1337'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"] "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-709ef0"},"children":[{"type":"text","value":"// number | \"earliest\" | \"pending\" | \"latest\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" fromBlock: "}]},{"type":"element","tag":"span","props":{"class":"ct-6138fb"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" toBlock: "}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'latest'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"myContract"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"getPastEvents"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ba7e2c"},"children":[{"type":"text","value":"'Transfer'"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"then"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7194b1"},"children":[{"type":"text","value":"results"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-af8265"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-b1eeeb"},"children":[{"type":"text","value":" "}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-156cde{color:#FFA657}.ct-86b87d{color:#A5D6FF}.ct-f1ea08{color:#79C0FF}.ct-ee6b52{color:#79C0FF}.ct-6138fb{color:#79C0FF}.ct-d06ad1{color:#79C0FF}.ct-7cfc7d{color:#FF7B72}.ct-709ef0{color:#8B949E}.ct-d2d503{color:#FFA657}.ct-af8265{color:#D2A8FF}.ct-82aa2e{color:#79C0FF}.ct-f3b352{color:#79C0FF}.ct-6e9d8e{color:#79C0FF}.ct-8d5659{color:#FFA657}.ct-ba7760{color:#FF7B72}.ct-98d685{color:#D2A8FF}.ct-303309{color:#C9D1D9}.ct-39fbef{color:#FF7B72}.ct-ba7e2c{color:#A5D6FF}.ct-7194b1{color:#C9D1D9}.ct-b1eeeb{color:#C9D1D9}.ct-c8ffb0{color:#FF7B72}.light .ct-c8ffb0{color:#859900}.light .ct-b1eeeb{color:#657B83}.light .ct-7194b1{color:#268BD2}.light .ct-ba7e2c{color:#2AA198}.light .ct-39fbef{color:#073642}.light .ct-303309{color:#657B83}.light .ct-98d685{color:#268BD2}.light .ct-ba7760{color:#859900}.light .ct-8d5659{color:#657B83}.light .ct-6e9d8e{color:#859900}.light .ct-f3b352{color:#268BD2}.light .ct-82aa2e{color:#657B83}.light .ct-af8265{color:#268BD2}.light .ct-d2d503{color:#657B83}.light .ct-709ef0{color:#93A1A1}.light .ct-7cfc7d{color:#073642}.light .ct-d06ad1{color:#268BD2}.light .ct-6138fb{color:#D33682}.light .ct-ee6b52{color:#859900}.light .ct-f1ea08{color:#B58900}.light .ct-86b87d{color:#2AA198}.light .ct-156cde{color:#268BD2}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"getting-smart-contract-instance","depth":2,"text":"Getting smart contract instance"},{"id":"executing-contract-method","depth":2,"text":"Executing contract method","children":[{"id":"example-for-metamask-without-private-key","depth":3,"text":"Example for #Metamask without private key"},{"id":"nodejs-and-react-native-example","depth":3,"text":"Node.js and React Native example"},{"id":"calling-a-batch-of-contracts-methods","depth":3,"text":"Calling a batch of contract's methods"}]},{"id":"subscribing-to-smart-contract-events","depth":2,"text":"Subscribing to smart contract events","children":[{"id":"by-accessing-contractevents","depth":3,"text":"By accessing contract.events"},{"id":"with-filtering","depth":3,"text":"With filtering"},{"id":"common-subscribe-method","depth":3,"text":"Common Subscribe method"},{"id":"getting-event-history","depth":3,"text":"Getting event history"}]}]}},"_type":"markdown","_id":"content:Blockchain:Smart contracts.md","_source":"content","_file":"Blockchain/Smart contracts.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/blockchain/smart-contracts","_dir":"blockchain","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Smart Contracts","description":"For common functions see Common typescript examples.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For common functions see "},{"type":"element","tag":"a","props":{"href":"Common%20typescript%20examples"},"children":[{"type":"text","value":"Common typescript examples"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"getting-smart-contract-instance"},"children":[{"type":"text","value":"Getting smart contract instance"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Useful for calling smart contract methods:"}]},{"type":"element","tag":"code","props":{"code":"import { Contract } from 'web3-eth-contract';\nimport { web3 } from '.';\n\nconst getContract = (abi: object, address?: string): Contract => {\n const abiFromJson = JSON.parse(JSON.stringify(abi));\n return new web3.eth.Contract(abiFromJson, address);\n};\n\nexport default getContract;\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { Contract } from 'web3-eth-contract';\nimport { web3 } from '.';\n\nconst getContract = (abi: object, address?: string): Contract => {\n const abiFromJson = JSON.parse(JSON.stringify(abi));\n return new web3.eth.Contract(abiFromJson, address);\n};\n\nexport default getContract;\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"executing-contract-method"},"children":[{"type":"text","value":"Executing contract method"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Contract has "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"read"}]},{"type":"text","value":" and "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"write"}]},{"type":"text","value":" methods. To get a list of methods, you can paste contract address on "},{"type":"element","tag":"a","props":{"href":"https://etherscan.io/token/0xdac17f958d2ee523a2206206994597c13d831ec7#readContract","rel":["nofollow"]},"children":[{"type":"text","value":"https://etherscan.io/ ETH"}]},{"type":"text","value":" or any other service."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Read"}]},{"type":"text","value":" methods doesn't require spending "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"gas"}]},{"type":"text","value":". "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Write"}]},{"type":"text","value":" methods cost some amount of "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"gas"}]},{"type":"text","value":", hence they will be executed with confirmation from user."}]},{"type":"element","tag":"h3","props":{"id":"example-for-metamask-without-private-key"},"children":[{"type":"text","value":"Example for #Metamask without private key"}]},{"type":"element","tag":"code","props":{"code":"// see example below\nimport { getContract } from '.';\n\n// ABI of contract\nconst CONTRACT_ABI = { /* ... */ };\n // address for contract\nconst CONTRACT_ADDRESS = '0xdea164f67df4dbfe675d5271c9d404e0260f33bb';\n\nexport const executeContractMethod = async ({}) => {\n // getting contract\n const contract = getContract(CONTRACT_ABI, CONTRACT_ADDRESS);\n \n // Calling write method\n try {\n // authorizing with Metamask\n await web3.currentProvider.request({ method: 'eth_requestAccounts' });\n // getting wallet address\n const addressUser = web3.currentProvider.selectedAddress;\n // calling \"store\" store method for contract\n // payload should include `from` address, that matches\n // current user's wallet\n await contract.methods.store(0, 'Parameter').send({\n from: addressUser,\n });\n } catch (e) {\n throw new Error(e);\n }\n \n // calling read method\n try {\n // this method can return data\n const result = await contract.methods.retrieve().call();\n } catch (e) {\n throw new Error(e);\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// see example below\nimport { getContract } from '.';\n\n// ABI of contract\nconst CONTRACT_ABI = { /* ... */ };\n // address for contract\nconst CONTRACT_ADDRESS = '0xdea164f67df4dbfe675d5271c9d404e0260f33bb';\n\nexport const executeContractMethod = async ({}) => {\n // getting contract\n const contract = getContract(CONTRACT_ABI, CONTRACT_ADDRESS);\n \n // Calling write method\n try {\n // authorizing with Metamask\n await web3.currentProvider.request({ method: 'eth_requestAccounts' });\n // getting wallet address\n const addressUser = web3.currentProvider.selectedAddress;\n // calling \"store\" store method for contract\n // payload should include `from` address, that matches\n // current user's wallet\n await contract.methods.store(0, 'Parameter').send({\n from: addressUser,\n });\n } catch (e) {\n throw new Error(e);\n }\n \n // calling read method\n try {\n // this method can return data\n const result = await contract.methods.retrieve().call();\n } catch (e) {\n throw new Error(e);\n }\n}\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"nodejs-and-react-native-example"},"children":[{"type":"text","value":"Node.js and React Native example"}]},{"type":"element","tag":"code","props":{"code":"// see example below\nimport { getContract } from '.';\n\n// ABI контракта\nconst CONTRACT_ABI = { /* ... */ };\n// contract address\nconst CONTRACT_ADDRESS = '0xdea164f67df4dbfe675d5271c9d404e0260f33bb';\n// getting contract\nconst contract = getContract(CONTRACT_ABI, CONTRACT_ADDRESS);\n// account's private key\nconst privateKey = '...';\n\n// write-methods requires private key\nconst executeContractMethod = async (val: number) => {\n const transaction = contract.methods.store(val);\n const account = web3.eth.accounts.privateKeyToAccount(privateKey);\n const options = {\n to: CONTRACT_ADDRESS,\n data: transaction.encodeABI(),\n gas: await transaction.estimateGas({ from: account.address }),\n gasPrice: await web3.eth.getGasPrice(),\n };\n const signed = await web3.eth.accounts.signTransaction(\n options,\n privateKey,\n );\n await web3.eth.sendSignedTransaction(signed.rawTransaction!);\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// see example below\nimport { getContract } from '.';\n\n// ABI контракта\nconst CONTRACT_ABI = { /* ... */ };\n// contract address\nconst CONTRACT_ADDRESS = '0xdea164f67df4dbfe675d5271c9d404e0260f33bb';\n// getting contract\nconst contract = getContract(CONTRACT_ABI, CONTRACT_ADDRESS);\n// account's private key\nconst privateKey = '...';\n\n// write-methods requires private key\nconst executeContractMethod = async (val: number) => {\n const transaction = contract.methods.store(val);\n const account = web3.eth.accounts.privateKeyToAccount(privateKey);\n const options = {\n to: CONTRACT_ADDRESS,\n data: transaction.encodeABI(),\n gas: await transaction.estimateGas({ from: account.address }),\n gasPrice: await web3.eth.getGasPrice(),\n };\n const signed = await web3.eth.accounts.signTransaction(\n options,\n privateKey,\n );\n await web3.eth.sendSignedTransaction(signed.rawTransaction!);\n};\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"calling-a-batch-of-contracts-methods"},"children":[{"type":"text","value":"Calling a batch of contract's methods"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Function calls batch of requests, returning array of results. For example:"}]},{"type":"element","tag":"code","props":{"code":" const requests = [\n contract.method.balanceOf().call,\n contract.method.getStaked().call\n ]\n\n const result = await makeBatchRequest(request);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":" const requests = [\n contract.method.balanceOf().call,\n contract.method.getStaked().call\n ]\n\n const result = await makeBatchRequest(request);\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"const web3 = new Web3(Web3.givenProvider || PROVIDER_URL);\n\nconst makeBatchRequest = (calls: any[]) => {\n try {\n const web3 = getWeb3NoAccount();\n const batch = new web3.BatchRequest();\n\n const promises = calls.map((call) => {\n return new Promise((resolve, reject) => {\n batch.add(\n call.request({}, (err, result) => {\n if (err) {\n reject(err);\n } else {\n resolve(result);\n }\n })\n );\n });\n });\n\n batch.execute();\n\n return Promise.all(promises);\n } catch {\n return null;\n }\n};\n\nexport default makeBatchRequest;\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const web3 = new Web3(Web3.givenProvider || PROVIDER_URL);\n\nconst makeBatchRequest = (calls: any[]) => {\n try {\n const web3 = getWeb3NoAccount();\n const batch = new web3.BatchRequest();\n\n const promises = calls.map((call) => {\n return new Promise((resolve, reject) => {\n batch.add(\n call.request({}, (err, result) => {\n if (err) {\n reject(err);\n } else {\n resolve(result);\n }\n })\n );\n });\n });\n\n batch.execute();\n\n return Promise.all(promises);\n } catch {\n return null;\n }\n};\n\nexport default makeBatchRequest;\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"subscribing-to-smart-contract-events"},"children":[{"type":"text","value":"Subscribing to smart contract events"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There're different ways to subscribe for contract events. For all of them you will need following variables:"}]},{"type":"element","tag":"code","props":{"code":" import Web3 from 'web3';\n const web3 = new Web3('YOUR_RPC_ENDPOINT_HERE');\n const ABI = 'YOUR ABI HERE';\n const CONTRACT_ADDRESS = 'YOUR CONTRACT ADDRESS HERE';\n const myContract = new Web3.Contract(ABI, CONTRACT_ADDRESS);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":" import Web3 from 'web3';\n const web3 = new Web3('YOUR_RPC_ENDPOINT_HERE');\n const ABI = 'YOUR ABI HERE';\n const CONTRACT_ADDRESS = 'YOUR CONTRACT ADDRESS HERE';\n const myContract = new Web3.Contract(ABI, CONTRACT_ADDRESS);\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"by-accessing-contractevents"},"children":[{"type":"text","value":"By accessing contract.events"}]},{"type":"element","tag":"code","props":{"code":"referralProgramContract.events\n .RegisterUser()\n .on('connected', (subscriptionId: string) => {\n console.log(`| UserRegistered | events | ${subscriptionId}`);\n })\n .on(\n 'data',\n async (event: {\n removed: boolean;\n returnValues: RegisterUserResponseInterface;\n }) => {\n try {\n if (event.removed) {\n return;\n }\n const { user, referrer } = event.returnValues;\n console.log(user, referrer);\n } catch (e) {\n console.log(`| ONCE | ${e}`);\n }\n },\n )\n .on('error', (error: ErrnoException) => {\n console.log(error);\n });\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"referralProgramContract.events\n .RegisterUser()\n .on('connected', (subscriptionId: string) => {\n console.log(`| UserRegistered | events | ${subscriptionId}`);\n })\n .on(\n 'data',\n async (event: {\n removed: boolean;\n returnValues: RegisterUserResponseInterface;\n }) => {\n try {\n if (event.removed) {\n return;\n }\n const { user, referrer } = event.returnValues;\n console.log(user, referrer);\n } catch (e) {\n console.log(`| ONCE | ${e}`);\n }\n },\n )\n .on('error', (error: ErrnoException) => {\n console.log(error);\n });\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"with-filtering"},"children":[{"type":"text","value":"With filtering"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We're listening to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Transfer"}]},{"type":"text","value":" event here:"}]},{"type":"element","tag":"code","props":{"code":" let options = {\n filter: {\n value: [],\n },\n fromBlock: 0\n };\n\n myContract.events.Transfer(options)\n .on('data', event => console.log(event))\n .on('changed', changed => console.log(changed))\n .on('error', err => throw err)\n .on('connected', str => console.log(str))\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":" let options = {\n filter: {\n value: [],\n },\n fromBlock: 0\n };\n\n myContract.events.Transfer(options)\n .on('data', event => console.log(event))\n .on('changed', changed => console.log(changed))\n .on('error', err => throw err)\n .on('connected', str => console.log(str))\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"common-subscribe-method"},"children":[{"type":"text","value":"Common Subscribe method"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Filtering options can also be specified:"}]},{"type":"element","tag":"code","props":{"code":" let options = {\n fromBlock: 0,\n address: ['address-1', 'address-2'], //Only get events from specific addresses\n topics: [] //What topics to subscribe to\n };\n\n let subscription = ('logs', options, (err,event) => {\n if (!err)\n console.log(event)\n });\n\n subscription.on('data', event => console.log(event))\n subscription.on('changed', changed => console.log(changed))\n subscription.on('error', err => { throw err })\n subscription.on('connected', nr => console.log(nr))\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":" let options = {\n fromBlock: 0,\n address: ['address-1', 'address-2'], //Only get events from specific addresses\n topics: [] //What topics to subscribe to\n };\n\n let subscription = ('logs', options, (err,event) => {\n if (!err)\n console.log(event)\n });\n\n subscription.on('data', event => console.log(event))\n subscription.on('changed', changed => console.log(changed))\n subscription.on('error', err => { throw err })\n subscription.on('connected', nr => console.log(nr))\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"getting-event-history"},"children":[{"type":"text","value":"Getting event history"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Getting history for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Transfer"}]},{"type":"text","value":" events for specific values. More info can be found "},{"type":"element","tag":"a","props":{"href":"https://web3js.readthedocs.io/en/v1.2.11/web3-eth-subscribe.html#","rel":["nofollow"]},"children":[{"type":"text","value":"here"}]}]},{"type":"element","tag":"code","props":{"code":" //example options(optional)\n let options = {\n filter: {\n // only get events where transfer value was 1000 or 1337\n value: ['1000', '1337'] \n },\n // number | \"earliest\" | \"pending\" | \"latest\"\n fromBlock: 0, \n toBlock: 'latest'\n };\n\n myContract.getPastEvents('Transfer', options)\n .then(results => console.log(results))\n .catch(err => throw err);\n\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":" //example options(optional)\n let options = {\n filter: {\n // only get events where transfer value was 1000 or 1337\n value: ['1000', '1337'] \n },\n // number | \"earliest\" | \"pending\" | \"latest\"\n fromBlock: 0, \n toBlock: 'latest'\n };\n\n myContract.getPastEvents('Transfer', options)\n .then(results => console.log(results))\n .catch(err => throw err);\n\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For common functions see "},{"type":"element","tag":"a","props":{"href":"Common%20typescript%20examples"},"children":[{"type":"text","value":"Common typescript examples"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"getting-smart-contract-instance"},"children":[{"type":"text","value":"Getting smart contract instance"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Useful for calling smart contract methods:"}]},{"type":"element","tag":"code","props":{"code":"import { Contract } from 'web3-eth-contract';\nimport { web3 } from '.';\n\nconst getContract = (abi: object, address?: string): Contract => {\n const abiFromJson = JSON.parse(JSON.stringify(abi));\n return new web3.eth.Contract(abiFromJson, address);\n};\n\nexport default getContract;\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"Contract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'web3-eth-contract'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'.'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c29147"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-011e68"},"children":[{"type":"text","value":"getContract"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4075f5"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-6edc38"},"children":[{"type":"text","value":"abi"}]},{"type":"element","tag":"span","props":{"class":"ct-4075f5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-66877e"},"children":[{"type":"text","value":"object"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6edc38"},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"span","props":{"class":"ct-4075f5"},"children":[{"type":"text","value":"?:"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-66877e"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-4075f5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c29147"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c29147"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2c18b2"},"children":[{"type":"text","value":"abiFromJson"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4075f5"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-55e18c"},"children":[{"type":"text","value":"JSON"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2c18b2"},"children":[{"type":"text","value":"parse"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"Contract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"abiFromJson"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-84aa9a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-84aa9a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"getContract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":";"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"executing-contract-method"},"children":[{"type":"text","value":"Executing contract method"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Contract has "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"read"}]},{"type":"text","value":" and "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"write"}]},{"type":"text","value":" methods. To get a list of methods, you can paste contract address on "},{"type":"element","tag":"a","props":{"href":"https://etherscan.io/token/0xdac17f958d2ee523a2206206994597c13d831ec7#readContract","rel":["nofollow"]},"children":[{"type":"text","value":"https://etherscan.io/ ETH"}]},{"type":"text","value":" or any other service."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Read"}]},{"type":"text","value":" methods doesn't require spending "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"gas"}]},{"type":"text","value":". "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Write"}]},{"type":"text","value":" methods cost some amount of "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"gas"}]},{"type":"text","value":", hence they will be executed with confirmation from user."}]},{"type":"element","tag":"h3","props":{"id":"example-for-metamask-without-private-key"},"children":[{"type":"text","value":"Example for #Metamask without private key"}]},{"type":"element","tag":"code","props":{"code":"// see example below\nimport { getContract } from '.';\n\n// ABI of contract\nconst CONTRACT_ABI = { /* ... */ };\n // address for contract\nconst CONTRACT_ADDRESS = '0xdea164f67df4dbfe675d5271c9d404e0260f33bb';\n\nexport const executeContractMethod = async ({}) => {\n // getting contract\n const contract = getContract(CONTRACT_ABI, CONTRACT_ADDRESS);\n \n // Calling write method\n try {\n // authorizing with Metamask\n await web3.currentProvider.request({ method: 'eth_requestAccounts' });\n // getting wallet address\n const addressUser = web3.currentProvider.selectedAddress;\n // calling \"store\" store method for contract\n // payload should include `from` address, that matches\n // current user's wallet\n await contract.methods.store(0, 'Parameter').send({\n from: addressUser,\n });\n } catch (e) {\n throw new Error(e);\n }\n \n // calling read method\n try {\n // this method can return data\n const result = await contract.methods.retrieve().call();\n } catch (e) {\n throw new Error(e);\n }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// see example below"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"getContract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'.'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// ABI of contract"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"CONTRACT_ABI"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"/* ... */"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// address for contract"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"CONTRACT_ADDRESS"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'0xdea164f67df4dbfe675d5271c9d404e0260f33bb'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"executeContractMethod"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" ({}) "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// getting contract"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"contract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"getContract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"CONTRACT_ABI"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"CONTRACT_ADDRESS"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// Calling write method"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"try"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// authorizing with Metamask"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"currentProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"({ method: "}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'eth_requestAccounts'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// getting wallet address"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"addressUser"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"currentProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"selectedAddress"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// calling \"store\" store method for contract"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// payload should include `from` address, that matches"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// current user's wallet"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"contract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"methods"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"store"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-38e3ec"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'Parameter'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"send"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" from: "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"addressUser"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"e"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba447c"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"e"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// calling read method"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"try"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// this method can return data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"result"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"contract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"methods"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"retrieve"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"()."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"call"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"e"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba447c"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"e"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"nodejs-and-react-native-example"},"children":[{"type":"text","value":"Node.js and React Native example"}]},{"type":"element","tag":"code","props":{"code":"// see example below\nimport { getContract } from '.';\n\n// ABI контракта\nconst CONTRACT_ABI = { /* ... */ };\n// contract address\nconst CONTRACT_ADDRESS = '0xdea164f67df4dbfe675d5271c9d404e0260f33bb';\n// getting contract\nconst contract = getContract(CONTRACT_ABI, CONTRACT_ADDRESS);\n// account's private key\nconst privateKey = '...';\n\n// write-methods requires private key\nconst executeContractMethod = async (val: number) => {\n const transaction = contract.methods.store(val);\n const account = web3.eth.accounts.privateKeyToAccount(privateKey);\n const options = {\n to: CONTRACT_ADDRESS,\n data: transaction.encodeABI(),\n gas: await transaction.estimateGas({ from: account.address }),\n gasPrice: await web3.eth.getGasPrice(),\n };\n const signed = await web3.eth.accounts.signTransaction(\n options,\n privateKey,\n );\n await web3.eth.sendSignedTransaction(signed.rawTransaction!);\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// see example below"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"getContract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'.'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// ABI контракта"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"CONTRACT_ABI"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"/* ... */"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// contract address"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"CONTRACT_ADDRESS"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'0xdea164f67df4dbfe675d5271c9d404e0260f33bb'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// getting contract"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"contract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"getContract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"CONTRACT_ABI"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"CONTRACT_ADDRESS"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// account's private key"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"privateKey"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'...'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// write-methods requires private key"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c29147"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-011e68"},"children":[{"type":"text","value":"executeContractMethod"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4075f5"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c29147"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-6edc38"},"children":[{"type":"text","value":"val"}]},{"type":"element","tag":"span","props":{"class":"ct-4075f5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-66877e"},"children":[{"type":"text","value":"number"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-c29147"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"transaction"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"contract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"methods"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"store"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"val"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"account"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"accounts"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"privateKeyToAccount"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"privateKey"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" to: "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"CONTRACT_ADDRESS"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" data: "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"transaction"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"encodeABI"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"(),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" gas: "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"transaction"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"estimateGas"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"({ from: "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"account"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" gasPrice: "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"getGasPrice"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"(),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"signed"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"accounts"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"signTransaction"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"privateKey"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"sendSignedTransaction"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"signed"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"rawTransaction"}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"calling-a-batch-of-contracts-methods"},"children":[{"type":"text","value":"Calling a batch of contract's methods"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Function calls batch of requests, returning array of results. For example:"}]},{"type":"element","tag":"code","props":{"code":" const requests = [\n contract.method.balanceOf().call,\n contract.method.getStaked().call\n ]\n\n const result = await makeBatchRequest(request);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"requests"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"contract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"method"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"balanceOf"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"()."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"call"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"contract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"method"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"getStaked"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"()."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"call"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" ]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"result"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"makeBatchRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"const web3 = new Web3(Web3.givenProvider || PROVIDER_URL);\n\nconst makeBatchRequest = (calls: any[]) => {\n try {\n const web3 = getWeb3NoAccount();\n const batch = new web3.BatchRequest();\n\n const promises = calls.map((call) => {\n return new Promise((resolve, reject) => {\n batch.add(\n call.request({}, (err, result) => {\n if (err) {\n reject(err);\n } else {\n resolve(result);\n }\n })\n );\n });\n });\n\n batch.execute();\n\n return Promise.all(promises);\n } catch {\n return null;\n }\n};\n\nexport default makeBatchRequest;\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"givenProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"PROVIDER_URL"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c29147"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-011e68"},"children":[{"type":"text","value":"makeBatchRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4075f5"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-6edc38"},"children":[{"type":"text","value":"calls"}]},{"type":"element","tag":"span","props":{"class":"ct-4075f5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-66877e"},"children":[{"type":"text","value":"any"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":"[]) "}]},{"type":"element","tag":"span","props":{"class":"ct-c29147"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"try"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"getWeb3NoAccount"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"batch"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"BatchRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"promises"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"calls"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"map"}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4075f5"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4075f5"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-66877e"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":"(("}]},{"type":"element","tag":"span","props":{"class":"ct-6edc38"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6edc38"},"children":[{"type":"text","value":"reject"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-c29147"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"batch"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"add"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"err"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"reject"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"err"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"else"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"result"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"batch"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"execute"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ba447c"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"all"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"promises"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5e1c9b"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-84aa9a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-84aa9a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"makeBatchRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":";"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"subscribing-to-smart-contract-events"},"children":[{"type":"text","value":"Subscribing to smart contract events"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There're different ways to subscribe for contract events. For all of them you will need following variables:"}]},{"type":"element","tag":"code","props":{"code":" import Web3 from 'web3';\n const web3 = new Web3('YOUR_RPC_ENDPOINT_HERE');\n const ABI = 'YOUR ABI HERE';\n const CONTRACT_ADDRESS = 'YOUR CONTRACT ADDRESS HERE';\n const myContract = new Web3.Contract(ABI, CONTRACT_ADDRESS);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'web3'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'YOUR_RPC_ENDPOINT_HERE'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"ABI"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'YOUR ABI HERE'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"CONTRACT_ADDRESS"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'YOUR CONTRACT ADDRESS HERE'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"myContract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"Contract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"ABI"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"CONTRACT_ADDRESS"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"by-accessing-contractevents"},"children":[{"type":"text","value":"By accessing contract.events"}]},{"type":"element","tag":"code","props":{"code":"referralProgramContract.events\n .RegisterUser()\n .on('connected', (subscriptionId: string) => {\n console.log(`| UserRegistered | events | ${subscriptionId}`);\n })\n .on(\n 'data',\n async (event: {\n removed: boolean;\n returnValues: RegisterUserResponseInterface;\n }) => {\n try {\n if (event.removed) {\n return;\n }\n const { user, referrer } = event.returnValues;\n console.log(user, referrer);\n } catch (e) {\n console.log(`| ONCE | ${e}`);\n }\n },\n )\n .on('error', (error: ErrnoException) => {\n console.log(error);\n });\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"referralProgramContract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"events"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"RegisterUser"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-011e68"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-f141aa"},"children":[{"type":"text","value":"'connected'"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":", ("}]},{"type":"element","tag":"span","props":{"class":"ct-6edc38"},"children":[{"type":"text","value":"subscriptionId"}]},{"type":"element","tag":"span","props":{"class":"ct-4075f5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-66877e"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-c29147"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"`| UserRegistered | events | ${"}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"subscriptionId"}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"}`"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'data'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c29147"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-6edc38"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-4075f5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6edc38"},"children":[{"type":"text","value":"removed"}]},{"type":"element","tag":"span","props":{"class":"ct-4075f5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-66877e"},"children":[{"type":"text","value":"boolean"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6edc38"},"children":[{"type":"text","value":"returnValues"}]},{"type":"element","tag":"span","props":{"class":"ct-4075f5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6baa6"},"children":[{"type":"text","value":"RegisterUserResponseInterface"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" }) "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"try"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"removed"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"user"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-86670b"},"children":[{"type":"text","value":"referrer"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"returnValues"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"user"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"referrer"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"e"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"`| ONCE | ${"}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"e"}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"}`"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" )"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-011e68"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-f141aa"},"children":[{"type":"text","value":"'error'"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":", ("}]},{"type":"element","tag":"span","props":{"class":"ct-6edc38"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-4075f5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6baa6"},"children":[{"type":"text","value":"ErrnoException"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-c29147"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-a86e1f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" });"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"with-filtering"},"children":[{"type":"text","value":"With filtering"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We're listening to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Transfer"}]},{"type":"text","value":" event here:"}]},{"type":"element","tag":"code","props":{"code":" let options = {\n filter: {\n value: [],\n },\n fromBlock: 0\n };\n\n myContract.events.Transfer(options)\n .on('data', event => console.log(event))\n .on('changed', changed => console.log(changed))\n .on('error', err => throw err)\n .on('connected', str => console.log(str))\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" filter: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" value: [],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" fromBlock: "}]},{"type":"element","tag":"span","props":{"class":"ct-38e3ec"},"children":[{"type":"text","value":"0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"myContract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"events"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"Transfer"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'data'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'changed'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"changed"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'error'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'connected'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"str"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"))"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"common-subscribe-method"},"children":[{"type":"text","value":"Common Subscribe method"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Filtering options can also be specified:"}]},{"type":"element","tag":"code","props":{"code":" let options = {\n fromBlock: 0,\n address: ['address-1', 'address-2'], //Only get events from specific addresses\n topics: [] //What topics to subscribe to\n };\n\n let subscription = ('logs', options, (err,event) => {\n if (!err)\n console.log(event)\n });\n\n subscription.on('data', event => console.log(event))\n subscription.on('changed', changed => console.log(changed))\n subscription.on('error', err => { throw err })\n subscription.on('connected', nr => console.log(nr))\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" fromBlock: "}]},{"type":"element","tag":"span","props":{"class":"ct-38e3ec"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" address: ["}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'address-1'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'address-2'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"], "}]},{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"//Only get events from specific addresses"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" topics: [] "}]},{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"//What topics to subscribe to"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"subscription"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'logs'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"options"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"err"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"subscription"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'data'"}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"subscription"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'changed'"}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"changed"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"subscription"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'error'"}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"err"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"subscription"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'connected'"}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"nr"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"))"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"getting-event-history"},"children":[{"type":"text","value":"Getting event history"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Getting history for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Transfer"}]},{"type":"text","value":" events for specific values. More info can be found "},{"type":"element","tag":"a","props":{"href":"https://web3js.readthedocs.io/en/v1.2.11/web3-eth-subscribe.html#","rel":["nofollow"]},"children":[{"type":"text","value":"here"}]}]},{"type":"element","tag":"code","props":{"code":" //example options(optional)\n let options = {\n filter: {\n // only get events where transfer value was 1000 or 1337\n value: ['1000', '1337'] \n },\n // number | \"earliest\" | \"pending\" | \"latest\"\n fromBlock: 0, \n toBlock: 'latest'\n };\n\n myContract.getPastEvents('Transfer', options)\n .then(results => console.log(results))\n .catch(err => throw err);\n\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"//example options(optional)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7a0e7"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b4f62"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" filter: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// only get events where transfer value was 1000 or 1337"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" value: ["}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'1000'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'1337'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"] "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89bed9"},"children":[{"type":"text","value":"// number | \"earliest\" | \"pending\" | \"latest\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" fromBlock: "}]},{"type":"element","tag":"span","props":{"class":"ct-38e3ec"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" toBlock: "}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'latest'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"myContract"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"getPastEvents"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a09c09"},"children":[{"type":"text","value":"'Transfer'"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"then"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-de2679"},"children":[{"type":"text","value":"results"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" ."}]},{"type":"element","tag":"span","props":{"class":"ct-8d27c1"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-d70533"},"children":[{"type":"text","value":" "}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-f6baa6{color:#FFA657}.ct-f141aa{color:#A5D6FF}.ct-5e1c9b{color:#79C0FF}.ct-ba447c{color:#79C0FF}.ct-38e3ec{color:#79C0FF}.ct-86670b{color:#79C0FF}.ct-c7a0e7{color:#FF7B72}.ct-89bed9{color:#8B949E}.ct-84aa9a{color:#FFA657}.ct-8d27c1{color:#D2A8FF}.ct-55e18c{color:#79C0FF}.ct-2c18b2{color:#79C0FF}.ct-66877e{color:#79C0FF}.ct-6edc38{color:#FFA657}.ct-4075f5{color:#FF7B72}.ct-011e68{color:#D2A8FF}.ct-a86e1f{color:#C9D1D9}.ct-c29147{color:#FF7B72}.ct-a09c09{color:#A5D6FF}.ct-de2679{color:#C9D1D9}.ct-d70533{color:#C9D1D9}.ct-8b4f62{color:#FF7B72}.light .ct-8b4f62{color:#859900}.light .ct-d70533{color:#657B83}.light .ct-de2679{color:#268BD2}.light .ct-a09c09{color:#2AA198}.light .ct-c29147{color:#073642}.light .ct-a86e1f{color:#657B83}.light .ct-011e68{color:#268BD2}.light .ct-4075f5{color:#859900}.light .ct-6edc38{color:#657B83}.light .ct-66877e{color:#859900}.light .ct-2c18b2{color:#268BD2}.light .ct-55e18c{color:#657B83}.light .ct-8d27c1{color:#268BD2}.light .ct-84aa9a{color:#657B83}.light .ct-89bed9{color:#93A1A1}.light .ct-c7a0e7{color:#073642}.light .ct-86670b{color:#268BD2}.light .ct-38e3ec{color:#D33682}.light .ct-ba447c{color:#859900}.light .ct-5e1c9b{color:#B58900}.light .ct-f141aa{color:#2AA198}.light .ct-f6baa6{color:#268BD2}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"getting-smart-contract-instance","depth":2,"text":"Getting smart contract instance"},{"id":"executing-contract-method","depth":2,"text":"Executing contract method","children":[{"id":"example-for-metamask-without-private-key","depth":3,"text":"Example for #Metamask without private key"},{"id":"nodejs-and-react-native-example","depth":3,"text":"Node.js and React Native example"},{"id":"calling-a-batch-of-contracts-methods","depth":3,"text":"Calling a batch of contract's methods"}]},{"id":"subscribing-to-smart-contract-events","depth":2,"text":"Subscribing to smart contract events","children":[{"id":"by-accessing-contractevents","depth":3,"text":"By accessing contract.events"},{"id":"with-filtering","depth":3,"text":"With filtering"},{"id":"common-subscribe-method","depth":3,"text":"Common Subscribe method"},{"id":"getting-event-history","depth":3,"text":"Getting event history"}]}]}},"_type":"markdown","_id":"content:Blockchain:Smart contracts.md","_source":"content","_file":"Blockchain/Smart contracts.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/WUiUHbO5Pg.json b/docs/api/_content/query/WUiUHbO5Pg.json
index f0cad90..af478f2 100644
--- a/docs/api/_content/query/WUiUHbO5Pg.json
+++ b/docs/api/_content/query/WUiUHbO5Pg.json
@@ -1 +1 @@
-{"_path":"/css/test-if-browser-supports-css-rules","_dir":"css","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Test If Browser Supports CSS Rules","description":"To test if browser supports some #CSS rules, do following:","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To test if browser supports some #CSS rules, do following:"}]},{"type":"element","tag":"code","props":{"code":"@supports (backdrop-filter: blur(5px)) {\n backdrop-filter: blur(5px);\n}\n","language":"css"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"@supports (backdrop-filter: blur(5px)) {\n backdrop-filter: blur(5px);\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@mixin"}]},{"type":"text","value":" will only apply rule if browser support backdrop filtering:"}]},{"type":"element","tag":"code","props":{"code":"@mixin can_backdrop {\n @supports (\n (-webkit-backdrop-filter: blur(5px)) or \n (backdrop-filter: blur(5px))\n ) {\n @content;\n }\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"@mixin can_backdrop {\n @supports (\n (-webkit-backdrop-filter: blur(5px)) or \n (backdrop-filter: blur(5px))\n ) {\n @content;\n }\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To test if browser supports some #CSS rules, do following:"}]},{"type":"element","tag":"code","props":{"code":"@supports (backdrop-filter: blur(5px)) {\n backdrop-filter: blur(5px);\n}\n","language":"css"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7a463c"},"children":[{"type":"text","value":"@supports"}]},{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-c952c5"},"children":[{"type":"text","value":"backdrop-filter"}]},{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1fdda1"},"children":[{"type":"text","value":"blur"}]},{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-402ddd"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-7a463c"},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":")) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dfa80f"},"children":[{"type":"text","value":"backdrop-filter"}]},{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":": blur(5px);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@mixin"}]},{"type":"text","value":" will only apply rule if browser support backdrop filtering:"}]},{"type":"element","tag":"code","props":{"code":"@mixin can_backdrop {\n @supports (\n (-webkit-backdrop-filter: blur(5px)) or \n (backdrop-filter: blur(5px))\n ) {\n @content;\n }\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7a463c"},"children":[{"type":"text","value":"@mixin"}]},{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9b8524"},"children":[{"type":"text","value":"can_backdrop"}]},{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a463c"},"children":[{"type":"text","value":"@supports"}]},{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3b70c6"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-d2edfc"},"children":[{"type":"text","value":"-webkit-backdrop-filter"}]},{"type":"element","tag":"span","props":{"class":"ct-3b70c6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-950408"},"children":[{"type":"text","value":"blur"}]},{"type":"element","tag":"span","props":{"class":"ct-3b70c6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-84a56d"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-e1945f"},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"class":"ct-3b70c6"},"children":[{"type":"text","value":")) "}]},{"type":"element","tag":"span","props":{"class":"ct-28c7f2"},"children":[{"type":"text","value":"or"}]},{"type":"element","tag":"span","props":{"class":"ct-3b70c6"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-c952c5"},"children":[{"type":"text","value":"backdrop-filter"}]},{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1fdda1"},"children":[{"type":"text","value":"blur"}]},{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-402ddd"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-7a463c"},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":" ) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a463c"},"children":[{"type":"text","value":"@content"}]},{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6538af"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-28c7f2{color:#79C0FF}.ct-e1945f{color:#FF7B72}.ct-84a56d{color:#79C0FF}.ct-950408{color:#79C0FF}.ct-d2edfc{color:#79C0FF}.ct-3b70c6{color:#C9D1D9}.ct-9b8524{color:#D2A8FF}.ct-dfa80f{color:#7EE787}.ct-402ddd{color:#79C0FF}.ct-1fdda1{color:#79C0FF}.ct-c952c5{color:#79C0FF}.ct-6538af{color:#C9D1D9}.ct-7a463c{color:#FF7B72}.light .ct-7a463c{color:#859900}.light .ct-6538af{color:#657B83}.light .ct-c952c5{color:#859900}.light .ct-1fdda1{color:#268BD2}.light .ct-402ddd{color:#D33682}.light .ct-dfa80f{color:#268BD2}.light .ct-9b8524{color:#268BD2}.light .ct-3b70c6{color:#657B83}.light .ct-d2edfc{color:#859900}.light .ct-950408{color:#268BD2}.light .ct-84a56d{color:#D33682}.light .ct-e1945f{color:#859900}.light .ct-28c7f2{color:#657B83}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:CSS:Test if browser supports CSS rules.md","_source":"content","_file":"CSS/Test if browser supports CSS rules.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/css/test-if-browser-supports-css-rules","_dir":"css","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Test If Browser Supports CSS Rules","description":"To test if browser supports some #CSS rules, do following:","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To test if browser supports some #CSS rules, do following:"}]},{"type":"element","tag":"code","props":{"code":"@supports (backdrop-filter: blur(5px)) {\n backdrop-filter: blur(5px);\n}\n","language":"css"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"@supports (backdrop-filter: blur(5px)) {\n backdrop-filter: blur(5px);\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@mixin"}]},{"type":"text","value":" will only apply rule if browser support backdrop filtering:"}]},{"type":"element","tag":"code","props":{"code":"@mixin can_backdrop {\n @supports (\n (-webkit-backdrop-filter: blur(5px)) or \n (backdrop-filter: blur(5px))\n ) {\n @content;\n }\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"@mixin can_backdrop {\n @supports (\n (-webkit-backdrop-filter: blur(5px)) or \n (backdrop-filter: blur(5px))\n ) {\n @content;\n }\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To test if browser supports some #CSS rules, do following:"}]},{"type":"element","tag":"code","props":{"code":"@supports (backdrop-filter: blur(5px)) {\n backdrop-filter: blur(5px);\n}\n","language":"css"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7302b2"},"children":[{"type":"text","value":"@supports"}]},{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-cfcc41"},"children":[{"type":"text","value":"backdrop-filter"}]},{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-2bd9f1"},"children":[{"type":"text","value":"blur"}]},{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-1352cd"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-7302b2"},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":")) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b1b623"},"children":[{"type":"text","value":"backdrop-filter"}]},{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":": blur(5px);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@mixin"}]},{"type":"text","value":" will only apply rule if browser support backdrop filtering:"}]},{"type":"element","tag":"code","props":{"code":"@mixin can_backdrop {\n @supports (\n (-webkit-backdrop-filter: blur(5px)) or \n (backdrop-filter: blur(5px))\n ) {\n @content;\n }\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7302b2"},"children":[{"type":"text","value":"@mixin"}]},{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-32ba5f"},"children":[{"type":"text","value":"can_backdrop"}]},{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7302b2"},"children":[{"type":"text","value":"@supports"}]},{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65b5bb"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-414602"},"children":[{"type":"text","value":"-webkit-backdrop-filter"}]},{"type":"element","tag":"span","props":{"class":"ct-65b5bb"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-5bfb02"},"children":[{"type":"text","value":"blur"}]},{"type":"element","tag":"span","props":{"class":"ct-65b5bb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-b3a8ef"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-352265"},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"class":"ct-65b5bb"},"children":[{"type":"text","value":")) "}]},{"type":"element","tag":"span","props":{"class":"ct-7c4f33"},"children":[{"type":"text","value":"or"}]},{"type":"element","tag":"span","props":{"class":"ct-65b5bb"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-cfcc41"},"children":[{"type":"text","value":"backdrop-filter"}]},{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-2bd9f1"},"children":[{"type":"text","value":"blur"}]},{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-1352cd"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-7302b2"},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":" ) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7302b2"},"children":[{"type":"text","value":"@content"}]},{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3d885b"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-7c4f33{color:#79C0FF}.ct-352265{color:#FF7B72}.ct-b3a8ef{color:#79C0FF}.ct-5bfb02{color:#79C0FF}.ct-414602{color:#79C0FF}.ct-65b5bb{color:#C9D1D9}.ct-32ba5f{color:#D2A8FF}.ct-b1b623{color:#7EE787}.ct-1352cd{color:#79C0FF}.ct-2bd9f1{color:#79C0FF}.ct-cfcc41{color:#79C0FF}.ct-3d885b{color:#C9D1D9}.ct-7302b2{color:#FF7B72}.light .ct-7302b2{color:#859900}.light .ct-3d885b{color:#657B83}.light .ct-cfcc41{color:#859900}.light .ct-2bd9f1{color:#268BD2}.light .ct-1352cd{color:#D33682}.light .ct-b1b623{color:#268BD2}.light .ct-32ba5f{color:#268BD2}.light .ct-65b5bb{color:#657B83}.light .ct-414602{color:#859900}.light .ct-5bfb02{color:#268BD2}.light .ct-b3a8ef{color:#D33682}.light .ct-352265{color:#859900}.light .ct-7c4f33{color:#657B83}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:CSS:Test if browser supports CSS rules.md","_source":"content","_file":"CSS/Test if browser supports CSS rules.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/XgydJZDPap.json b/docs/api/_content/query/XgydJZDPap.json
index d0eeb30..c8e1e47 100644
--- a/docs/api/_content/query/XgydJZDPap.json
+++ b/docs/api/_content/query/XgydJZDPap.json
@@ -1 +1 @@
-{"_path":"/linux/fixing-lagging-usb-headphones","_dir":"linux","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Fixing Lagging USB Headphones","description":"When receiving messages like this:","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When receiving messages like this:"}]},{"type":"element","tag":"code","props":{"code":"Bluetooth: hci0: ACL packet for unknown connection handle 256\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"Bluetooth: hci0: ACL packet for unknown connection handle 256\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Create "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/modprobe.d/disable_btusb_autosuspend.conf"}]},{"type":"text","value":" with following content:"}]},{"type":"element","tag":"code","props":{"code":"# Disable autosuspend for btusb to make the bluetooth keyboard work again\noptions btusb enable_autosuspend=n\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"# Disable autosuspend for btusb to make the bluetooth keyboard work again\noptions btusb enable_autosuspend=n\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then run"}]},{"type":"element","tag":"code","props":{"code":"mkinitcpio -P\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"mkinitcpio -P\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Reboot and debug with"}]},{"type":"element","tag":"code","props":{"code":"$ systool -v -m btusb | grep autosuspend\n enable_autosuspend = \"N\" # should be \"N\"\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"$ systool -v -m btusb | grep autosuspend\n enable_autosuspend = \"N\" # should be \"N\"\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"also"},"children":[{"type":"text","value":"Also"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"That could be either "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"btusb.enable_autosuspend=n"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"usbcore.autosuspend=-1"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"TLP has settings for BTUSB, check it to exclude your device from autosuspend"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"There's a guy on ubuntuforums, who wrote "},{"type":"element","tag":"a","props":{"href":"https://ubuntuforums.org/showthread.php?t=2159645&page=6&p=12926730#post12926730","rel":["nofollow"]},"children":[{"type":"text","value":"solution"}]},{"type":"text","value":", which disables autosuspend manually"}]}]},{"type":"element","tag":"h2","props":{"id":"refs"},"children":[{"type":"text","value":"Refs"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://bbs.archlinux.org/viewtopic.php?id=236479","rel":["nofollow"]},"children":[{"type":"text","value":"Bluetooth keyboard disconnects randomly"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://bbs.archlinux.org/viewtopic.php?id=275962","rel":["nofollow"]},"children":[{"type":"text","value":"Bluetooth keeps turning off"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://wiki.archlinux.org/title/Bluetooth#Device_connects,_then_disconnects_after_a_few_moments","rel":["nofollow"]},"children":[{"type":"text","value":"ArchWiki: Device connects, then disconnects after a few moments"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://ubuntuforums.org/showthread.php?t=2159645&page=6&p=12926730#post12926730","rel":["nofollow"]},"children":[{"type":"text","value":"Said solution with a script in rc.local"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When receiving messages like this:"}]},{"type":"element","tag":"code","props":{"code":"Bluetooth: hci0: ACL packet for unknown connection handle 256\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-44b0c7"},"children":[{"type":"text","value":"Bluetooth: hci0: ACL packet "}]},{"type":"element","tag":"span","props":{"class":"ct-538076"},"children":[{"type":"text","value":"for"}]},{"type":"element","tag":"span","props":{"class":"ct-44b0c7"},"children":[{"type":"text","value":" unknown connection handle 256"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Create "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/modprobe.d/disable_btusb_autosuspend.conf"}]},{"type":"text","value":" with following content:"}]},{"type":"element","tag":"code","props":{"code":"# Disable autosuspend for btusb to make the bluetooth keyboard work again\noptions btusb enable_autosuspend=n\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bbfceb"},"children":[{"type":"text","value":"# Disable autosuspend for btusb to make the bluetooth keyboard work again"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-44b0c7"},"children":[{"type":"text","value":"options btusb enable_autosuspend=n"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then run"}]},{"type":"element","tag":"code","props":{"code":"mkinitcpio -P\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-44b0c7"},"children":[{"type":"text","value":"mkinitcpio -P"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Reboot and debug with"}]},{"type":"element","tag":"code","props":{"code":"$ systool -v -m btusb | grep autosuspend\n enable_autosuspend = \"N\" # should be \"N\"\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-44b0c7"},"children":[{"type":"text","value":"$ systool -v -m btusb "}]},{"type":"element","tag":"span","props":{"class":"ct-538076"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-44b0c7"},"children":[{"type":"text","value":" grep autosuspend"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-44b0c7"},"children":[{"type":"text","value":" enable_autosuspend = "}]},{"type":"element","tag":"span","props":{"class":"ct-7b78b9"},"children":[{"type":"text","value":"\"N\""}]},{"type":"element","tag":"span","props":{"class":"ct-44b0c7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bbfceb"},"children":[{"type":"text","value":"# should be \"N\""}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"also"},"children":[{"type":"text","value":"Also"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"That could be either "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"btusb.enable_autosuspend=n"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"usbcore.autosuspend=-1"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"TLP has settings for BTUSB, check it to exclude your device from autosuspend"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"There's a guy on ubuntuforums, who wrote "},{"type":"element","tag":"a","props":{"href":"https://ubuntuforums.org/showthread.php?t=2159645&page=6&p=12926730#post12926730","rel":["nofollow"]},"children":[{"type":"text","value":"solution"}]},{"type":"text","value":", which disables autosuspend manually"}]}]},{"type":"element","tag":"h2","props":{"id":"refs"},"children":[{"type":"text","value":"Refs"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://bbs.archlinux.org/viewtopic.php?id=236479","rel":["nofollow"]},"children":[{"type":"text","value":"Bluetooth keyboard disconnects randomly"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://bbs.archlinux.org/viewtopic.php?id=275962","rel":["nofollow"]},"children":[{"type":"text","value":"Bluetooth keeps turning off"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://wiki.archlinux.org/title/Bluetooth#Device_connects,_then_disconnects_after_a_few_moments","rel":["nofollow"]},"children":[{"type":"text","value":"ArchWiki: Device connects, then disconnects after a few moments"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://ubuntuforums.org/showthread.php?t=2159645&page=6&p=12926730#post12926730","rel":["nofollow"]},"children":[{"type":"text","value":"Said solution with a script in rc.local"}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-7b78b9{color:#A5D6FF}.ct-bbfceb{color:#8B949E}.ct-538076{color:#FF7B72}.ct-44b0c7{color:#C9D1D9}.light .ct-44b0c7{color:#657B83}.light .ct-538076{color:#859900}.light .ct-bbfceb{color:#93A1A1}.light .ct-7b78b9{color:#2AA198}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"also","depth":2,"text":"Also"},{"id":"refs","depth":2,"text":"Refs"}]}},"_type":"markdown","_id":"content:Linux:Fixing lagging USB Headphones.md","_source":"content","_file":"Linux/Fixing lagging USB Headphones.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/linux/fixing-lagging-usb-headphones","_dir":"linux","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Fixing Lagging USB Headphones","description":"When receiving messages like this:","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When receiving messages like this:"}]},{"type":"element","tag":"code","props":{"code":"Bluetooth: hci0: ACL packet for unknown connection handle 256\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"Bluetooth: hci0: ACL packet for unknown connection handle 256\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Create "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/modprobe.d/disable_btusb_autosuspend.conf"}]},{"type":"text","value":" with following content:"}]},{"type":"element","tag":"code","props":{"code":"# Disable autosuspend for btusb to make the bluetooth keyboard work again\noptions btusb enable_autosuspend=n\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"# Disable autosuspend for btusb to make the bluetooth keyboard work again\noptions btusb enable_autosuspend=n\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then run"}]},{"type":"element","tag":"code","props":{"code":"mkinitcpio -P\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"mkinitcpio -P\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Reboot and debug with"}]},{"type":"element","tag":"code","props":{"code":"$ systool -v -m btusb | grep autosuspend\n enable_autosuspend = \"N\" # should be \"N\"\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"$ systool -v -m btusb | grep autosuspend\n enable_autosuspend = \"N\" # should be \"N\"\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"also"},"children":[{"type":"text","value":"Also"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"That could be either "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"btusb.enable_autosuspend=n"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"usbcore.autosuspend=-1"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"TLP has settings for BTUSB, check it to exclude your device from autosuspend"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"There's a guy on ubuntuforums, who wrote "},{"type":"element","tag":"a","props":{"href":"https://ubuntuforums.org/showthread.php?t=2159645&page=6&p=12926730#post12926730","rel":["nofollow"]},"children":[{"type":"text","value":"solution"}]},{"type":"text","value":", which disables autosuspend manually"}]}]},{"type":"element","tag":"h2","props":{"id":"refs"},"children":[{"type":"text","value":"Refs"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://bbs.archlinux.org/viewtopic.php?id=236479","rel":["nofollow"]},"children":[{"type":"text","value":"Bluetooth keyboard disconnects randomly"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://bbs.archlinux.org/viewtopic.php?id=275962","rel":["nofollow"]},"children":[{"type":"text","value":"Bluetooth keeps turning off"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://wiki.archlinux.org/title/Bluetooth#Device_connects,_then_disconnects_after_a_few_moments","rel":["nofollow"]},"children":[{"type":"text","value":"ArchWiki: Device connects, then disconnects after a few moments"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://ubuntuforums.org/showthread.php?t=2159645&page=6&p=12926730#post12926730","rel":["nofollow"]},"children":[{"type":"text","value":"Said solution with a script in rc.local"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When receiving messages like this:"}]},{"type":"element","tag":"code","props":{"code":"Bluetooth: hci0: ACL packet for unknown connection handle 256\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e14c6"},"children":[{"type":"text","value":"Bluetooth: hci0: ACL packet "}]},{"type":"element","tag":"span","props":{"class":"ct-e92459"},"children":[{"type":"text","value":"for"}]},{"type":"element","tag":"span","props":{"class":"ct-8e14c6"},"children":[{"type":"text","value":" unknown connection handle 256"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Create "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/modprobe.d/disable_btusb_autosuspend.conf"}]},{"type":"text","value":" with following content:"}]},{"type":"element","tag":"code","props":{"code":"# Disable autosuspend for btusb to make the bluetooth keyboard work again\noptions btusb enable_autosuspend=n\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-83708b"},"children":[{"type":"text","value":"# Disable autosuspend for btusb to make the bluetooth keyboard work again"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e14c6"},"children":[{"type":"text","value":"options btusb enable_autosuspend=n"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then run"}]},{"type":"element","tag":"code","props":{"code":"mkinitcpio -P\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e14c6"},"children":[{"type":"text","value":"mkinitcpio -P"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Reboot and debug with"}]},{"type":"element","tag":"code","props":{"code":"$ systool -v -m btusb | grep autosuspend\n enable_autosuspend = \"N\" # should be \"N\"\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e14c6"},"children":[{"type":"text","value":"$ systool -v -m btusb "}]},{"type":"element","tag":"span","props":{"class":"ct-e92459"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-8e14c6"},"children":[{"type":"text","value":" grep autosuspend"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e14c6"},"children":[{"type":"text","value":" enable_autosuspend = "}]},{"type":"element","tag":"span","props":{"class":"ct-511c36"},"children":[{"type":"text","value":"\"N\""}]},{"type":"element","tag":"span","props":{"class":"ct-8e14c6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-83708b"},"children":[{"type":"text","value":"# should be \"N\""}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"also"},"children":[{"type":"text","value":"Also"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"That could be either "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"btusb.enable_autosuspend=n"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"usbcore.autosuspend=-1"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"TLP has settings for BTUSB, check it to exclude your device from autosuspend"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"There's a guy on ubuntuforums, who wrote "},{"type":"element","tag":"a","props":{"href":"https://ubuntuforums.org/showthread.php?t=2159645&page=6&p=12926730#post12926730","rel":["nofollow"]},"children":[{"type":"text","value":"solution"}]},{"type":"text","value":", which disables autosuspend manually"}]}]},{"type":"element","tag":"h2","props":{"id":"refs"},"children":[{"type":"text","value":"Refs"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://bbs.archlinux.org/viewtopic.php?id=236479","rel":["nofollow"]},"children":[{"type":"text","value":"Bluetooth keyboard disconnects randomly"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://bbs.archlinux.org/viewtopic.php?id=275962","rel":["nofollow"]},"children":[{"type":"text","value":"Bluetooth keeps turning off"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://wiki.archlinux.org/title/Bluetooth#Device_connects,_then_disconnects_after_a_few_moments","rel":["nofollow"]},"children":[{"type":"text","value":"ArchWiki: Device connects, then disconnects after a few moments"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://ubuntuforums.org/showthread.php?t=2159645&page=6&p=12926730#post12926730","rel":["nofollow"]},"children":[{"type":"text","value":"Said solution with a script in rc.local"}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-511c36{color:#A5D6FF}.ct-83708b{color:#8B949E}.ct-e92459{color:#FF7B72}.ct-8e14c6{color:#C9D1D9}.light .ct-8e14c6{color:#657B83}.light .ct-e92459{color:#859900}.light .ct-83708b{color:#93A1A1}.light .ct-511c36{color:#2AA198}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"also","depth":2,"text":"Also"},{"id":"refs","depth":2,"text":"Refs"}]}},"_type":"markdown","_id":"content:Linux:Fixing lagging USB Headphones.md","_source":"content","_file":"Linux/Fixing lagging USB Headphones.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/a1s3E9iAyd.json b/docs/api/_content/query/a1s3E9iAyd.json
index 1df330b..ec902b7 100644
--- a/docs/api/_content/query/a1s3E9iAyd.json
+++ b/docs/api/_content/query/a1s3E9iAyd.json
@@ -1 +1 @@
-{"_path":"/docker/wait-for-mysql","_dir":"docker","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Wait For Mysql","description":"wait-for-it.sh doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before #mysql is ready to accept connections","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/vishnubob/wait-for-it","rel":["nofollow"]},"children":[{"type":"text","value":"wait-for-it.sh"}]},{"type":"text","value":" doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before #mysql is ready to accept connections"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This script waits for first successful query from database or exits with non-zero status after timeout."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don't forget to change "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$query"}]},{"type":"text","value":" for the actually working one."}]},{"type":"element","tag":"code","props":{"code":"# Waits for mysql to become actually available\nwait_for_mysql() {\n query=\"SELECT count(*) FROM users\"\n \n timeout=180 # 3 minutes limit\n i=0\n \n while ! docker exec -it \"$1\" mysql --user=\"$2\" --password=\"$3\" -e \"$query\" $4 >/dev/null 2>&1; do\n sleep 1;\n\n i=$(($i+1))\n if [[ ${i} -ge ${timeout} ]]; then\n echo \"[Error] can't properly query MySQL after ${i} secs\"\n exit 1;\n fi\n done\n}\n\n# usage: wait_for_mysql miin-mysql-dev root password database\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"# Waits for mysql to become actually available\nwait_for_mysql() {\n query=\"SELECT count(*) FROM users\"\n \n timeout=180 # 3 minutes limit\n i=0\n \n while ! docker exec -it \"$1\" mysql --user=\"$2\" --password=\"$3\" -e \"$query\" $4 >/dev/null 2>&1; do\n sleep 1;\n\n i=$(($i+1))\n if [[ ${i} -ge ${timeout} ]]; then\n echo \"[Error] can't properly query MySQL after ${i} secs\"\n exit 1;\n fi\n done\n}\n\n# usage: wait_for_mysql miin-mysql-dev root password database\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"Wait%20for%20redis"},"children":[{"type":"text","value":"Wait for redis"}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/vishnubob/wait-for-it","rel":["nofollow"]},"children":[{"type":"text","value":"wait-for-it.sh"}]},{"type":"text","value":" doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before #mysql is ready to accept connections"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This script waits for first successful query from database or exits with non-zero status after timeout."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don't forget to change "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$query"}]},{"type":"text","value":" for the actually working one."}]},{"type":"element","tag":"code","props":{"code":"# Waits for mysql to become actually available\nwait_for_mysql() {\n query=\"SELECT count(*) FROM users\"\n \n timeout=180 # 3 minutes limit\n i=0\n \n while ! docker exec -it \"$1\" mysql --user=\"$2\" --password=\"$3\" -e \"$query\" $4 >/dev/null 2>&1; do\n sleep 1;\n\n i=$(($i+1))\n if [[ ${i} -ge ${timeout} ]]; then\n echo \"[Error] can't properly query MySQL after ${i} secs\"\n exit 1;\n fi\n done\n}\n\n# usage: wait_for_mysql miin-mysql-dev root password database\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a8e5eb"},"children":[{"type":"text","value":"# Waits for mysql to become actually available"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e5eecc"},"children":[{"type":"text","value":"wait_for_mysql"}]},{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" query="}]},{"type":"element","tag":"span","props":{"class":"ct-222dd0"},"children":[{"type":"text","value":"\"SELECT count(*) FROM users\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" timeout=180 "}]},{"type":"element","tag":"span","props":{"class":"ct-a8e5eb"},"children":[{"type":"text","value":"# 3 minutes limit"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" i=0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-34dae7"},"children":[{"type":"text","value":"while"}]},{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-34dae7"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" docker "}]},{"type":"element","tag":"span","props":{"class":"ct-bce09d"},"children":[{"type":"text","value":"exec"}]},{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" -it "}]},{"type":"element","tag":"span","props":{"class":"ct-222dd0"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-57393f"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-b31d54"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-222dd0"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" mysql --user="}]},{"type":"element","tag":"span","props":{"class":"ct-222dd0"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-57393f"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-b31d54"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-222dd0"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-222dd0"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" -e "}]},{"type":"element","tag":"span","props":{"class":"ct-222dd0"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-57393f"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-b31d54"},"children":[{"type":"text","value":"query"}]},{"type":"element","tag":"span","props":{"class":"ct-222dd0"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-34dae7"},"children":[{"type":"text","value":"do"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" sleep 1"}]},{"type":"element","tag":"span","props":{"class":"ct-34dae7"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" i="}]},{"type":"element","tag":"span","props":{"class":"ct-222dd0"},"children":[{"type":"text","value":"$(("}]},{"type":"element","tag":"span","props":{"class":"ct-57393f"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-b31d54"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-34dae7"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-4500fd"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-222dd0"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-34dae7"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" [[ "}]},{"type":"element","tag":"span","props":{"class":"ct-57393f"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-b31d54"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-57393f"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-34dae7"},"children":[{"type":"text","value":"-ge"}]},{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-57393f"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-b31d54"},"children":[{"type":"text","value":"timeout"}]},{"type":"element","tag":"span","props":{"class":"ct-57393f"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" ]]"}]},{"type":"element","tag":"span","props":{"class":"ct-34dae7"},"children":[{"type":"text","value":";"}]},{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-34dae7"},"children":[{"type":"text","value":"then"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bce09d"},"children":[{"type":"text","value":"echo"}]},{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-222dd0"},"children":[{"type":"text","value":"\"[Error] can't properly query MySQL after "}]},{"type":"element","tag":"span","props":{"class":"ct-57393f"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-b31d54"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-57393f"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-222dd0"},"children":[{"type":"text","value":" secs\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bce09d"},"children":[{"type":"text","value":"exit"}]},{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" 1"}]},{"type":"element","tag":"span","props":{"class":"ct-34dae7"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-34dae7"},"children":[{"type":"text","value":"fi"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-34dae7"},"children":[{"type":"text","value":"done"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f1b587"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a8e5eb"},"children":[{"type":"text","value":"# usage: wait_for_mysql miin-mysql-dev root password database"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"Wait%20for%20redis"},"children":[{"type":"text","value":"Wait for redis"}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-4500fd{color:#79C0FF}.ct-b31d54{color:#C9D1D9}.ct-57393f{color:#C9D1D9}.ct-bce09d{color:#79C0FF}.ct-34dae7{color:#FF7B72}.ct-222dd0{color:#A5D6FF}.ct-f1b587{color:#C9D1D9}.ct-e5eecc{color:#D2A8FF}.ct-a8e5eb{color:#8B949E}.light .ct-a8e5eb{color:#93A1A1}.light .ct-e5eecc{color:#268BD2}.light .ct-f1b587{color:#657B83}.light .ct-222dd0{color:#2AA198}.light .ct-34dae7{color:#859900}.light .ct-bce09d{color:#268BD2}.light .ct-57393f{color:#859900}.light .ct-b31d54{color:#268BD2}.light .ct-4500fd{color:#D33682}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Docker:Wait for mysql.md","_source":"content","_file":"Docker/Wait for mysql.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/docker/wait-for-mysql","_dir":"docker","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Wait For Mysql","description":"wait-for-it.sh doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before #mysql is ready to accept connections","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/vishnubob/wait-for-it","rel":["nofollow"]},"children":[{"type":"text","value":"wait-for-it.sh"}]},{"type":"text","value":" doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before #mysql is ready to accept connections"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This script waits for first successful query from database or exits with non-zero status after timeout."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don't forget to change "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$query"}]},{"type":"text","value":" for the actually working one."}]},{"type":"element","tag":"code","props":{"code":"# Waits for mysql to become actually available\nwait_for_mysql() {\n query=\"SELECT count(*) FROM users\"\n \n timeout=180 # 3 minutes limit\n i=0\n \n while ! docker exec -it \"$1\" mysql --user=\"$2\" --password=\"$3\" -e \"$query\" $4 >/dev/null 2>&1; do\n sleep 1;\n\n i=$(($i+1))\n if [[ ${i} -ge ${timeout} ]]; then\n echo \"[Error] can't properly query MySQL after ${i} secs\"\n exit 1;\n fi\n done\n}\n\n# usage: wait_for_mysql miin-mysql-dev root password database\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"# Waits for mysql to become actually available\nwait_for_mysql() {\n query=\"SELECT count(*) FROM users\"\n \n timeout=180 # 3 minutes limit\n i=0\n \n while ! docker exec -it \"$1\" mysql --user=\"$2\" --password=\"$3\" -e \"$query\" $4 >/dev/null 2>&1; do\n sleep 1;\n\n i=$(($i+1))\n if [[ ${i} -ge ${timeout} ]]; then\n echo \"[Error] can't properly query MySQL after ${i} secs\"\n exit 1;\n fi\n done\n}\n\n# usage: wait_for_mysql miin-mysql-dev root password database\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"Wait%20for%20redis"},"children":[{"type":"text","value":"Wait for redis"}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/vishnubob/wait-for-it","rel":["nofollow"]},"children":[{"type":"text","value":"wait-for-it.sh"}]},{"type":"text","value":" doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before #mysql is ready to accept connections"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This script waits for first successful query from database or exits with non-zero status after timeout."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don't forget to change "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$query"}]},{"type":"text","value":" for the actually working one."}]},{"type":"element","tag":"code","props":{"code":"# Waits for mysql to become actually available\nwait_for_mysql() {\n query=\"SELECT count(*) FROM users\"\n \n timeout=180 # 3 minutes limit\n i=0\n \n while ! docker exec -it \"$1\" mysql --user=\"$2\" --password=\"$3\" -e \"$query\" $4 >/dev/null 2>&1; do\n sleep 1;\n\n i=$(($i+1))\n if [[ ${i} -ge ${timeout} ]]; then\n echo \"[Error] can't properly query MySQL after ${i} secs\"\n exit 1;\n fi\n done\n}\n\n# usage: wait_for_mysql miin-mysql-dev root password database\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0146c3"},"children":[{"type":"text","value":"# Waits for mysql to become actually available"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3f942f"},"children":[{"type":"text","value":"wait_for_mysql"}]},{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" query="}]},{"type":"element","tag":"span","props":{"class":"ct-1c7c94"},"children":[{"type":"text","value":"\"SELECT count(*) FROM users\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" timeout=180 "}]},{"type":"element","tag":"span","props":{"class":"ct-0146c3"},"children":[{"type":"text","value":"# 3 minutes limit"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" i=0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-94f68f"},"children":[{"type":"text","value":"while"}]},{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-94f68f"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" docker "}]},{"type":"element","tag":"span","props":{"class":"ct-ac7bf2"},"children":[{"type":"text","value":"exec"}]},{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" -it "}]},{"type":"element","tag":"span","props":{"class":"ct-1c7c94"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-1b10dc"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-6a8f91"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-1c7c94"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" mysql --user="}]},{"type":"element","tag":"span","props":{"class":"ct-1c7c94"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-1b10dc"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-6a8f91"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-1c7c94"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-1c7c94"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" -e "}]},{"type":"element","tag":"span","props":{"class":"ct-1c7c94"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-1b10dc"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-6a8f91"},"children":[{"type":"text","value":"query"}]},{"type":"element","tag":"span","props":{"class":"ct-1c7c94"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-94f68f"},"children":[{"type":"text","value":"do"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" sleep 1"}]},{"type":"element","tag":"span","props":{"class":"ct-94f68f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" i="}]},{"type":"element","tag":"span","props":{"class":"ct-1c7c94"},"children":[{"type":"text","value":"$(("}]},{"type":"element","tag":"span","props":{"class":"ct-1b10dc"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-6a8f91"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-94f68f"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-0c9ed4"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-1c7c94"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-94f68f"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" [[ "}]},{"type":"element","tag":"span","props":{"class":"ct-1b10dc"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-6a8f91"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-1b10dc"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-94f68f"},"children":[{"type":"text","value":"-ge"}]},{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b10dc"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-6a8f91"},"children":[{"type":"text","value":"timeout"}]},{"type":"element","tag":"span","props":{"class":"ct-1b10dc"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" ]]"}]},{"type":"element","tag":"span","props":{"class":"ct-94f68f"},"children":[{"type":"text","value":";"}]},{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-94f68f"},"children":[{"type":"text","value":"then"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac7bf2"},"children":[{"type":"text","value":"echo"}]},{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1c7c94"},"children":[{"type":"text","value":"\"[Error] can't properly query MySQL after "}]},{"type":"element","tag":"span","props":{"class":"ct-1b10dc"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-6a8f91"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-1b10dc"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-1c7c94"},"children":[{"type":"text","value":" secs\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ac7bf2"},"children":[{"type":"text","value":"exit"}]},{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" 1"}]},{"type":"element","tag":"span","props":{"class":"ct-94f68f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-94f68f"},"children":[{"type":"text","value":"fi"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-94f68f"},"children":[{"type":"text","value":"done"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-753636"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0146c3"},"children":[{"type":"text","value":"# usage: wait_for_mysql miin-mysql-dev root password database"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"Wait%20for%20redis"},"children":[{"type":"text","value":"Wait for redis"}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-0c9ed4{color:#79C0FF}.ct-6a8f91{color:#C9D1D9}.ct-1b10dc{color:#C9D1D9}.ct-ac7bf2{color:#79C0FF}.ct-94f68f{color:#FF7B72}.ct-1c7c94{color:#A5D6FF}.ct-753636{color:#C9D1D9}.ct-3f942f{color:#D2A8FF}.ct-0146c3{color:#8B949E}.light .ct-0146c3{color:#93A1A1}.light .ct-3f942f{color:#268BD2}.light .ct-753636{color:#657B83}.light .ct-1c7c94{color:#2AA198}.light .ct-94f68f{color:#859900}.light .ct-ac7bf2{color:#268BD2}.light .ct-1b10dc{color:#859900}.light .ct-6a8f91{color:#268BD2}.light .ct-0c9ed4{color:#D33682}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Docker:Wait for mysql.md","_source":"content","_file":"Docker/Wait for mysql.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/aP6pCxBj14.json b/docs/api/_content/query/aP6pCxBj14.json
index 10589df..7853d2b 100644
--- a/docs/api/_content/query/aP6pCxBj14.json
+++ b/docs/api/_content/query/aP6pCxBj14.json
@@ -1 +1 @@
-{"_path":"/linux/resume-or-start-screen-session","_dir":"linux","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Resume Or Start Screen Session","description":"Running this script will enter currently running screen session or will start new one.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Running this script will enter currently running "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"screen"}]},{"type":"text","value":" session or will start new one."}]},{"type":"element","tag":"code","props":{"code":"( screen -r bash || ( screen -d bash && screen -r bash || screen -SAm bash bash ) )\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"( screen -r bash || ( screen -d bash && screen -r bash || screen -SAm bash bash ) )\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Running this script will enter currently running "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"screen"}]},{"type":"text","value":" session or will start new one."}]},{"type":"element","tag":"code","props":{"code":"( screen -r bash || ( screen -d bash && screen -r bash || screen -SAm bash bash ) )\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4eae5e"},"children":[{"type":"text","value":"( screen -r bash "}]},{"type":"element","tag":"span","props":{"class":"ct-ef58d3"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-4eae5e"},"children":[{"type":"text","value":" ( screen -d bash "}]},{"type":"element","tag":"span","props":{"class":"ct-ef58d3"},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"class":"ct-4eae5e"},"children":[{"type":"text","value":" screen -r bash "}]},{"type":"element","tag":"span","props":{"class":"ct-ef58d3"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-4eae5e"},"children":[{"type":"text","value":" screen -SAm bash bash ) )"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-ef58d3{color:#FF7B72}.ct-4eae5e{color:#C9D1D9}.light .ct-4eae5e{color:#657B83}.light .ct-ef58d3{color:#859900}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Linux:Resume or start screen session.md","_source":"content","_file":"Linux/Resume or start screen session.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/linux/resume-or-start-screen-session","_dir":"linux","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Resume Or Start Screen Session","description":"Running this script will enter currently running screen session or will start new one.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Running this script will enter currently running "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"screen"}]},{"type":"text","value":" session or will start new one."}]},{"type":"element","tag":"code","props":{"code":"( screen -r bash || ( screen -d bash && screen -r bash || screen -SAm bash bash ) )\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"( screen -r bash || ( screen -d bash && screen -r bash || screen -SAm bash bash ) )\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Running this script will enter currently running "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"screen"}]},{"type":"text","value":" session or will start new one."}]},{"type":"element","tag":"code","props":{"code":"( screen -r bash || ( screen -d bash && screen -r bash || screen -SAm bash bash ) )\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-daaae9"},"children":[{"type":"text","value":"( screen -r bash "}]},{"type":"element","tag":"span","props":{"class":"ct-322045"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-daaae9"},"children":[{"type":"text","value":" ( screen -d bash "}]},{"type":"element","tag":"span","props":{"class":"ct-322045"},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"class":"ct-daaae9"},"children":[{"type":"text","value":" screen -r bash "}]},{"type":"element","tag":"span","props":{"class":"ct-322045"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-daaae9"},"children":[{"type":"text","value":" screen -SAm bash bash ) )"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-322045{color:#FF7B72}.ct-daaae9{color:#C9D1D9}.light .ct-daaae9{color:#657B83}.light .ct-322045{color:#859900}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Linux:Resume or start screen session.md","_source":"content","_file":"Linux/Resume or start screen session.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/arOc40mIpI.json b/docs/api/_content/query/arOc40mIpI.json
index aba85dc..6beb649 100644
--- a/docs/api/_content/query/arOc40mIpI.json
+++ b/docs/api/_content/query/arOc40mIpI.json
@@ -1 +1 @@
-{"_path":"/docker/drone-ci","_dir":"docker","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Drone Ci","description":"Can be used with Private docker registry to deploy things using #docker.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Can be used with "},{"type":"element","tag":"a","props":{"href":"Private%20docker%20registry"},"children":[{"type":"text","value":"Private docker registry"}]},{"type":"text","value":" to deploy things using #docker."}]},{"type":"element","tag":"h2","props":{"id":"pushing-to-private-docker_registry"},"children":[{"type":"text","value":"Pushing to private docker_registry"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You should specify "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"global_docker_login"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"global_docker_password"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"global_docker_registry"}]},{"type":"text","value":" organizations variables in your "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"drone"}]},{"type":"text","value":". And "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docker_repo"}]},{"type":"text","value":" variable for your repo as "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docker.yourdomain.com/your-image"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is example of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".droneci"}]},{"type":"text","value":" for "},{"type":"element","tag":"a","props":{"href":"Private%20docker%20registry"},"children":[{"type":"text","value":"private docker registry"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"kind: pipeline\nname: build\ntype: docker\n\nplatform:\n os: linux\n arch: amd64\n\nsteps:\n - name: build-master\n image: plugins/docker\n when:\n branch:\n - master\n settings:\n dockerfile: Dockerfile\n tag:\n - ${DRONE_BRANCH}\n username:\n from_secret: global_docker_login\n password:\n from_secret: global_docker_password\n registry:\n from_secret: global_docker_registry\n repo:\n from_secret: docker_repo\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"kind: pipeline\nname: build\ntype: docker\n\nplatform:\n os: linux\n arch: amd64\n\nsteps:\n - name: build-master\n image: plugins/docker\n when:\n branch:\n - master\n settings:\n dockerfile: Dockerfile\n tag:\n - ${DRONE_BRANCH}\n username:\n from_secret: global_docker_login\n password:\n from_secret: global_docker_password\n registry:\n from_secret: global_docker_registry\n repo:\n from_secret: docker_repo\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"docker-compose-file-for-drone-ci"},"children":[{"type":"text","value":"Docker-compose file for drone-ci"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"drone"}]},{"type":"text","value":" service is ui itself and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"drone-agent"}]},{"type":"text","value":" is runner for builds, that can be started on different machine (or machines)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Change "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"secret_id"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"rpc_secret"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"drone.url"}]},{"type":"text","value":" to something you like."}]},{"type":"element","tag":"code","props":{"code":"version: \"3\"\n\nservices:\n drone:\n container_name: drone\n image: drone/drone:latest\n environment:\n - DRONE_GITHUB_CLIENT_ID=secret_id\n - DRONE_GITHUB_CLIENT_SECRET=client_secret\n - DRONE_RPC_SECRET=rpc_secret\n - DRONE_SERVER_HOST=drone.url\n - DRONE_USER_CREATE=\"username:user,admin:true\"\n - DRONE_SERVER_PROTO=https\n - DRONE_TLS_AUTOCERT=false\n - DRONE_GIT_ALWAYS_AUTH=false\n - DRONE_LOGS_DEBUG=true\n - DRONE_LOGS_TRACE=true\n restart: always\n volumes:\n - ./data:/data\n ports:\n - 8090:80\n drone-agent:\n container_name: drone__agent\n image: drone/agent:latest\n command: agent\n restart: always\n volumes:\n - /var/run/docker.sock:/var/run/docker.sock\n environment:\n - DRONE_RPC_SERVER=https://drone.url\n - DRONE_RPC_SECRET=rpc_secret\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"version: \"3\"\n\nservices:\n drone:\n container_name: drone\n image: drone/drone:latest\n environment:\n - DRONE_GITHUB_CLIENT_ID=secret_id\n - DRONE_GITHUB_CLIENT_SECRET=client_secret\n - DRONE_RPC_SECRET=rpc_secret\n - DRONE_SERVER_HOST=drone.url\n - DRONE_USER_CREATE=\"username:user,admin:true\"\n - DRONE_SERVER_PROTO=https\n - DRONE_TLS_AUTOCERT=false\n - DRONE_GIT_ALWAYS_AUTH=false\n - DRONE_LOGS_DEBUG=true\n - DRONE_LOGS_TRACE=true\n restart: always\n volumes:\n - ./data:/data\n ports:\n - 8090:80\n drone-agent:\n container_name: drone__agent\n image: drone/agent:latest\n command: agent\n restart: always\n volumes:\n - /var/run/docker.sock:/var/run/docker.sock\n environment:\n - DRONE_RPC_SERVER=https://drone.url\n - DRONE_RPC_SECRET=rpc_secret\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"caching-builds"},"children":[{"type":"text","value":"Caching builds"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Haven't checked that yet, but there's a "},{"type":"element","tag":"a","props":{"href":"https://laszlo.cloud/the-ultimate-droneci-caching-guide","rel":["nofollow"]},"children":[{"type":"text","value":"manual"}]},{"type":"text","value":" from "},{"type":"element","tag":"a","props":{"href":"https://laszlo.cloud/","rel":["nofollow"]},"children":[{"type":"text","value":"Laszlo Fogas"}]},{"type":"text","value":" about that."}]},{"type":"element","tag":"h2","props":{"id":"get-user-info"},"children":[{"type":"text","value":"Get user info"}]},{"type":"element","tag":"code","props":{"code":"export DRONE_SERVER=https://drone.url\nexport DRONE_TOKEN=password\ndrone info\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export DRONE_SERVER=https://drone.url\nexport DRONE_TOKEN=password\ndrone info\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"mark-user-as-trusted"},"children":[{"type":"text","value":"Mark user as trusted"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes it won't help, then connect to drone database with sqlite and change user's trusted flag to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"1"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"drone repo update $1 --trusted=true && drone repo info $1\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"drone repo update $1 --trusted=true && drone repo info $1\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Can be used with "},{"type":"element","tag":"a","props":{"href":"Private%20docker%20registry"},"children":[{"type":"text","value":"Private docker registry"}]},{"type":"text","value":" to deploy things using #docker."}]},{"type":"element","tag":"h2","props":{"id":"pushing-to-private-docker_registry"},"children":[{"type":"text","value":"Pushing to private docker_registry"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You should specify "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"global_docker_login"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"global_docker_password"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"global_docker_registry"}]},{"type":"text","value":" organizations variables in your "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"drone"}]},{"type":"text","value":". And "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docker_repo"}]},{"type":"text","value":" variable for your repo as "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docker.yourdomain.com/your-image"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is example of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".droneci"}]},{"type":"text","value":" for "},{"type":"element","tag":"a","props":{"href":"Private%20docker%20registry"},"children":[{"type":"text","value":"private docker registry"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"kind: pipeline\nname: build\ntype: docker\n\nplatform:\n os: linux\n arch: amd64\n\nsteps:\n - name: build-master\n image: plugins/docker\n when:\n branch:\n - master\n settings:\n dockerfile: Dockerfile\n tag:\n - ${DRONE_BRANCH}\n username:\n from_secret: global_docker_login\n password:\n from_secret: global_docker_password\n registry:\n from_secret: global_docker_registry\n repo:\n from_secret: docker_repo\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"kind"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"pipeline"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"build"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"docker"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"platform"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"os"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"linux"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"arch"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"amd64"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"steps"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"build-master"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"plugins/docker"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"when"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"branch"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"master"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"settings"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"dockerfile"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"Dockerfile"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"tag"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"${DRONE_BRANCH}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"username"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"from_secret"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"global_docker_login"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"password"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"from_secret"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"global_docker_password"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"registry"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"from_secret"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"global_docker_registry"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"repo"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"from_secret"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"docker_repo"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"docker-compose-file-for-drone-ci"},"children":[{"type":"text","value":"Docker-compose file for drone-ci"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"drone"}]},{"type":"text","value":" service is ui itself and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"drone-agent"}]},{"type":"text","value":" is runner for builds, that can be started on different machine (or machines)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Change "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"secret_id"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"rpc_secret"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"drone.url"}]},{"type":"text","value":" to something you like."}]},{"type":"element","tag":"code","props":{"code":"version: \"3\"\n\nservices:\n drone:\n container_name: drone\n image: drone/drone:latest\n environment:\n - DRONE_GITHUB_CLIENT_ID=secret_id\n - DRONE_GITHUB_CLIENT_SECRET=client_secret\n - DRONE_RPC_SECRET=rpc_secret\n - DRONE_SERVER_HOST=drone.url\n - DRONE_USER_CREATE=\"username:user,admin:true\"\n - DRONE_SERVER_PROTO=https\n - DRONE_TLS_AUTOCERT=false\n - DRONE_GIT_ALWAYS_AUTH=false\n - DRONE_LOGS_DEBUG=true\n - DRONE_LOGS_TRACE=true\n restart: always\n volumes:\n - ./data:/data\n ports:\n - 8090:80\n drone-agent:\n container_name: drone__agent\n image: drone/agent:latest\n command: agent\n restart: always\n volumes:\n - /var/run/docker.sock:/var/run/docker.sock\n environment:\n - DRONE_RPC_SERVER=https://drone.url\n - DRONE_RPC_SECRET=rpc_secret\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"version"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"\"3\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"services"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"drone"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"drone"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"drone/drone:latest"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"DRONE_GITHUB_CLIENT_ID=secret_id"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"DRONE_GITHUB_CLIENT_SECRET=client_secret"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"DRONE_RPC_SECRET=rpc_secret"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"DRONE_SERVER_HOST=drone.url"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"DRONE_USER_CREATE=\"username:user,admin:true\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"DRONE_SERVER_PROTO=https"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"DRONE_TLS_AUTOCERT=false"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"DRONE_GIT_ALWAYS_AUTH=false"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"DRONE_LOGS_DEBUG=true"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"DRONE_LOGS_TRACE=true"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"always"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"./data:/data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"ports"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"8090:80"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"drone-agent"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"drone__agent"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"drone/agent:latest"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"command"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"agent"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"always"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"/var/run/docker.sock:/var/run/docker.sock"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5001cf"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"DRONE_RPC_SERVER=https://drone.url"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-e7e4f6"},"children":[{"type":"text","value":"DRONE_RPC_SECRET=rpc_secret"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"caching-builds"},"children":[{"type":"text","value":"Caching builds"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Haven't checked that yet, but there's a "},{"type":"element","tag":"a","props":{"href":"https://laszlo.cloud/the-ultimate-droneci-caching-guide","rel":["nofollow"]},"children":[{"type":"text","value":"manual"}]},{"type":"text","value":" from "},{"type":"element","tag":"a","props":{"href":"https://laszlo.cloud/","rel":["nofollow"]},"children":[{"type":"text","value":"Laszlo Fogas"}]},{"type":"text","value":" about that."}]},{"type":"element","tag":"h2","props":{"id":"get-user-info"},"children":[{"type":"text","value":"Get user info"}]},{"type":"element","tag":"code","props":{"code":"export DRONE_SERVER=https://drone.url\nexport DRONE_TOKEN=password\ndrone info\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f8e52f"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" DRONE_SERVER=https://drone.url"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f8e52f"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" DRONE_TOKEN=password"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":"drone info"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"mark-user-as-trusted"},"children":[{"type":"text","value":"Mark user as trusted"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes it won't help, then connect to drone database with sqlite and change user's trusted flag to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"1"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"drone repo update $1 --trusted=true && drone repo info $1\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":"drone repo update "}]},{"type":"element","tag":"span","props":{"class":"ct-bba773"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-c3cfa5"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" --trusted=true "}]},{"type":"element","tag":"span","props":{"class":"ct-512f70"},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"class":"ct-ead287"},"children":[{"type":"text","value":" drone repo info "}]},{"type":"element","tag":"span","props":{"class":"ct-bba773"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-c3cfa5"},"children":[{"type":"text","value":"1"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-512f70{color:#FF7B72}.ct-c3cfa5{color:#C9D1D9}.ct-bba773{color:#C9D1D9}.ct-f8e52f{color:#FF7B72}.ct-e7e4f6{color:#A5D6FF}.ct-ead287{color:#C9D1D9}.ct-5001cf{color:#7EE787}.light .ct-5001cf{color:#268BD2}.light .ct-ead287{color:#657B83}.light .ct-e7e4f6{color:#2AA198}.light .ct-f8e52f{color:#073642}.light .ct-bba773{color:#859900}.light .ct-c3cfa5{color:#268BD2}.light .ct-512f70{color:#859900}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"pushing-to-private-docker_registry","depth":2,"text":"Pushing to private docker_registry"},{"id":"docker-compose-file-for-drone-ci","depth":2,"text":"Docker-compose file for drone-ci"},{"id":"caching-builds","depth":2,"text":"Caching builds"},{"id":"get-user-info","depth":2,"text":"Get user info"},{"id":"mark-user-as-trusted","depth":2,"text":"Mark user as trusted"}]}},"_type":"markdown","_id":"content:Docker:Drone-ci.md","_source":"content","_file":"Docker/Drone-ci.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/docker/drone-ci","_dir":"docker","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Drone Ci","description":"Can be used with Private docker registry to deploy things using #docker.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Can be used with "},{"type":"element","tag":"a","props":{"href":"Private%20docker%20registry"},"children":[{"type":"text","value":"Private docker registry"}]},{"type":"text","value":" to deploy things using #docker."}]},{"type":"element","tag":"h2","props":{"id":"pushing-to-private-docker_registry"},"children":[{"type":"text","value":"Pushing to private docker_registry"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You should specify "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"global_docker_login"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"global_docker_password"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"global_docker_registry"}]},{"type":"text","value":" organizations variables in your "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"drone"}]},{"type":"text","value":". And "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docker_repo"}]},{"type":"text","value":" variable for your repo as "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docker.yourdomain.com/your-image"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is example of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".droneci"}]},{"type":"text","value":" for "},{"type":"element","tag":"a","props":{"href":"Private%20docker%20registry"},"children":[{"type":"text","value":"private docker registry"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"kind: pipeline\nname: build\ntype: docker\n\nplatform:\n os: linux\n arch: amd64\n\nsteps:\n - name: build-master\n image: plugins/docker\n when:\n branch:\n - master\n settings:\n dockerfile: Dockerfile\n tag:\n - ${DRONE_BRANCH}\n username:\n from_secret: global_docker_login\n password:\n from_secret: global_docker_password\n registry:\n from_secret: global_docker_registry\n repo:\n from_secret: docker_repo\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"kind: pipeline\nname: build\ntype: docker\n\nplatform:\n os: linux\n arch: amd64\n\nsteps:\n - name: build-master\n image: plugins/docker\n when:\n branch:\n - master\n settings:\n dockerfile: Dockerfile\n tag:\n - ${DRONE_BRANCH}\n username:\n from_secret: global_docker_login\n password:\n from_secret: global_docker_password\n registry:\n from_secret: global_docker_registry\n repo:\n from_secret: docker_repo\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"docker-compose-file-for-drone-ci"},"children":[{"type":"text","value":"Docker-compose file for drone-ci"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"drone"}]},{"type":"text","value":" service is ui itself and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"drone-agent"}]},{"type":"text","value":" is runner for builds, that can be started on different machine (or machines)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Change "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"secret_id"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"rpc_secret"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"drone.url"}]},{"type":"text","value":" to something you like."}]},{"type":"element","tag":"code","props":{"code":"version: \"3\"\n\nservices:\n drone:\n container_name: drone\n image: drone/drone:latest\n environment:\n - DRONE_GITHUB_CLIENT_ID=secret_id\n - DRONE_GITHUB_CLIENT_SECRET=client_secret\n - DRONE_RPC_SECRET=rpc_secret\n - DRONE_SERVER_HOST=drone.url\n - DRONE_USER_CREATE=\"username:user,admin:true\"\n - DRONE_SERVER_PROTO=https\n - DRONE_TLS_AUTOCERT=false\n - DRONE_GIT_ALWAYS_AUTH=false\n - DRONE_LOGS_DEBUG=true\n - DRONE_LOGS_TRACE=true\n restart: always\n volumes:\n - ./data:/data\n ports:\n - 8090:80\n drone-agent:\n container_name: drone__agent\n image: drone/agent:latest\n command: agent\n restart: always\n volumes:\n - /var/run/docker.sock:/var/run/docker.sock\n environment:\n - DRONE_RPC_SERVER=https://drone.url\n - DRONE_RPC_SECRET=rpc_secret\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"version: \"3\"\n\nservices:\n drone:\n container_name: drone\n image: drone/drone:latest\n environment:\n - DRONE_GITHUB_CLIENT_ID=secret_id\n - DRONE_GITHUB_CLIENT_SECRET=client_secret\n - DRONE_RPC_SECRET=rpc_secret\n - DRONE_SERVER_HOST=drone.url\n - DRONE_USER_CREATE=\"username:user,admin:true\"\n - DRONE_SERVER_PROTO=https\n - DRONE_TLS_AUTOCERT=false\n - DRONE_GIT_ALWAYS_AUTH=false\n - DRONE_LOGS_DEBUG=true\n - DRONE_LOGS_TRACE=true\n restart: always\n volumes:\n - ./data:/data\n ports:\n - 8090:80\n drone-agent:\n container_name: drone__agent\n image: drone/agent:latest\n command: agent\n restart: always\n volumes:\n - /var/run/docker.sock:/var/run/docker.sock\n environment:\n - DRONE_RPC_SERVER=https://drone.url\n - DRONE_RPC_SECRET=rpc_secret\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"caching-builds"},"children":[{"type":"text","value":"Caching builds"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Haven't checked that yet, but there's a "},{"type":"element","tag":"a","props":{"href":"https://laszlo.cloud/the-ultimate-droneci-caching-guide","rel":["nofollow"]},"children":[{"type":"text","value":"manual"}]},{"type":"text","value":" from "},{"type":"element","tag":"a","props":{"href":"https://laszlo.cloud/","rel":["nofollow"]},"children":[{"type":"text","value":"Laszlo Fogas"}]},{"type":"text","value":" about that."}]},{"type":"element","tag":"h2","props":{"id":"get-user-info"},"children":[{"type":"text","value":"Get user info"}]},{"type":"element","tag":"code","props":{"code":"export DRONE_SERVER=https://drone.url\nexport DRONE_TOKEN=password\ndrone info\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export DRONE_SERVER=https://drone.url\nexport DRONE_TOKEN=password\ndrone info\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"mark-user-as-trusted"},"children":[{"type":"text","value":"Mark user as trusted"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes it won't help, then connect to drone database with sqlite and change user's trusted flag to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"1"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"drone repo update $1 --trusted=true && drone repo info $1\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"drone repo update $1 --trusted=true && drone repo info $1\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Can be used with "},{"type":"element","tag":"a","props":{"href":"Private%20docker%20registry"},"children":[{"type":"text","value":"Private docker registry"}]},{"type":"text","value":" to deploy things using #docker."}]},{"type":"element","tag":"h2","props":{"id":"pushing-to-private-docker_registry"},"children":[{"type":"text","value":"Pushing to private docker_registry"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You should specify "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"global_docker_login"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"global_docker_password"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"global_docker_registry"}]},{"type":"text","value":" organizations variables in your "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"drone"}]},{"type":"text","value":". And "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docker_repo"}]},{"type":"text","value":" variable for your repo as "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docker.yourdomain.com/your-image"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is example of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".droneci"}]},{"type":"text","value":" for "},{"type":"element","tag":"a","props":{"href":"Private%20docker%20registry"},"children":[{"type":"text","value":"private docker registry"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"kind: pipeline\nname: build\ntype: docker\n\nplatform:\n os: linux\n arch: amd64\n\nsteps:\n - name: build-master\n image: plugins/docker\n when:\n branch:\n - master\n settings:\n dockerfile: Dockerfile\n tag:\n - ${DRONE_BRANCH}\n username:\n from_secret: global_docker_login\n password:\n from_secret: global_docker_password\n registry:\n from_secret: global_docker_registry\n repo:\n from_secret: docker_repo\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"kind"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"pipeline"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"build"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"docker"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"platform"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"os"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"linux"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"arch"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"amd64"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"steps"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"build-master"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"plugins/docker"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"when"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"branch"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"master"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"settings"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"dockerfile"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"Dockerfile"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"tag"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"${DRONE_BRANCH}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"username"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"from_secret"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"global_docker_login"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"password"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"from_secret"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"global_docker_password"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"registry"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"from_secret"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"global_docker_registry"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"repo"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"from_secret"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"docker_repo"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"docker-compose-file-for-drone-ci"},"children":[{"type":"text","value":"Docker-compose file for drone-ci"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"drone"}]},{"type":"text","value":" service is ui itself and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"drone-agent"}]},{"type":"text","value":" is runner for builds, that can be started on different machine (or machines)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Change "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"secret_id"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"rpc_secret"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"drone.url"}]},{"type":"text","value":" to something you like."}]},{"type":"element","tag":"code","props":{"code":"version: \"3\"\n\nservices:\n drone:\n container_name: drone\n image: drone/drone:latest\n environment:\n - DRONE_GITHUB_CLIENT_ID=secret_id\n - DRONE_GITHUB_CLIENT_SECRET=client_secret\n - DRONE_RPC_SECRET=rpc_secret\n - DRONE_SERVER_HOST=drone.url\n - DRONE_USER_CREATE=\"username:user,admin:true\"\n - DRONE_SERVER_PROTO=https\n - DRONE_TLS_AUTOCERT=false\n - DRONE_GIT_ALWAYS_AUTH=false\n - DRONE_LOGS_DEBUG=true\n - DRONE_LOGS_TRACE=true\n restart: always\n volumes:\n - ./data:/data\n ports:\n - 8090:80\n drone-agent:\n container_name: drone__agent\n image: drone/agent:latest\n command: agent\n restart: always\n volumes:\n - /var/run/docker.sock:/var/run/docker.sock\n environment:\n - DRONE_RPC_SERVER=https://drone.url\n - DRONE_RPC_SECRET=rpc_secret\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"version"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"\"3\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"services"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"drone"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"drone"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"drone/drone:latest"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"DRONE_GITHUB_CLIENT_ID=secret_id"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"DRONE_GITHUB_CLIENT_SECRET=client_secret"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"DRONE_RPC_SECRET=rpc_secret"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"DRONE_SERVER_HOST=drone.url"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"DRONE_USER_CREATE=\"username:user,admin:true\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"DRONE_SERVER_PROTO=https"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"DRONE_TLS_AUTOCERT=false"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"DRONE_GIT_ALWAYS_AUTH=false"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"DRONE_LOGS_DEBUG=true"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"DRONE_LOGS_TRACE=true"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"always"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"./data:/data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"ports"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"8090:80"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"drone-agent"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"drone__agent"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"drone/agent:latest"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"command"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"agent"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"always"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"/var/run/docker.sock:/var/run/docker.sock"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5897b9"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"DRONE_RPC_SERVER=https://drone.url"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-9adcae"},"children":[{"type":"text","value":"DRONE_RPC_SECRET=rpc_secret"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"caching-builds"},"children":[{"type":"text","value":"Caching builds"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Haven't checked that yet, but there's a "},{"type":"element","tag":"a","props":{"href":"https://laszlo.cloud/the-ultimate-droneci-caching-guide","rel":["nofollow"]},"children":[{"type":"text","value":"manual"}]},{"type":"text","value":" from "},{"type":"element","tag":"a","props":{"href":"https://laszlo.cloud/","rel":["nofollow"]},"children":[{"type":"text","value":"Laszlo Fogas"}]},{"type":"text","value":" about that."}]},{"type":"element","tag":"h2","props":{"id":"get-user-info"},"children":[{"type":"text","value":"Get user info"}]},{"type":"element","tag":"code","props":{"code":"export DRONE_SERVER=https://drone.url\nexport DRONE_TOKEN=password\ndrone info\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2ef772"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" DRONE_SERVER=https://drone.url"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2ef772"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" DRONE_TOKEN=password"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":"drone info"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"mark-user-as-trusted"},"children":[{"type":"text","value":"Mark user as trusted"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes it won't help, then connect to drone database with sqlite and change user's trusted flag to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"1"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"drone repo update $1 --trusted=true && drone repo info $1\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":"drone repo update "}]},{"type":"element","tag":"span","props":{"class":"ct-84c07e"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-305369"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" --trusted=true "}]},{"type":"element","tag":"span","props":{"class":"ct-ade66c"},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"class":"ct-dd895a"},"children":[{"type":"text","value":" drone repo info "}]},{"type":"element","tag":"span","props":{"class":"ct-84c07e"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-305369"},"children":[{"type":"text","value":"1"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-ade66c{color:#FF7B72}.ct-305369{color:#C9D1D9}.ct-84c07e{color:#C9D1D9}.ct-2ef772{color:#FF7B72}.ct-9adcae{color:#A5D6FF}.ct-dd895a{color:#C9D1D9}.ct-5897b9{color:#7EE787}.light .ct-5897b9{color:#268BD2}.light .ct-dd895a{color:#657B83}.light .ct-9adcae{color:#2AA198}.light .ct-2ef772{color:#073642}.light .ct-84c07e{color:#859900}.light .ct-305369{color:#268BD2}.light .ct-ade66c{color:#859900}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"pushing-to-private-docker_registry","depth":2,"text":"Pushing to private docker_registry"},{"id":"docker-compose-file-for-drone-ci","depth":2,"text":"Docker-compose file for drone-ci"},{"id":"caching-builds","depth":2,"text":"Caching builds"},{"id":"get-user-info","depth":2,"text":"Get user info"},{"id":"mark-user-as-trusted","depth":2,"text":"Mark user as trusted"}]}},"_type":"markdown","_id":"content:Docker:Drone-ci.md","_source":"content","_file":"Docker/Drone-ci.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/cft4lrDUKB.json b/docs/api/_content/query/cft4lrDUKB.json
index 42f24bb..f3ca673 100644
--- a/docs/api/_content/query/cft4lrDUKB.json
+++ b/docs/api/_content/query/cft4lrDUKB.json
@@ -1 +1 @@
-{"_path":"/frontend/webgl/fragment-shaders","_dir":"webgl","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Fragment Shaders","description":"Fragment shaders describe how polygons are painted (or textured). Read Basics of WebGL (Drawing a Cube) first.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Fragment shaders describe "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"how polygons are painted"}]},{"type":"text","value":" (or textured). Read "},{"type":"element","tag":"a","props":{"href":"Basics%20of%20WebGL%20(Drawing%20a%20Cube)"},"children":[{"type":"text","value":"Basics of WebGL (Drawing a Cube)"}]},{"type":"text","value":" first."}]},{"type":"element","tag":"h2","props":{"id":"sample-fragment-vertex"},"children":[{"type":"text","value":"Sample fragment vertex"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Parameters could be passed here as written at "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"precision highp float;\n\n// parameter from Vertex Shader\nvarying vec4 v_positionWithOffset;\n// parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(void){\n // color, attached to current verticle {r,g,b,alpha}\n // same a[\n // v_positionWithOffset.x,\n // v_positionWithOffset.y, \n // v_positionWithOffset.z, \n // 1\n // ]\n gl_FragColor=vec4(v_positionWithOffset.xyz,1);\n}```\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"precision highp float;\n\n// parameter from Vertex Shader\nvarying vec4 v_positionWithOffset;\n// parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(void){\n // color, attached to current verticle {r,g,b,alpha}\n // same a[\n // v_positionWithOffset.x,\n // v_positionWithOffset.y, \n // v_positionWithOffset.z, \n // 1\n // ]\n gl_FragColor=vec4(v_positionWithOffset.xyz,1);\n}```\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Fragment shaders describe "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"how polygons are painted"}]},{"type":"text","value":" (or textured). Read "},{"type":"element","tag":"a","props":{"href":"Basics%20of%20WebGL%20(Drawing%20a%20Cube)"},"children":[{"type":"text","value":"Basics of WebGL (Drawing a Cube)"}]},{"type":"text","value":" first."}]},{"type":"element","tag":"h2","props":{"id":"sample-fragment-vertex"},"children":[{"type":"text","value":"Sample fragment vertex"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Parameters could be passed here as written at "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"precision highp float;\n\n// parameter from Vertex Shader\nvarying vec4 v_positionWithOffset;\n// parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(void){\n // color, attached to current verticle {r,g,b,alpha}\n // same a[\n // v_positionWithOffset.x,\n // v_positionWithOffset.y, \n // v_positionWithOffset.z, \n // 1\n // ]\n gl_FragColor=vec4(v_positionWithOffset.xyz,1);\n}```\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":"precision highp "}]},{"type":"element","tag":"span","props":{"class":"ct-d2c18b"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c12f0"},"children":[{"type":"text","value":"// parameter from Vertex Shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":"varying vec4 v_positionWithOffset;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c12f0"},"children":[{"type":"text","value":"// parameters passed from Javascript loop"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":"uniform "}]},{"type":"element","tag":"span","props":{"class":"ct-d2c18b"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":" slide;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":"uniform "}]},{"type":"element","tag":"span","props":{"class":"ct-d2c18b"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":" aspect;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d2c18b"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-08fe9b"},"children":[{"type":"text","value":"main"}]},{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-d2c18b"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":"){"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c12f0"},"children":[{"type":"text","value":"// color, attached to current verticle {r,g,b,alpha}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c12f0"},"children":[{"type":"text","value":"// same a["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c12f0"},"children":[{"type":"text","value":"// v_positionWithOffset.x,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c12f0"},"children":[{"type":"text","value":"// v_positionWithOffset.y, "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c12f0"},"children":[{"type":"text","value":"// v_positionWithOffset.z, "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c12f0"},"children":[{"type":"text","value":"// 1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0c12f0"},"children":[{"type":"text","value":"// ]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":" gl_FragColor"}]},{"type":"element","tag":"span","props":{"class":"ct-c82e83"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-08fe9b"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-f7e6d6"},"children":[{"type":"text","value":"v_positionWithOffset"}]},{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f7e6d6"},"children":[{"type":"text","value":"xyz"}]},{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-a2381f"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d4727d"},"children":[{"type":"text","value":"}```"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-a2381f{color:#79C0FF}.ct-f7e6d6{color:#C9D1D9}.ct-c82e83{color:#FF7B72}.ct-08fe9b{color:#D2A8FF}.ct-0c12f0{color:#8B949E}.ct-d2c18b{color:#FF7B72}.ct-d4727d{color:#C9D1D9}.light .ct-d4727d{color:#657B83}.light .ct-d2c18b{color:#073642}.light .ct-0c12f0{color:#93A1A1}.light .ct-08fe9b{color:#268BD2}.light .ct-c82e83{color:#859900}.light .ct-f7e6d6{color:#268BD2}.light .ct-a2381f{color:#D33682}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"sample-fragment-vertex","depth":2,"text":"Sample fragment vertex"}]}},"_type":"markdown","_id":"content:Frontend:WebGL:Fragment Shaders.md","_source":"content","_file":"Frontend/WebGL/Fragment Shaders.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/frontend/webgl/fragment-shaders","_dir":"webgl","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Fragment Shaders","description":"Fragment shaders describe how polygons are painted (or textured). Read Basics of WebGL (Drawing a Cube) first.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Fragment shaders describe "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"how polygons are painted"}]},{"type":"text","value":" (or textured). Read "},{"type":"element","tag":"a","props":{"href":"Basics%20of%20WebGL%20(Drawing%20a%20Cube)"},"children":[{"type":"text","value":"Basics of WebGL (Drawing a Cube)"}]},{"type":"text","value":" first."}]},{"type":"element","tag":"h2","props":{"id":"sample-fragment-vertex"},"children":[{"type":"text","value":"Sample fragment vertex"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Parameters could be passed here as written at "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"precision highp float;\n\n// parameter from Vertex Shader\nvarying vec4 v_positionWithOffset;\n// parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(void){\n // color, attached to current verticle {r,g,b,alpha}\n // same a[\n // v_positionWithOffset.x,\n // v_positionWithOffset.y, \n // v_positionWithOffset.z, \n // 1\n // ]\n gl_FragColor=vec4(v_positionWithOffset.xyz,1);\n}```\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"precision highp float;\n\n// parameter from Vertex Shader\nvarying vec4 v_positionWithOffset;\n// parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(void){\n // color, attached to current verticle {r,g,b,alpha}\n // same a[\n // v_positionWithOffset.x,\n // v_positionWithOffset.y, \n // v_positionWithOffset.z, \n // 1\n // ]\n gl_FragColor=vec4(v_positionWithOffset.xyz,1);\n}```\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Fragment shaders describe "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"how polygons are painted"}]},{"type":"text","value":" (or textured). Read "},{"type":"element","tag":"a","props":{"href":"Basics%20of%20WebGL%20(Drawing%20a%20Cube)"},"children":[{"type":"text","value":"Basics of WebGL (Drawing a Cube)"}]},{"type":"text","value":" first."}]},{"type":"element","tag":"h2","props":{"id":"sample-fragment-vertex"},"children":[{"type":"text","value":"Sample fragment vertex"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Parameters could be passed here as written at "},{"type":"element","tag":"a","props":{"href":"Vertex%20Shaders"},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"precision highp float;\n\n// parameter from Vertex Shader\nvarying vec4 v_positionWithOffset;\n// parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(void){\n // color, attached to current verticle {r,g,b,alpha}\n // same a[\n // v_positionWithOffset.x,\n // v_positionWithOffset.y, \n // v_positionWithOffset.z, \n // 1\n // ]\n gl_FragColor=vec4(v_positionWithOffset.xyz,1);\n}```\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":"precision highp "}]},{"type":"element","tag":"span","props":{"class":"ct-1dfc87"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e6c8c0"},"children":[{"type":"text","value":"// parameter from Vertex Shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":"varying vec4 v_positionWithOffset;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e6c8c0"},"children":[{"type":"text","value":"// parameters passed from Javascript loop"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":"uniform "}]},{"type":"element","tag":"span","props":{"class":"ct-1dfc87"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":" slide;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":"uniform "}]},{"type":"element","tag":"span","props":{"class":"ct-1dfc87"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":" aspect;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1dfc87"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdb0d0"},"children":[{"type":"text","value":"main"}]},{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-1dfc87"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":"){"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e6c8c0"},"children":[{"type":"text","value":"// color, attached to current verticle {r,g,b,alpha}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e6c8c0"},"children":[{"type":"text","value":"// same a["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e6c8c0"},"children":[{"type":"text","value":"// v_positionWithOffset.x,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e6c8c0"},"children":[{"type":"text","value":"// v_positionWithOffset.y, "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e6c8c0"},"children":[{"type":"text","value":"// v_positionWithOffset.z, "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e6c8c0"},"children":[{"type":"text","value":"// 1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e6c8c0"},"children":[{"type":"text","value":"// ]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":" gl_FragColor"}]},{"type":"element","tag":"span","props":{"class":"ct-6b3b3a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-bdb0d0"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-453e67"},"children":[{"type":"text","value":"v_positionWithOffset"}]},{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-453e67"},"children":[{"type":"text","value":"xyz"}]},{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-7ab632"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8297c4"},"children":[{"type":"text","value":"}```"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-7ab632{color:#79C0FF}.ct-453e67{color:#C9D1D9}.ct-6b3b3a{color:#FF7B72}.ct-bdb0d0{color:#D2A8FF}.ct-e6c8c0{color:#8B949E}.ct-1dfc87{color:#FF7B72}.ct-8297c4{color:#C9D1D9}.light .ct-8297c4{color:#657B83}.light .ct-1dfc87{color:#073642}.light .ct-e6c8c0{color:#93A1A1}.light .ct-bdb0d0{color:#268BD2}.light .ct-6b3b3a{color:#859900}.light .ct-453e67{color:#268BD2}.light .ct-7ab632{color:#D33682}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"sample-fragment-vertex","depth":2,"text":"Sample fragment vertex"}]}},"_type":"markdown","_id":"content:Frontend:WebGL:Fragment Shaders.md","_source":"content","_file":"Frontend/WebGL/Fragment Shaders.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/eIcZslqPOz.json b/docs/api/_content/query/eIcZslqPOz.json
index b6e1635..1d18d8d 100644
--- a/docs/api/_content/query/eIcZslqPOz.json
+++ b/docs/api/_content/query/eIcZslqPOz.json
@@ -1 +1 @@
-{"_path":"/git/force-git-to-use-https","_dir":"git","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Force Git To Use HTTPS","description":"Forces #git to use https even if remote url is #SSH. Useful for the networks with blocked #ssh protocol.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Forces #git to use https even if remote url is #SSH. Useful for the networks with blocked #ssh protocol."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Put this inside your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"~/.gitconfig"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"[url \"https://github.com\"]\n insteadOf = git://github.com\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"[url \"https://github.com\"]\n insteadOf = git://github.com\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Forces #git to use https even if remote url is #SSH. Useful for the networks with blocked #ssh protocol."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Put this inside your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"~/.gitconfig"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"[url \"https://github.com\"]\n insteadOf = git://github.com\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b3f4ac"},"children":[{"type":"text","value":"[url "}]},{"type":"element","tag":"span","props":{"class":"ct-e03aef"},"children":[{"type":"text","value":"\"https://github.com\""}]},{"type":"element","tag":"span","props":{"class":"ct-b3f4ac"},"children":[{"type":"text","value":"]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b3f4ac"},"children":[{"type":"text","value":" insteadOf "}]},{"type":"element","tag":"span","props":{"class":"ct-6c803e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b3f4ac"},"children":[{"type":"text","value":" git:"}]},{"type":"element","tag":"span","props":{"class":"ct-172751"},"children":[{"type":"text","value":"//github.com"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-172751{color:#8B949E}.ct-6c803e{color:#FF7B72}.ct-e03aef{color:#A5D6FF}.ct-b3f4ac{color:#C9D1D9}.light .ct-b3f4ac{color:#657B83}.light .ct-e03aef{color:#2AA198}.light .ct-6c803e{color:#859900}.light .ct-172751{color:#93A1A1}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Git:Force git to use HTTPS.md","_source":"content","_file":"Git/Force git to use HTTPS.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/git/force-git-to-use-https","_dir":"git","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Force Git To Use HTTPS","description":"Forces #git to use https even if remote url is #SSH. Useful for the networks with blocked #ssh protocol.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Forces #git to use https even if remote url is #SSH. Useful for the networks with blocked #ssh protocol."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Put this inside your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"~/.gitconfig"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"[url \"https://github.com\"]\n insteadOf = git://github.com\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"[url \"https://github.com\"]\n insteadOf = git://github.com\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Forces #git to use https even if remote url is #SSH. Useful for the networks with blocked #ssh protocol."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Put this inside your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"~/.gitconfig"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"[url \"https://github.com\"]\n insteadOf = git://github.com\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94d865"},"children":[{"type":"text","value":"[url "}]},{"type":"element","tag":"span","props":{"class":"ct-e92d62"},"children":[{"type":"text","value":"\"https://github.com\""}]},{"type":"element","tag":"span","props":{"class":"ct-94d865"},"children":[{"type":"text","value":"]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94d865"},"children":[{"type":"text","value":" insteadOf "}]},{"type":"element","tag":"span","props":{"class":"ct-8324af"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-94d865"},"children":[{"type":"text","value":" git:"}]},{"type":"element","tag":"span","props":{"class":"ct-ffb31d"},"children":[{"type":"text","value":"//github.com"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-ffb31d{color:#8B949E}.ct-8324af{color:#FF7B72}.ct-e92d62{color:#A5D6FF}.ct-94d865{color:#C9D1D9}.light .ct-94d865{color:#657B83}.light .ct-e92d62{color:#2AA198}.light .ct-8324af{color:#859900}.light .ct-ffb31d{color:#93A1A1}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Git:Force git to use HTTPS.md","_source":"content","_file":"Git/Force git to use HTTPS.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/epeSDkttbj.json b/docs/api/_content/query/epeSDkttbj.json
index 5c514fa..50ed0c3 100644
--- a/docs/api/_content/query/epeSDkttbj.json
+++ b/docs/api/_content/query/epeSDkttbj.json
@@ -1 +1 @@
-{"_path":"/css/sass-nth-child-iterate-mixin","_dir":"css","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Sass Nth Child Iterate Mixin","description":"Say, we need to color n items by specific colors, which depend on its position. #SCSS supports iteration over lists for that purposes:","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Say, we need to color "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"n"}]},{"type":"text","value":" items by specific colors, which depend on its position. #SCSS supports "},{"type":"element","tag":"a","props":{"href":"https://sass-lang.com/documentation/at-rules/control/each","rel":["nofollow"]},"children":[{"type":"text","value":"iteration over lists"}]},{"type":"text","value":" for that purposes:"}]},{"type":"element","tag":"code","props":{"code":"@mixin color-per-child($colors) {\n @each $color in $colors {\n &:nth-child(#{index(($colors), ($color))}) {\n color: $color;\n }\n }\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"@mixin color-per-child($colors) {\n @each $color in $colors {\n &:nth-child(#{index(($colors), ($color))}) {\n color: $color;\n }\n }\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Usage is simple:"}]},{"type":"element","tag":"code","props":{"code":".item {\n @include color_per_child((#ded187, #dbde87, #bade87, #9cde87, #87deaa));\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":".item {\n @include color_per_child((#ded187, #dbde87, #bade87, #9cde87, #87deaa));\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Say, we need to color "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"n"}]},{"type":"text","value":" items by specific colors, which depend on its position. #SCSS supports "},{"type":"element","tag":"a","props":{"href":"https://sass-lang.com/documentation/at-rules/control/each","rel":["nofollow"]},"children":[{"type":"text","value":"iteration over lists"}]},{"type":"text","value":" for that purposes:"}]},{"type":"element","tag":"code","props":{"code":"@mixin color-per-child($colors) {\n @each $color in $colors {\n &:nth-child(#{index(($colors), ($color))}) {\n color: $color;\n }\n }\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-981420"},"children":[{"type":"text","value":"@mixin"}]},{"type":"element","tag":"span","props":{"class":"ct-dd77e2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-93c23f"},"children":[{"type":"text","value":"color-per-child"}]},{"type":"element","tag":"span","props":{"class":"ct-dd77e2"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7a6104"},"children":[{"type":"text","value":"$colors"}]},{"type":"element","tag":"span","props":{"class":"ct-dd77e2"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd77e2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-981420"},"children":[{"type":"text","value":"@each"}]},{"type":"element","tag":"span","props":{"class":"ct-dd77e2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a6104"},"children":[{"type":"text","value":"$color"}]},{"type":"element","tag":"span","props":{"class":"ct-dd77e2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-981420"},"children":[{"type":"text","value":"in"}]},{"type":"element","tag":"span","props":{"class":"ct-dd77e2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a6104"},"children":[{"type":"text","value":"$colors"}]},{"type":"element","tag":"span","props":{"class":"ct-dd77e2"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd77e2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-81e54c"},"children":[{"type":"text","value":"&"}]},{"type":"element","tag":"span","props":{"class":"ct-606577"},"children":[{"type":"text","value":":nth-child"}]},{"type":"element","tag":"span","props":{"class":"ct-dd77e2"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7a6104"},"children":[{"type":"text","value":"#{"}]},{"type":"element","tag":"span","props":{"class":"ct-38e3eb"},"children":[{"type":"text","value":"index"}]},{"type":"element","tag":"span","props":{"class":"ct-7a6104"},"children":[{"type":"text","value":"(($colors), ($color))}"}]},{"type":"element","tag":"span","props":{"class":"ct-dd77e2"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dd77e2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fbabdd"},"children":[{"type":"text","value":"color"}]},{"type":"element","tag":"span","props":{"class":"ct-dd77e2"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-7a6104"},"children":[{"type":"text","value":"$color"}]},{"type":"element","tag":"span","props":{"class":"ct-dd77e2"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ea5dba"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ea5dba"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ea5dba"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Usage is simple:"}]},{"type":"element","tag":"code","props":{"code":".item {\n @include color_per_child((#ded187, #dbde87, #bade87, #9cde87, #87deaa));\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bd28ed"},"children":[{"type":"text","value":".item"}]},{"type":"element","tag":"span","props":{"class":"ct-ea5dba"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ea5dba"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d98769"},"children":[{"type":"text","value":"@include"}]},{"type":"element","tag":"span","props":{"class":"ct-ea5dba"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dc09c5"},"children":[{"type":"text","value":"color_per_child"}]},{"type":"element","tag":"span","props":{"class":"ct-ea5dba"},"children":[{"type":"text","value":"(("}]},{"type":"element","tag":"span","props":{"class":"ct-e8ce17"},"children":[{"type":"text","value":"#ded187"}]},{"type":"element","tag":"span","props":{"class":"ct-ea5dba"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-e8ce17"},"children":[{"type":"text","value":"#dbde87"}]},{"type":"element","tag":"span","props":{"class":"ct-ea5dba"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-e8ce17"},"children":[{"type":"text","value":"#bade87"}]},{"type":"element","tag":"span","props":{"class":"ct-ea5dba"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-e8ce17"},"children":[{"type":"text","value":"#9cde87"}]},{"type":"element","tag":"span","props":{"class":"ct-ea5dba"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-e8ce17"},"children":[{"type":"text","value":"#87deaa"}]},{"type":"element","tag":"span","props":{"class":"ct-ea5dba"},"children":[{"type":"text","value":"));"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ea5dba"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-e8ce17{color:#79C0FF}.ct-dc09c5{color:#D2A8FF}.ct-d98769{color:#FF7B72}.ct-bd28ed{color:#79C0FF}.ct-ea5dba{color:#C9D1D9}.ct-fbabdd{color:#79C0FF}.ct-38e3eb{color:#79C0FF}.ct-606577{color:#79C0FF}.ct-81e54c{color:#7EE787}.ct-7a6104{color:#FFA657}.ct-93c23f{color:#D2A8FF}.ct-dd77e2{color:#C9D1D9}.ct-981420{color:#FF7B72}.light .ct-981420{color:#859900}.light .ct-dd77e2{color:#657B83}.light .ct-93c23f{color:#268BD2}.light .ct-7a6104{color:#657B83}.light .ct-81e54c{color:#268BD2}.light .ct-606577{color:#93A1A1}.light .ct-38e3eb{color:#268BD2}.light .ct-fbabdd{color:#859900}.light .ct-ea5dba{color:#657B83}.light .ct-bd28ed{color:#93A1A1}.light .ct-d98769{color:#859900}.light .ct-dc09c5{color:#268BD2}.light .ct-e8ce17{color:#CB4B16}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:CSS:Sass nth-child iterate mixin.md","_source":"content","_file":"CSS/Sass nth-child iterate mixin.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/css/sass-nth-child-iterate-mixin","_dir":"css","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Sass Nth Child Iterate Mixin","description":"Say, we need to color n items by specific colors, which depend on its position. #SCSS supports iteration over lists for that purposes:","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Say, we need to color "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"n"}]},{"type":"text","value":" items by specific colors, which depend on its position. #SCSS supports "},{"type":"element","tag":"a","props":{"href":"https://sass-lang.com/documentation/at-rules/control/each","rel":["nofollow"]},"children":[{"type":"text","value":"iteration over lists"}]},{"type":"text","value":" for that purposes:"}]},{"type":"element","tag":"code","props":{"code":"@mixin color-per-child($colors) {\n @each $color in $colors {\n &:nth-child(#{index(($colors), ($color))}) {\n color: $color;\n }\n }\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"@mixin color-per-child($colors) {\n @each $color in $colors {\n &:nth-child(#{index(($colors), ($color))}) {\n color: $color;\n }\n }\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Usage is simple:"}]},{"type":"element","tag":"code","props":{"code":".item {\n @include color_per_child((#ded187, #dbde87, #bade87, #9cde87, #87deaa));\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":".item {\n @include color_per_child((#ded187, #dbde87, #bade87, #9cde87, #87deaa));\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Say, we need to color "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"n"}]},{"type":"text","value":" items by specific colors, which depend on its position. #SCSS supports "},{"type":"element","tag":"a","props":{"href":"https://sass-lang.com/documentation/at-rules/control/each","rel":["nofollow"]},"children":[{"type":"text","value":"iteration over lists"}]},{"type":"text","value":" for that purposes:"}]},{"type":"element","tag":"code","props":{"code":"@mixin color-per-child($colors) {\n @each $color in $colors {\n &:nth-child(#{index(($colors), ($color))}) {\n color: $color;\n }\n }\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f2cade"},"children":[{"type":"text","value":"@mixin"}]},{"type":"element","tag":"span","props":{"class":"ct-c632ae"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f9af5d"},"children":[{"type":"text","value":"color-per-child"}]},{"type":"element","tag":"span","props":{"class":"ct-c632ae"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-c602c5"},"children":[{"type":"text","value":"$colors"}]},{"type":"element","tag":"span","props":{"class":"ct-c632ae"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c632ae"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f2cade"},"children":[{"type":"text","value":"@each"}]},{"type":"element","tag":"span","props":{"class":"ct-c632ae"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c602c5"},"children":[{"type":"text","value":"$color"}]},{"type":"element","tag":"span","props":{"class":"ct-c632ae"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f2cade"},"children":[{"type":"text","value":"in"}]},{"type":"element","tag":"span","props":{"class":"ct-c632ae"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c602c5"},"children":[{"type":"text","value":"$colors"}]},{"type":"element","tag":"span","props":{"class":"ct-c632ae"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c632ae"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cb522"},"children":[{"type":"text","value":"&"}]},{"type":"element","tag":"span","props":{"class":"ct-c6ad1e"},"children":[{"type":"text","value":":nth-child"}]},{"type":"element","tag":"span","props":{"class":"ct-c632ae"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-c602c5"},"children":[{"type":"text","value":"#{"}]},{"type":"element","tag":"span","props":{"class":"ct-673c53"},"children":[{"type":"text","value":"index"}]},{"type":"element","tag":"span","props":{"class":"ct-c602c5"},"children":[{"type":"text","value":"(($colors), ($color))}"}]},{"type":"element","tag":"span","props":{"class":"ct-c632ae"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c632ae"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2c3b25"},"children":[{"type":"text","value":"color"}]},{"type":"element","tag":"span","props":{"class":"ct-c632ae"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-c602c5"},"children":[{"type":"text","value":"$color"}]},{"type":"element","tag":"span","props":{"class":"ct-c632ae"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-81d937"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-81d937"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-81d937"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Usage is simple:"}]},{"type":"element","tag":"code","props":{"code":".item {\n @include color_per_child((#ded187, #dbde87, #bade87, #9cde87, #87deaa));\n}\n","language":"scss"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-16cb29"},"children":[{"type":"text","value":".item"}]},{"type":"element","tag":"span","props":{"class":"ct-81d937"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-81d937"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b9d1fe"},"children":[{"type":"text","value":"@include"}]},{"type":"element","tag":"span","props":{"class":"ct-81d937"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-09f479"},"children":[{"type":"text","value":"color_per_child"}]},{"type":"element","tag":"span","props":{"class":"ct-81d937"},"children":[{"type":"text","value":"(("}]},{"type":"element","tag":"span","props":{"class":"ct-9ce1dc"},"children":[{"type":"text","value":"#ded187"}]},{"type":"element","tag":"span","props":{"class":"ct-81d937"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-9ce1dc"},"children":[{"type":"text","value":"#dbde87"}]},{"type":"element","tag":"span","props":{"class":"ct-81d937"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-9ce1dc"},"children":[{"type":"text","value":"#bade87"}]},{"type":"element","tag":"span","props":{"class":"ct-81d937"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-9ce1dc"},"children":[{"type":"text","value":"#9cde87"}]},{"type":"element","tag":"span","props":{"class":"ct-81d937"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-9ce1dc"},"children":[{"type":"text","value":"#87deaa"}]},{"type":"element","tag":"span","props":{"class":"ct-81d937"},"children":[{"type":"text","value":"));"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-81d937"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-9ce1dc{color:#79C0FF}.ct-09f479{color:#D2A8FF}.ct-b9d1fe{color:#FF7B72}.ct-16cb29{color:#79C0FF}.ct-81d937{color:#C9D1D9}.ct-2c3b25{color:#79C0FF}.ct-673c53{color:#79C0FF}.ct-c6ad1e{color:#79C0FF}.ct-7cb522{color:#7EE787}.ct-c602c5{color:#FFA657}.ct-f9af5d{color:#D2A8FF}.ct-c632ae{color:#C9D1D9}.ct-f2cade{color:#FF7B72}.light .ct-f2cade{color:#859900}.light .ct-c632ae{color:#657B83}.light .ct-f9af5d{color:#268BD2}.light .ct-c602c5{color:#657B83}.light .ct-7cb522{color:#268BD2}.light .ct-c6ad1e{color:#93A1A1}.light .ct-673c53{color:#268BD2}.light .ct-2c3b25{color:#859900}.light .ct-81d937{color:#657B83}.light .ct-16cb29{color:#93A1A1}.light .ct-b9d1fe{color:#859900}.light .ct-09f479{color:#268BD2}.light .ct-9ce1dc{color:#CB4B16}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:CSS:Sass nth-child iterate mixin.md","_source":"content","_file":"CSS/Sass nth-child iterate mixin.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/fXI9pPDQUP.json b/docs/api/_content/query/fXI9pPDQUP.json
index d44eabe..69e6caf 100644
--- a/docs/api/_content/query/fXI9pPDQUP.json
+++ b/docs/api/_content/query/fXI9pPDQUP.json
@@ -1 +1 @@
-{"_path":"/golang/i18n-in-golang","_dir":"golang","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"I18n In Golang","description":"There are no good examples of golang.org/x/text uses and description of how pluralization made. So, this is it.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are no good examples of "},{"type":"element","tag":"a","props":{"href":"https://golang.org/x/text","rel":["nofollow"]},"children":[{"type":"text","value":"golang.org/x/text"}]},{"type":"text","value":" uses and description of how pluralization made. So, this is it."}]},{"type":"element","tag":"h4","props":{"id":"generating-translations"},"children":[{"type":"text","value":"Generating translations"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You should specify valid "},{"type":"element","tag":"a","props":{"href":"https://www.iso.org/obp/ui/#iso:code:3166","rel":["nofollow"]},"children":[{"type":"text","value":"ISO-3166 locale code"}]},{"type":"text","value":" to get plurals working!"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Write your code:"}]},{"type":"element","tag":"code","props":{"code":"import (\n \"golang.org/x/text/language\"\n \"golang.org/x/text/message\"\n)\n\nlang := language.MustParse('ru-RU')\nprinter := message.NewPrinter(lang)\n\ncount := 1\nprinter.Sprintf(\"%d butterflies\", count)\n","language":"go"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import (\n \"golang.org/x/text/language\"\n \"golang.org/x/text/message\"\n)\n\nlang := language.MustParse('ru-RU')\nprinter := message.NewPrinter(lang)\n\ncount := 1\nprinter.Sprintf(\"%d butterflies\", count)\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then run generator for your locale (mine is "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ru-RU"}]},{"type":"text","value":"):"}]},{"type":"element","tag":"code","props":{"code":"gotext -srclang=en-GB update -lang=ru-RU \\\n -out=translations.go github.com/path/to-output-folder\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"gotext -srclang=en-GB update -lang=ru-RU \\\n -out=translations.go github.com/path/to-output-folder\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will generate "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"out.gotext.json"}]},{"type":"text","value":" in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/path/to-output-folder/ru-RU"}]},{"type":"text","value":" of your project. Copy it to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"messages.out.json"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h4","props":{"id":"translating-and-adding-plural-forms"},"children":[{"type":"text","value":"Translating and adding plural forms"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Change "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"\"translation\""}]},{"type":"text","value":" value in generated "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"messages.gotext.json"}]},{"type":"text","value":" to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"string"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"object"}]},{"type":"text","value":" of the form shown below if you want pluralize strings, "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"then run gotext command again"}]},{"type":"text","value":", it will generate "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".go files with translations"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"According to "},{"type":"element","tag":"a","props":{"href":"https://github.com/golang/text/blob/master/feature/plural/gen_common.go#L19","rel":["nofollow"]},"children":[{"type":"text","value":"source files of gen_common"}]},{"type":"text","value":", there's a couple of forms:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"=N"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"!=N"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"%N"}]},{"type":"text","value":" for exact matches"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"zero"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"one"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"two"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"few"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"many"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"other"}]},{"type":"text","value":" - they're different for each language, so,"}]}]},{"type":"element","tag":"code","props":{"code":"{\n \"id\": \"{Count} butterflies\",\n \"message\": \"{Count} butterflies\",\n \"translation\": {\n \"select\": {\n \"feature\": \"plural\",\n \"arg\": \"Count\",\n \"cases\": {\n \"one\": {\n \"msg\": \"{Count} бабочка\"\n },\n \"few\": {\n \"msg\": \"{Count} бабочки\"\n },\n \"many\": {\n \"msg\": \"{Count} бабочек\"\n },\n \"other\": {\n \"msg\": \"{Count} бабочуль\"\n }\n }\n }\n },\n \"placeholders\": [\n {\n \"id\": \"Count\",\n \"string\": \"%[1]d\",\n \"type\": \"int\",\n \"underlyingType\": \"int\",\n \"argNum\": 1,\n \"expr\": \"count\"\n }\n ]\n},\n","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"{\n \"id\": \"{Count} butterflies\",\n \"message\": \"{Count} butterflies\",\n \"translation\": {\n \"select\": {\n \"feature\": \"plural\",\n \"arg\": \"Count\",\n \"cases\": {\n \"one\": {\n \"msg\": \"{Count} бабочка\"\n },\n \"few\": {\n \"msg\": \"{Count} бабочки\"\n },\n \"many\": {\n \"msg\": \"{Count} бабочек\"\n },\n \"other\": {\n \"msg\": \"{Count} бабочуль\"\n }\n }\n }\n },\n \"placeholders\": [\n {\n \"id\": \"Count\",\n \"string\": \"%[1]d\",\n \"type\": \"int\",\n \"underlyingType\": \"int\",\n \"argNum\": 1,\n \"expr\": \"count\"\n }\n ]\n},\n"}]}]}]},{"type":"element","tag":"h4","props":{"id":"using-go-generate"},"children":[{"type":"text","value":"Using go-generate"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Write this at some "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".go"}]},{"type":"text","value":" file:"}]},{"type":"element","tag":"code","props":{"code":"//go:generate gotext -srclang=en-GB update -out=translations.go -lang=ru-RU github.com/muerwre/vault-golang/internal/api\n","language":"go"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"//go:generate gotext -srclang=en-GB update -out=translations.go -lang=ru-RU github.com/muerwre/vault-golang/internal/api\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then run go generation:"}]},{"type":"element","tag":"code","props":{"code":"go generate ./...\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"go generate ./...\n"}]}]}]},{"type":"element","tag":"h4","props":{"id":"useful-links"},"children":[{"type":"text","value":"Useful links"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/golang/text/blob/master/feature/plural/gen_common.go#L19","rel":["nofollow"]},"children":[{"type":"text","value":"All available forms in this .go file"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://community.crowdin.com/t/plurals-in-gotext-json-files/600","rel":["nofollow"]},"children":[{"type":"text","value":"Answer, that solved it for me"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are no good examples of "},{"type":"element","tag":"a","props":{"href":"https://golang.org/x/text","rel":["nofollow"]},"children":[{"type":"text","value":"golang.org/x/text"}]},{"type":"text","value":" uses and description of how pluralization made. So, this is it."}]},{"type":"element","tag":"h4","props":{"id":"generating-translations"},"children":[{"type":"text","value":"Generating translations"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You should specify valid "},{"type":"element","tag":"a","props":{"href":"https://www.iso.org/obp/ui/#iso:code:3166","rel":["nofollow"]},"children":[{"type":"text","value":"ISO-3166 locale code"}]},{"type":"text","value":" to get plurals working!"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Write your code:"}]},{"type":"element","tag":"code","props":{"code":"import (\n \"golang.org/x/text/language\"\n \"golang.org/x/text/message\"\n)\n\nlang := language.MustParse('ru-RU')\nprinter := message.NewPrinter(lang)\n\ncount := 1\nprinter.Sprintf(\"%d butterflies\", count)\n","language":"go"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f4481"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-04fd5c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-00c2ca"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-e35103"},"children":[{"type":"text","value":"golang.org/x/text/language"}]},{"type":"element","tag":"span","props":{"class":"ct-00c2ca"},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-04fd5c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-00c2ca"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-e35103"},"children":[{"type":"text","value":"golang.org/x/text/message"}]},{"type":"element","tag":"span","props":{"class":"ct-00c2ca"},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d136e8"},"children":[{"type":"text","value":"lang"}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1f4481"},"children":[{"type":"text","value":":="}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" language."}]},{"type":"element","tag":"span","props":{"class":"ct-cdbf83"},"children":[{"type":"text","value":"MustParse"}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-84260f"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-0a943a"},"children":[{"type":"text","value":"ru-RU"}]},{"type":"element","tag":"span","props":{"class":"ct-84260f"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d136e8"},"children":[{"type":"text","value":"printer"}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1f4481"},"children":[{"type":"text","value":":="}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" message."}]},{"type":"element","tag":"span","props":{"class":"ct-cdbf83"},"children":[{"type":"text","value":"NewPrinter"}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":"(lang)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d136e8"},"children":[{"type":"text","value":"count"}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1f4481"},"children":[{"type":"text","value":":="}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f726b6"},"children":[{"type":"text","value":"1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":"printer."}]},{"type":"element","tag":"span","props":{"class":"ct-cdbf83"},"children":[{"type":"text","value":"Sprintf"}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-84260f"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-b76416"},"children":[{"type":"text","value":"%d"}]},{"type":"element","tag":"span","props":{"class":"ct-84260f"},"children":[{"type":"text","value":" butterflies\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":", count)"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then run generator for your locale (mine is "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ru-RU"}]},{"type":"text","value":"):"}]},{"type":"element","tag":"code","props":{"code":"gotext -srclang=en-GB update -lang=ru-RU \\\n -out=translations.go github.com/path/to-output-folder\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":"gotext -srclang=en-GB update -lang=ru-RU \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" -out=translations.go github.com/path/to-output-folder"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will generate "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"out.gotext.json"}]},{"type":"text","value":" in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/path/to-output-folder/ru-RU"}]},{"type":"text","value":" of your project. Copy it to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"messages.out.json"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h4","props":{"id":"translating-and-adding-plural-forms"},"children":[{"type":"text","value":"Translating and adding plural forms"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Change "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"\"translation\""}]},{"type":"text","value":" value in generated "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"messages.gotext.json"}]},{"type":"text","value":" to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"string"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"object"}]},{"type":"text","value":" of the form shown below if you want pluralize strings, "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"then run gotext command again"}]},{"type":"text","value":", it will generate "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".go files with translations"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"According to "},{"type":"element","tag":"a","props":{"href":"https://github.com/golang/text/blob/master/feature/plural/gen_common.go#L19","rel":["nofollow"]},"children":[{"type":"text","value":"source files of gen_common"}]},{"type":"text","value":", there's a couple of forms:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"=N"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"!=N"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"%N"}]},{"type":"text","value":" for exact matches"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"zero"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"one"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"two"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"few"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"many"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"other"}]},{"type":"text","value":" - they're different for each language, so,"}]}]},{"type":"element","tag":"code","props":{"code":"{\n \"id\": \"{Count} butterflies\",\n \"message\": \"{Count} butterflies\",\n \"translation\": {\n \"select\": {\n \"feature\": \"plural\",\n \"arg\": \"Count\",\n \"cases\": {\n \"one\": {\n \"msg\": \"{Count} бабочка\"\n },\n \"few\": {\n \"msg\": \"{Count} бабочки\"\n },\n \"many\": {\n \"msg\": \"{Count} бабочек\"\n },\n \"other\": {\n \"msg\": \"{Count} бабочуль\"\n }\n }\n }\n },\n \"placeholders\": [\n {\n \"id\": \"Count\",\n \"string\": \"%[1]d\",\n \"type\": \"int\",\n \"underlyingType\": \"int\",\n \"argNum\": 1,\n \"expr\": \"count\"\n }\n ]\n},\n","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"id\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-84260f"},"children":[{"type":"text","value":"\"{Count} butterflies\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"message\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-84260f"},"children":[{"type":"text","value":"\"{Count} butterflies\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"translation\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"select\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"feature\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-84260f"},"children":[{"type":"text","value":"\"plural\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"arg\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-84260f"},"children":[{"type":"text","value":"\"Count\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"cases\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"one\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"msg\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-84260f"},"children":[{"type":"text","value":"\"{Count} бабочка\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"few\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"msg\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-84260f"},"children":[{"type":"text","value":"\"{Count} бабочки\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"many\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"msg\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-84260f"},"children":[{"type":"text","value":"\"{Count} бабочек\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"other\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"msg\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-84260f"},"children":[{"type":"text","value":"\"{Count} бабочуль\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"placeholders\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"id\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-84260f"},"children":[{"type":"text","value":"\"Count\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"string\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-84260f"},"children":[{"type":"text","value":"\"%[1]d\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"type\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-84260f"},"children":[{"type":"text","value":"\"int\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"underlyingType\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-84260f"},"children":[{"type":"text","value":"\"int\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"argNum\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f726b6"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-525738"},"children":[{"type":"text","value":"\"expr\""}]},{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-84260f"},"children":[{"type":"text","value":"\"count\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":" ]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":"},"}]}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"using-go-generate"},"children":[{"type":"text","value":"Using go-generate"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Write this at some "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".go"}]},{"type":"text","value":" file:"}]},{"type":"element","tag":"code","props":{"code":"//go:generate gotext -srclang=en-GB update -out=translations.go -lang=ru-RU github.com/muerwre/vault-golang/internal/api\n","language":"go"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cb8ea8"},"children":[{"type":"text","value":"//go:generate gotext -srclang=en-GB update -out=translations.go -lang=ru-RU github.com/muerwre/vault-golang/internal/api"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then run go generation:"}]},{"type":"element","tag":"code","props":{"code":"go generate ./...\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7594fe"},"children":[{"type":"text","value":"go generate ./..."}]}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"useful-links"},"children":[{"type":"text","value":"Useful links"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/golang/text/blob/master/feature/plural/gen_common.go#L19","rel":["nofollow"]},"children":[{"type":"text","value":"All available forms in this .go file"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://community.crowdin.com/t/plurals-in-gotext-json-files/600","rel":["nofollow"]},"children":[{"type":"text","value":"Answer, that solved it for me"}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-cb8ea8{color:#8B949E}.ct-525738{color:#79C0FF}.ct-b76416{color:#79C0FF}.ct-f726b6{color:#79C0FF}.ct-0a943a{color:#FFA198}.ct-84260f{color:#A5D6FF}.ct-cdbf83{color:#79C0FF}.ct-d136e8{color:#C9D1D9}.ct-e35103{color:#FFA657}.ct-00c2ca{color:#A5D6FF}.ct-04fd5c{color:#C9D1D9}.ct-7594fe{color:#C9D1D9}.ct-1f4481{color:#FF7B72}.light .ct-1f4481{color:#859900}.light .ct-7594fe{color:#657B83}.light .ct-04fd5c{color:#657B83}.light .ct-00c2ca{color:#2AA198}.light .ct-e35103{color:#2AA198}.light .ct-d136e8{color:#268BD2}.light .ct-cdbf83{color:#268BD2}.light .ct-84260f{color:#2AA198}.light .ct-0a943a{color:#CD3131}.light .ct-f726b6{color:#D33682}.light .ct-b76416{color:#CB4B16}.light .ct-525738{color:#859900}.light .ct-cb8ea8{color:#93A1A1}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Golang:i18n in golang.md","_source":"content","_file":"Golang/i18n in golang.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/golang/i18n-in-golang","_dir":"golang","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"I18n In Golang","description":"There are no good examples of golang.org/x/text uses and description of how pluralization made. So, this is it.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are no good examples of "},{"type":"element","tag":"a","props":{"href":"https://golang.org/x/text","rel":["nofollow"]},"children":[{"type":"text","value":"golang.org/x/text"}]},{"type":"text","value":" uses and description of how pluralization made. So, this is it."}]},{"type":"element","tag":"h4","props":{"id":"generating-translations"},"children":[{"type":"text","value":"Generating translations"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You should specify valid "},{"type":"element","tag":"a","props":{"href":"https://www.iso.org/obp/ui/#iso:code:3166","rel":["nofollow"]},"children":[{"type":"text","value":"ISO-3166 locale code"}]},{"type":"text","value":" to get plurals working!"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Write your code:"}]},{"type":"element","tag":"code","props":{"code":"import (\n \"golang.org/x/text/language\"\n \"golang.org/x/text/message\"\n)\n\nlang := language.MustParse('ru-RU')\nprinter := message.NewPrinter(lang)\n\ncount := 1\nprinter.Sprintf(\"%d butterflies\", count)\n","language":"go"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import (\n \"golang.org/x/text/language\"\n \"golang.org/x/text/message\"\n)\n\nlang := language.MustParse('ru-RU')\nprinter := message.NewPrinter(lang)\n\ncount := 1\nprinter.Sprintf(\"%d butterflies\", count)\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then run generator for your locale (mine is "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ru-RU"}]},{"type":"text","value":"):"}]},{"type":"element","tag":"code","props":{"code":"gotext -srclang=en-GB update -lang=ru-RU \\\n -out=translations.go github.com/path/to-output-folder\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"gotext -srclang=en-GB update -lang=ru-RU \\\n -out=translations.go github.com/path/to-output-folder\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will generate "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"out.gotext.json"}]},{"type":"text","value":" in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/path/to-output-folder/ru-RU"}]},{"type":"text","value":" of your project. Copy it to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"messages.out.json"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h4","props":{"id":"translating-and-adding-plural-forms"},"children":[{"type":"text","value":"Translating and adding plural forms"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Change "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"\"translation\""}]},{"type":"text","value":" value in generated "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"messages.gotext.json"}]},{"type":"text","value":" to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"string"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"object"}]},{"type":"text","value":" of the form shown below if you want pluralize strings, "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"then run gotext command again"}]},{"type":"text","value":", it will generate "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".go files with translations"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"According to "},{"type":"element","tag":"a","props":{"href":"https://github.com/golang/text/blob/master/feature/plural/gen_common.go#L19","rel":["nofollow"]},"children":[{"type":"text","value":"source files of gen_common"}]},{"type":"text","value":", there's a couple of forms:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"=N"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"!=N"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"%N"}]},{"type":"text","value":" for exact matches"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"zero"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"one"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"two"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"few"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"many"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"other"}]},{"type":"text","value":" - they're different for each language, so,"}]}]},{"type":"element","tag":"code","props":{"code":"{\n \"id\": \"{Count} butterflies\",\n \"message\": \"{Count} butterflies\",\n \"translation\": {\n \"select\": {\n \"feature\": \"plural\",\n \"arg\": \"Count\",\n \"cases\": {\n \"one\": {\n \"msg\": \"{Count} бабочка\"\n },\n \"few\": {\n \"msg\": \"{Count} бабочки\"\n },\n \"many\": {\n \"msg\": \"{Count} бабочек\"\n },\n \"other\": {\n \"msg\": \"{Count} бабочуль\"\n }\n }\n }\n },\n \"placeholders\": [\n {\n \"id\": \"Count\",\n \"string\": \"%[1]d\",\n \"type\": \"int\",\n \"underlyingType\": \"int\",\n \"argNum\": 1,\n \"expr\": \"count\"\n }\n ]\n},\n","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"{\n \"id\": \"{Count} butterflies\",\n \"message\": \"{Count} butterflies\",\n \"translation\": {\n \"select\": {\n \"feature\": \"plural\",\n \"arg\": \"Count\",\n \"cases\": {\n \"one\": {\n \"msg\": \"{Count} бабочка\"\n },\n \"few\": {\n \"msg\": \"{Count} бабочки\"\n },\n \"many\": {\n \"msg\": \"{Count} бабочек\"\n },\n \"other\": {\n \"msg\": \"{Count} бабочуль\"\n }\n }\n }\n },\n \"placeholders\": [\n {\n \"id\": \"Count\",\n \"string\": \"%[1]d\",\n \"type\": \"int\",\n \"underlyingType\": \"int\",\n \"argNum\": 1,\n \"expr\": \"count\"\n }\n ]\n},\n"}]}]}]},{"type":"element","tag":"h4","props":{"id":"using-go-generate"},"children":[{"type":"text","value":"Using go-generate"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Write this at some "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".go"}]},{"type":"text","value":" file:"}]},{"type":"element","tag":"code","props":{"code":"//go:generate gotext -srclang=en-GB update -out=translations.go -lang=ru-RU github.com/muerwre/vault-golang/internal/api\n","language":"go"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"//go:generate gotext -srclang=en-GB update -out=translations.go -lang=ru-RU github.com/muerwre/vault-golang/internal/api\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then run go generation:"}]},{"type":"element","tag":"code","props":{"code":"go generate ./...\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"go generate ./...\n"}]}]}]},{"type":"element","tag":"h4","props":{"id":"useful-links"},"children":[{"type":"text","value":"Useful links"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/golang/text/blob/master/feature/plural/gen_common.go#L19","rel":["nofollow"]},"children":[{"type":"text","value":"All available forms in this .go file"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://community.crowdin.com/t/plurals-in-gotext-json-files/600","rel":["nofollow"]},"children":[{"type":"text","value":"Answer, that solved it for me"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are no good examples of "},{"type":"element","tag":"a","props":{"href":"https://golang.org/x/text","rel":["nofollow"]},"children":[{"type":"text","value":"golang.org/x/text"}]},{"type":"text","value":" uses and description of how pluralization made. So, this is it."}]},{"type":"element","tag":"h4","props":{"id":"generating-translations"},"children":[{"type":"text","value":"Generating translations"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You should specify valid "},{"type":"element","tag":"a","props":{"href":"https://www.iso.org/obp/ui/#iso:code:3166","rel":["nofollow"]},"children":[{"type":"text","value":"ISO-3166 locale code"}]},{"type":"text","value":" to get plurals working!"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Write your code:"}]},{"type":"element","tag":"code","props":{"code":"import (\n \"golang.org/x/text/language\"\n \"golang.org/x/text/message\"\n)\n\nlang := language.MustParse('ru-RU')\nprinter := message.NewPrinter(lang)\n\ncount := 1\nprinter.Sprintf(\"%d butterflies\", count)\n","language":"go"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d75569"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d55d13"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-03e448"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-b637b2"},"children":[{"type":"text","value":"golang.org/x/text/language"}]},{"type":"element","tag":"span","props":{"class":"ct-03e448"},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d55d13"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-03e448"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-b637b2"},"children":[{"type":"text","value":"golang.org/x/text/message"}]},{"type":"element","tag":"span","props":{"class":"ct-03e448"},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3ccebd"},"children":[{"type":"text","value":"lang"}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d75569"},"children":[{"type":"text","value":":="}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" language."}]},{"type":"element","tag":"span","props":{"class":"ct-91dbaa"},"children":[{"type":"text","value":"MustParse"}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-1e836b"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-2891df"},"children":[{"type":"text","value":"ru-RU"}]},{"type":"element","tag":"span","props":{"class":"ct-1e836b"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3ccebd"},"children":[{"type":"text","value":"printer"}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d75569"},"children":[{"type":"text","value":":="}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" message."}]},{"type":"element","tag":"span","props":{"class":"ct-91dbaa"},"children":[{"type":"text","value":"NewPrinter"}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":"(lang)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3ccebd"},"children":[{"type":"text","value":"count"}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d75569"},"children":[{"type":"text","value":":="}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-82e32d"},"children":[{"type":"text","value":"1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":"printer."}]},{"type":"element","tag":"span","props":{"class":"ct-91dbaa"},"children":[{"type":"text","value":"Sprintf"}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-1e836b"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-ebe6d6"},"children":[{"type":"text","value":"%d"}]},{"type":"element","tag":"span","props":{"class":"ct-1e836b"},"children":[{"type":"text","value":" butterflies\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":", count)"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then run generator for your locale (mine is "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ru-RU"}]},{"type":"text","value":"):"}]},{"type":"element","tag":"code","props":{"code":"gotext -srclang=en-GB update -lang=ru-RU \\\n -out=translations.go github.com/path/to-output-folder\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":"gotext -srclang=en-GB update -lang=ru-RU \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" -out=translations.go github.com/path/to-output-folder"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will generate "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"out.gotext.json"}]},{"type":"text","value":" in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/path/to-output-folder/ru-RU"}]},{"type":"text","value":" of your project. Copy it to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"messages.out.json"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h4","props":{"id":"translating-and-adding-plural-forms"},"children":[{"type":"text","value":"Translating and adding plural forms"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Change "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"\"translation\""}]},{"type":"text","value":" value in generated "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"messages.gotext.json"}]},{"type":"text","value":" to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"string"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"object"}]},{"type":"text","value":" of the form shown below if you want pluralize strings, "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"then run gotext command again"}]},{"type":"text","value":", it will generate "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".go files with translations"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"According to "},{"type":"element","tag":"a","props":{"href":"https://github.com/golang/text/blob/master/feature/plural/gen_common.go#L19","rel":["nofollow"]},"children":[{"type":"text","value":"source files of gen_common"}]},{"type":"text","value":", there's a couple of forms:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"=N"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"!=N"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"%N"}]},{"type":"text","value":" for exact matches"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"zero"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"one"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"two"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"few"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"many"}]},{"type":"text","value":" | "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"other"}]},{"type":"text","value":" - they're different for each language, so,"}]}]},{"type":"element","tag":"code","props":{"code":"{\n \"id\": \"{Count} butterflies\",\n \"message\": \"{Count} butterflies\",\n \"translation\": {\n \"select\": {\n \"feature\": \"plural\",\n \"arg\": \"Count\",\n \"cases\": {\n \"one\": {\n \"msg\": \"{Count} бабочка\"\n },\n \"few\": {\n \"msg\": \"{Count} бабочки\"\n },\n \"many\": {\n \"msg\": \"{Count} бабочек\"\n },\n \"other\": {\n \"msg\": \"{Count} бабочуль\"\n }\n }\n }\n },\n \"placeholders\": [\n {\n \"id\": \"Count\",\n \"string\": \"%[1]d\",\n \"type\": \"int\",\n \"underlyingType\": \"int\",\n \"argNum\": 1,\n \"expr\": \"count\"\n }\n ]\n},\n","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"id\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1e836b"},"children":[{"type":"text","value":"\"{Count} butterflies\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"message\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1e836b"},"children":[{"type":"text","value":"\"{Count} butterflies\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"translation\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"select\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"feature\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1e836b"},"children":[{"type":"text","value":"\"plural\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"arg\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1e836b"},"children":[{"type":"text","value":"\"Count\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"cases\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"one\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"msg\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1e836b"},"children":[{"type":"text","value":"\"{Count} бабочка\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"few\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"msg\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1e836b"},"children":[{"type":"text","value":"\"{Count} бабочки\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"many\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"msg\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1e836b"},"children":[{"type":"text","value":"\"{Count} бабочек\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"other\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"msg\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1e836b"},"children":[{"type":"text","value":"\"{Count} бабочуль\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"placeholders\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"id\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1e836b"},"children":[{"type":"text","value":"\"Count\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"string\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1e836b"},"children":[{"type":"text","value":"\"%[1]d\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"type\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1e836b"},"children":[{"type":"text","value":"\"int\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"underlyingType\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1e836b"},"children":[{"type":"text","value":"\"int\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"argNum\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-82e32d"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0dacf2"},"children":[{"type":"text","value":"\"expr\""}]},{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1e836b"},"children":[{"type":"text","value":"\"count\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":" ]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":"},"}]}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"using-go-generate"},"children":[{"type":"text","value":"Using go-generate"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Write this at some "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".go"}]},{"type":"text","value":" file:"}]},{"type":"element","tag":"code","props":{"code":"//go:generate gotext -srclang=en-GB update -out=translations.go -lang=ru-RU github.com/muerwre/vault-golang/internal/api\n","language":"go"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e81ade"},"children":[{"type":"text","value":"//go:generate gotext -srclang=en-GB update -out=translations.go -lang=ru-RU github.com/muerwre/vault-golang/internal/api"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then run go generation:"}]},{"type":"element","tag":"code","props":{"code":"go generate ./...\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cb8b"},"children":[{"type":"text","value":"go generate ./..."}]}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"useful-links"},"children":[{"type":"text","value":"Useful links"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/golang/text/blob/master/feature/plural/gen_common.go#L19","rel":["nofollow"]},"children":[{"type":"text","value":"All available forms in this .go file"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://community.crowdin.com/t/plurals-in-gotext-json-files/600","rel":["nofollow"]},"children":[{"type":"text","value":"Answer, that solved it for me"}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-e81ade{color:#8B949E}.ct-0dacf2{color:#79C0FF}.ct-ebe6d6{color:#79C0FF}.ct-82e32d{color:#79C0FF}.ct-2891df{color:#FFA198}.ct-1e836b{color:#A5D6FF}.ct-91dbaa{color:#79C0FF}.ct-3ccebd{color:#C9D1D9}.ct-b637b2{color:#FFA657}.ct-03e448{color:#A5D6FF}.ct-d55d13{color:#C9D1D9}.ct-13cb8b{color:#C9D1D9}.ct-d75569{color:#FF7B72}.light .ct-d75569{color:#859900}.light .ct-13cb8b{color:#657B83}.light .ct-d55d13{color:#657B83}.light .ct-03e448{color:#2AA198}.light .ct-b637b2{color:#2AA198}.light .ct-3ccebd{color:#268BD2}.light .ct-91dbaa{color:#268BD2}.light .ct-1e836b{color:#2AA198}.light .ct-2891df{color:#CD3131}.light .ct-82e32d{color:#D33682}.light .ct-ebe6d6{color:#CB4B16}.light .ct-0dacf2{color:#859900}.light .ct-e81ade{color:#93A1A1}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Golang:i18n in golang.md","_source":"content","_file":"Golang/i18n in golang.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/gviYR2nAXj.json b/docs/api/_content/query/gviYR2nAXj.json
index ffb7674..c849a1d 100644
--- a/docs/api/_content/query/gviYR2nAXj.json
+++ b/docs/api/_content/query/gviYR2nAXj.json
@@ -1 +1 @@
-{"_path":"/linux/gitea-for-git-hosting","_dir":"linux","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Gitea For Git Hosting","description":"Self-hosted #git repositories with gitea and #docker.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Self-hosted #git repositories with "},{"type":"element","tag":"a","props":{"href":"https://gitea.io/ru-ru/","rel":["nofollow"]},"children":[{"type":"text","value":"gitea"}]},{"type":"text","value":" and #docker."}]},{"type":"element","tag":"h2","props":{"id":"setting-up-with-docker-compose"},"children":[{"type":"text","value":"Setting up with docker-compose"}]},{"type":"element","tag":"code","props":{"code":"version: \"3\"\n\nnetworks:\n gitea:\n external: false\nservices:\n server:\n image: gitea/gitea:latest\n container_name: gitea\n environment:\n - USER_UID=1000\n - USER_GID=1000\n restart: always\n networks:\n - gitea\n volumes:\n - ./var/lib/gitea:/data\n - ./etc/gitea:/etc/gitea\n - /etc/timezone:/etc/timezone:ro\n - /etc/localtime:/etc/localtime:ro\n ports:\n - \"3000:3000\"\n - \"222:22\"\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"version: \"3\"\n\nnetworks:\n gitea:\n external: false\nservices:\n server:\n image: gitea/gitea:latest\n container_name: gitea\n environment:\n - USER_UID=1000\n - USER_GID=1000\n restart: always\n networks:\n - gitea\n volumes:\n - ./var/lib/gitea:/data\n - ./etc/gitea:/etc/gitea\n - /etc/timezone:/etc/timezone:ro\n - /etc/localtime:/etc/localtime:ro\n ports:\n - \"3000:3000\"\n - \"222:22\"\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Self-hosted #git repositories with "},{"type":"element","tag":"a","props":{"href":"https://gitea.io/ru-ru/","rel":["nofollow"]},"children":[{"type":"text","value":"gitea"}]},{"type":"text","value":" and #docker."}]},{"type":"element","tag":"h2","props":{"id":"setting-up-with-docker-compose"},"children":[{"type":"text","value":"Setting up with docker-compose"}]},{"type":"element","tag":"code","props":{"code":"version: \"3\"\n\nnetworks:\n gitea:\n external: false\nservices:\n server:\n image: gitea/gitea:latest\n container_name: gitea\n environment:\n - USER_UID=1000\n - USER_GID=1000\n restart: always\n networks:\n - gitea\n volumes:\n - ./var/lib/gitea:/data\n - ./etc/gitea:/etc/gitea\n - /etc/timezone:/etc/timezone:ro\n - /etc/localtime:/etc/localtime:ro\n ports:\n - \"3000:3000\"\n - \"222:22\"\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a3922c"},"children":[{"type":"text","value":"version"}]},{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ec9e62"},"children":[{"type":"text","value":"\"3\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a3922c"},"children":[{"type":"text","value":"networks"}]},{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a3922c"},"children":[{"type":"text","value":"gitea"}]},{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a3922c"},"children":[{"type":"text","value":"external"}]},{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-c29822"},"children":[{"type":"text","value":"false"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a3922c"},"children":[{"type":"text","value":"services"}]},{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a3922c"},"children":[{"type":"text","value":"server"}]},{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a3922c"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ec9e62"},"children":[{"type":"text","value":"gitea/gitea:latest"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a3922c"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ec9e62"},"children":[{"type":"text","value":"gitea"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a3922c"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-ec9e62"},"children":[{"type":"text","value":"USER_UID=1000"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-ec9e62"},"children":[{"type":"text","value":"USER_GID=1000"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a3922c"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ec9e62"},"children":[{"type":"text","value":"always"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a3922c"},"children":[{"type":"text","value":"networks"}]},{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-ec9e62"},"children":[{"type":"text","value":"gitea"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a3922c"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-ec9e62"},"children":[{"type":"text","value":"./var/lib/gitea:/data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-ec9e62"},"children":[{"type":"text","value":"./etc/gitea:/etc/gitea"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-ec9e62"},"children":[{"type":"text","value":"/etc/timezone:/etc/timezone:ro"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-ec9e62"},"children":[{"type":"text","value":"/etc/localtime:/etc/localtime:ro"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a3922c"},"children":[{"type":"text","value":"ports"}]},{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-ec9e62"},"children":[{"type":"text","value":"\"3000:3000\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-32bc1d"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-ec9e62"},"children":[{"type":"text","value":"\"222:22\""}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-c29822{color:#79C0FF}.ct-ec9e62{color:#A5D6FF}.ct-32bc1d{color:#C9D1D9}.ct-a3922c{color:#7EE787}.light .ct-a3922c{color:#268BD2}.light .ct-32bc1d{color:#657B83}.light .ct-ec9e62{color:#2AA198}.light .ct-c29822{color:#B58900}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"setting-up-with-docker-compose","depth":2,"text":"Setting up with docker-compose"}]}},"_type":"markdown","_id":"content:Linux:Gitea for git hosting.md","_source":"content","_file":"Linux/Gitea for git hosting.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/linux/gitea-for-git-hosting","_dir":"linux","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Gitea For Git Hosting","description":"Self-hosted #git repositories with gitea and #docker.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Self-hosted #git repositories with "},{"type":"element","tag":"a","props":{"href":"https://gitea.io/ru-ru/","rel":["nofollow"]},"children":[{"type":"text","value":"gitea"}]},{"type":"text","value":" and #docker."}]},{"type":"element","tag":"h2","props":{"id":"setting-up-with-docker-compose"},"children":[{"type":"text","value":"Setting up with docker-compose"}]},{"type":"element","tag":"code","props":{"code":"version: \"3\"\n\nnetworks:\n gitea:\n external: false\nservices:\n server:\n image: gitea/gitea:latest\n container_name: gitea\n environment:\n - USER_UID=1000\n - USER_GID=1000\n restart: always\n networks:\n - gitea\n volumes:\n - ./var/lib/gitea:/data\n - ./etc/gitea:/etc/gitea\n - /etc/timezone:/etc/timezone:ro\n - /etc/localtime:/etc/localtime:ro\n ports:\n - \"3000:3000\"\n - \"222:22\"\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"version: \"3\"\n\nnetworks:\n gitea:\n external: false\nservices:\n server:\n image: gitea/gitea:latest\n container_name: gitea\n environment:\n - USER_UID=1000\n - USER_GID=1000\n restart: always\n networks:\n - gitea\n volumes:\n - ./var/lib/gitea:/data\n - ./etc/gitea:/etc/gitea\n - /etc/timezone:/etc/timezone:ro\n - /etc/localtime:/etc/localtime:ro\n ports:\n - \"3000:3000\"\n - \"222:22\"\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Self-hosted #git repositories with "},{"type":"element","tag":"a","props":{"href":"https://gitea.io/ru-ru/","rel":["nofollow"]},"children":[{"type":"text","value":"gitea"}]},{"type":"text","value":" and #docker."}]},{"type":"element","tag":"h2","props":{"id":"setting-up-with-docker-compose"},"children":[{"type":"text","value":"Setting up with docker-compose"}]},{"type":"element","tag":"code","props":{"code":"version: \"3\"\n\nnetworks:\n gitea:\n external: false\nservices:\n server:\n image: gitea/gitea:latest\n container_name: gitea\n environment:\n - USER_UID=1000\n - USER_GID=1000\n restart: always\n networks:\n - gitea\n volumes:\n - ./var/lib/gitea:/data\n - ./etc/gitea:/etc/gitea\n - /etc/timezone:/etc/timezone:ro\n - /etc/localtime:/etc/localtime:ro\n ports:\n - \"3000:3000\"\n - \"222:22\"\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ef8381"},"children":[{"type":"text","value":"version"}]},{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-376b56"},"children":[{"type":"text","value":"\"3\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ef8381"},"children":[{"type":"text","value":"networks"}]},{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ef8381"},"children":[{"type":"text","value":"gitea"}]},{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ef8381"},"children":[{"type":"text","value":"external"}]},{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-d30e7c"},"children":[{"type":"text","value":"false"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ef8381"},"children":[{"type":"text","value":"services"}]},{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ef8381"},"children":[{"type":"text","value":"server"}]},{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ef8381"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-376b56"},"children":[{"type":"text","value":"gitea/gitea:latest"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ef8381"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-376b56"},"children":[{"type":"text","value":"gitea"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ef8381"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-376b56"},"children":[{"type":"text","value":"USER_UID=1000"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-376b56"},"children":[{"type":"text","value":"USER_GID=1000"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ef8381"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-376b56"},"children":[{"type":"text","value":"always"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ef8381"},"children":[{"type":"text","value":"networks"}]},{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-376b56"},"children":[{"type":"text","value":"gitea"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ef8381"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-376b56"},"children":[{"type":"text","value":"./var/lib/gitea:/data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-376b56"},"children":[{"type":"text","value":"./etc/gitea:/etc/gitea"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-376b56"},"children":[{"type":"text","value":"/etc/timezone:/etc/timezone:ro"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-376b56"},"children":[{"type":"text","value":"/etc/localtime:/etc/localtime:ro"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ef8381"},"children":[{"type":"text","value":"ports"}]},{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-376b56"},"children":[{"type":"text","value":"\"3000:3000\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8fa5"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-376b56"},"children":[{"type":"text","value":"\"222:22\""}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-d30e7c{color:#79C0FF}.ct-376b56{color:#A5D6FF}.ct-fe8fa5{color:#C9D1D9}.ct-ef8381{color:#7EE787}.light .ct-ef8381{color:#268BD2}.light .ct-fe8fa5{color:#657B83}.light .ct-376b56{color:#2AA198}.light .ct-d30e7c{color:#B58900}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"setting-up-with-docker-compose","depth":2,"text":"Setting up with docker-compose"}]}},"_type":"markdown","_id":"content:Linux:Gitea for git hosting.md","_source":"content","_file":"Linux/Gitea for git hosting.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/iZIUw8pCoM.json b/docs/api/_content/query/iZIUw8pCoM.json
index 7aff8ae..96936bf 100644
--- a/docs/api/_content/query/iZIUw8pCoM.json
+++ b/docs/api/_content/query/iZIUw8pCoM.json
@@ -1 +1 @@
-{"_path":"/typescript/type-guards","_dir":"typescript","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Type Guards","description":"Useful for type checking at compile and run time:","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Useful for type checking at compile and run time:"}]},{"type":"element","tag":"code","props":{"code":"function isFish(pet: Fish | Bird): pet is Fish {\n return (pet as Fish).swim !== undefined;\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"function isFish(pet: Fish | Bird): pet is Fish {\n return (pet as Fish).swim !== undefined;\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Usage:"}]},{"type":"element","tag":"code","props":{"code":"const pet = getSmallPet();\n \nif (isFish(pet)) {\n pet.swim();\n} else {\n pet.fly();\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const pet = getSmallPet();\n \nif (isFish(pet)) {\n pet.swim();\n} else {\n pet.fly();\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Useful for type checking at compile and run time:"}]},{"type":"element","tag":"code","props":{"code":"function isFish(pet: Fish | Bird): pet is Fish {\n return (pet as Fish).swim !== undefined;\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bfd8bd"},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"class":"ct-290d98"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9d85c0"},"children":[{"type":"text","value":"isFish"}]},{"type":"element","tag":"span","props":{"class":"ct-290d98"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a7b800"},"children":[{"type":"text","value":"pet"}]},{"type":"element","tag":"span","props":{"class":"ct-0b2270"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-290d98"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3da1c5"},"children":[{"type":"text","value":"Fish"}]},{"type":"element","tag":"span","props":{"class":"ct-290d98"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0b2270"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-290d98"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3da1c5"},"children":[{"type":"text","value":"Bird"}]},{"type":"element","tag":"span","props":{"class":"ct-290d98"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-0b2270"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-290d98"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a7b800"},"children":[{"type":"text","value":"pet"}]},{"type":"element","tag":"span","props":{"class":"ct-290d98"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0b2270"},"children":[{"type":"text","value":"is"}]},{"type":"element","tag":"span","props":{"class":"ct-290d98"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3da1c5"},"children":[{"type":"text","value":"Fish"}]},{"type":"element","tag":"span","props":{"class":"ct-290d98"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0d6f0f"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-3c6b43"},"children":[{"type":"text","value":"pet"}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0d6f0f"},"children":[{"type":"text","value":"as"}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8dc141"},"children":[{"type":"text","value":"Fish"}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"class":"ct-3c6b43"},"children":[{"type":"text","value":"swim"}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0d6f0f"},"children":[{"type":"text","value":"!=="}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d9c4d"},"children":[{"type":"text","value":"undefined"}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Usage:"}]},{"type":"element","tag":"code","props":{"code":"const pet = getSmallPet();\n \nif (isFish(pet)) {\n pet.swim();\n} else {\n pet.fly();\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1cc30b"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b63305"},"children":[{"type":"text","value":"pet"}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0d6f0f"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0e947f"},"children":[{"type":"text","value":"getSmallPet"}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0d6f0f"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-0e947f"},"children":[{"type":"text","value":"isFish"}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-3c6b43"},"children":[{"type":"text","value":"pet"}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":")) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3c6b43"},"children":[{"type":"text","value":"pet"}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-0e947f"},"children":[{"type":"text","value":"swim"}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":"} "}]},{"type":"element","tag":"span","props":{"class":"ct-0d6f0f"},"children":[{"type":"text","value":"else"}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3c6b43"},"children":[{"type":"text","value":"pet"}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-0e947f"},"children":[{"type":"text","value":"fly"}]},{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9b249b"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-0e947f{color:#D2A8FF}.ct-b63305{color:#79C0FF}.ct-1cc30b{color:#FF7B72}.ct-7d9c4d{color:#79C0FF}.ct-8dc141{color:#FFA657}.ct-3c6b43{color:#C9D1D9}.ct-0d6f0f{color:#FF7B72}.ct-9b249b{color:#C9D1D9}.ct-3da1c5{color:#FFA657}.ct-0b2270{color:#FF7B72}.ct-a7b800{color:#FFA657}.ct-9d85c0{color:#D2A8FF}.ct-290d98{color:#C9D1D9}.ct-bfd8bd{color:#FF7B72}.light .ct-bfd8bd{color:#073642}.light .ct-290d98{color:#657B83}.light .ct-9d85c0{color:#268BD2}.light .ct-a7b800{color:#657B83}.light .ct-0b2270{color:#859900}.light .ct-3da1c5{color:#268BD2}.light .ct-9b249b{color:#657B83}.light .ct-0d6f0f{color:#859900}.light .ct-3c6b43{color:#268BD2}.light .ct-8dc141{color:#268BD2}.light .ct-7d9c4d{color:#B58900}.light .ct-1cc30b{color:#073642}.light .ct-b63305{color:#268BD2}.light .ct-0e947f{color:#268BD2}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Typescript:Type guards.md","_source":"content","_file":"Typescript/Type guards.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/typescript/type-guards","_dir":"typescript","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Type Guards","description":"Useful for type checking at compile and run time:","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Useful for type checking at compile and run time:"}]},{"type":"element","tag":"code","props":{"code":"function isFish(pet: Fish | Bird): pet is Fish {\n return (pet as Fish).swim !== undefined;\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"function isFish(pet: Fish | Bird): pet is Fish {\n return (pet as Fish).swim !== undefined;\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Usage:"}]},{"type":"element","tag":"code","props":{"code":"const pet = getSmallPet();\n \nif (isFish(pet)) {\n pet.swim();\n} else {\n pet.fly();\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const pet = getSmallPet();\n \nif (isFish(pet)) {\n pet.swim();\n} else {\n pet.fly();\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Useful for type checking at compile and run time:"}]},{"type":"element","tag":"code","props":{"code":"function isFish(pet: Fish | Bird): pet is Fish {\n return (pet as Fish).swim !== undefined;\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-651390"},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"class":"ct-27e1db"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-50a0ee"},"children":[{"type":"text","value":"isFish"}]},{"type":"element","tag":"span","props":{"class":"ct-27e1db"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a8285d"},"children":[{"type":"text","value":"pet"}]},{"type":"element","tag":"span","props":{"class":"ct-dbd72e"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-27e1db"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8457d1"},"children":[{"type":"text","value":"Fish"}]},{"type":"element","tag":"span","props":{"class":"ct-27e1db"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dbd72e"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-27e1db"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8457d1"},"children":[{"type":"text","value":"Bird"}]},{"type":"element","tag":"span","props":{"class":"ct-27e1db"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-dbd72e"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-27e1db"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a8285d"},"children":[{"type":"text","value":"pet"}]},{"type":"element","tag":"span","props":{"class":"ct-27e1db"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dbd72e"},"children":[{"type":"text","value":"is"}]},{"type":"element","tag":"span","props":{"class":"ct-27e1db"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8457d1"},"children":[{"type":"text","value":"Fish"}]},{"type":"element","tag":"span","props":{"class":"ct-27e1db"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7b47ed"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-a686d9"},"children":[{"type":"text","value":"pet"}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7b47ed"},"children":[{"type":"text","value":"as"}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-35c055"},"children":[{"type":"text","value":"Fish"}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"class":"ct-a686d9"},"children":[{"type":"text","value":"swim"}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7b47ed"},"children":[{"type":"text","value":"!=="}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9343ba"},"children":[{"type":"text","value":"undefined"}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Usage:"}]},{"type":"element","tag":"code","props":{"code":"const pet = getSmallPet();\n \nif (isFish(pet)) {\n pet.swim();\n} else {\n pet.fly();\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f16cd6"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e065f3"},"children":[{"type":"text","value":"pet"}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7b47ed"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1f1b92"},"children":[{"type":"text","value":"getSmallPet"}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7b47ed"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-1f1b92"},"children":[{"type":"text","value":"isFish"}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a686d9"},"children":[{"type":"text","value":"pet"}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":")) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a686d9"},"children":[{"type":"text","value":"pet"}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1f1b92"},"children":[{"type":"text","value":"swim"}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":"} "}]},{"type":"element","tag":"span","props":{"class":"ct-7b47ed"},"children":[{"type":"text","value":"else"}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a686d9"},"children":[{"type":"text","value":"pet"}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1f1b92"},"children":[{"type":"text","value":"fly"}]},{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-413c42"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-1f1b92{color:#D2A8FF}.ct-e065f3{color:#79C0FF}.ct-f16cd6{color:#FF7B72}.ct-9343ba{color:#79C0FF}.ct-35c055{color:#FFA657}.ct-a686d9{color:#C9D1D9}.ct-7b47ed{color:#FF7B72}.ct-413c42{color:#C9D1D9}.ct-8457d1{color:#FFA657}.ct-dbd72e{color:#FF7B72}.ct-a8285d{color:#FFA657}.ct-50a0ee{color:#D2A8FF}.ct-27e1db{color:#C9D1D9}.ct-651390{color:#FF7B72}.light .ct-651390{color:#073642}.light .ct-27e1db{color:#657B83}.light .ct-50a0ee{color:#268BD2}.light .ct-a8285d{color:#657B83}.light .ct-dbd72e{color:#859900}.light .ct-8457d1{color:#268BD2}.light .ct-413c42{color:#657B83}.light .ct-7b47ed{color:#859900}.light .ct-a686d9{color:#268BD2}.light .ct-35c055{color:#268BD2}.light .ct-9343ba{color:#B58900}.light .ct-f16cd6{color:#073642}.light .ct-e065f3{color:#268BD2}.light .ct-1f1b92{color:#268BD2}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Typescript:Type guards.md","_source":"content","_file":"Typescript/Type guards.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/ki2hTtdZ9z.json b/docs/api/_content/query/ki2hTtdZ9z.json
index ca8d8e9..da63ecd 100644
--- a/docs/api/_content/query/ki2hTtdZ9z.json
+++ b/docs/api/_content/query/ki2hTtdZ9z.json
@@ -1 +1 @@
-{"_path":"/typescript/flatten-object-with-periods","_dir":"typescript","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Flatten Object With Periods","description":"This helper generates Typescript types for i18n dictionary json\nfiles by flattening it with period delimiter. Supports plural forms.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This helper generates Typescript types for i18n dictionary json\nfiles by flattening it with period delimiter. Supports plural forms."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Used for typing "},{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/i18n-js","rel":["nofollow"]},"children":[{"type":"text","value":"i18n.js"}]},{"type":"text","value":" dictionaries;"}]},{"type":"element","tag":"code","props":{"code":"import en from './en.json';\ntype TranslationPath = Flatten<typeof en>;\n\nconst t = (key: TranslationPath, options?: TranslateOptions) =>\n I18nLib.t(key, options);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import en from './en.json';\ntype TranslationPath = Flatten<typeof en>;\n\nconst t = (key: TranslationPath, options?: TranslateOptions) =>\n I18nLib.t(key, options);\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Flatten type defined here:"}]},{"type":"element","tag":"code","props":{"code":"// This one based on answer from StackOverflow:\n// https://stackoverflow.com/questions/58434389/typescript-deep-keyof-of-a-nested-object\n\nexport type Flatten<T, D extends number = 5> = [D] extends [never]\n ? never\n : T extends PluralForm // plural object\n ? ''\n : T extends object\n ? { [K in keyof T]-?: Join<K, Flatten<T[K], Prev[D]>> }[keyof T]\n : '';\n\n// Fix it for you plural form\ntype PluralForm = Record<'one' | 'few' | 'many', string>;\n\ntype Join<K, P> = K extends string | number\n ? P extends string | number\n ? `${K}${'' extends P ? '' : '.'}${P}`\n : never\n : never;\n\ntype Prev = [never, 0, 1, 2, 3, 4, 5, ...Array<0>];\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// This one based on answer from StackOverflow:\n// https://stackoverflow.com/questions/58434389/typescript-deep-keyof-of-a-nested-object\n\nexport type Flatten<T, D extends number = 5> = [D] extends [never]\n ? never\n : T extends PluralForm // plural object\n ? ''\n : T extends object\n ? { [K in keyof T]-?: Join<K, Flatten<T[K], Prev[D]>> }[keyof T]\n : '';\n\n// Fix it for you plural form\ntype PluralForm = Record<'one' | 'few' | 'many', string>;\n\ntype Join<K, P> = K extends string | number\n ? P extends string | number\n ? `${K}${'' extends P ? '' : '.'}${P}`\n : never\n : never;\n\ntype Prev = [never, 0, 1, 2, 3, 4, 5, ...Array<0>];\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This helper generates Typescript types for i18n dictionary json\nfiles by flattening it with period delimiter. Supports plural forms."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Used for typing "},{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/i18n-js","rel":["nofollow"]},"children":[{"type":"text","value":"i18n.js"}]},{"type":"text","value":" dictionaries;"}]},{"type":"element","tag":"code","props":{"code":"import en from './en.json';\ntype TranslationPath = Flatten<typeof en>;\n\nconst t = (key: TranslationPath, options?: TranslateOptions) =>\n I18nLib.t(key, options);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3f0312"},"children":[{"type":"text","value":"en"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74c656"},"children":[{"type":"text","value":"'./en.json'"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c090db"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"TranslationPath"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"Flatten"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"typeof"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3f0312"},"children":[{"type":"text","value":"en"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":">;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d264cd"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-5dcb62"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c6ad8a"},"children":[{"type":"text","value":"t"}]},{"type":"element","tag":"span","props":{"class":"ct-5dcb62"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5fbc13"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5dcb62"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-e22ae2"},"children":[{"type":"text","value":"key"}]},{"type":"element","tag":"span","props":{"class":"ct-5fbc13"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-5dcb62"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4d3d51"},"children":[{"type":"text","value":"TranslationPath"}]},{"type":"element","tag":"span","props":{"class":"ct-5dcb62"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-e22ae2"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-5fbc13"},"children":[{"type":"text","value":"?:"}]},{"type":"element","tag":"span","props":{"class":"ct-5dcb62"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4d3d51"},"children":[{"type":"text","value":"TranslateOptions"}]},{"type":"element","tag":"span","props":{"class":"ct-5dcb62"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-d264cd"},"children":[{"type":"text","value":"=>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3f0312"},"children":[{"type":"text","value":"I18nLib"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8a9924"},"children":[{"type":"text","value":"t"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-3f0312"},"children":[{"type":"text","value":"key"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-3f0312"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":");"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Flatten type defined here:"}]},{"type":"element","tag":"code","props":{"code":"// This one based on answer from StackOverflow:\n// https://stackoverflow.com/questions/58434389/typescript-deep-keyof-of-a-nested-object\n\nexport type Flatten<T, D extends number = 5> = [D] extends [never]\n ? never\n : T extends PluralForm // plural object\n ? ''\n : T extends object\n ? { [K in keyof T]-?: Join<K, Flatten<T[K], Prev[D]>> }[keyof T]\n : '';\n\n// Fix it for you plural form\ntype PluralForm = Record<'one' | 'few' | 'many', string>;\n\ntype Join<K, P> = K extends string | number\n ? P extends string | number\n ? `${K}${'' extends P ? '' : '.'}${P}`\n : never\n : never;\n\ntype Prev = [never, 0, 1, 2, 3, 4, 5, ...Array<0>];\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a6611a"},"children":[{"type":"text","value":"// This one based on answer from StackOverflow:"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a6611a"},"children":[{"type":"text","value":"// https://stackoverflow.com/questions/58434389/typescript-deep-keyof-of-a-nested-object"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c090db"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"Flatten"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"T"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"D"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c090db"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63cd70"},"children":[{"type":"text","value":"number"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8a38d6"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"D"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"] "}]},{"type":"element","tag":"span","props":{"class":"ct-c090db"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"class":"ct-63cd70"},"children":[{"type":"text","value":"never"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63cd70"},"children":[{"type":"text","value":"never"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"T"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c090db"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"PluralForm"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a6611a"},"children":[{"type":"text","value":"// plural object"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74c656"},"children":[{"type":"text","value":"''"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"T"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c090db"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63cd70"},"children":[{"type":"text","value":"object"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" { ["}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"K"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"in"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"keyof"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"T"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"]"}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"-?:"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"Join"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"K"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"Flatten"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"T"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"K"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"], "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"Prev"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"D"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"]>> }["}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"keyof"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"T"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74c656"},"children":[{"type":"text","value":"''"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a6611a"},"children":[{"type":"text","value":"// Fix it for you plural form"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c090db"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"PluralForm"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"Record"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-74c656"},"children":[{"type":"text","value":"'one'"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74c656"},"children":[{"type":"text","value":"'few'"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74c656"},"children":[{"type":"text","value":"'many'"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-63cd70"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":">;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c090db"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"Join"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"K"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"P"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"K"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c090db"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63cd70"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63cd70"},"children":[{"type":"text","value":"number"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"P"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c090db"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63cd70"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63cd70"},"children":[{"type":"text","value":"number"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74c656"},"children":[{"type":"text","value":"`${"}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"K"}]},{"type":"element","tag":"span","props":{"class":"ct-74c656"},"children":[{"type":"text","value":"}${''"}]},{"type":"element","tag":"span","props":{"class":"ct-efb878"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c090db"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-efb878"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"P"}]},{"type":"element","tag":"span","props":{"class":"ct-efb878"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"class":"ct-efb878"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74c656"},"children":[{"type":"text","value":"''"}]},{"type":"element","tag":"span","props":{"class":"ct-efb878"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-efb878"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74c656"},"children":[{"type":"text","value":"'.'}${"}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"P"}]},{"type":"element","tag":"span","props":{"class":"ct-74c656"},"children":[{"type":"text","value":"}`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63cd70"},"children":[{"type":"text","value":"never"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63cd70"},"children":[{"type":"text","value":"never"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c090db"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"Prev"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"class":"ct-63cd70"},"children":[{"type":"text","value":"never"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-8a38d6"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-8a38d6"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-8a38d6"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-8a38d6"},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-8a38d6"},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-8a38d6"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-27117c"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-e066a0"},"children":[{"type":"text","value":"Array"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-8a38d6"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-045bab"},"children":[{"type":"text","value":">];"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-efb878{color:#A5D6FF}.ct-8a38d6{color:#79C0FF}.ct-63cd70{color:#79C0FF}.ct-a6611a{color:#8B949E}.ct-8a9924{color:#D2A8FF}.ct-4d3d51{color:#FFA657}.ct-e22ae2{color:#FFA657}.ct-5fbc13{color:#FF7B72}.ct-c6ad8a{color:#D2A8FF}.ct-5dcb62{color:#C9D1D9}.ct-d264cd{color:#FF7B72}.ct-e066a0{color:#FFA657}.ct-c090db{color:#FF7B72}.ct-74c656{color:#A5D6FF}.ct-3f0312{color:#C9D1D9}.ct-045bab{color:#C9D1D9}.ct-27117c{color:#FF7B72}.light .ct-27117c{color:#859900}.light .ct-045bab{color:#657B83}.light .ct-3f0312{color:#268BD2}.light .ct-74c656{color:#2AA198}.light .ct-c090db{color:#073642}.light .ct-e066a0{color:#268BD2}.light .ct-d264cd{color:#073642}.light .ct-5dcb62{color:#657B83}.light .ct-c6ad8a{color:#268BD2}.light .ct-5fbc13{color:#859900}.light .ct-e22ae2{color:#657B83}.light .ct-4d3d51{color:#268BD2}.light .ct-8a9924{color:#268BD2}.light .ct-a6611a{color:#93A1A1}.light .ct-63cd70{color:#859900}.light .ct-8a38d6{color:#D33682}.light .ct-efb878{color:#657B83}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Typescript:Flatten object with periods.md","_source":"content","_file":"Typescript/Flatten object with periods.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/typescript/flatten-object-with-periods","_dir":"typescript","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Flatten Object With Periods","description":"This helper generates Typescript types for i18n dictionary json\nfiles by flattening it with period delimiter. Supports plural forms.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This helper generates Typescript types for i18n dictionary json\nfiles by flattening it with period delimiter. Supports plural forms."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Used for typing "},{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/i18n-js","rel":["nofollow"]},"children":[{"type":"text","value":"i18n.js"}]},{"type":"text","value":" dictionaries;"}]},{"type":"element","tag":"code","props":{"code":"import en from './en.json';\ntype TranslationPath = Flatten<typeof en>;\n\nconst t = (key: TranslationPath, options?: TranslateOptions) =>\n I18nLib.t(key, options);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import en from './en.json';\ntype TranslationPath = Flatten<typeof en>;\n\nconst t = (key: TranslationPath, options?: TranslateOptions) =>\n I18nLib.t(key, options);\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Flatten type defined here:"}]},{"type":"element","tag":"code","props":{"code":"// This one based on answer from StackOverflow:\n// https://stackoverflow.com/questions/58434389/typescript-deep-keyof-of-a-nested-object\n\nexport type Flatten<T, D extends number = 5> = [D] extends [never]\n ? never\n : T extends PluralForm // plural object\n ? ''\n : T extends object\n ? { [K in keyof T]-?: Join<K, Flatten<T[K], Prev[D]>> }[keyof T]\n : '';\n\n// Fix it for you plural form\ntype PluralForm = Record<'one' | 'few' | 'many', string>;\n\ntype Join<K, P> = K extends string | number\n ? P extends string | number\n ? `${K}${'' extends P ? '' : '.'}${P}`\n : never\n : never;\n\ntype Prev = [never, 0, 1, 2, 3, 4, 5, ...Array<0>];\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// This one based on answer from StackOverflow:\n// https://stackoverflow.com/questions/58434389/typescript-deep-keyof-of-a-nested-object\n\nexport type Flatten<T, D extends number = 5> = [D] extends [never]\n ? never\n : T extends PluralForm // plural object\n ? ''\n : T extends object\n ? { [K in keyof T]-?: Join<K, Flatten<T[K], Prev[D]>> }[keyof T]\n : '';\n\n// Fix it for you plural form\ntype PluralForm = Record<'one' | 'few' | 'many', string>;\n\ntype Join<K, P> = K extends string | number\n ? P extends string | number\n ? `${K}${'' extends P ? '' : '.'}${P}`\n : never\n : never;\n\ntype Prev = [never, 0, 1, 2, 3, 4, 5, ...Array<0>];\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This helper generates Typescript types for i18n dictionary json\nfiles by flattening it with period delimiter. Supports plural forms."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Used for typing "},{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/i18n-js","rel":["nofollow"]},"children":[{"type":"text","value":"i18n.js"}]},{"type":"text","value":" dictionaries;"}]},{"type":"element","tag":"code","props":{"code":"import en from './en.json';\ntype TranslationPath = Flatten<typeof en>;\n\nconst t = (key: TranslationPath, options?: TranslateOptions) =>\n I18nLib.t(key, options);\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b74055"},"children":[{"type":"text","value":"en"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-15ea19"},"children":[{"type":"text","value":"'./en.json'"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b0b9f6"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"TranslationPath"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"Flatten"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"typeof"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b74055"},"children":[{"type":"text","value":"en"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":">;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7c233"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2b32b2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72900f"},"children":[{"type":"text","value":"t"}]},{"type":"element","tag":"span","props":{"class":"ct-2b32b2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2d9980"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2b32b2"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ce246f"},"children":[{"type":"text","value":"key"}]},{"type":"element","tag":"span","props":{"class":"ct-2d9980"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2b32b2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dd53c4"},"children":[{"type":"text","value":"TranslationPath"}]},{"type":"element","tag":"span","props":{"class":"ct-2b32b2"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-ce246f"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-2d9980"},"children":[{"type":"text","value":"?:"}]},{"type":"element","tag":"span","props":{"class":"ct-2b32b2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dd53c4"},"children":[{"type":"text","value":"TranslateOptions"}]},{"type":"element","tag":"span","props":{"class":"ct-2b32b2"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-a7c233"},"children":[{"type":"text","value":"=>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b74055"},"children":[{"type":"text","value":"I18nLib"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ac8bfb"},"children":[{"type":"text","value":"t"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-b74055"},"children":[{"type":"text","value":"key"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-b74055"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":");"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Flatten type defined here:"}]},{"type":"element","tag":"code","props":{"code":"// This one based on answer from StackOverflow:\n// https://stackoverflow.com/questions/58434389/typescript-deep-keyof-of-a-nested-object\n\nexport type Flatten<T, D extends number = 5> = [D] extends [never]\n ? never\n : T extends PluralForm // plural object\n ? ''\n : T extends object\n ? { [K in keyof T]-?: Join<K, Flatten<T[K], Prev[D]>> }[keyof T]\n : '';\n\n// Fix it for you plural form\ntype PluralForm = Record<'one' | 'few' | 'many', string>;\n\ntype Join<K, P> = K extends string | number\n ? P extends string | number\n ? `${K}${'' extends P ? '' : '.'}${P}`\n : never\n : never;\n\ntype Prev = [never, 0, 1, 2, 3, 4, 5, ...Array<0>];\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7f20ca"},"children":[{"type":"text","value":"// This one based on answer from StackOverflow:"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7f20ca"},"children":[{"type":"text","value":"// https://stackoverflow.com/questions/58434389/typescript-deep-keyof-of-a-nested-object"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b0b9f6"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"Flatten"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"T"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"D"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b0b9f6"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-11ec7f"},"children":[{"type":"text","value":"number"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f99b99"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"D"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"] "}]},{"type":"element","tag":"span","props":{"class":"ct-b0b9f6"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"class":"ct-11ec7f"},"children":[{"type":"text","value":"never"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-11ec7f"},"children":[{"type":"text","value":"never"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"T"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b0b9f6"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"PluralForm"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7f20ca"},"children":[{"type":"text","value":"// plural object"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-15ea19"},"children":[{"type":"text","value":"''"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"T"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b0b9f6"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-11ec7f"},"children":[{"type":"text","value":"object"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" { ["}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"K"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"in"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"keyof"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"T"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"]"}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"-?:"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"Join"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"K"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"Flatten"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"T"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"K"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"], "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"Prev"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"D"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"]>> }["}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"keyof"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"T"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-15ea19"},"children":[{"type":"text","value":"''"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7f20ca"},"children":[{"type":"text","value":"// Fix it for you plural form"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b0b9f6"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"PluralForm"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"Record"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-15ea19"},"children":[{"type":"text","value":"'one'"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-15ea19"},"children":[{"type":"text","value":"'few'"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-15ea19"},"children":[{"type":"text","value":"'many'"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-11ec7f"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":">;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b0b9f6"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"Join"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"K"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"P"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"K"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b0b9f6"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-11ec7f"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-11ec7f"},"children":[{"type":"text","value":"number"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"P"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b0b9f6"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-11ec7f"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-11ec7f"},"children":[{"type":"text","value":"number"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-15ea19"},"children":[{"type":"text","value":"`${"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"K"}]},{"type":"element","tag":"span","props":{"class":"ct-15ea19"},"children":[{"type":"text","value":"}${''"}]},{"type":"element","tag":"span","props":{"class":"ct-a027f6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b0b9f6"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-a027f6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"P"}]},{"type":"element","tag":"span","props":{"class":"ct-a027f6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"class":"ct-a027f6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-15ea19"},"children":[{"type":"text","value":"''"}]},{"type":"element","tag":"span","props":{"class":"ct-a027f6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-a027f6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-15ea19"},"children":[{"type":"text","value":"'.'}${"}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"P"}]},{"type":"element","tag":"span","props":{"class":"ct-15ea19"},"children":[{"type":"text","value":"}`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-11ec7f"},"children":[{"type":"text","value":"never"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-11ec7f"},"children":[{"type":"text","value":"never"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b0b9f6"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"Prev"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"class":"ct-11ec7f"},"children":[{"type":"text","value":"never"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f99b99"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f99b99"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f99b99"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f99b99"},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f99b99"},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f99b99"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-62e4b4"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-8ef880"},"children":[{"type":"text","value":"Array"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-f99b99"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-3f6086"},"children":[{"type":"text","value":">];"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-a027f6{color:#A5D6FF}.ct-f99b99{color:#79C0FF}.ct-11ec7f{color:#79C0FF}.ct-7f20ca{color:#8B949E}.ct-ac8bfb{color:#D2A8FF}.ct-dd53c4{color:#FFA657}.ct-ce246f{color:#FFA657}.ct-2d9980{color:#FF7B72}.ct-72900f{color:#D2A8FF}.ct-2b32b2{color:#C9D1D9}.ct-a7c233{color:#FF7B72}.ct-8ef880{color:#FFA657}.ct-b0b9f6{color:#FF7B72}.ct-15ea19{color:#A5D6FF}.ct-b74055{color:#C9D1D9}.ct-3f6086{color:#C9D1D9}.ct-62e4b4{color:#FF7B72}.light .ct-62e4b4{color:#859900}.light .ct-3f6086{color:#657B83}.light .ct-b74055{color:#268BD2}.light .ct-15ea19{color:#2AA198}.light .ct-b0b9f6{color:#073642}.light .ct-8ef880{color:#268BD2}.light .ct-a7c233{color:#073642}.light .ct-2b32b2{color:#657B83}.light .ct-72900f{color:#268BD2}.light .ct-2d9980{color:#859900}.light .ct-ce246f{color:#657B83}.light .ct-dd53c4{color:#268BD2}.light .ct-ac8bfb{color:#268BD2}.light .ct-7f20ca{color:#93A1A1}.light .ct-11ec7f{color:#859900}.light .ct-f99b99{color:#D33682}.light .ct-a027f6{color:#657B83}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Typescript:Flatten object with periods.md","_source":"content","_file":"Typescript/Flatten object with periods.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/kmbybMtElx.json b/docs/api/_content/query/kmbybMtElx.json
index 9956adb..9972a76 100644
--- a/docs/api/_content/query/kmbybMtElx.json
+++ b/docs/api/_content/query/kmbybMtElx.json
@@ -1 +1 @@
-{"_path":"/linux/google-photos-alternative-with-photoprism","_dir":"linux","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Google Photos Alternative With Photoprism","description":"Photo Prism is a free alternative to Google photos, can be set up with #docker.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://photoprism.app/","rel":["nofollow"]},"children":[{"type":"text","value":"Photo Prism"}]},{"type":"text","value":" is a free alternative to Google photos, can be set up with #docker."}]},{"type":"element","tag":"h2","props":{"id":"docker-compose-file-to-run-it"},"children":[{"type":"text","value":"Docker compose file to run it"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check out current "},{"type":"element","tag":"a","props":{"href":"https://dl.photoprism.app/docker/docker-compose.yml","rel":["nofollow"]},"children":[{"type":"text","value":"example"}]},{"type":"text","value":" at photoprism's "},{"type":"element","tag":"a","props":{"href":"https://docs.photoprism.app/getting-started/docker-compose/","rel":["nofollow"]},"children":[{"type":"text","value":"documentation"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"version: '3.5'\n\nservices:\n photoprism:\n container_name: photoprism__app\n image: photoprism/photoprism:latest\n depends_on:\n - mariadb\n restart: unless-stopped\n security_opt:\n - seccomp:unconfined\n - apparmor:unconfined\n ports:\n - 2342:2342 # HTTP port (host:container)\n environment:\n PHOTOPRISM_ADMIN_PASSWORD: \"password\"\n PHOTOPRISM_SITE_URL: \"https://service.url/\"\n PHOTOPRISM_ORIGINALS_LIMIT: 5000\n PHOTOPRISM_HTTP_COMPRESSION: \"gzip\"\n PHOTOPRISM_DEBUG: \"false\" \n PHOTOPRISM_PUBLIC: \"false\" \n PHOTOPRISM_READONLY: \"false\" \n PHOTOPRISM_EXPERIMENTAL: \"false\"\n PHOTOPRISM_DISABLE_CHOWN: \"false\"\n PHOTOPRISM_DISABLE_WEBDAV: \"false\" \n PHOTOPRISM_DISABLE_SETTINGS: \"false\"\n PHOTOPRISM_DISABLE_TENSORFLOW: \"false\"\n PHOTOPRISM_DISABLE_FACES: \"false\" \n PHOTOPRISM_DISABLE_CLASSIFICATION: \"false\"\n PHOTOPRISM_DARKTABLE_PRESETS: \"false\" \n PHOTOPRISM_DETECT_NSFW: \"false\" \n PHOTOPRISM_UPLOAD_NSFW: \"true\" \n PHOTOPRISM_DATABASE_DRIVER: \"mysql\" \n PHOTOPRISM_DATABASE_SERVER: \"mariadb:3306\"\n PHOTOPRISM_DATABASE_NAME: \"photoprism\" \n PHOTOPRISM_DATABASE_USER: \"root\" \n PHOTOPRISM_DATABASE_PASSWORD: \"insecure\" \n PHOTOPRISM_SITE_TITLE: \"PhotoPrism\"\n PHOTOPRISM_SITE_CAPTION: \"Browse Your Life\"\n PHOTOPRISM_SITE_DESCRIPTION: \"\"\n PHOTOPRISM_SITE_AUTHOR: \"\"\n HOME: \"/photoprism\"\n working_dir: \"/photoprism\"\n volumes:\n - \"./data/originals:/photoprism/originals\" \n - \"./data/imports:/photoprism/import\"\n - \"./data/storage:/photoprism/storage\"\n mariadb:\n container_name: photoprism__db\n restart: unless-stopped\n image: mariadb:10.6\n security_opt:\n - seccomp:unconfined\n - apparmor:unconfined\n command: mysqld --innodb-buffer-pool-size=128M --transaction-isolation=READ-COMMITTED --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci --max-connections=512 --innodb-rollback-on-timeout=OFF --innodb-lock-wait-timeout=120\n volumes:\n - \"./database:/var/lib/mysql\" # Important, don't remove\n environment:\n MYSQL_ROOT_PASSWORD: insecure\n MYSQL_DATABASE: photoprism\n MYSQL_USER: photoprism\n MYSQL_PASSWORD: insecure\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"version: '3.5'\n\nservices:\n photoprism:\n container_name: photoprism__app\n image: photoprism/photoprism:latest\n depends_on:\n - mariadb\n restart: unless-stopped\n security_opt:\n - seccomp:unconfined\n - apparmor:unconfined\n ports:\n - 2342:2342 # HTTP port (host:container)\n environment:\n PHOTOPRISM_ADMIN_PASSWORD: \"password\"\n PHOTOPRISM_SITE_URL: \"https://service.url/\"\n PHOTOPRISM_ORIGINALS_LIMIT: 5000\n PHOTOPRISM_HTTP_COMPRESSION: \"gzip\"\n PHOTOPRISM_DEBUG: \"false\" \n PHOTOPRISM_PUBLIC: \"false\" \n PHOTOPRISM_READONLY: \"false\" \n PHOTOPRISM_EXPERIMENTAL: \"false\"\n PHOTOPRISM_DISABLE_CHOWN: \"false\"\n PHOTOPRISM_DISABLE_WEBDAV: \"false\" \n PHOTOPRISM_DISABLE_SETTINGS: \"false\"\n PHOTOPRISM_DISABLE_TENSORFLOW: \"false\"\n PHOTOPRISM_DISABLE_FACES: \"false\" \n PHOTOPRISM_DISABLE_CLASSIFICATION: \"false\"\n PHOTOPRISM_DARKTABLE_PRESETS: \"false\" \n PHOTOPRISM_DETECT_NSFW: \"false\" \n PHOTOPRISM_UPLOAD_NSFW: \"true\" \n PHOTOPRISM_DATABASE_DRIVER: \"mysql\" \n PHOTOPRISM_DATABASE_SERVER: \"mariadb:3306\"\n PHOTOPRISM_DATABASE_NAME: \"photoprism\" \n PHOTOPRISM_DATABASE_USER: \"root\" \n PHOTOPRISM_DATABASE_PASSWORD: \"insecure\" \n PHOTOPRISM_SITE_TITLE: \"PhotoPrism\"\n PHOTOPRISM_SITE_CAPTION: \"Browse Your Life\"\n PHOTOPRISM_SITE_DESCRIPTION: \"\"\n PHOTOPRISM_SITE_AUTHOR: \"\"\n HOME: \"/photoprism\"\n working_dir: \"/photoprism\"\n volumes:\n - \"./data/originals:/photoprism/originals\" \n - \"./data/imports:/photoprism/import\"\n - \"./data/storage:/photoprism/storage\"\n mariadb:\n container_name: photoprism__db\n restart: unless-stopped\n image: mariadb:10.6\n security_opt:\n - seccomp:unconfined\n - apparmor:unconfined\n command: mysqld --innodb-buffer-pool-size=128M --transaction-isolation=READ-COMMITTED --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci --max-connections=512 --innodb-rollback-on-timeout=OFF --innodb-lock-wait-timeout=120\n volumes:\n - \"./database:/var/lib/mysql\" # Important, don't remove\n environment:\n MYSQL_ROOT_PASSWORD: insecure\n MYSQL_DATABASE: photoprism\n MYSQL_USER: photoprism\n MYSQL_PASSWORD: insecure\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://photoprism.app/","rel":["nofollow"]},"children":[{"type":"text","value":"Photo Prism"}]},{"type":"text","value":" is a free alternative to Google photos, can be set up with #docker."}]},{"type":"element","tag":"h2","props":{"id":"docker-compose-file-to-run-it"},"children":[{"type":"text","value":"Docker compose file to run it"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check out current "},{"type":"element","tag":"a","props":{"href":"https://dl.photoprism.app/docker/docker-compose.yml","rel":["nofollow"]},"children":[{"type":"text","value":"example"}]},{"type":"text","value":" at photoprism's "},{"type":"element","tag":"a","props":{"href":"https://docs.photoprism.app/getting-started/docker-compose/","rel":["nofollow"]},"children":[{"type":"text","value":"documentation"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"version: '3.5'\n\nservices:\n photoprism:\n container_name: photoprism__app\n image: photoprism/photoprism:latest\n depends_on:\n - mariadb\n restart: unless-stopped\n security_opt:\n - seccomp:unconfined\n - apparmor:unconfined\n ports:\n - 2342:2342 # HTTP port (host:container)\n environment:\n PHOTOPRISM_ADMIN_PASSWORD: \"password\"\n PHOTOPRISM_SITE_URL: \"https://service.url/\"\n PHOTOPRISM_ORIGINALS_LIMIT: 5000\n PHOTOPRISM_HTTP_COMPRESSION: \"gzip\"\n PHOTOPRISM_DEBUG: \"false\" \n PHOTOPRISM_PUBLIC: \"false\" \n PHOTOPRISM_READONLY: \"false\" \n PHOTOPRISM_EXPERIMENTAL: \"false\"\n PHOTOPRISM_DISABLE_CHOWN: \"false\"\n PHOTOPRISM_DISABLE_WEBDAV: \"false\" \n PHOTOPRISM_DISABLE_SETTINGS: \"false\"\n PHOTOPRISM_DISABLE_TENSORFLOW: \"false\"\n PHOTOPRISM_DISABLE_FACES: \"false\" \n PHOTOPRISM_DISABLE_CLASSIFICATION: \"false\"\n PHOTOPRISM_DARKTABLE_PRESETS: \"false\" \n PHOTOPRISM_DETECT_NSFW: \"false\" \n PHOTOPRISM_UPLOAD_NSFW: \"true\" \n PHOTOPRISM_DATABASE_DRIVER: \"mysql\" \n PHOTOPRISM_DATABASE_SERVER: \"mariadb:3306\"\n PHOTOPRISM_DATABASE_NAME: \"photoprism\" \n PHOTOPRISM_DATABASE_USER: \"root\" \n PHOTOPRISM_DATABASE_PASSWORD: \"insecure\" \n PHOTOPRISM_SITE_TITLE: \"PhotoPrism\"\n PHOTOPRISM_SITE_CAPTION: \"Browse Your Life\"\n PHOTOPRISM_SITE_DESCRIPTION: \"\"\n PHOTOPRISM_SITE_AUTHOR: \"\"\n HOME: \"/photoprism\"\n working_dir: \"/photoprism\"\n volumes:\n - \"./data/originals:/photoprism/originals\" \n - \"./data/imports:/photoprism/import\"\n - \"./data/storage:/photoprism/storage\"\n mariadb:\n container_name: photoprism__db\n restart: unless-stopped\n image: mariadb:10.6\n security_opt:\n - seccomp:unconfined\n - apparmor:unconfined\n command: mysqld --innodb-buffer-pool-size=128M --transaction-isolation=READ-COMMITTED --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci --max-connections=512 --innodb-rollback-on-timeout=OFF --innodb-lock-wait-timeout=120\n volumes:\n - \"./database:/var/lib/mysql\" # Important, don't remove\n environment:\n MYSQL_ROOT_PASSWORD: insecure\n MYSQL_DATABASE: photoprism\n MYSQL_USER: photoprism\n MYSQL_PASSWORD: insecure\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"version"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"'3.5'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"services"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"photoprism"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"photoprism__app"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"photoprism/photoprism:latest"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"depends_on"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"mariadb"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"unless-stopped"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"security_opt"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"seccomp:unconfined"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"apparmor:unconfined"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"ports"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"2342:2342"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4ca57e"},"children":[{"type":"text","value":"# HTTP port (host:container)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_ADMIN_PASSWORD"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"password\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_SITE_URL"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"https://service.url/\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_ORIGINALS_LIMIT"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-6faff2"},"children":[{"type":"text","value":"5000"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_HTTP_COMPRESSION"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"gzip\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_DEBUG"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_PUBLIC"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_READONLY"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_EXPERIMENTAL"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"false\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_DISABLE_CHOWN"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"false\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_DISABLE_WEBDAV"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_DISABLE_SETTINGS"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"false\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_DISABLE_TENSORFLOW"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"false\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_DISABLE_FACES"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_DISABLE_CLASSIFICATION"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"false\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_DARKTABLE_PRESETS"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_DETECT_NSFW"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_UPLOAD_NSFW"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"true\""}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_DATABASE_DRIVER"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"mysql\""}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_DATABASE_SERVER"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"mariadb:3306\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_DATABASE_NAME"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"photoprism\""}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_DATABASE_USER"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"root\""}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_DATABASE_PASSWORD"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"insecure\""}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_SITE_TITLE"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"PhotoPrism\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_SITE_CAPTION"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"Browse Your Life\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_SITE_DESCRIPTION"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"PHOTOPRISM_SITE_AUTHOR"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"HOME"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"/photoprism\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"working_dir"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"/photoprism\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"./data/originals:/photoprism/originals\""}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"./data/imports:/photoprism/import\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"./data/storage:/photoprism/storage\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"mariadb"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"photoprism__db"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"unless-stopped"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"mariadb:10.6"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"security_opt"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"seccomp:unconfined"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"apparmor:unconfined"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"command"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"mysqld --innodb-buffer-pool-size=128M --transaction-isolation=READ-COMMITTED --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci --max-connections=512 --innodb-rollback-on-timeout=OFF --innodb-lock-wait-timeout=120"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"\"./database:/var/lib/mysql\""}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4ca57e"},"children":[{"type":"text","value":"# Important, don't remove"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"MYSQL_ROOT_PASSWORD"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"insecure"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"MYSQL_DATABASE"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"photoprism"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"MYSQL_USER"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"photoprism"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-611b86"},"children":[{"type":"text","value":"MYSQL_PASSWORD"}]},{"type":"element","tag":"span","props":{"class":"ct-02f0b9"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-762dce"},"children":[{"type":"text","value":"insecure"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-6faff2{color:#79C0FF}.ct-4ca57e{color:#8B949E}.ct-762dce{color:#A5D6FF}.ct-02f0b9{color:#C9D1D9}.ct-611b86{color:#7EE787}.light .ct-611b86{color:#268BD2}.light .ct-02f0b9{color:#657B83}.light .ct-762dce{color:#2AA198}.light .ct-4ca57e{color:#93A1A1}.light .ct-6faff2{color:#D33682}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"docker-compose-file-to-run-it","depth":2,"text":"Docker compose file to run it"}]}},"_type":"markdown","_id":"content:Linux:Google photos alternative with Photoprism.md","_source":"content","_file":"Linux/Google photos alternative with Photoprism.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/linux/google-photos-alternative-with-photoprism","_dir":"linux","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Google Photos Alternative With Photoprism","description":"Photo Prism is a free alternative to Google photos, can be set up with #docker.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://photoprism.app/","rel":["nofollow"]},"children":[{"type":"text","value":"Photo Prism"}]},{"type":"text","value":" is a free alternative to Google photos, can be set up with #docker."}]},{"type":"element","tag":"h2","props":{"id":"docker-compose-file-to-run-it"},"children":[{"type":"text","value":"Docker compose file to run it"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check out current "},{"type":"element","tag":"a","props":{"href":"https://dl.photoprism.app/docker/docker-compose.yml","rel":["nofollow"]},"children":[{"type":"text","value":"example"}]},{"type":"text","value":" at photoprism's "},{"type":"element","tag":"a","props":{"href":"https://docs.photoprism.app/getting-started/docker-compose/","rel":["nofollow"]},"children":[{"type":"text","value":"documentation"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"version: '3.5'\n\nservices:\n photoprism:\n container_name: photoprism__app\n image: photoprism/photoprism:latest\n depends_on:\n - mariadb\n restart: unless-stopped\n security_opt:\n - seccomp:unconfined\n - apparmor:unconfined\n ports:\n - 2342:2342 # HTTP port (host:container)\n environment:\n PHOTOPRISM_ADMIN_PASSWORD: \"password\"\n PHOTOPRISM_SITE_URL: \"https://service.url/\"\n PHOTOPRISM_ORIGINALS_LIMIT: 5000\n PHOTOPRISM_HTTP_COMPRESSION: \"gzip\"\n PHOTOPRISM_DEBUG: \"false\" \n PHOTOPRISM_PUBLIC: \"false\" \n PHOTOPRISM_READONLY: \"false\" \n PHOTOPRISM_EXPERIMENTAL: \"false\"\n PHOTOPRISM_DISABLE_CHOWN: \"false\"\n PHOTOPRISM_DISABLE_WEBDAV: \"false\" \n PHOTOPRISM_DISABLE_SETTINGS: \"false\"\n PHOTOPRISM_DISABLE_TENSORFLOW: \"false\"\n PHOTOPRISM_DISABLE_FACES: \"false\" \n PHOTOPRISM_DISABLE_CLASSIFICATION: \"false\"\n PHOTOPRISM_DARKTABLE_PRESETS: \"false\" \n PHOTOPRISM_DETECT_NSFW: \"false\" \n PHOTOPRISM_UPLOAD_NSFW: \"true\" \n PHOTOPRISM_DATABASE_DRIVER: \"mysql\" \n PHOTOPRISM_DATABASE_SERVER: \"mariadb:3306\"\n PHOTOPRISM_DATABASE_NAME: \"photoprism\" \n PHOTOPRISM_DATABASE_USER: \"root\" \n PHOTOPRISM_DATABASE_PASSWORD: \"insecure\" \n PHOTOPRISM_SITE_TITLE: \"PhotoPrism\"\n PHOTOPRISM_SITE_CAPTION: \"Browse Your Life\"\n PHOTOPRISM_SITE_DESCRIPTION: \"\"\n PHOTOPRISM_SITE_AUTHOR: \"\"\n HOME: \"/photoprism\"\n working_dir: \"/photoprism\"\n volumes:\n - \"./data/originals:/photoprism/originals\" \n - \"./data/imports:/photoprism/import\"\n - \"./data/storage:/photoprism/storage\"\n mariadb:\n container_name: photoprism__db\n restart: unless-stopped\n image: mariadb:10.6\n security_opt:\n - seccomp:unconfined\n - apparmor:unconfined\n command: mysqld --innodb-buffer-pool-size=128M --transaction-isolation=READ-COMMITTED --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci --max-connections=512 --innodb-rollback-on-timeout=OFF --innodb-lock-wait-timeout=120\n volumes:\n - \"./database:/var/lib/mysql\" # Important, don't remove\n environment:\n MYSQL_ROOT_PASSWORD: insecure\n MYSQL_DATABASE: photoprism\n MYSQL_USER: photoprism\n MYSQL_PASSWORD: insecure\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"version: '3.5'\n\nservices:\n photoprism:\n container_name: photoprism__app\n image: photoprism/photoprism:latest\n depends_on:\n - mariadb\n restart: unless-stopped\n security_opt:\n - seccomp:unconfined\n - apparmor:unconfined\n ports:\n - 2342:2342 # HTTP port (host:container)\n environment:\n PHOTOPRISM_ADMIN_PASSWORD: \"password\"\n PHOTOPRISM_SITE_URL: \"https://service.url/\"\n PHOTOPRISM_ORIGINALS_LIMIT: 5000\n PHOTOPRISM_HTTP_COMPRESSION: \"gzip\"\n PHOTOPRISM_DEBUG: \"false\" \n PHOTOPRISM_PUBLIC: \"false\" \n PHOTOPRISM_READONLY: \"false\" \n PHOTOPRISM_EXPERIMENTAL: \"false\"\n PHOTOPRISM_DISABLE_CHOWN: \"false\"\n PHOTOPRISM_DISABLE_WEBDAV: \"false\" \n PHOTOPRISM_DISABLE_SETTINGS: \"false\"\n PHOTOPRISM_DISABLE_TENSORFLOW: \"false\"\n PHOTOPRISM_DISABLE_FACES: \"false\" \n PHOTOPRISM_DISABLE_CLASSIFICATION: \"false\"\n PHOTOPRISM_DARKTABLE_PRESETS: \"false\" \n PHOTOPRISM_DETECT_NSFW: \"false\" \n PHOTOPRISM_UPLOAD_NSFW: \"true\" \n PHOTOPRISM_DATABASE_DRIVER: \"mysql\" \n PHOTOPRISM_DATABASE_SERVER: \"mariadb:3306\"\n PHOTOPRISM_DATABASE_NAME: \"photoprism\" \n PHOTOPRISM_DATABASE_USER: \"root\" \n PHOTOPRISM_DATABASE_PASSWORD: \"insecure\" \n PHOTOPRISM_SITE_TITLE: \"PhotoPrism\"\n PHOTOPRISM_SITE_CAPTION: \"Browse Your Life\"\n PHOTOPRISM_SITE_DESCRIPTION: \"\"\n PHOTOPRISM_SITE_AUTHOR: \"\"\n HOME: \"/photoprism\"\n working_dir: \"/photoprism\"\n volumes:\n - \"./data/originals:/photoprism/originals\" \n - \"./data/imports:/photoprism/import\"\n - \"./data/storage:/photoprism/storage\"\n mariadb:\n container_name: photoprism__db\n restart: unless-stopped\n image: mariadb:10.6\n security_opt:\n - seccomp:unconfined\n - apparmor:unconfined\n command: mysqld --innodb-buffer-pool-size=128M --transaction-isolation=READ-COMMITTED --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci --max-connections=512 --innodb-rollback-on-timeout=OFF --innodb-lock-wait-timeout=120\n volumes:\n - \"./database:/var/lib/mysql\" # Important, don't remove\n environment:\n MYSQL_ROOT_PASSWORD: insecure\n MYSQL_DATABASE: photoprism\n MYSQL_USER: photoprism\n MYSQL_PASSWORD: insecure\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://photoprism.app/","rel":["nofollow"]},"children":[{"type":"text","value":"Photo Prism"}]},{"type":"text","value":" is a free alternative to Google photos, can be set up with #docker."}]},{"type":"element","tag":"h2","props":{"id":"docker-compose-file-to-run-it"},"children":[{"type":"text","value":"Docker compose file to run it"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check out current "},{"type":"element","tag":"a","props":{"href":"https://dl.photoprism.app/docker/docker-compose.yml","rel":["nofollow"]},"children":[{"type":"text","value":"example"}]},{"type":"text","value":" at photoprism's "},{"type":"element","tag":"a","props":{"href":"https://docs.photoprism.app/getting-started/docker-compose/","rel":["nofollow"]},"children":[{"type":"text","value":"documentation"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"version: '3.5'\n\nservices:\n photoprism:\n container_name: photoprism__app\n image: photoprism/photoprism:latest\n depends_on:\n - mariadb\n restart: unless-stopped\n security_opt:\n - seccomp:unconfined\n - apparmor:unconfined\n ports:\n - 2342:2342 # HTTP port (host:container)\n environment:\n PHOTOPRISM_ADMIN_PASSWORD: \"password\"\n PHOTOPRISM_SITE_URL: \"https://service.url/\"\n PHOTOPRISM_ORIGINALS_LIMIT: 5000\n PHOTOPRISM_HTTP_COMPRESSION: \"gzip\"\n PHOTOPRISM_DEBUG: \"false\" \n PHOTOPRISM_PUBLIC: \"false\" \n PHOTOPRISM_READONLY: \"false\" \n PHOTOPRISM_EXPERIMENTAL: \"false\"\n PHOTOPRISM_DISABLE_CHOWN: \"false\"\n PHOTOPRISM_DISABLE_WEBDAV: \"false\" \n PHOTOPRISM_DISABLE_SETTINGS: \"false\"\n PHOTOPRISM_DISABLE_TENSORFLOW: \"false\"\n PHOTOPRISM_DISABLE_FACES: \"false\" \n PHOTOPRISM_DISABLE_CLASSIFICATION: \"false\"\n PHOTOPRISM_DARKTABLE_PRESETS: \"false\" \n PHOTOPRISM_DETECT_NSFW: \"false\" \n PHOTOPRISM_UPLOAD_NSFW: \"true\" \n PHOTOPRISM_DATABASE_DRIVER: \"mysql\" \n PHOTOPRISM_DATABASE_SERVER: \"mariadb:3306\"\n PHOTOPRISM_DATABASE_NAME: \"photoprism\" \n PHOTOPRISM_DATABASE_USER: \"root\" \n PHOTOPRISM_DATABASE_PASSWORD: \"insecure\" \n PHOTOPRISM_SITE_TITLE: \"PhotoPrism\"\n PHOTOPRISM_SITE_CAPTION: \"Browse Your Life\"\n PHOTOPRISM_SITE_DESCRIPTION: \"\"\n PHOTOPRISM_SITE_AUTHOR: \"\"\n HOME: \"/photoprism\"\n working_dir: \"/photoprism\"\n volumes:\n - \"./data/originals:/photoprism/originals\" \n - \"./data/imports:/photoprism/import\"\n - \"./data/storage:/photoprism/storage\"\n mariadb:\n container_name: photoprism__db\n restart: unless-stopped\n image: mariadb:10.6\n security_opt:\n - seccomp:unconfined\n - apparmor:unconfined\n command: mysqld --innodb-buffer-pool-size=128M --transaction-isolation=READ-COMMITTED --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci --max-connections=512 --innodb-rollback-on-timeout=OFF --innodb-lock-wait-timeout=120\n volumes:\n - \"./database:/var/lib/mysql\" # Important, don't remove\n environment:\n MYSQL_ROOT_PASSWORD: insecure\n MYSQL_DATABASE: photoprism\n MYSQL_USER: photoprism\n MYSQL_PASSWORD: insecure\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"version"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"'3.5'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"services"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"photoprism"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"photoprism__app"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"photoprism/photoprism:latest"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"depends_on"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"mariadb"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"unless-stopped"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"security_opt"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"seccomp:unconfined"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"apparmor:unconfined"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"ports"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"2342:2342"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-16272c"},"children":[{"type":"text","value":"# HTTP port (host:container)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_ADMIN_PASSWORD"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"password\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_SITE_URL"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"https://service.url/\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_ORIGINALS_LIMIT"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-700af9"},"children":[{"type":"text","value":"5000"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_HTTP_COMPRESSION"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"gzip\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_DEBUG"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_PUBLIC"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_READONLY"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_EXPERIMENTAL"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"false\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_DISABLE_CHOWN"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"false\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_DISABLE_WEBDAV"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_DISABLE_SETTINGS"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"false\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_DISABLE_TENSORFLOW"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"false\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_DISABLE_FACES"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_DISABLE_CLASSIFICATION"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"false\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_DARKTABLE_PRESETS"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_DETECT_NSFW"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_UPLOAD_NSFW"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"true\""}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_DATABASE_DRIVER"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"mysql\""}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_DATABASE_SERVER"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"mariadb:3306\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_DATABASE_NAME"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"photoprism\""}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_DATABASE_USER"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"root\""}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_DATABASE_PASSWORD"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"insecure\""}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_SITE_TITLE"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"PhotoPrism\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_SITE_CAPTION"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"Browse Your Life\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_SITE_DESCRIPTION"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"PHOTOPRISM_SITE_AUTHOR"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"HOME"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"/photoprism\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"working_dir"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"/photoprism\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"./data/originals:/photoprism/originals\""}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"./data/imports:/photoprism/import\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"./data/storage:/photoprism/storage\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"mariadb"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"photoprism__db"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"unless-stopped"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"mariadb:10.6"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"security_opt"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"seccomp:unconfined"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"apparmor:unconfined"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"command"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"mysqld --innodb-buffer-pool-size=128M --transaction-isolation=READ-COMMITTED --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci --max-connections=512 --innodb-rollback-on-timeout=OFF --innodb-lock-wait-timeout=120"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"\"./database:/var/lib/mysql\""}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-16272c"},"children":[{"type":"text","value":"# Important, don't remove"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"MYSQL_ROOT_PASSWORD"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"insecure"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"MYSQL_DATABASE"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"photoprism"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"MYSQL_USER"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"photoprism"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-085d59"},"children":[{"type":"text","value":"MYSQL_PASSWORD"}]},{"type":"element","tag":"span","props":{"class":"ct-a7ea58"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-afc238"},"children":[{"type":"text","value":"insecure"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-700af9{color:#79C0FF}.ct-16272c{color:#8B949E}.ct-afc238{color:#A5D6FF}.ct-a7ea58{color:#C9D1D9}.ct-085d59{color:#7EE787}.light .ct-085d59{color:#268BD2}.light .ct-a7ea58{color:#657B83}.light .ct-afc238{color:#2AA198}.light .ct-16272c{color:#93A1A1}.light .ct-700af9{color:#D33682}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"docker-compose-file-to-run-it","depth":2,"text":"Docker compose file to run it"}]}},"_type":"markdown","_id":"content:Linux:Google photos alternative with Photoprism.md","_source":"content","_file":"Linux/Google photos alternative with Photoprism.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/pVAGVLBNPu.json b/docs/api/_content/query/pVAGVLBNPu.json
index 6c0a032..74421f8 100644
--- a/docs/api/_content/query/pVAGVLBNPu.json
+++ b/docs/api/_content/query/pVAGVLBNPu.json
@@ -1 +1 @@
-{"_path":"/linux/rsync-file-with-ssh","_dir":"linux","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Rsync File With SSH","description":"Downloads file from #SSH with rsync and puts it in current folder.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Downloads file from #SSH with rsync and puts it in current folder."}]},{"type":"element","tag":"code","props":{"code":"#!/bin/bash\n\nPORT=22\nUSER=user\nHOST=example.com\nREMOTE_PATH=/tmp\nREMOTE_FILE=sample.text\nDEST_PATH=./\n\nrsync -a -e \"ssh -p $PORT\" -P -v \\\n \"$USER@$HOST:$REMOTE_PATH/$REMOTE_FILE\" \\\n \"$DEST_PATH\"\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"#!/bin/bash\n\nPORT=22\nUSER=user\nHOST=example.com\nREMOTE_PATH=/tmp\nREMOTE_FILE=sample.text\nDEST_PATH=./\n\nrsync -a -e \"ssh -p $PORT\" -P -v \\\n \"$USER@$HOST:$REMOTE_PATH/$REMOTE_FILE\" \\\n \"$DEST_PATH\"\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Downloads file from #SSH with rsync and puts it in current folder."}]},{"type":"element","tag":"code","props":{"code":"#!/bin/bash\n\nPORT=22\nUSER=user\nHOST=example.com\nREMOTE_PATH=/tmp\nREMOTE_FILE=sample.text\nDEST_PATH=./\n\nrsync -a -e \"ssh -p $PORT\" -P -v \\\n \"$USER@$HOST:$REMOTE_PATH/$REMOTE_FILE\" \\\n \"$DEST_PATH\"\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c320ca"},"children":[{"type":"text","value":"#!/bin/bash"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef0bb"},"children":[{"type":"text","value":"PORT=22"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef0bb"},"children":[{"type":"text","value":"USER=user"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef0bb"},"children":[{"type":"text","value":"HOST=example.com"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef0bb"},"children":[{"type":"text","value":"REMOTE_PATH=/tmp"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef0bb"},"children":[{"type":"text","value":"REMOTE_FILE=sample.text"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef0bb"},"children":[{"type":"text","value":"DEST_PATH=./"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef0bb"},"children":[{"type":"text","value":"rsync -a -e "}]},{"type":"element","tag":"span","props":{"class":"ct-905a71"},"children":[{"type":"text","value":"\"ssh -p "}]},{"type":"element","tag":"span","props":{"class":"ct-5cf3ba"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-aea61c"},"children":[{"type":"text","value":"PORT"}]},{"type":"element","tag":"span","props":{"class":"ct-905a71"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-8ef0bb"},"children":[{"type":"text","value":" -P -v \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef0bb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-905a71"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-5cf3ba"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-aea61c"},"children":[{"type":"text","value":"USER"}]},{"type":"element","tag":"span","props":{"class":"ct-905a71"},"children":[{"type":"text","value":"@"}]},{"type":"element","tag":"span","props":{"class":"ct-5cf3ba"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-aea61c"},"children":[{"type":"text","value":"HOST"}]},{"type":"element","tag":"span","props":{"class":"ct-905a71"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-5cf3ba"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-aea61c"},"children":[{"type":"text","value":"REMOTE_PATH"}]},{"type":"element","tag":"span","props":{"class":"ct-905a71"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-5cf3ba"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-aea61c"},"children":[{"type":"text","value":"REMOTE_FILE"}]},{"type":"element","tag":"span","props":{"class":"ct-905a71"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-8ef0bb"},"children":[{"type":"text","value":" \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ef0bb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-905a71"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-5cf3ba"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-aea61c"},"children":[{"type":"text","value":"DEST_PATH"}]},{"type":"element","tag":"span","props":{"class":"ct-905a71"},"children":[{"type":"text","value":"\""}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-aea61c{color:#C9D1D9}.ct-5cf3ba{color:#C9D1D9}.ct-905a71{color:#A5D6FF}.ct-8ef0bb{color:#C9D1D9}.ct-c320ca{color:#8B949E}.light .ct-c320ca{color:#93A1A1}.light .ct-8ef0bb{color:#657B83}.light .ct-905a71{color:#2AA198}.light .ct-5cf3ba{color:#859900}.light .ct-aea61c{color:#268BD2}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Linux:Rsync file with SSH.md","_source":"content","_file":"Linux/Rsync file with SSH.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/linux/rsync-file-with-ssh","_dir":"linux","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Rsync File With SSH","description":"Downloads file from #SSH with rsync and puts it in current folder.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Downloads file from #SSH with rsync and puts it in current folder."}]},{"type":"element","tag":"code","props":{"code":"#!/bin/bash\n\nPORT=22\nUSER=user\nHOST=example.com\nREMOTE_PATH=/tmp\nREMOTE_FILE=sample.text\nDEST_PATH=./\n\nrsync -a -e \"ssh -p $PORT\" -P -v \\\n \"$USER@$HOST:$REMOTE_PATH/$REMOTE_FILE\" \\\n \"$DEST_PATH\"\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"#!/bin/bash\n\nPORT=22\nUSER=user\nHOST=example.com\nREMOTE_PATH=/tmp\nREMOTE_FILE=sample.text\nDEST_PATH=./\n\nrsync -a -e \"ssh -p $PORT\" -P -v \\\n \"$USER@$HOST:$REMOTE_PATH/$REMOTE_FILE\" \\\n \"$DEST_PATH\"\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Downloads file from #SSH with rsync and puts it in current folder."}]},{"type":"element","tag":"code","props":{"code":"#!/bin/bash\n\nPORT=22\nUSER=user\nHOST=example.com\nREMOTE_PATH=/tmp\nREMOTE_FILE=sample.text\nDEST_PATH=./\n\nrsync -a -e \"ssh -p $PORT\" -P -v \\\n \"$USER@$HOST:$REMOTE_PATH/$REMOTE_FILE\" \\\n \"$DEST_PATH\"\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-369d9f"},"children":[{"type":"text","value":"#!/bin/bash"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dcb3db"},"children":[{"type":"text","value":"PORT=22"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dcb3db"},"children":[{"type":"text","value":"USER=user"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dcb3db"},"children":[{"type":"text","value":"HOST=example.com"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dcb3db"},"children":[{"type":"text","value":"REMOTE_PATH=/tmp"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dcb3db"},"children":[{"type":"text","value":"REMOTE_FILE=sample.text"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dcb3db"},"children":[{"type":"text","value":"DEST_PATH=./"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dcb3db"},"children":[{"type":"text","value":"rsync -a -e "}]},{"type":"element","tag":"span","props":{"class":"ct-2e2f05"},"children":[{"type":"text","value":"\"ssh -p "}]},{"type":"element","tag":"span","props":{"class":"ct-49032f"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-14b85e"},"children":[{"type":"text","value":"PORT"}]},{"type":"element","tag":"span","props":{"class":"ct-2e2f05"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-dcb3db"},"children":[{"type":"text","value":" -P -v \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dcb3db"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2e2f05"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-49032f"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-14b85e"},"children":[{"type":"text","value":"USER"}]},{"type":"element","tag":"span","props":{"class":"ct-2e2f05"},"children":[{"type":"text","value":"@"}]},{"type":"element","tag":"span","props":{"class":"ct-49032f"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-14b85e"},"children":[{"type":"text","value":"HOST"}]},{"type":"element","tag":"span","props":{"class":"ct-2e2f05"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-49032f"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-14b85e"},"children":[{"type":"text","value":"REMOTE_PATH"}]},{"type":"element","tag":"span","props":{"class":"ct-2e2f05"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-49032f"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-14b85e"},"children":[{"type":"text","value":"REMOTE_FILE"}]},{"type":"element","tag":"span","props":{"class":"ct-2e2f05"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-dcb3db"},"children":[{"type":"text","value":" \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dcb3db"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2e2f05"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-49032f"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-14b85e"},"children":[{"type":"text","value":"DEST_PATH"}]},{"type":"element","tag":"span","props":{"class":"ct-2e2f05"},"children":[{"type":"text","value":"\""}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-14b85e{color:#C9D1D9}.ct-49032f{color:#C9D1D9}.ct-2e2f05{color:#A5D6FF}.ct-dcb3db{color:#C9D1D9}.ct-369d9f{color:#8B949E}.light .ct-369d9f{color:#93A1A1}.light .ct-dcb3db{color:#657B83}.light .ct-2e2f05{color:#2AA198}.light .ct-49032f{color:#859900}.light .ct-14b85e{color:#268BD2}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Linux:Rsync file with SSH.md","_source":"content","_file":"Linux/Rsync file with SSH.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/pv8ckH0an3.json b/docs/api/_content/query/pv8ckH0an3.json
index ddabed5..d74c4ae 100644
--- a/docs/api/_content/query/pv8ckH0an3.json
+++ b/docs/api/_content/query/pv8ckH0an3.json
@@ -1 +1 @@
-{"_path":"/frontend/react-native/preserve-flatlist-scroll-position-in-react-native","_dir":"react-native","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Preserve FlatList Scroll Position In React Native","description":"Sometimes you need to keep scroll position of FlatList in React Native after some user interactions.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes you need to keep scroll position of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"FlatList"}]},{"type":"text","value":" in React Native after some user interactions."}]},{"type":"element","tag":"code","props":{"code":"// interact() is doing some stuff, that changes FlatList scroll size\ntype Props = { interact: () => void; }\n\nconst SomeList: FC<Props> = ({ interact }) => {\n const scrollPosition = useRef(0);\n const scrollHeight = useRef(0);\n \n // set it to `true` before interaction and back to `false` right after\n const shouldKeepScrollPosition = useRef(false);\n\n const onScroll = useCallback(\n (event: NativeSyntheticEvent<NativeScrollEvent>) => {\n scrollPosition.current = event.nativeEvent.contentOffset.y;\n },\n [],\n );\n\n const onContentSizeChange = useCallback((_: number, h: number) => {\n if (!shouldKeepScrollPosition.current) {\n scrollHeight.current = h;\n return;\n }\n\n ref.current?.scrollToOffset({\n offset: scrollPosition.current + (h - scrollHeight.current),\n animated: false,\n });\n\n scrollHeight.current = h;\n }, []);\n\n // onInteraction wraps interaction to preserve scroll position\n const onInteraction = useCallback(\n () => {\n shouldKeepScrollPosition.current = true;\n\n setTimeout(() => {\n interact();\n }, 0);\n\n setTimeout(() => {\n shouldKeepScrollPosition.current = false;\n }, 500);\n },\n [setSelectedSubThemes],\n );\n \n return (\n <FlatList\n // ...required FlatList options\n ref={ref}\n onContentSizeChange={onContentSizeChange}\n onRefresh={onRefresh}\n onScroll={onScroll}\n />\n )\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// interact() is doing some stuff, that changes FlatList scroll size\ntype Props = { interact: () => void; }\n\nconst SomeList: FC<Props> = ({ interact }) => {\n const scrollPosition = useRef(0);\n const scrollHeight = useRef(0);\n \n // set it to `true` before interaction and back to `false` right after\n const shouldKeepScrollPosition = useRef(false);\n\n const onScroll = useCallback(\n (event: NativeSyntheticEvent<NativeScrollEvent>) => {\n scrollPosition.current = event.nativeEvent.contentOffset.y;\n },\n [],\n );\n\n const onContentSizeChange = useCallback((_: number, h: number) => {\n if (!shouldKeepScrollPosition.current) {\n scrollHeight.current = h;\n return;\n }\n\n ref.current?.scrollToOffset({\n offset: scrollPosition.current + (h - scrollHeight.current),\n animated: false,\n });\n\n scrollHeight.current = h;\n }, []);\n\n // onInteraction wraps interaction to preserve scroll position\n const onInteraction = useCallback(\n () => {\n shouldKeepScrollPosition.current = true;\n\n setTimeout(() => {\n interact();\n }, 0);\n\n setTimeout(() => {\n shouldKeepScrollPosition.current = false;\n }, 500);\n },\n [setSelectedSubThemes],\n );\n \n return (\n <FlatList\n // ...required FlatList options\n ref={ref}\n onContentSizeChange={onContentSizeChange}\n onRefresh={onRefresh}\n onScroll={onScroll}\n />\n )\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes you need to keep scroll position of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"FlatList"}]},{"type":"text","value":" in React Native after some user interactions."}]},{"type":"element","tag":"code","props":{"code":"// interact() is doing some stuff, that changes FlatList scroll size\ntype Props = { interact: () => void; }\n\nconst SomeList: FC<Props> = ({ interact }) => {\n const scrollPosition = useRef(0);\n const scrollHeight = useRef(0);\n \n // set it to `true` before interaction and back to `false` right after\n const shouldKeepScrollPosition = useRef(false);\n\n const onScroll = useCallback(\n (event: NativeSyntheticEvent<NativeScrollEvent>) => {\n scrollPosition.current = event.nativeEvent.contentOffset.y;\n },\n [],\n );\n\n const onContentSizeChange = useCallback((_: number, h: number) => {\n if (!shouldKeepScrollPosition.current) {\n scrollHeight.current = h;\n return;\n }\n\n ref.current?.scrollToOffset({\n offset: scrollPosition.current + (h - scrollHeight.current),\n animated: false,\n });\n\n scrollHeight.current = h;\n }, []);\n\n // onInteraction wraps interaction to preserve scroll position\n const onInteraction = useCallback(\n () => {\n shouldKeepScrollPosition.current = true;\n\n setTimeout(() => {\n interact();\n }, 0);\n\n setTimeout(() => {\n shouldKeepScrollPosition.current = false;\n }, 500);\n },\n [setSelectedSubThemes],\n );\n \n return (\n <FlatList\n // ...required FlatList options\n ref={ref}\n onContentSizeChange={onContentSizeChange}\n onRefresh={onRefresh}\n onScroll={onScroll}\n />\n )\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-347b63"},"children":[{"type":"text","value":"// interact() is doing some stuff, that changes FlatList scroll size"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-eacfd3"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-43b17f"},"children":[{"type":"text","value":"Props"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-6ab075"},"children":[{"type":"text","value":"interact"}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-eacfd3"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f0e2c2"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"; }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-119c57"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6b0b8c"},"children":[{"type":"text","value":"SomeList"}]},{"type":"element","tag":"span","props":{"class":"ct-40962e"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f23ae9"},"children":[{"type":"text","value":"FC"}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-f23ae9"},"children":[{"type":"text","value":"Props"}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-40962e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":" ({ "}]},{"type":"element","tag":"span","props":{"class":"ct-a064f4"},"children":[{"type":"text","value":"interact"}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":" }) "}]},{"type":"element","tag":"span","props":{"class":"ct-119c57"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eacfd3"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4637ba"},"children":[{"type":"text","value":"scrollPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ab075"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-6a4963"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eacfd3"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4637ba"},"children":[{"type":"text","value":"scrollHeight"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ab075"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-6a4963"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-347b63"},"children":[{"type":"text","value":"// set it to `true` before interaction and back to `false` right after"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eacfd3"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4637ba"},"children":[{"type":"text","value":"shouldKeepScrollPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ab075"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7f0ff6"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eacfd3"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4637ba"},"children":[{"type":"text","value":"onScroll"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ab075"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-a064f4"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-40962e"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f23ae9"},"children":[{"type":"text","value":"NativeSyntheticEvent"}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-f23ae9"},"children":[{"type":"text","value":"NativeScrollEvent"}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":">) "}]},{"type":"element","tag":"span","props":{"class":"ct-119c57"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"scrollPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"nativeEvent"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"contentOffset"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"y"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" [],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-119c57"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-95ec99"},"children":[{"type":"text","value":"onContentSizeChange"}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-40962e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6b0b8c"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":"(("}]},{"type":"element","tag":"span","props":{"class":"ct-a064f4"},"children":[{"type":"text","value":"_"}]},{"type":"element","tag":"span","props":{"class":"ct-40962e"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-754b01"},"children":[{"type":"text","value":"number"}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a064f4"},"children":[{"type":"text","value":"h"}]},{"type":"element","tag":"span","props":{"class":"ct-40962e"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-754b01"},"children":[{"type":"text","value":"number"}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-119c57"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-173ddd"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"shouldKeepScrollPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"scrollHeight"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"h"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"ref"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-6ab075"},"children":[{"type":"text","value":"scrollToOffset"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" offset: "}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"scrollPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"h"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"scrollHeight"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" animated: "}]},{"type":"element","tag":"span","props":{"class":"ct-7f0ff6"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"scrollHeight"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"h"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" }, []);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-347b63"},"children":[{"type":"text","value":"// onInteraction wraps interaction to preserve scroll position"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eacfd3"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4637ba"},"children":[{"type":"text","value":"onInteraction"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ab075"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-eacfd3"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"shouldKeepScrollPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7f0ff6"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4637ba"},"children":[{"type":"text","value":"setTimeout"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-eacfd3"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ab075"},"children":[{"type":"text","value":"interact"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" }, "}]},{"type":"element","tag":"span","props":{"class":"ct-6a4963"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4637ba"},"children":[{"type":"text","value":"setTimeout"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-eacfd3"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"shouldKeepScrollPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7f0ff6"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" }, "}]},{"type":"element","tag":"span","props":{"class":"ct-6a4963"},"children":[{"type":"text","value":"500"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"setSelectedSubThemes"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-f7ed9c"},"children":[{"type":"text","value":"FlatList"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-347b63"},"children":[{"type":"text","value":"// ...required FlatList options"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"ref"}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"ref"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"onContentSizeChange"}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"onContentSizeChange"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"onRefresh"}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"onRefresh"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"onScroll"}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-7a1986"},"children":[{"type":"text","value":"onScroll"}]},{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae113b"},"children":[{"type":"text","value":"/>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":" )"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2d0265"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-f7ed9c{color:#FFA657}.ct-754b01{color:#79C0FF}.ct-95ec99{color:#79C0FF}.ct-7a1986{color:#C9D1D9}.ct-7f0ff6{color:#79C0FF}.ct-6a4963{color:#79C0FF}.ct-4637ba{color:#79C0FF}.ct-a064f4{color:#FFA657}.ct-f23ae9{color:#FFA657}.ct-40962e{color:#FF7B72}.ct-6b0b8c{color:#D2A8FF}.ct-173ddd{color:#C9D1D9}.ct-119c57{color:#FF7B72}.ct-f0e2c2{color:#79C0FF}.ct-6ab075{color:#D2A8FF}.ct-ae113b{color:#FF7B72}.ct-43b17f{color:#FFA657}.ct-2d0265{color:#C9D1D9}.ct-eacfd3{color:#FF7B72}.ct-347b63{color:#8B949E}.light .ct-347b63{color:#93A1A1}.light .ct-eacfd3{color:#073642}.light .ct-2d0265{color:#657B83}.light .ct-43b17f{color:#268BD2}.light .ct-ae113b{color:#859900}.light .ct-6ab075{color:#268BD2}.light .ct-f0e2c2{color:#859900}.light .ct-119c57{color:#073642}.light .ct-173ddd{color:#657B83}.light .ct-6b0b8c{color:#268BD2}.light .ct-40962e{color:#859900}.light .ct-f23ae9{color:#268BD2}.light .ct-a064f4{color:#657B83}.light .ct-4637ba{color:#268BD2}.light .ct-6a4963{color:#D33682}.light .ct-7f0ff6{color:#B58900}.light .ct-7a1986{color:#268BD2}.light .ct-95ec99{color:#268BD2}.light .ct-754b01{color:#859900}.light .ct-f7ed9c{color:#657B83}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Frontend:React Native:Preserve FlatList scroll position in React Native.md","_source":"content","_file":"Frontend/React Native/Preserve FlatList scroll position in React Native.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/frontend/react-native/preserve-flatlist-scroll-position-in-react-native","_dir":"react-native","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Preserve FlatList Scroll Position In React Native","description":"Sometimes you need to keep scroll position of FlatList in React Native after some user interactions.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes you need to keep scroll position of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"FlatList"}]},{"type":"text","value":" in React Native after some user interactions."}]},{"type":"element","tag":"code","props":{"code":"// interact() is doing some stuff, that changes FlatList scroll size\ntype Props = { interact: () => void; }\n\nconst SomeList: FC<Props> = ({ interact }) => {\n const scrollPosition = useRef(0);\n const scrollHeight = useRef(0);\n \n // set it to `true` before interaction and back to `false` right after\n const shouldKeepScrollPosition = useRef(false);\n\n const onScroll = useCallback(\n (event: NativeSyntheticEvent<NativeScrollEvent>) => {\n scrollPosition.current = event.nativeEvent.contentOffset.y;\n },\n [],\n );\n\n const onContentSizeChange = useCallback((_: number, h: number) => {\n if (!shouldKeepScrollPosition.current) {\n scrollHeight.current = h;\n return;\n }\n\n ref.current?.scrollToOffset({\n offset: scrollPosition.current + (h - scrollHeight.current),\n animated: false,\n });\n\n scrollHeight.current = h;\n }, []);\n\n // onInteraction wraps interaction to preserve scroll position\n const onInteraction = useCallback(\n () => {\n shouldKeepScrollPosition.current = true;\n\n setTimeout(() => {\n interact();\n }, 0);\n\n setTimeout(() => {\n shouldKeepScrollPosition.current = false;\n }, 500);\n },\n [setSelectedSubThemes],\n );\n \n return (\n <FlatList\n // ...required FlatList options\n ref={ref}\n onContentSizeChange={onContentSizeChange}\n onRefresh={onRefresh}\n onScroll={onScroll}\n />\n )\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// interact() is doing some stuff, that changes FlatList scroll size\ntype Props = { interact: () => void; }\n\nconst SomeList: FC<Props> = ({ interact }) => {\n const scrollPosition = useRef(0);\n const scrollHeight = useRef(0);\n \n // set it to `true` before interaction and back to `false` right after\n const shouldKeepScrollPosition = useRef(false);\n\n const onScroll = useCallback(\n (event: NativeSyntheticEvent<NativeScrollEvent>) => {\n scrollPosition.current = event.nativeEvent.contentOffset.y;\n },\n [],\n );\n\n const onContentSizeChange = useCallback((_: number, h: number) => {\n if (!shouldKeepScrollPosition.current) {\n scrollHeight.current = h;\n return;\n }\n\n ref.current?.scrollToOffset({\n offset: scrollPosition.current + (h - scrollHeight.current),\n animated: false,\n });\n\n scrollHeight.current = h;\n }, []);\n\n // onInteraction wraps interaction to preserve scroll position\n const onInteraction = useCallback(\n () => {\n shouldKeepScrollPosition.current = true;\n\n setTimeout(() => {\n interact();\n }, 0);\n\n setTimeout(() => {\n shouldKeepScrollPosition.current = false;\n }, 500);\n },\n [setSelectedSubThemes],\n );\n \n return (\n <FlatList\n // ...required FlatList options\n ref={ref}\n onContentSizeChange={onContentSizeChange}\n onRefresh={onRefresh}\n onScroll={onScroll}\n />\n )\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes you need to keep scroll position of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"FlatList"}]},{"type":"text","value":" in React Native after some user interactions."}]},{"type":"element","tag":"code","props":{"code":"// interact() is doing some stuff, that changes FlatList scroll size\ntype Props = { interact: () => void; }\n\nconst SomeList: FC<Props> = ({ interact }) => {\n const scrollPosition = useRef(0);\n const scrollHeight = useRef(0);\n \n // set it to `true` before interaction and back to `false` right after\n const shouldKeepScrollPosition = useRef(false);\n\n const onScroll = useCallback(\n (event: NativeSyntheticEvent<NativeScrollEvent>) => {\n scrollPosition.current = event.nativeEvent.contentOffset.y;\n },\n [],\n );\n\n const onContentSizeChange = useCallback((_: number, h: number) => {\n if (!shouldKeepScrollPosition.current) {\n scrollHeight.current = h;\n return;\n }\n\n ref.current?.scrollToOffset({\n offset: scrollPosition.current + (h - scrollHeight.current),\n animated: false,\n });\n\n scrollHeight.current = h;\n }, []);\n\n // onInteraction wraps interaction to preserve scroll position\n const onInteraction = useCallback(\n () => {\n shouldKeepScrollPosition.current = true;\n\n setTimeout(() => {\n interact();\n }, 0);\n\n setTimeout(() => {\n shouldKeepScrollPosition.current = false;\n }, 500);\n },\n [setSelectedSubThemes],\n );\n \n return (\n <FlatList\n // ...required FlatList options\n ref={ref}\n onContentSizeChange={onContentSizeChange}\n onRefresh={onRefresh}\n onScroll={onScroll}\n />\n )\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cbdfc4"},"children":[{"type":"text","value":"// interact() is doing some stuff, that changes FlatList scroll size"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-899c19"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8812"},"children":[{"type":"text","value":"Props"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-53862c"},"children":[{"type":"text","value":"interact"}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-899c19"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-16fddf"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"; }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ee2cab"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bc0f5b"},"children":[{"type":"text","value":"SomeList"}]},{"type":"element","tag":"span","props":{"class":"ct-6883f2"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-214e59"},"children":[{"type":"text","value":"FC"}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-214e59"},"children":[{"type":"text","value":"Props"}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-6883f2"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":" ({ "}]},{"type":"element","tag":"span","props":{"class":"ct-37159e"},"children":[{"type":"text","value":"interact"}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":" }) "}]},{"type":"element","tag":"span","props":{"class":"ct-ee2cab"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-899c19"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f151f9"},"children":[{"type":"text","value":"scrollPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-53862c"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-824354"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-899c19"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f151f9"},"children":[{"type":"text","value":"scrollHeight"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-53862c"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-824354"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbdfc4"},"children":[{"type":"text","value":"// set it to `true` before interaction and back to `false` right after"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-899c19"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f151f9"},"children":[{"type":"text","value":"shouldKeepScrollPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-53862c"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-1a8020"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-899c19"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f151f9"},"children":[{"type":"text","value":"onScroll"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-53862c"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-37159e"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-6883f2"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-214e59"},"children":[{"type":"text","value":"NativeSyntheticEvent"}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-214e59"},"children":[{"type":"text","value":"NativeScrollEvent"}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":">) "}]},{"type":"element","tag":"span","props":{"class":"ct-ee2cab"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"scrollPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"nativeEvent"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"contentOffset"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"y"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" [],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ee2cab"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-447d8e"},"children":[{"type":"text","value":"onContentSizeChange"}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6883f2"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bc0f5b"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":"(("}]},{"type":"element","tag":"span","props":{"class":"ct-37159e"},"children":[{"type":"text","value":"_"}]},{"type":"element","tag":"span","props":{"class":"ct-6883f2"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5ac3c8"},"children":[{"type":"text","value":"number"}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-37159e"},"children":[{"type":"text","value":"h"}]},{"type":"element","tag":"span","props":{"class":"ct-6883f2"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5ac3c8"},"children":[{"type":"text","value":"number"}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-ee2cab"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-a4861c"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"shouldKeepScrollPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"scrollHeight"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"h"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"ref"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-53862c"},"children":[{"type":"text","value":"scrollToOffset"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" offset: "}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"scrollPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"h"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"scrollHeight"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" animated: "}]},{"type":"element","tag":"span","props":{"class":"ct-1a8020"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"scrollHeight"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"h"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" }, []);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbdfc4"},"children":[{"type":"text","value":"// onInteraction wraps interaction to preserve scroll position"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-899c19"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f151f9"},"children":[{"type":"text","value":"onInteraction"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-53862c"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-899c19"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"shouldKeepScrollPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1a8020"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f151f9"},"children":[{"type":"text","value":"setTimeout"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-899c19"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-53862c"},"children":[{"type":"text","value":"interact"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" }, "}]},{"type":"element","tag":"span","props":{"class":"ct-824354"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f151f9"},"children":[{"type":"text","value":"setTimeout"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-899c19"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"shouldKeepScrollPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1a8020"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" }, "}]},{"type":"element","tag":"span","props":{"class":"ct-824354"},"children":[{"type":"text","value":"500"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"setSelectedSubThemes"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-deddc5"},"children":[{"type":"text","value":"FlatList"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cbdfc4"},"children":[{"type":"text","value":"// ...required FlatList options"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"ref"}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"ref"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"onContentSizeChange"}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"onContentSizeChange"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"onRefresh"}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"onRefresh"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"onScroll"}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-458d97"},"children":[{"type":"text","value":"onScroll"}]},{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bdec02"},"children":[{"type":"text","value":"/>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":" )"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2651d0"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-deddc5{color:#FFA657}.ct-5ac3c8{color:#79C0FF}.ct-447d8e{color:#79C0FF}.ct-458d97{color:#C9D1D9}.ct-1a8020{color:#79C0FF}.ct-824354{color:#79C0FF}.ct-f151f9{color:#79C0FF}.ct-37159e{color:#FFA657}.ct-214e59{color:#FFA657}.ct-6883f2{color:#FF7B72}.ct-bc0f5b{color:#D2A8FF}.ct-a4861c{color:#C9D1D9}.ct-ee2cab{color:#FF7B72}.ct-16fddf{color:#79C0FF}.ct-53862c{color:#D2A8FF}.ct-bdec02{color:#FF7B72}.ct-fe8812{color:#FFA657}.ct-2651d0{color:#C9D1D9}.ct-899c19{color:#FF7B72}.ct-cbdfc4{color:#8B949E}.light .ct-cbdfc4{color:#93A1A1}.light .ct-899c19{color:#073642}.light .ct-2651d0{color:#657B83}.light .ct-fe8812{color:#268BD2}.light .ct-bdec02{color:#859900}.light .ct-53862c{color:#268BD2}.light .ct-16fddf{color:#859900}.light .ct-ee2cab{color:#073642}.light .ct-a4861c{color:#657B83}.light .ct-bc0f5b{color:#268BD2}.light .ct-6883f2{color:#859900}.light .ct-214e59{color:#268BD2}.light .ct-37159e{color:#657B83}.light .ct-f151f9{color:#268BD2}.light .ct-824354{color:#D33682}.light .ct-1a8020{color:#B58900}.light .ct-458d97{color:#268BD2}.light .ct-447d8e{color:#268BD2}.light .ct-5ac3c8{color:#859900}.light .ct-deddc5{color:#657B83}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Frontend:React Native:Preserve FlatList scroll position in React Native.md","_source":"content","_file":"Frontend/React Native/Preserve FlatList scroll position in React Native.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/rNRhET0KmZ.json b/docs/api/_content/query/rNRhET0KmZ.json
index 67420a3..7301aae 100644
--- a/docs/api/_content/query/rNRhET0KmZ.json
+++ b/docs/api/_content/query/rNRhET0KmZ.json
@@ -1 +1 @@
-{"_path":"/docker/github-pages-with-drone-ci","_dir":"docker","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Github Pages With Drone Ci","description":"To deploy github pages with Drone-ci you will need .drone.yml as specified below. You also should define secrets github_username and github_token (get it here) in your drone's repository setup.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To deploy github pages with "},{"type":"element","tag":"a","props":{"href":"Drone-ci"},"children":[{"type":"text","value":"Drone-ci"}]},{"type":"text","value":" you will need "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".drone.yml"}]},{"type":"text","value":" as specified below. You also should define secrets "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"github_username"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"github_token"}]},{"type":"text","value":" (get it "},{"type":"element","tag":"a","props":{"href":"https://github.com/settings/tokens","rel":["nofollow"]},"children":[{"type":"text","value":"here"}]},{"type":"text","value":") in your drone's repository setup."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Github repository should be named as "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"yourname.github.io"}]},{"type":"text","value":" and it could be accessed at "},{"type":"element","tag":"a","props":{"href":"https://yourname.github.io/","rel":["nofollow"]},"children":[{"type":"text","value":"https://yourname.github.io/"}]},{"type":"text","value":". Otherwise it'll be available at "},{"type":"element","tag":"a","props":{"href":"https://yourname.github.io/repo-name/","rel":["nofollow"]},"children":[{"type":"text","value":"https://yourname.github.io/repo-name/"}]},{"type":"text","value":", what you might not like."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You should create branch named "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gh-pages"}]},{"type":"text","value":" in that repo and setup GH Pages at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"https://github.com/<yourusername>/<yourusername>.github.io/settings/pages"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This config will update "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gh-pages"}]},{"type":"text","value":" branch in your project, which will contain only generated content. I know, that's bad, but there's no better way to do that with generic drone plugins."}]},{"type":"element","tag":"code","props":{"code":"kind: pipeline\nname: build\ntype: docker\n\nplatform:\n os: linux\n arch: amd64\n\nsteps:\n - name: build\n image: node:16\n commands:\n - yarn\n - yarn generate\n - rm -rf ./docs\n - mv ./.output/public ./docs\n - touch ./docs/.nojekyll\n - name: publish\n image: plugins/gh-pages\n settings:\n target_branch: gh-pages\n username:\n from_secret: github_username\n password:\n from_secret: github_token\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"kind: pipeline\nname: build\ntype: docker\n\nplatform:\n os: linux\n arch: amd64\n\nsteps:\n - name: build\n image: node:16\n commands:\n - yarn\n - yarn generate\n - rm -rf ./docs\n - mv ./.output/public ./docs\n - touch ./docs/.nojekyll\n - name: publish\n image: plugins/gh-pages\n settings:\n target_branch: gh-pages\n username:\n from_secret: github_username\n password:\n from_secret: github_token\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here we're moving "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"./.output/public"}]},{"type":"text","value":" to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"./docs"}]},{"type":"text","value":", because #nuxt creates symlink for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docs"}]},{"type":"text","value":" and git can't work with that."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Also we create "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".nojekyll"}]},{"type":"text","value":" at the root of repo, so github's internal engine won't "},{"type":"element","tag":"a","props":{"href":"https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/","rel":["nofollow"]},"children":[{"type":"text","value":"ignore files that start with underscore"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"additional-reading"},"children":[{"type":"text","value":"Additional reading"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://plugins.drone.io/plugins/gh-pages","rel":["nofollow"]},"children":[{"type":"text","value":"Drone Github Pages Documentation"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/","rel":["nofollow"]},"children":[{"type":"text","value":"Bypassing Jekyll on GitHub Pages"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To deploy github pages with "},{"type":"element","tag":"a","props":{"href":"Drone-ci"},"children":[{"type":"text","value":"Drone-ci"}]},{"type":"text","value":" you will need "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".drone.yml"}]},{"type":"text","value":" as specified below. You also should define secrets "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"github_username"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"github_token"}]},{"type":"text","value":" (get it "},{"type":"element","tag":"a","props":{"href":"https://github.com/settings/tokens","rel":["nofollow"]},"children":[{"type":"text","value":"here"}]},{"type":"text","value":") in your drone's repository setup."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Github repository should be named as "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"yourname.github.io"}]},{"type":"text","value":" and it could be accessed at "},{"type":"element","tag":"a","props":{"href":"https://yourname.github.io/","rel":["nofollow"]},"children":[{"type":"text","value":"https://yourname.github.io/"}]},{"type":"text","value":". Otherwise it'll be available at "},{"type":"element","tag":"a","props":{"href":"https://yourname.github.io/repo-name/","rel":["nofollow"]},"children":[{"type":"text","value":"https://yourname.github.io/repo-name/"}]},{"type":"text","value":", what you might not like."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You should create branch named "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gh-pages"}]},{"type":"text","value":" in that repo and setup GH Pages at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"https://github.com/<yourusername>/<yourusername>.github.io/settings/pages"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This config will update "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gh-pages"}]},{"type":"text","value":" branch in your project, which will contain only generated content. I know, that's bad, but there's no better way to do that with generic drone plugins."}]},{"type":"element","tag":"code","props":{"code":"kind: pipeline\nname: build\ntype: docker\n\nplatform:\n os: linux\n arch: amd64\n\nsteps:\n - name: build\n image: node:16\n commands:\n - yarn\n - yarn generate\n - rm -rf ./docs\n - mv ./.output/public ./docs\n - touch ./docs/.nojekyll\n - name: publish\n image: plugins/gh-pages\n settings:\n target_branch: gh-pages\n username:\n from_secret: github_username\n password:\n from_secret: github_token\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6714bd"},"children":[{"type":"text","value":"kind"}]},{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-32b0f5"},"children":[{"type":"text","value":"pipeline"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6714bd"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-32b0f5"},"children":[{"type":"text","value":"build"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6714bd"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-32b0f5"},"children":[{"type":"text","value":"docker"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6714bd"},"children":[{"type":"text","value":"platform"}]},{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6714bd"},"children":[{"type":"text","value":"os"}]},{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-32b0f5"},"children":[{"type":"text","value":"linux"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6714bd"},"children":[{"type":"text","value":"arch"}]},{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-32b0f5"},"children":[{"type":"text","value":"amd64"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6714bd"},"children":[{"type":"text","value":"steps"}]},{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-6714bd"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-32b0f5"},"children":[{"type":"text","value":"build"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6714bd"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-32b0f5"},"children":[{"type":"text","value":"node:16"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6714bd"},"children":[{"type":"text","value":"commands"}]},{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-32b0f5"},"children":[{"type":"text","value":"yarn"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-32b0f5"},"children":[{"type":"text","value":"yarn generate"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-32b0f5"},"children":[{"type":"text","value":"rm -rf ./docs"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-32b0f5"},"children":[{"type":"text","value":"mv ./.output/public ./docs"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-32b0f5"},"children":[{"type":"text","value":"touch ./docs/.nojekyll"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-6714bd"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-32b0f5"},"children":[{"type":"text","value":"publish"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6714bd"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-32b0f5"},"children":[{"type":"text","value":"plugins/gh-pages"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6714bd"},"children":[{"type":"text","value":"settings"}]},{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6714bd"},"children":[{"type":"text","value":"target_branch"}]},{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-32b0f5"},"children":[{"type":"text","value":"gh-pages"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6714bd"},"children":[{"type":"text","value":"username"}]},{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6714bd"},"children":[{"type":"text","value":"from_secret"}]},{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-32b0f5"},"children":[{"type":"text","value":"github_username"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6714bd"},"children":[{"type":"text","value":"password"}]},{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6714bd"},"children":[{"type":"text","value":"from_secret"}]},{"type":"element","tag":"span","props":{"class":"ct-fe1215"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-32b0f5"},"children":[{"type":"text","value":"github_token"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here we're moving "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"./.output/public"}]},{"type":"text","value":" to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"./docs"}]},{"type":"text","value":", because #nuxt creates symlink for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docs"}]},{"type":"text","value":" and git can't work with that."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Also we create "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".nojekyll"}]},{"type":"text","value":" at the root of repo, so github's internal engine won't "},{"type":"element","tag":"a","props":{"href":"https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/","rel":["nofollow"]},"children":[{"type":"text","value":"ignore files that start with underscore"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"additional-reading"},"children":[{"type":"text","value":"Additional reading"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://plugins.drone.io/plugins/gh-pages","rel":["nofollow"]},"children":[{"type":"text","value":"Drone Github Pages Documentation"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/","rel":["nofollow"]},"children":[{"type":"text","value":"Bypassing Jekyll on GitHub Pages"}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-32b0f5{color:#A5D6FF}.ct-fe1215{color:#C9D1D9}.ct-6714bd{color:#7EE787}.light .ct-6714bd{color:#268BD2}.light .ct-fe1215{color:#657B83}.light .ct-32b0f5{color:#2AA198}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"additional-reading","depth":2,"text":"Additional reading"}]}},"_type":"markdown","_id":"content:Docker:Github pages with drone-ci.md","_source":"content","_file":"Docker/Github pages with drone-ci.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/docker/github-pages-with-drone-ci","_dir":"docker","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Github Pages With Drone Ci","description":"To deploy github pages with Drone-ci you will need .drone.yml as specified below. You also should define secrets github_username and github_token (get it here) in your drone's repository setup.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To deploy github pages with "},{"type":"element","tag":"a","props":{"href":"Drone-ci"},"children":[{"type":"text","value":"Drone-ci"}]},{"type":"text","value":" you will need "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".drone.yml"}]},{"type":"text","value":" as specified below. You also should define secrets "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"github_username"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"github_token"}]},{"type":"text","value":" (get it "},{"type":"element","tag":"a","props":{"href":"https://github.com/settings/tokens","rel":["nofollow"]},"children":[{"type":"text","value":"here"}]},{"type":"text","value":") in your drone's repository setup."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Github repository should be named as "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"yourname.github.io"}]},{"type":"text","value":" and it could be accessed at "},{"type":"element","tag":"a","props":{"href":"https://yourname.github.io/","rel":["nofollow"]},"children":[{"type":"text","value":"https://yourname.github.io/"}]},{"type":"text","value":". Otherwise it'll be available at "},{"type":"element","tag":"a","props":{"href":"https://yourname.github.io/repo-name/","rel":["nofollow"]},"children":[{"type":"text","value":"https://yourname.github.io/repo-name/"}]},{"type":"text","value":", what you might not like."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You should create branch named "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gh-pages"}]},{"type":"text","value":" in that repo and setup GH Pages at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"https://github.com/<yourusername>/<yourusername>.github.io/settings/pages"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This config will update "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gh-pages"}]},{"type":"text","value":" branch in your project, which will contain only generated content. I know, that's bad, but there's no better way to do that with generic drone plugins."}]},{"type":"element","tag":"code","props":{"code":"kind: pipeline\nname: build\ntype: docker\n\nplatform:\n os: linux\n arch: amd64\n\nsteps:\n - name: build\n image: node:16\n commands:\n - yarn\n - yarn generate\n - rm -rf ./docs\n - mv ./.output/public ./docs\n - touch ./docs/.nojekyll\n - name: publish\n image: plugins/gh-pages\n settings:\n target_branch: gh-pages\n username:\n from_secret: github_username\n password:\n from_secret: github_token\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"kind: pipeline\nname: build\ntype: docker\n\nplatform:\n os: linux\n arch: amd64\n\nsteps:\n - name: build\n image: node:16\n commands:\n - yarn\n - yarn generate\n - rm -rf ./docs\n - mv ./.output/public ./docs\n - touch ./docs/.nojekyll\n - name: publish\n image: plugins/gh-pages\n settings:\n target_branch: gh-pages\n username:\n from_secret: github_username\n password:\n from_secret: github_token\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here we're moving "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"./.output/public"}]},{"type":"text","value":" to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"./docs"}]},{"type":"text","value":", because #nuxt creates symlink for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docs"}]},{"type":"text","value":" and git can't work with that."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Also we create "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".nojekyll"}]},{"type":"text","value":" at the root of repo, so github's internal engine won't "},{"type":"element","tag":"a","props":{"href":"https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/","rel":["nofollow"]},"children":[{"type":"text","value":"ignore files that start with underscore"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"additional-reading"},"children":[{"type":"text","value":"Additional reading"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://plugins.drone.io/plugins/gh-pages","rel":["nofollow"]},"children":[{"type":"text","value":"Drone Github Pages Documentation"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/","rel":["nofollow"]},"children":[{"type":"text","value":"Bypassing Jekyll on GitHub Pages"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To deploy github pages with "},{"type":"element","tag":"a","props":{"href":"Drone-ci"},"children":[{"type":"text","value":"Drone-ci"}]},{"type":"text","value":" you will need "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".drone.yml"}]},{"type":"text","value":" as specified below. You also should define secrets "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"github_username"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"github_token"}]},{"type":"text","value":" (get it "},{"type":"element","tag":"a","props":{"href":"https://github.com/settings/tokens","rel":["nofollow"]},"children":[{"type":"text","value":"here"}]},{"type":"text","value":") in your drone's repository setup."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Github repository should be named as "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"yourname.github.io"}]},{"type":"text","value":" and it could be accessed at "},{"type":"element","tag":"a","props":{"href":"https://yourname.github.io/","rel":["nofollow"]},"children":[{"type":"text","value":"https://yourname.github.io/"}]},{"type":"text","value":". Otherwise it'll be available at "},{"type":"element","tag":"a","props":{"href":"https://yourname.github.io/repo-name/","rel":["nofollow"]},"children":[{"type":"text","value":"https://yourname.github.io/repo-name/"}]},{"type":"text","value":", what you might not like."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You should create branch named "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gh-pages"}]},{"type":"text","value":" in that repo and setup GH Pages at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"https://github.com/<yourusername>/<yourusername>.github.io/settings/pages"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This config will update "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gh-pages"}]},{"type":"text","value":" branch in your project, which will contain only generated content. I know, that's bad, but there's no better way to do that with generic drone plugins."}]},{"type":"element","tag":"code","props":{"code":"kind: pipeline\nname: build\ntype: docker\n\nplatform:\n os: linux\n arch: amd64\n\nsteps:\n - name: build\n image: node:16\n commands:\n - yarn\n - yarn generate\n - rm -rf ./docs\n - mv ./.output/public ./docs\n - touch ./docs/.nojekyll\n - name: publish\n image: plugins/gh-pages\n settings:\n target_branch: gh-pages\n username:\n from_secret: github_username\n password:\n from_secret: github_token\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-95ec6a"},"children":[{"type":"text","value":"kind"}]},{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ec86cd"},"children":[{"type":"text","value":"pipeline"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-95ec6a"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ec86cd"},"children":[{"type":"text","value":"build"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-95ec6a"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ec86cd"},"children":[{"type":"text","value":"docker"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-95ec6a"},"children":[{"type":"text","value":"platform"}]},{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-95ec6a"},"children":[{"type":"text","value":"os"}]},{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ec86cd"},"children":[{"type":"text","value":"linux"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-95ec6a"},"children":[{"type":"text","value":"arch"}]},{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ec86cd"},"children":[{"type":"text","value":"amd64"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-95ec6a"},"children":[{"type":"text","value":"steps"}]},{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-95ec6a"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ec86cd"},"children":[{"type":"text","value":"build"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-95ec6a"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ec86cd"},"children":[{"type":"text","value":"node:16"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-95ec6a"},"children":[{"type":"text","value":"commands"}]},{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-ec86cd"},"children":[{"type":"text","value":"yarn"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-ec86cd"},"children":[{"type":"text","value":"yarn generate"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-ec86cd"},"children":[{"type":"text","value":"rm -rf ./docs"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-ec86cd"},"children":[{"type":"text","value":"mv ./.output/public ./docs"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-ec86cd"},"children":[{"type":"text","value":"touch ./docs/.nojekyll"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-95ec6a"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ec86cd"},"children":[{"type":"text","value":"publish"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-95ec6a"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ec86cd"},"children":[{"type":"text","value":"plugins/gh-pages"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-95ec6a"},"children":[{"type":"text","value":"settings"}]},{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-95ec6a"},"children":[{"type":"text","value":"target_branch"}]},{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ec86cd"},"children":[{"type":"text","value":"gh-pages"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-95ec6a"},"children":[{"type":"text","value":"username"}]},{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-95ec6a"},"children":[{"type":"text","value":"from_secret"}]},{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ec86cd"},"children":[{"type":"text","value":"github_username"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-95ec6a"},"children":[{"type":"text","value":"password"}]},{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-95ec6a"},"children":[{"type":"text","value":"from_secret"}]},{"type":"element","tag":"span","props":{"class":"ct-bf5097"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ec86cd"},"children":[{"type":"text","value":"github_token"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here we're moving "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"./.output/public"}]},{"type":"text","value":" to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"./docs"}]},{"type":"text","value":", because #nuxt creates symlink for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docs"}]},{"type":"text","value":" and git can't work with that."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Also we create "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".nojekyll"}]},{"type":"text","value":" at the root of repo, so github's internal engine won't "},{"type":"element","tag":"a","props":{"href":"https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/","rel":["nofollow"]},"children":[{"type":"text","value":"ignore files that start with underscore"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"additional-reading"},"children":[{"type":"text","value":"Additional reading"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://plugins.drone.io/plugins/gh-pages","rel":["nofollow"]},"children":[{"type":"text","value":"Drone Github Pages Documentation"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/","rel":["nofollow"]},"children":[{"type":"text","value":"Bypassing Jekyll on GitHub Pages"}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-ec86cd{color:#A5D6FF}.ct-bf5097{color:#C9D1D9}.ct-95ec6a{color:#7EE787}.light .ct-95ec6a{color:#268BD2}.light .ct-bf5097{color:#657B83}.light .ct-ec86cd{color:#2AA198}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"additional-reading","depth":2,"text":"Additional reading"}]}},"_type":"markdown","_id":"content:Docker:Github pages with drone-ci.md","_source":"content","_file":"Docker/Github pages with drone-ci.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/sxx5hHqDHF.json b/docs/api/_content/query/sxx5hHqDHF.json
new file mode 100644
index 0000000..c1cc3ec
--- /dev/null
+++ b/docs/api/_content/query/sxx5hHqDHF.json
@@ -0,0 +1 @@
+{"_path":"/docker/common-things-with-docker-mailserver","_dir":"docker","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Common Things With Docker Mailserver","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"1-docker-mailserver-ssl-alert-number-42"},"children":[{"type":"text","value":"1. docker-mailserver SSL alert number 42"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"I was getting following error after setting up TLS certificates in docker-mailserver after setting it up with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"letsencrypt"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"TLS handshaking: SSL_accept() failed: error:14094412:SSL routines:ssl3_read_bytes:sslv3 alert bad certificate: SSL alert number 42\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"TLS handshaking: SSL_accept() failed: error:14094412:SSL routines:ssl3_read_bytes:sslv3 alert bad certificate: SSL alert number 42\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The problem was caused by two reasons"}]},{"type":"element","tag":"h3","props":{"id":"11-letsencrypt-and-wildcard-domains"},"children":[{"type":"text","value":"1.1. Letsencrypt and wildcard domains"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"My "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"MX"}]},{"type":"text","value":" domain was "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"example.com"}]},{"type":"text","value":", bu "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"letsencrypt"}]},{"type":"text","value":" have been set up with wildcard certificate on "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"*.example.com"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"So, specifying "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"SSL_MODE=letsencrypt"}]},{"type":"text","value":" made it searching for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/letsencrypt/mail.example.com"}]},{"type":"text","value":", when it was just "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/letsencrypt/example.com"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"SOLUTION"}]},{"type":"text","value":":"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Change .env file to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"SSL_MODE=manual"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"SSL_KEY_PATH=/etc/letsencrypt/example.com/fullchain.pem"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"SSL_KEY_PATH=/etc/letsencrypt/example.com/privkey.pem"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don't forget to modify "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docker-compose"}]},{"type":"text","value":" volumes and pass certs from host filesystem. Note: they're not "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mail.example.com"}]},{"type":"text","value":", they're just "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"example.com"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This "},{"type":"element","tag":"a","props":{"href":"https://github.com/docker-mailserver/docker-mailserver/issues/1607","rel":["nofollow"]},"children":[{"type":"text","value":"ticket"}]},{"type":"text","value":" describes it well."}]},{"type":"element","tag":"h3","props":{"id":"12-docker-was-using-internal-hostname-of-docker-mailserver"},"children":[{"type":"text","value":"1.2. Docker was using internal hostname of docker-mailserver"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Internal hostname for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docker-mailserver"}]},{"type":"text","value":" was just "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mail"}]},{"type":"text","value":", and other container tried to send emails to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mail:25"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"SOLUTION:"}]},{"type":"text","value":" change internal hostname in your app settings to actual, specified in your certificates and MX record."}]},{"type":"element","tag":"h3","props":{"id":"2-docker-mailserver-not-listening-on-25-port-smtp"},"children":[{"type":"text","value":"2. docker-mailserver not listening on 25 port (SMTP)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Solution was to add quotes in your docker compose, just like that:"}]},{"type":"element","tag":"code","props":{"code":" ports:\n - \"25:25\"\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":" ports:\n - \"25:25\"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This "},{"type":"element","tag":"a","props":{"href":"https://github.com/docker-mailserver/docker-mailserver/issues/684#issuecomment-322029794","rel":["nofollow"]},"children":[{"type":"text","value":"ticket"}]},{"type":"text","value":" solved it"}]},{"type":"element","tag":"h3","props":{"id":"3-connect-to-docker-mailserver-from-other-docker-compose"},"children":[{"type":"text","value":"3. Connect to docker-mailserver from other docker-compose"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"I've had "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mailserver/compose.yaml"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"application/compose.yaml"}]},{"type":"text","value":" and needed to connect "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"application"}]},{"type":"text","value":" to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mailserver"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"// application/compose.yaml\napp:\n networks:\n - shared\nnetworks:\n shared:\n driver: bridge\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// application/compose.yaml\napp:\n networks:\n - shared\nnetworks:\n shared:\n driver: bridge\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"/// mailserver/compose.yaml\nmail:\n networks:\n - \"application_shared\"\nnetworks:\n application_shared:\n external: true\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"/// mailserver/compose.yaml\nmail:\n networks:\n - \"application_shared\"\nnetworks:\n application_shared:\n external: true\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"4-how-to-convert-dkim-mailtxt-to-dns-record"},"children":[{"type":"text","value":"4. How to convert DKIM mail.txt to DNS record"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"My "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mail.txt"}]},{"type":"text","value":" was like:"}]},{"type":"element","tag":"code","props":{"code":"mail._domainkey IN TXT ( \"v=DKIM1; h=sha256; k=rsa; \"\n \"p=sOmEJuNkLiKeRaNdOmOrLikeThat\"\n \"eVeNmOrERANdOmStuFf\" ) ; ----- DKIM key mail for example.com\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"mail._domainkey IN TXT ( \"v=DKIM1; h=sha256; k=rsa; \"\n \"p=sOmEJuNkLiKeRaNdOmOrLikeThat\"\n \"eVeNmOrERANdOmStuFf\" ) ; ----- DKIM key mail for example.com\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"SOLUTION"}]},{"type":"text","value":": concatenate all strings inside round brackets:"}]},{"type":"element","tag":"code","props":{"code":"v=DKIM1; h=sha256; k=rsa; p=sOmEJuNkLiKeRaNdOmOrLikeThateVeNmOrERANdOmStuFf\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"v=DKIM1; h=sha256; k=rsa; p=sOmEJuNkLiKeRaNdOmOrLikeThateVeNmOrERANdOmStuFf\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"And add them as a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"TXT"}]},{"type":"text","value":" record on my DNS provider control panel under "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mail._domainkey"}]},{"type":"text","value":" record."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Solution was right in "},{"type":"element","tag":"a","props":{"href":"https://docker-mailserver.github.io/docker-mailserver/edge/config/best-practices/dkim_dmarc_spf/#dkim-dns","rel":["nofollow"]},"children":[{"type":"text","value":"official documentation"}]},{"type":"text","value":", just hidden a little bit."}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"1-docker-mailserver-ssl-alert-number-42"},"children":[{"type":"text","value":"1. docker-mailserver SSL alert number 42"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"I was getting following error after setting up TLS certificates in docker-mailserver after setting it up with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"letsencrypt"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"TLS handshaking: SSL_accept() failed: error:14094412:SSL routines:ssl3_read_bytes:sslv3 alert bad certificate: SSL alert number 42\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"TLS handshaking: SSL_accept() failed: error:14094412:SSL routines:ssl3_read_bytes:sslv3 alert bad certificate: SSL alert number 42"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The problem was caused by two reasons"}]},{"type":"element","tag":"h3","props":{"id":"11-letsencrypt-and-wildcard-domains"},"children":[{"type":"text","value":"1.1. Letsencrypt and wildcard domains"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"My "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"MX"}]},{"type":"text","value":" domain was "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"example.com"}]},{"type":"text","value":", bu "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"letsencrypt"}]},{"type":"text","value":" have been set up with wildcard certificate on "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"*.example.com"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"So, specifying "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"SSL_MODE=letsencrypt"}]},{"type":"text","value":" made it searching for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/letsencrypt/mail.example.com"}]},{"type":"text","value":", when it was just "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/etc/letsencrypt/example.com"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"SOLUTION"}]},{"type":"text","value":":"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Change .env file to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"SSL_MODE=manual"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"SSL_KEY_PATH=/etc/letsencrypt/example.com/fullchain.pem"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"SSL_KEY_PATH=/etc/letsencrypt/example.com/privkey.pem"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don't forget to modify "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docker-compose"}]},{"type":"text","value":" volumes and pass certs from host filesystem. Note: they're not "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mail.example.com"}]},{"type":"text","value":", they're just "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"example.com"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This "},{"type":"element","tag":"a","props":{"href":"https://github.com/docker-mailserver/docker-mailserver/issues/1607","rel":["nofollow"]},"children":[{"type":"text","value":"ticket"}]},{"type":"text","value":" describes it well."}]},{"type":"element","tag":"h3","props":{"id":"12-docker-was-using-internal-hostname-of-docker-mailserver"},"children":[{"type":"text","value":"1.2. Docker was using internal hostname of docker-mailserver"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Internal hostname for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docker-mailserver"}]},{"type":"text","value":" was just "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mail"}]},{"type":"text","value":", and other container tried to send emails to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mail:25"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"SOLUTION:"}]},{"type":"text","value":" change internal hostname in your app settings to actual, specified in your certificates and MX record."}]},{"type":"element","tag":"h3","props":{"id":"2-docker-mailserver-not-listening-on-25-port-smtp"},"children":[{"type":"text","value":"2. docker-mailserver not listening on 25 port (SMTP)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Solution was to add quotes in your docker compose, just like that:"}]},{"type":"element","tag":"code","props":{"code":" ports:\n - \"25:25\"\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-da08ce"},"children":[{"type":"text","value":"ports"}]},{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-5d2a12"},"children":[{"type":"text","value":"\"25:25\""}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This "},{"type":"element","tag":"a","props":{"href":"https://github.com/docker-mailserver/docker-mailserver/issues/684#issuecomment-322029794","rel":["nofollow"]},"children":[{"type":"text","value":"ticket"}]},{"type":"text","value":" solved it"}]},{"type":"element","tag":"h3","props":{"id":"3-connect-to-docker-mailserver-from-other-docker-compose"},"children":[{"type":"text","value":"3. Connect to docker-mailserver from other docker-compose"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"I've had "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mailserver/compose.yaml"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"application/compose.yaml"}]},{"type":"text","value":" and needed to connect "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"application"}]},{"type":"text","value":" to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mailserver"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"// application/compose.yaml\napp:\n networks:\n - shared\nnetworks:\n shared:\n driver: bridge\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5d2a12"},"children":[{"type":"text","value":"// application/compose.yaml"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-da08ce"},"children":[{"type":"text","value":"app"}]},{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-da08ce"},"children":[{"type":"text","value":"networks"}]},{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-5d2a12"},"children":[{"type":"text","value":"shared"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-da08ce"},"children":[{"type":"text","value":"networks"}]},{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-da08ce"},"children":[{"type":"text","value":"shared"}]},{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-da08ce"},"children":[{"type":"text","value":"driver"}]},{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-5d2a12"},"children":[{"type":"text","value":"bridge"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"/// mailserver/compose.yaml\nmail:\n networks:\n - \"application_shared\"\nnetworks:\n application_shared:\n external: true\n","language":"yaml"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5d2a12"},"children":[{"type":"text","value":"/// mailserver/compose.yaml"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-da08ce"},"children":[{"type":"text","value":"mail"}]},{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-da08ce"},"children":[{"type":"text","value":"networks"}]},{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-5d2a12"},"children":[{"type":"text","value":"\"application_shared\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-da08ce"},"children":[{"type":"text","value":"networks"}]},{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-da08ce"},"children":[{"type":"text","value":"application_shared"}]},{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-da08ce"},"children":[{"type":"text","value":"external"}]},{"type":"element","tag":"span","props":{"class":"ct-fe4aeb"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-c5561e"},"children":[{"type":"text","value":"true"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"4-how-to-convert-dkim-mailtxt-to-dns-record"},"children":[{"type":"text","value":"4. How to convert DKIM mail.txt to DNS record"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"My "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mail.txt"}]},{"type":"text","value":" was like:"}]},{"type":"element","tag":"code","props":{"code":"mail._domainkey IN TXT ( \"v=DKIM1; h=sha256; k=rsa; \"\n \"p=sOmEJuNkLiKeRaNdOmOrLikeThat\"\n \"eVeNmOrERANdOmStuFf\" ) ; ----- DKIM key mail for example.com\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"mail._domainkey IN TXT ( \"v=DKIM1; h=sha256; k=rsa; \"\n \"p=sOmEJuNkLiKeRaNdOmOrLikeThat\"\n \"eVeNmOrERANdOmStuFf\" ) ; ----- DKIM key mail for example.com"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"SOLUTION"}]},{"type":"text","value":": concatenate all strings inside round brackets:"}]},{"type":"element","tag":"code","props":{"code":"v=DKIM1; h=sha256; k=rsa; p=sOmEJuNkLiKeRaNdOmOrLikeThateVeNmOrERANdOmStuFf\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"v=DKIM1; h=sha256; k=rsa; p=sOmEJuNkLiKeRaNdOmOrLikeThateVeNmOrERANdOmStuFf"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"And add them as a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"TXT"}]},{"type":"text","value":" record on my DNS provider control panel under "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"mail._domainkey"}]},{"type":"text","value":" record."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Solution was right in "},{"type":"element","tag":"a","props":{"href":"https://docker-mailserver.github.io/docker-mailserver/edge/config/best-practices/dkim_dmarc_spf/#dkim-dns","rel":["nofollow"]},"children":[{"type":"text","value":"official documentation"}]},{"type":"text","value":", just hidden a little bit."}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-c5561e{color:#79C0FF}.ct-5d2a12{color:#A5D6FF}.ct-da08ce{color:#7EE787}.ct-fe4aeb{color:#C9D1D9}.light .ct-fe4aeb{color:#657B83}.light .ct-da08ce{color:#268BD2}.light .ct-5d2a12{color:#2AA198}.light .ct-c5561e{color:#B58900}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"1-docker-mailserver-ssl-alert-number-42","depth":2,"text":"1. docker-mailserver SSL alert number 42","children":[{"id":"11-letsencrypt-and-wildcard-domains","depth":3,"text":"1.1. Letsencrypt and wildcard domains"},{"id":"12-docker-was-using-internal-hostname-of-docker-mailserver","depth":3,"text":"1.2. Docker was using internal hostname of docker-mailserver"},{"id":"2-docker-mailserver-not-listening-on-25-port-smtp","depth":3,"text":"2. docker-mailserver not listening on 25 port (SMTP)"},{"id":"3-connect-to-docker-mailserver-from-other-docker-compose","depth":3,"text":"3. Connect to docker-mailserver from other docker-compose"},{"id":"4-how-to-convert-dkim-mailtxt-to-dns-record","depth":3,"text":"4. How to convert DKIM mail.txt to DNS record"}]}]}},"_type":"markdown","_id":"content:Docker:Common things with docker-mailserver.md","_source":"content","_file":"Docker/Common things with docker-mailserver.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/v8MG1Q8wMg.json b/docs/api/_content/query/v8MG1Q8wMg.json
index e6bcbbe..2f0f4a0 100644
--- a/docs/api/_content/query/v8MG1Q8wMg.json
+++ b/docs/api/_content/query/v8MG1Q8wMg.json
@@ -1 +1 @@
-{"_path":"/docker/seed-dump-inside-docker","_dir":"docker","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Seed Dump Inside Docker","description":"If you need to seed .sql dump in #docker container, just run this command. Also you can try to rsync file with SSH to get it from remote host.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you need to seed "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".sql"}]},{"type":"text","value":" dump in #docker container, just run this command. Also you can try to "},{"type":"element","tag":"a","props":{"href":"/linux/Rsync%20file%20with%20SSH"},"children":[{"type":"text","value":"rsync file with SSH"}]},{"type":"text","value":" to get it from remote host."}]},{"type":"element","tag":"code","props":{"code":"#####\n# usage: ./script.sh \"/path/to/dump.sql\"\n#####\n\nDUMP_PATH=$1\nCONTAINER=\"db\"\nUSER=root\nPASSWORD=password\nDB=database\n\ncat \"$DUMP_PATH\" | docker exec -i $CONTAINER mysql -u$USER -p$PASSWORD $DB\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"#####\n# usage: ./script.sh \"/path/to/dump.sql\"\n#####\n\nDUMP_PATH=$1\nCONTAINER=\"db\"\nUSER=root\nPASSWORD=password\nDB=database\n\ncat \"$DUMP_PATH\" | docker exec -i $CONTAINER mysql -u$USER -p$PASSWORD $DB\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you need to seed "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".sql"}]},{"type":"text","value":" dump in #docker container, just run this command. Also you can try to "},{"type":"element","tag":"a","props":{"href":"/linux/Rsync%20file%20with%20SSH"},"children":[{"type":"text","value":"rsync file with SSH"}]},{"type":"text","value":" to get it from remote host."}]},{"type":"element","tag":"code","props":{"code":"#####\n# usage: ./script.sh \"/path/to/dump.sql\"\n#####\n\nDUMP_PATH=$1\nCONTAINER=\"db\"\nUSER=root\nPASSWORD=password\nDB=database\n\ncat \"$DUMP_PATH\" | docker exec -i $CONTAINER mysql -u$USER -p$PASSWORD $DB\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-773aeb"},"children":[{"type":"text","value":"#####"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-773aeb"},"children":[{"type":"text","value":"# usage: ./script.sh \"/path/to/dump.sql\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-773aeb"},"children":[{"type":"text","value":"#####"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9df562"},"children":[{"type":"text","value":"DUMP_PATH="}]},{"type":"element","tag":"span","props":{"class":"ct-d1eb62"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-0873da"},"children":[{"type":"text","value":"1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9df562"},"children":[{"type":"text","value":"CONTAINER="}]},{"type":"element","tag":"span","props":{"class":"ct-273241"},"children":[{"type":"text","value":"\"db\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9df562"},"children":[{"type":"text","value":"USER=root"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9df562"},"children":[{"type":"text","value":"PASSWORD=password"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9df562"},"children":[{"type":"text","value":"DB=database"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9df562"},"children":[{"type":"text","value":"cat "}]},{"type":"element","tag":"span","props":{"class":"ct-273241"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-d1eb62"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-0873da"},"children":[{"type":"text","value":"DUMP_PATH"}]},{"type":"element","tag":"span","props":{"class":"ct-273241"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-9df562"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-05f29a"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-9df562"},"children":[{"type":"text","value":" docker "}]},{"type":"element","tag":"span","props":{"class":"ct-6472e8"},"children":[{"type":"text","value":"exec"}]},{"type":"element","tag":"span","props":{"class":"ct-9df562"},"children":[{"type":"text","value":" -i "}]},{"type":"element","tag":"span","props":{"class":"ct-d1eb62"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-0873da"},"children":[{"type":"text","value":"CONTAINER"}]},{"type":"element","tag":"span","props":{"class":"ct-9df562"},"children":[{"type":"text","value":" mysql -u"}]},{"type":"element","tag":"span","props":{"class":"ct-d1eb62"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-0873da"},"children":[{"type":"text","value":"USER"}]},{"type":"element","tag":"span","props":{"class":"ct-9df562"},"children":[{"type":"text","value":" -p"}]},{"type":"element","tag":"span","props":{"class":"ct-d1eb62"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-0873da"},"children":[{"type":"text","value":"PASSWORD"}]},{"type":"element","tag":"span","props":{"class":"ct-9df562"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d1eb62"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-0873da"},"children":[{"type":"text","value":"DB"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-6472e8{color:#79C0FF}.ct-05f29a{color:#FF7B72}.ct-273241{color:#A5D6FF}.ct-0873da{color:#C9D1D9}.ct-d1eb62{color:#C9D1D9}.ct-9df562{color:#C9D1D9}.ct-773aeb{color:#8B949E}.light .ct-773aeb{color:#93A1A1}.light .ct-9df562{color:#657B83}.light .ct-d1eb62{color:#859900}.light .ct-0873da{color:#268BD2}.light .ct-273241{color:#2AA198}.light .ct-05f29a{color:#859900}.light .ct-6472e8{color:#268BD2}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Docker:Seed dump inside docker.md","_source":"content","_file":"Docker/Seed dump inside docker.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/docker/seed-dump-inside-docker","_dir":"docker","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Seed Dump Inside Docker","description":"If you need to seed .sql dump in #docker container, just run this command. Also you can try to rsync file with SSH to get it from remote host.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you need to seed "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".sql"}]},{"type":"text","value":" dump in #docker container, just run this command. Also you can try to "},{"type":"element","tag":"a","props":{"href":"/linux/Rsync%20file%20with%20SSH"},"children":[{"type":"text","value":"rsync file with SSH"}]},{"type":"text","value":" to get it from remote host."}]},{"type":"element","tag":"code","props":{"code":"#####\n# usage: ./script.sh \"/path/to/dump.sql\"\n#####\n\nDUMP_PATH=$1\nCONTAINER=\"db\"\nUSER=root\nPASSWORD=password\nDB=database\n\ncat \"$DUMP_PATH\" | docker exec -i $CONTAINER mysql -u$USER -p$PASSWORD $DB\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"#####\n# usage: ./script.sh \"/path/to/dump.sql\"\n#####\n\nDUMP_PATH=$1\nCONTAINER=\"db\"\nUSER=root\nPASSWORD=password\nDB=database\n\ncat \"$DUMP_PATH\" | docker exec -i $CONTAINER mysql -u$USER -p$PASSWORD $DB\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you need to seed "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".sql"}]},{"type":"text","value":" dump in #docker container, just run this command. Also you can try to "},{"type":"element","tag":"a","props":{"href":"/linux/Rsync%20file%20with%20SSH"},"children":[{"type":"text","value":"rsync file with SSH"}]},{"type":"text","value":" to get it from remote host."}]},{"type":"element","tag":"code","props":{"code":"#####\n# usage: ./script.sh \"/path/to/dump.sql\"\n#####\n\nDUMP_PATH=$1\nCONTAINER=\"db\"\nUSER=root\nPASSWORD=password\nDB=database\n\ncat \"$DUMP_PATH\" | docker exec -i $CONTAINER mysql -u$USER -p$PASSWORD $DB\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ebdffd"},"children":[{"type":"text","value":"#####"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ebdffd"},"children":[{"type":"text","value":"# usage: ./script.sh \"/path/to/dump.sql\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ebdffd"},"children":[{"type":"text","value":"#####"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-82f16d"},"children":[{"type":"text","value":"DUMP_PATH="}]},{"type":"element","tag":"span","props":{"class":"ct-942add"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-a8c357"},"children":[{"type":"text","value":"1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-82f16d"},"children":[{"type":"text","value":"CONTAINER="}]},{"type":"element","tag":"span","props":{"class":"ct-ee805d"},"children":[{"type":"text","value":"\"db\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-82f16d"},"children":[{"type":"text","value":"USER=root"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-82f16d"},"children":[{"type":"text","value":"PASSWORD=password"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-82f16d"},"children":[{"type":"text","value":"DB=database"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-82f16d"},"children":[{"type":"text","value":"cat "}]},{"type":"element","tag":"span","props":{"class":"ct-ee805d"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-942add"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-a8c357"},"children":[{"type":"text","value":"DUMP_PATH"}]},{"type":"element","tag":"span","props":{"class":"ct-ee805d"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-82f16d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d9cdb7"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-82f16d"},"children":[{"type":"text","value":" docker "}]},{"type":"element","tag":"span","props":{"class":"ct-695b92"},"children":[{"type":"text","value":"exec"}]},{"type":"element","tag":"span","props":{"class":"ct-82f16d"},"children":[{"type":"text","value":" -i "}]},{"type":"element","tag":"span","props":{"class":"ct-942add"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-a8c357"},"children":[{"type":"text","value":"CONTAINER"}]},{"type":"element","tag":"span","props":{"class":"ct-82f16d"},"children":[{"type":"text","value":" mysql -u"}]},{"type":"element","tag":"span","props":{"class":"ct-942add"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-a8c357"},"children":[{"type":"text","value":"USER"}]},{"type":"element","tag":"span","props":{"class":"ct-82f16d"},"children":[{"type":"text","value":" -p"}]},{"type":"element","tag":"span","props":{"class":"ct-942add"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-a8c357"},"children":[{"type":"text","value":"PASSWORD"}]},{"type":"element","tag":"span","props":{"class":"ct-82f16d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-942add"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-a8c357"},"children":[{"type":"text","value":"DB"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-695b92{color:#79C0FF}.ct-d9cdb7{color:#FF7B72}.ct-ee805d{color:#A5D6FF}.ct-a8c357{color:#C9D1D9}.ct-942add{color:#C9D1D9}.ct-82f16d{color:#C9D1D9}.ct-ebdffd{color:#8B949E}.light .ct-ebdffd{color:#93A1A1}.light .ct-82f16d{color:#657B83}.light .ct-942add{color:#859900}.light .ct-a8c357{color:#268BD2}.light .ct-ee805d{color:#2AA198}.light .ct-d9cdb7{color:#859900}.light .ct-695b92{color:#268BD2}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Docker:Seed dump inside docker.md","_source":"content","_file":"Docker/Seed dump inside docker.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/wOOxKhEEuc.json b/docs/api/_content/query/wOOxKhEEuc.json
index 3964f5b..b0e6066 100644
--- a/docs/api/_content/query/wOOxKhEEuc.json
+++ b/docs/api/_content/query/wOOxKhEEuc.json
@@ -1 +1 @@
-{"_path":"/frontend/webgl/rendering-without-blocking-in-a-worker","_dir":"webgl","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Rendering Without Blocking In A Worker","description":"Rendering items on #canvas in main loop might cause interface freezes, preventing render process from executing properly by flooding execution stack with operations.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Rendering items on #canvas in main loop "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"might cause interface freezes"}]},{"type":"text","value":", preventing render process from executing properly by flooding execution stack with operations."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To handle it properly, we can start separate #worker thread, that will handle rendering in its own event loop, so that won't affect the source tab's event loop."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Workers can have access to "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Glossary/Transferable_objects","rel":["nofollow"]},"children":[{"type":"text","value":"Transferrable Objects"}]},{"type":"text","value":" from main thread by receiving memory address. "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"That's a lot faster than cloning"}]},{"type":"text","value":". In this case "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap","rel":["nofollow"]},"children":[{"type":"text","value":"ImageBitmap"}]},{"type":"text","value":" is transferrable."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Code for the main thread component:"}]},{"type":"element","tag":"code","props":{"code":"// main.ts\nconst instance = new Worker('./render-worker.ts');\nconst canvas = document.getElementById('view');\n\n// attaching event listener to worker\ninstance.onmessage = (event: MessageEvent) => {\n const ctx = canvas?.getContext(\"2d\");\n if (!ctx) {\n throw new Error(`Can't get 2D context`);\n }\n \n ctx.drawImage(event.data as ImageBitmap, 0, 0);\n}\n\n// sending canvas contents to worker\nconst renderInCanvas = () => {\n if (!canvas.current) {\n return;\n }\n \n createImageBitmap(canvas.current).then(image => {\n instance.postMessage(image, { transfer: [image] })\n });\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// main.ts\nconst instance = new Worker('./render-worker.ts');\nconst canvas = document.getElementById('view');\n\n// attaching event listener to worker\ninstance.onmessage = (event: MessageEvent) => {\n const ctx = canvas?.getContext(\"2d\");\n if (!ctx) {\n throw new Error(`Can't get 2D context`);\n }\n \n ctx.drawImage(event.data as ImageBitmap, 0, 0);\n}\n\n// sending canvas contents to worker\nconst renderInCanvas = () => {\n if (!canvas.current) {\n return;\n }\n \n createImageBitmap(canvas.current).then(image => {\n instance.postMessage(image, { transfer: [image] })\n });\n};\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Worker code:"}]},{"type":"element","tag":"code","props":{"code":"// render-worker.ts\nexport default () => {\n self.onmessage = (message: MessageEvent) => {\n const data = message.data;\n\n if (!(data instanceof ImageBitmap)) {\n throw new Error('Received unknown data')\n }\n\n // OffscreenCanvas can be set up inside workers\n const canvas = new OffscreenCanvas(data.width, data.height);\n const ctx = canvas.getContext(\"2d\");\n\n if (!ctx) {\n throw new Error(`Can't get 2D context`);\n }\n\n ctx.drawImage(data, 0, 0);\n\n // That will block execution inside worker for \n // a couple of seconds\n doHardRenderingStuffHere(ctx, data.width, data.height);\n\n // Sending resulting image back to main thread\n createImageBitmap(canvas).then((image) => {\n self.postMessage(image, { transfer: [image] });\n });\n };\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// render-worker.ts\nexport default () => {\n self.onmessage = (message: MessageEvent) => {\n const data = message.data;\n\n if (!(data instanceof ImageBitmap)) {\n throw new Error('Received unknown data')\n }\n\n // OffscreenCanvas can be set up inside workers\n const canvas = new OffscreenCanvas(data.width, data.height);\n const ctx = canvas.getContext(\"2d\");\n\n if (!ctx) {\n throw new Error(`Can't get 2D context`);\n }\n\n ctx.drawImage(data, 0, 0);\n\n // That will block execution inside worker for \n // a couple of seconds\n doHardRenderingStuffHere(ctx, data.width, data.height);\n\n // Sending resulting image back to main thread\n createImageBitmap(canvas).then((image) => {\n self.postMessage(image, { transfer: [image] });\n });\n };\n};\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Rendering items on #canvas in main loop "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"might cause interface freezes"}]},{"type":"text","value":", preventing render process from executing properly by flooding execution stack with operations."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To handle it properly, we can start separate #worker thread, that will handle rendering in its own event loop, so that won't affect the source tab's event loop."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Workers can have access to "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Glossary/Transferable_objects","rel":["nofollow"]},"children":[{"type":"text","value":"Transferrable Objects"}]},{"type":"text","value":" from main thread by receiving memory address. "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"That's a lot faster than cloning"}]},{"type":"text","value":". In this case "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap","rel":["nofollow"]},"children":[{"type":"text","value":"ImageBitmap"}]},{"type":"text","value":" is transferrable."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Code for the main thread component:"}]},{"type":"element","tag":"code","props":{"code":"// main.ts\nconst instance = new Worker('./render-worker.ts');\nconst canvas = document.getElementById('view');\n\n// attaching event listener to worker\ninstance.onmessage = (event: MessageEvent) => {\n const ctx = canvas?.getContext(\"2d\");\n if (!ctx) {\n throw new Error(`Can't get 2D context`);\n }\n \n ctx.drawImage(event.data as ImageBitmap, 0, 0);\n}\n\n// sending canvas contents to worker\nconst renderInCanvas = () => {\n if (!canvas.current) {\n return;\n }\n \n createImageBitmap(canvas.current).then(image => {\n instance.postMessage(image, { transfer: [image] })\n });\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab36bf"},"children":[{"type":"text","value":"// main.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0bce60"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-13794f"},"children":[{"type":"text","value":"instance"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ed2a5b"},"children":[{"type":"text","value":"Worker"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-4c8dcb"},"children":[{"type":"text","value":"'./render-worker.ts'"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0bce60"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-13794f"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"document"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ed2a5b"},"children":[{"type":"text","value":"getElementById"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-4c8dcb"},"children":[{"type":"text","value":"'view'"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab36bf"},"children":[{"type":"text","value":"// attaching event listener to worker"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"instance"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ed2a5b"},"children":[{"type":"text","value":"onmessage"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-36f108"},"children":[{"type":"text","value":"MessageEvent"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-0bce60"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0bce60"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-13794f"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-ed2a5b"},"children":[{"type":"text","value":"getContext"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-4c8dcb"},"children":[{"type":"text","value":"\"2d\""}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a16a39"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-4c8dcb"},"children":[{"type":"text","value":"`Can't get 2D context`"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ed2a5b"},"children":[{"type":"text","value":"drawImage"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"as"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-36f108"},"children":[{"type":"text","value":"ImageBitmap"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-681bbd"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-681bbd"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab36bf"},"children":[{"type":"text","value":"// sending canvas contents to worker"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0bce60"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ed2a5b"},"children":[{"type":"text","value":"renderInCanvas"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-0bce60"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ed2a5b"},"children":[{"type":"text","value":"createImageBitmap"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"class":"ct-ed2a5b"},"children":[{"type":"text","value":"then"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"instance"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ed2a5b"},"children":[{"type":"text","value":"postMessage"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":", { transfer: ["}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"] })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Worker code:"}]},{"type":"element","tag":"code","props":{"code":"// render-worker.ts\nexport default () => {\n self.onmessage = (message: MessageEvent) => {\n const data = message.data;\n\n if (!(data instanceof ImageBitmap)) {\n throw new Error('Received unknown data')\n }\n\n // OffscreenCanvas can be set up inside workers\n const canvas = new OffscreenCanvas(data.width, data.height);\n const ctx = canvas.getContext(\"2d\");\n\n if (!ctx) {\n throw new Error(`Can't get 2D context`);\n }\n\n ctx.drawImage(data, 0, 0);\n\n // That will block execution inside worker for \n // a couple of seconds\n doHardRenderingStuffHere(ctx, data.width, data.height);\n\n // Sending resulting image back to main thread\n createImageBitmap(canvas).then((image) => {\n self.postMessage(image, { transfer: [image] });\n });\n };\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab36bf"},"children":[{"type":"text","value":"// render-worker.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-61807b"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-e85a8f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-61807b"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-e85a8f"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-cb6926"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-e85a8f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3db1bc"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"self"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ed2a5b"},"children":[{"type":"text","value":"onmessage"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0bce60"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-13794f"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"message"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"instanceof"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-36f108"},"children":[{"type":"text","value":"ImageBitmap"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":")) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a16a39"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-4c8dcb"},"children":[{"type":"text","value":"'Received unknown data'"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ab36bf"},"children":[{"type":"text","value":"// OffscreenCanvas can be set up inside workers"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0bce60"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-13794f"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ed2a5b"},"children":[{"type":"text","value":"OffscreenCanvas"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0bce60"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-13794f"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ed2a5b"},"children":[{"type":"text","value":"getContext"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-4c8dcb"},"children":[{"type":"text","value":"\"2d\""}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6ca315"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a16a39"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-4c8dcb"},"children":[{"type":"text","value":"`Can't get 2D context`"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ed2a5b"},"children":[{"type":"text","value":"drawImage"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-681bbd"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-681bbd"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ab36bf"},"children":[{"type":"text","value":"// That will block execution inside worker for "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ab36bf"},"children":[{"type":"text","value":"// a couple of seconds"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ed2a5b"},"children":[{"type":"text","value":"doHardRenderingStuffHere"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ab36bf"},"children":[{"type":"text","value":"// Sending resulting image back to main thread"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ed2a5b"},"children":[{"type":"text","value":"createImageBitmap"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"class":"ct-ed2a5b"},"children":[{"type":"text","value":"then"}]},{"type":"element","tag":"span","props":{"class":"ct-0bce60"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"self"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ed2a5b"},"children":[{"type":"text","value":"postMessage"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":", { transfer: ["}]},{"type":"element","tag":"span","props":{"class":"ct-74181d"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"] });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-80dbaa"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-3db1bc{color:#C9D1D9}.ct-cb6926{color:#FF7B72}.ct-e85a8f{color:#FFA657}.ct-61807b{color:#FF7B72}.ct-681bbd{color:#79C0FF}.ct-a16a39{color:#79C0FF}.ct-36f108{color:#FFA657}.ct-74181d{color:#C9D1D9}.ct-4c8dcb{color:#A5D6FF}.ct-ed2a5b{color:#D2A8FF}.ct-6ca315{color:#FF7B72}.ct-13794f{color:#79C0FF}.ct-80dbaa{color:#C9D1D9}.ct-0bce60{color:#FF7B72}.ct-ab36bf{color:#8B949E}.light .ct-ab36bf{color:#93A1A1}.light .ct-0bce60{color:#073642}.light .ct-80dbaa{color:#657B83}.light .ct-13794f{color:#268BD2}.light .ct-6ca315{color:#859900}.light .ct-ed2a5b{color:#268BD2}.light .ct-4c8dcb{color:#2AA198}.light .ct-74181d{color:#268BD2}.light .ct-36f108{color:#268BD2}.light .ct-a16a39{color:#859900}.light .ct-681bbd{color:#D33682}.light .ct-61807b{color:#859900}.light .ct-e85a8f{color:#657B83}.light .ct-cb6926{color:#073642}.light .ct-3db1bc{color:#657B83}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Frontend:WebGL:Rendering without blocking in a Worker.md","_source":"content","_file":"Frontend/WebGL/Rendering without blocking in a Worker.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/frontend/webgl/rendering-without-blocking-in-a-worker","_dir":"webgl","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Rendering Without Blocking In A Worker","description":"Rendering items on #canvas in main loop might cause interface freezes, preventing render process from executing properly by flooding execution stack with operations.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Rendering items on #canvas in main loop "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"might cause interface freezes"}]},{"type":"text","value":", preventing render process from executing properly by flooding execution stack with operations."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To handle it properly, we can start separate #worker thread, that will handle rendering in its own event loop, so that won't affect the source tab's event loop."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Workers can have access to "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Glossary/Transferable_objects","rel":["nofollow"]},"children":[{"type":"text","value":"Transferrable Objects"}]},{"type":"text","value":" from main thread by receiving memory address. "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"That's a lot faster than cloning"}]},{"type":"text","value":". In this case "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap","rel":["nofollow"]},"children":[{"type":"text","value":"ImageBitmap"}]},{"type":"text","value":" is transferrable."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Code for the main thread component:"}]},{"type":"element","tag":"code","props":{"code":"// main.ts\nconst instance = new Worker('./render-worker.ts');\nconst canvas = document.getElementById('view');\n\n// attaching event listener to worker\ninstance.onmessage = (event: MessageEvent) => {\n const ctx = canvas?.getContext(\"2d\");\n if (!ctx) {\n throw new Error(`Can't get 2D context`);\n }\n \n ctx.drawImage(event.data as ImageBitmap, 0, 0);\n}\n\n// sending canvas contents to worker\nconst renderInCanvas = () => {\n if (!canvas.current) {\n return;\n }\n \n createImageBitmap(canvas.current).then(image => {\n instance.postMessage(image, { transfer: [image] })\n });\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// main.ts\nconst instance = new Worker('./render-worker.ts');\nconst canvas = document.getElementById('view');\n\n// attaching event listener to worker\ninstance.onmessage = (event: MessageEvent) => {\n const ctx = canvas?.getContext(\"2d\");\n if (!ctx) {\n throw new Error(`Can't get 2D context`);\n }\n \n ctx.drawImage(event.data as ImageBitmap, 0, 0);\n}\n\n// sending canvas contents to worker\nconst renderInCanvas = () => {\n if (!canvas.current) {\n return;\n }\n \n createImageBitmap(canvas.current).then(image => {\n instance.postMessage(image, { transfer: [image] })\n });\n};\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Worker code:"}]},{"type":"element","tag":"code","props":{"code":"// render-worker.ts\nexport default () => {\n self.onmessage = (message: MessageEvent) => {\n const data = message.data;\n\n if (!(data instanceof ImageBitmap)) {\n throw new Error('Received unknown data')\n }\n\n // OffscreenCanvas can be set up inside workers\n const canvas = new OffscreenCanvas(data.width, data.height);\n const ctx = canvas.getContext(\"2d\");\n\n if (!ctx) {\n throw new Error(`Can't get 2D context`);\n }\n\n ctx.drawImage(data, 0, 0);\n\n // That will block execution inside worker for \n // a couple of seconds\n doHardRenderingStuffHere(ctx, data.width, data.height);\n\n // Sending resulting image back to main thread\n createImageBitmap(canvas).then((image) => {\n self.postMessage(image, { transfer: [image] });\n });\n };\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// render-worker.ts\nexport default () => {\n self.onmessage = (message: MessageEvent) => {\n const data = message.data;\n\n if (!(data instanceof ImageBitmap)) {\n throw new Error('Received unknown data')\n }\n\n // OffscreenCanvas can be set up inside workers\n const canvas = new OffscreenCanvas(data.width, data.height);\n const ctx = canvas.getContext(\"2d\");\n\n if (!ctx) {\n throw new Error(`Can't get 2D context`);\n }\n\n ctx.drawImage(data, 0, 0);\n\n // That will block execution inside worker for \n // a couple of seconds\n doHardRenderingStuffHere(ctx, data.width, data.height);\n\n // Sending resulting image back to main thread\n createImageBitmap(canvas).then((image) => {\n self.postMessage(image, { transfer: [image] });\n });\n };\n};\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Rendering items on #canvas in main loop "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"might cause interface freezes"}]},{"type":"text","value":", preventing render process from executing properly by flooding execution stack with operations."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To handle it properly, we can start separate #worker thread, that will handle rendering in its own event loop, so that won't affect the source tab's event loop."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Workers can have access to "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Glossary/Transferable_objects","rel":["nofollow"]},"children":[{"type":"text","value":"Transferrable Objects"}]},{"type":"text","value":" from main thread by receiving memory address. "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"That's a lot faster than cloning"}]},{"type":"text","value":". In this case "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap","rel":["nofollow"]},"children":[{"type":"text","value":"ImageBitmap"}]},{"type":"text","value":" is transferrable."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Code for the main thread component:"}]},{"type":"element","tag":"code","props":{"code":"// main.ts\nconst instance = new Worker('./render-worker.ts');\nconst canvas = document.getElementById('view');\n\n// attaching event listener to worker\ninstance.onmessage = (event: MessageEvent) => {\n const ctx = canvas?.getContext(\"2d\");\n if (!ctx) {\n throw new Error(`Can't get 2D context`);\n }\n \n ctx.drawImage(event.data as ImageBitmap, 0, 0);\n}\n\n// sending canvas contents to worker\nconst renderInCanvas = () => {\n if (!canvas.current) {\n return;\n }\n \n createImageBitmap(canvas.current).then(image => {\n instance.postMessage(image, { transfer: [image] })\n });\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9baa47"},"children":[{"type":"text","value":"// main.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f8f6ea"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-99c685"},"children":[{"type":"text","value":"instance"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b87ec"},"children":[{"type":"text","value":"Worker"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0f9bbf"},"children":[{"type":"text","value":"'./render-worker.ts'"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f8f6ea"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-99c685"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"document"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8b87ec"},"children":[{"type":"text","value":"getElementById"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0f9bbf"},"children":[{"type":"text","value":"'view'"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9baa47"},"children":[{"type":"text","value":"// attaching event listener to worker"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"instance"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8b87ec"},"children":[{"type":"text","value":"onmessage"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f26505"},"children":[{"type":"text","value":"MessageEvent"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-f8f6ea"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f8f6ea"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-99c685"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-8b87ec"},"children":[{"type":"text","value":"getContext"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0f9bbf"},"children":[{"type":"text","value":"\"2d\""}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e37a18"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0f9bbf"},"children":[{"type":"text","value":"`Can't get 2D context`"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8b87ec"},"children":[{"type":"text","value":"drawImage"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"as"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f26505"},"children":[{"type":"text","value":"ImageBitmap"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-527554"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-527554"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9baa47"},"children":[{"type":"text","value":"// sending canvas contents to worker"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f8f6ea"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b87ec"},"children":[{"type":"text","value":"renderInCanvas"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-f8f6ea"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b87ec"},"children":[{"type":"text","value":"createImageBitmap"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"class":"ct-8b87ec"},"children":[{"type":"text","value":"then"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"instance"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8b87ec"},"children":[{"type":"text","value":"postMessage"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":", { transfer: ["}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"] })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Worker code:"}]},{"type":"element","tag":"code","props":{"code":"// render-worker.ts\nexport default () => {\n self.onmessage = (message: MessageEvent) => {\n const data = message.data;\n\n if (!(data instanceof ImageBitmap)) {\n throw new Error('Received unknown data')\n }\n\n // OffscreenCanvas can be set up inside workers\n const canvas = new OffscreenCanvas(data.width, data.height);\n const ctx = canvas.getContext(\"2d\");\n\n if (!ctx) {\n throw new Error(`Can't get 2D context`);\n }\n\n ctx.drawImage(data, 0, 0);\n\n // That will block execution inside worker for \n // a couple of seconds\n doHardRenderingStuffHere(ctx, data.width, data.height);\n\n // Sending resulting image back to main thread\n createImageBitmap(canvas).then((image) => {\n self.postMessage(image, { transfer: [image] });\n });\n };\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9baa47"},"children":[{"type":"text","value":"// render-worker.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-06f34b"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-188de8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-06f34b"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-188de8"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-1068a0"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-188de8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d00ff5"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"self"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8b87ec"},"children":[{"type":"text","value":"onmessage"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f8f6ea"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-99c685"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"message"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"instanceof"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f26505"},"children":[{"type":"text","value":"ImageBitmap"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":")) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e37a18"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0f9bbf"},"children":[{"type":"text","value":"'Received unknown data'"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9baa47"},"children":[{"type":"text","value":"// OffscreenCanvas can be set up inside workers"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f8f6ea"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-99c685"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b87ec"},"children":[{"type":"text","value":"OffscreenCanvas"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f8f6ea"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-99c685"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8b87ec"},"children":[{"type":"text","value":"getContext"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0f9bbf"},"children":[{"type":"text","value":"\"2d\""}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5659a8"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e37a18"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0f9bbf"},"children":[{"type":"text","value":"`Can't get 2D context`"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8b87ec"},"children":[{"type":"text","value":"drawImage"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-527554"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-527554"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9baa47"},"children":[{"type":"text","value":"// That will block execution inside worker for "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9baa47"},"children":[{"type":"text","value":"// a couple of seconds"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b87ec"},"children":[{"type":"text","value":"doHardRenderingStuffHere"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9baa47"},"children":[{"type":"text","value":"// Sending resulting image back to main thread"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b87ec"},"children":[{"type":"text","value":"createImageBitmap"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"class":"ct-8b87ec"},"children":[{"type":"text","value":"then"}]},{"type":"element","tag":"span","props":{"class":"ct-f8f6ea"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"self"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8b87ec"},"children":[{"type":"text","value":"postMessage"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":", { transfer: ["}]},{"type":"element","tag":"span","props":{"class":"ct-06555d"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"] });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fabed9"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-d00ff5{color:#C9D1D9}.ct-1068a0{color:#FF7B72}.ct-188de8{color:#FFA657}.ct-06f34b{color:#FF7B72}.ct-527554{color:#79C0FF}.ct-e37a18{color:#79C0FF}.ct-f26505{color:#FFA657}.ct-06555d{color:#C9D1D9}.ct-0f9bbf{color:#A5D6FF}.ct-8b87ec{color:#D2A8FF}.ct-5659a8{color:#FF7B72}.ct-99c685{color:#79C0FF}.ct-fabed9{color:#C9D1D9}.ct-f8f6ea{color:#FF7B72}.ct-9baa47{color:#8B949E}.light .ct-9baa47{color:#93A1A1}.light .ct-f8f6ea{color:#073642}.light .ct-fabed9{color:#657B83}.light .ct-99c685{color:#268BD2}.light .ct-5659a8{color:#859900}.light .ct-8b87ec{color:#268BD2}.light .ct-0f9bbf{color:#2AA198}.light .ct-06555d{color:#268BD2}.light .ct-f26505{color:#268BD2}.light .ct-e37a18{color:#859900}.light .ct-527554{color:#D33682}.light .ct-06f34b{color:#859900}.light .ct-188de8{color:#657B83}.light .ct-1068a0{color:#073642}.light .ct-d00ff5{color:#657B83}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Frontend:WebGL:Rendering without blocking in a Worker.md","_source":"content","_file":"Frontend/WebGL/Rendering without blocking in a Worker.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/api/_content/query/xbO7aWQkpQ.json b/docs/api/_content/query/xbO7aWQkpQ.json
index ce0a8a1..5807563 100644
--- a/docs/api/_content/query/xbO7aWQkpQ.json
+++ b/docs/api/_content/query/xbO7aWQkpQ.json
@@ -1 +1 @@
-{"_path":"/frontend/webgl/vertex-shaders","_dir":"webgl","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Vertex Shaders","description":"Read Basics of WebGL (Drawing a Cube) first.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read "},{"type":"element","tag":"a","props":{"href":"Basics%20of%20WebGL%20(Drawing%20a%20Cube)"},"children":[{"type":"text","value":"Basics of WebGL (Drawing a Cube)"}]},{"type":"text","value":" first."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" define vertice positions in 3D-space. That's just a function, that defines "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gl_Position"}]},{"type":"text","value":" value by applying different transformations to it."}]},{"type":"element","tag":"h2","props":{"id":"sample-code"},"children":[{"type":"text","value":"Sample code"}]},{"type":"element","tag":"code","props":{"code":"// current vertice position {x,y,z,w}\nattribute vec4 aVertexPosition;\n// final vertice position with all transformations applied,\n// that will be passed to Fragment Shader\nvarying vec4 v_positionWithOffset;\n// Parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(){\n // float array of 4 elements, same as [slide,slide,slide,1]\n vec4 scale=vec4(vec3(slide),1);\n // float array of 4 elements, same as [aspect,1,1,1]\n vec4 aspectRatioFix=vec4(aspect,vec3(1));\n // vertice position, multiplied with matrices of scale and aspect ratio\n gl_Position=aVertexPosition*scale*aspectRatioFix,\n // vertice offset, that will be passed to fragment shader\n v_positionWithOffset=gl_Position+vec4(1,1,1,1);\n}\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// current vertice position {x,y,z,w}\nattribute vec4 aVertexPosition;\n// final vertice position with all transformations applied,\n// that will be passed to Fragment Shader\nvarying vec4 v_positionWithOffset;\n// Parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(){\n // float array of 4 elements, same as [slide,slide,slide,1]\n vec4 scale=vec4(vec3(slide),1);\n // float array of 4 elements, same as [aspect,1,1,1]\n vec4 aspectRatioFix=vec4(aspect,vec3(1));\n // vertice position, multiplied with matrices of scale and aspect ratio\n gl_Position=aVertexPosition*scale*aspectRatioFix,\n // vertice offset, that will be passed to fragment shader\n v_positionWithOffset=gl_Position+vec4(1,1,1,1);\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"passing-parameters-to-vertexshader"},"children":[{"type":"text","value":"Passing parameters to VertexShader"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Search for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Uniforms"}]},{"type":"text","value":" "},{"type":"element","tag":"a","props":{"href":"https://open.gl/drawing","rel":["nofollow"]},"children":[{"type":"text","value":"at open.gl"}]},{"type":"text","value":" for further reading."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There're 3 ways to pass parameters."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"attribute"}]},{"type":"text","value":" are parameters, that won't change. Good for vertex buffers."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"uniform"}]},{"type":"text","value":" are meant to change over the time. Good for passing transformations."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varying"}]},{"type":"text","value":" are parameters, that's shared between Vertex and "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"h2","props":{"id":"applying-transformations"},"children":[{"type":"text","value":"Applying transformations"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Every vertice position is defined as "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{x,y,z,w}"}]},{"type":"text","value":", where "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"w"}]},{"type":"text","value":" is a common denominator, that's used to achieve fast coord transformations by multiplying number of square matrices with original vertice coordinates."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"We don't change vertice position buffer"}]},{"type":"text","value":", because it's slow when being run inside Javascript loop, we "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"pass transformation matrices"}]},{"type":"text","value":" instead and "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"multiply vertice positions with transformation matrices"}]},{"type":"text","value":" inside a Graphic Card's GPU, because that's what GPU made for."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Good explanation can be found here: "},{"type":"element","tag":"a","props":{"href":"https://open.gl/transformations","rel":["nofollow"]},"children":[{"type":"text","value":"open.gl"}]},{"type":"text","value":"."}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read "},{"type":"element","tag":"a","props":{"href":"Basics%20of%20WebGL%20(Drawing%20a%20Cube)"},"children":[{"type":"text","value":"Basics of WebGL (Drawing a Cube)"}]},{"type":"text","value":" first."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" define vertice positions in 3D-space. That's just a function, that defines "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gl_Position"}]},{"type":"text","value":" value by applying different transformations to it."}]},{"type":"element","tag":"h2","props":{"id":"sample-code"},"children":[{"type":"text","value":"Sample code"}]},{"type":"element","tag":"code","props":{"code":"// current vertice position {x,y,z,w}\nattribute vec4 aVertexPosition;\n// final vertice position with all transformations applied,\n// that will be passed to Fragment Shader\nvarying vec4 v_positionWithOffset;\n// Parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(){\n // float array of 4 elements, same as [slide,slide,slide,1]\n vec4 scale=vec4(vec3(slide),1);\n // float array of 4 elements, same as [aspect,1,1,1]\n vec4 aspectRatioFix=vec4(aspect,vec3(1));\n // vertice position, multiplied with matrices of scale and aspect ratio\n gl_Position=aVertexPosition*scale*aspectRatioFix,\n // vertice offset, that will be passed to fragment shader\n v_positionWithOffset=gl_Position+vec4(1,1,1,1);\n}\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf1472"},"children":[{"type":"text","value":"// current vertice position {x,y,z,w}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":"attribute vec4 aVertexPosition;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf1472"},"children":[{"type":"text","value":"// final vertice position with all transformations applied,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf1472"},"children":[{"type":"text","value":"// that will be passed to Fragment Shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":"varying vec4 v_positionWithOffset;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf1472"},"children":[{"type":"text","value":"// Parameters passed from Javascript loop"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":"uniform "}]},{"type":"element","tag":"span","props":{"class":"ct-439ac8"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":" slide;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":"uniform "}]},{"type":"element","tag":"span","props":{"class":"ct-439ac8"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":" aspect;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-439ac8"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6823c5"},"children":[{"type":"text","value":"main"}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":"(){"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bf1472"},"children":[{"type":"text","value":"// float array of 4 elements, same as [slide,slide,slide,1]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":" vec4 scale"}]},{"type":"element","tag":"span","props":{"class":"ct-f3cef3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6823c5"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-6823c5"},"children":[{"type":"text","value":"vec3"}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":"(slide),"}]},{"type":"element","tag":"span","props":{"class":"ct-5b280b"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bf1472"},"children":[{"type":"text","value":"// float array of 4 elements, same as [aspect,1,1,1]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":" vec4 aspectRatioFix"}]},{"type":"element","tag":"span","props":{"class":"ct-f3cef3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6823c5"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":"(aspect,"}]},{"type":"element","tag":"span","props":{"class":"ct-6823c5"},"children":[{"type":"text","value":"vec3"}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-5b280b"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":"));"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bf1472"},"children":[{"type":"text","value":"// vertice position, multiplied with matrices of scale and aspect ratio"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":" gl_Position"}]},{"type":"element","tag":"span","props":{"class":"ct-f3cef3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":"aVertexPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-f3cef3"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":"scale"}]},{"type":"element","tag":"span","props":{"class":"ct-f3cef3"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":"aspectRatioFix,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bf1472"},"children":[{"type":"text","value":"// vertice offset, that will be passed to fragment shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":" v_positionWithOffset"}]},{"type":"element","tag":"span","props":{"class":"ct-f3cef3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":"gl_Position"}]},{"type":"element","tag":"span","props":{"class":"ct-f3cef3"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-6823c5"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-5b280b"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-5b280b"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-5b280b"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-5b280b"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fda822"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"passing-parameters-to-vertexshader"},"children":[{"type":"text","value":"Passing parameters to VertexShader"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Search for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Uniforms"}]},{"type":"text","value":" "},{"type":"element","tag":"a","props":{"href":"https://open.gl/drawing","rel":["nofollow"]},"children":[{"type":"text","value":"at open.gl"}]},{"type":"text","value":" for further reading."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There're 3 ways to pass parameters."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"attribute"}]},{"type":"text","value":" are parameters, that won't change. Good for vertex buffers."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"uniform"}]},{"type":"text","value":" are meant to change over the time. Good for passing transformations."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varying"}]},{"type":"text","value":" are parameters, that's shared between Vertex and "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"h2","props":{"id":"applying-transformations"},"children":[{"type":"text","value":"Applying transformations"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Every vertice position is defined as "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{x,y,z,w}"}]},{"type":"text","value":", where "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"w"}]},{"type":"text","value":" is a common denominator, that's used to achieve fast coord transformations by multiplying number of square matrices with original vertice coordinates."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"We don't change vertice position buffer"}]},{"type":"text","value":", because it's slow when being run inside Javascript loop, we "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"pass transformation matrices"}]},{"type":"text","value":" instead and "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"multiply vertice positions with transformation matrices"}]},{"type":"text","value":" inside a Graphic Card's GPU, because that's what GPU made for."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Good explanation can be found here: "},{"type":"element","tag":"a","props":{"href":"https://open.gl/transformations","rel":["nofollow"]},"children":[{"type":"text","value":"open.gl"}]},{"type":"text","value":"."}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-5b280b{color:#79C0FF}.ct-f3cef3{color:#FF7B72}.ct-6823c5{color:#D2A8FF}.ct-439ac8{color:#FF7B72}.ct-fda822{color:#C9D1D9}.ct-bf1472{color:#8B949E}.light .ct-bf1472{color:#93A1A1}.light .ct-fda822{color:#657B83}.light .ct-439ac8{color:#073642}.light .ct-6823c5{color:#268BD2}.light .ct-f3cef3{color:#859900}.light .ct-5b280b{color:#D33682}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"sample-code","depth":2,"text":"Sample code"},{"id":"passing-parameters-to-vertexshader","depth":2,"text":"Passing parameters to VertexShader"},{"id":"applying-transformations","depth":2,"text":"Applying transformations"}]}},"_type":"markdown","_id":"content:Frontend:WebGL:Vertex Shaders.md","_source":"content","_file":"Frontend/WebGL/Vertex Shaders.md","_extension":"md"}
\ No newline at end of file
+{"_path":"/frontend/webgl/vertex-shaders","_dir":"webgl","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Vertex Shaders","description":"Read Basics of WebGL (Drawing a Cube) first.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read "},{"type":"element","tag":"a","props":{"href":"Basics%20of%20WebGL%20(Drawing%20a%20Cube)"},"children":[{"type":"text","value":"Basics of WebGL (Drawing a Cube)"}]},{"type":"text","value":" first."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" define vertice positions in 3D-space. That's just a function, that defines "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gl_Position"}]},{"type":"text","value":" value by applying different transformations to it."}]},{"type":"element","tag":"h2","props":{"id":"sample-code"},"children":[{"type":"text","value":"Sample code"}]},{"type":"element","tag":"code","props":{"code":"// current vertice position {x,y,z,w}\nattribute vec4 aVertexPosition;\n// final vertice position with all transformations applied,\n// that will be passed to Fragment Shader\nvarying vec4 v_positionWithOffset;\n// Parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(){\n // float array of 4 elements, same as [slide,slide,slide,1]\n vec4 scale=vec4(vec3(slide),1);\n // float array of 4 elements, same as [aspect,1,1,1]\n vec4 aspectRatioFix=vec4(aspect,vec3(1));\n // vertice position, multiplied with matrices of scale and aspect ratio\n gl_Position=aVertexPosition*scale*aspectRatioFix,\n // vertice offset, that will be passed to fragment shader\n v_positionWithOffset=gl_Position+vec4(1,1,1,1);\n}\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// current vertice position {x,y,z,w}\nattribute vec4 aVertexPosition;\n// final vertice position with all transformations applied,\n// that will be passed to Fragment Shader\nvarying vec4 v_positionWithOffset;\n// Parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(){\n // float array of 4 elements, same as [slide,slide,slide,1]\n vec4 scale=vec4(vec3(slide),1);\n // float array of 4 elements, same as [aspect,1,1,1]\n vec4 aspectRatioFix=vec4(aspect,vec3(1));\n // vertice position, multiplied with matrices of scale and aspect ratio\n gl_Position=aVertexPosition*scale*aspectRatioFix,\n // vertice offset, that will be passed to fragment shader\n v_positionWithOffset=gl_Position+vec4(1,1,1,1);\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"passing-parameters-to-vertexshader"},"children":[{"type":"text","value":"Passing parameters to VertexShader"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Search for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Uniforms"}]},{"type":"text","value":" "},{"type":"element","tag":"a","props":{"href":"https://open.gl/drawing","rel":["nofollow"]},"children":[{"type":"text","value":"at open.gl"}]},{"type":"text","value":" for further reading."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There're 3 ways to pass parameters."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"attribute"}]},{"type":"text","value":" are parameters, that won't change. Good for vertex buffers."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"uniform"}]},{"type":"text","value":" are meant to change over the time. Good for passing transformations."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varying"}]},{"type":"text","value":" are parameters, that's shared between Vertex and "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"h2","props":{"id":"applying-transformations"},"children":[{"type":"text","value":"Applying transformations"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Every vertice position is defined as "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{x,y,z,w}"}]},{"type":"text","value":", where "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"w"}]},{"type":"text","value":" is a common denominator, that's used to achieve fast coord transformations by multiplying number of square matrices with original vertice coordinates."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"We don't change vertice position buffer"}]},{"type":"text","value":", because it's slow when being run inside Javascript loop, we "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"pass transformation matrices"}]},{"type":"text","value":" instead and "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"multiply vertice positions with transformation matrices"}]},{"type":"text","value":" inside a Graphic Card's GPU, because that's what GPU made for."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Good explanation can be found here: "},{"type":"element","tag":"a","props":{"href":"https://open.gl/transformations","rel":["nofollow"]},"children":[{"type":"text","value":"open.gl"}]},{"type":"text","value":"."}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read "},{"type":"element","tag":"a","props":{"href":"Basics%20of%20WebGL%20(Drawing%20a%20Cube)"},"children":[{"type":"text","value":"Basics of WebGL (Drawing a Cube)"}]},{"type":"text","value":" first."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Vertex Shaders"}]},{"type":"text","value":" define vertice positions in 3D-space. That's just a function, that defines "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gl_Position"}]},{"type":"text","value":" value by applying different transformations to it."}]},{"type":"element","tag":"h2","props":{"id":"sample-code"},"children":[{"type":"text","value":"Sample code"}]},{"type":"element","tag":"code","props":{"code":"// current vertice position {x,y,z,w}\nattribute vec4 aVertexPosition;\n// final vertice position with all transformations applied,\n// that will be passed to Fragment Shader\nvarying vec4 v_positionWithOffset;\n// Parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(){\n // float array of 4 elements, same as [slide,slide,slide,1]\n vec4 scale=vec4(vec3(slide),1);\n // float array of 4 elements, same as [aspect,1,1,1]\n vec4 aspectRatioFix=vec4(aspect,vec3(1));\n // vertice position, multiplied with matrices of scale and aspect ratio\n gl_Position=aVertexPosition*scale*aspectRatioFix,\n // vertice offset, that will be passed to fragment shader\n v_positionWithOffset=gl_Position+vec4(1,1,1,1);\n}\n","language":"c"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cab054"},"children":[{"type":"text","value":"// current vertice position {x,y,z,w}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":"attribute vec4 aVertexPosition;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cab054"},"children":[{"type":"text","value":"// final vertice position with all transformations applied,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cab054"},"children":[{"type":"text","value":"// that will be passed to Fragment Shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":"varying vec4 v_positionWithOffset;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cab054"},"children":[{"type":"text","value":"// Parameters passed from Javascript loop"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":"uniform "}]},{"type":"element","tag":"span","props":{"class":"ct-5f3977"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":" slide;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":"uniform "}]},{"type":"element","tag":"span","props":{"class":"ct-5f3977"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":" aspect;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5f3977"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-aae1d7"},"children":[{"type":"text","value":"main"}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":"(){"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cab054"},"children":[{"type":"text","value":"// float array of 4 elements, same as [slide,slide,slide,1]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":" vec4 scale"}]},{"type":"element","tag":"span","props":{"class":"ct-7abd18"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-aae1d7"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-aae1d7"},"children":[{"type":"text","value":"vec3"}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":"(slide),"}]},{"type":"element","tag":"span","props":{"class":"ct-10abe3"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cab054"},"children":[{"type":"text","value":"// float array of 4 elements, same as [aspect,1,1,1]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":" vec4 aspectRatioFix"}]},{"type":"element","tag":"span","props":{"class":"ct-7abd18"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-aae1d7"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":"(aspect,"}]},{"type":"element","tag":"span","props":{"class":"ct-aae1d7"},"children":[{"type":"text","value":"vec3"}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-10abe3"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":"));"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cab054"},"children":[{"type":"text","value":"// vertice position, multiplied with matrices of scale and aspect ratio"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":" gl_Position"}]},{"type":"element","tag":"span","props":{"class":"ct-7abd18"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":"aVertexPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-7abd18"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":"scale"}]},{"type":"element","tag":"span","props":{"class":"ct-7abd18"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":"aspectRatioFix,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cab054"},"children":[{"type":"text","value":"// vertice offset, that will be passed to fragment shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":" v_positionWithOffset"}]},{"type":"element","tag":"span","props":{"class":"ct-7abd18"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":"gl_Position"}]},{"type":"element","tag":"span","props":{"class":"ct-7abd18"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-aae1d7"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-10abe3"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-10abe3"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-10abe3"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-10abe3"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-61138c"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"passing-parameters-to-vertexshader"},"children":[{"type":"text","value":"Passing parameters to VertexShader"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Search for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Uniforms"}]},{"type":"text","value":" "},{"type":"element","tag":"a","props":{"href":"https://open.gl/drawing","rel":["nofollow"]},"children":[{"type":"text","value":"at open.gl"}]},{"type":"text","value":" for further reading."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There're 3 ways to pass parameters."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"attribute"}]},{"type":"text","value":" are parameters, that won't change. Good for vertex buffers."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"uniform"}]},{"type":"text","value":" are meant to change over the time. Good for passing transformations."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"varying"}]},{"type":"text","value":" are parameters, that's shared between Vertex and "},{"type":"element","tag":"a","props":{"href":"Fragment%20Shaders"},"children":[{"type":"text","value":"Fragment Shaders"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"h2","props":{"id":"applying-transformations"},"children":[{"type":"text","value":"Applying transformations"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Every vertice position is defined as "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{x,y,z,w}"}]},{"type":"text","value":", where "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"w"}]},{"type":"text","value":" is a common denominator, that's used to achieve fast coord transformations by multiplying number of square matrices with original vertice coordinates."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"We don't change vertice position buffer"}]},{"type":"text","value":", because it's slow when being run inside Javascript loop, we "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"pass transformation matrices"}]},{"type":"text","value":" instead and "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"multiply vertice positions with transformation matrices"}]},{"type":"text","value":" inside a Graphic Card's GPU, because that's what GPU made for."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Good explanation can be found here: "},{"type":"element","tag":"a","props":{"href":"https://open.gl/transformations","rel":["nofollow"]},"children":[{"type":"text","value":"open.gl"}]},{"type":"text","value":"."}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-10abe3{color:#79C0FF}.ct-7abd18{color:#FF7B72}.ct-aae1d7{color:#D2A8FF}.ct-5f3977{color:#FF7B72}.ct-61138c{color:#C9D1D9}.ct-cab054{color:#8B949E}.light .ct-cab054{color:#93A1A1}.light .ct-61138c{color:#657B83}.light .ct-5f3977{color:#073642}.light .ct-aae1d7{color:#268BD2}.light .ct-7abd18{color:#859900}.light .ct-10abe3{color:#D33682}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"sample-code","depth":2,"text":"Sample code"},{"id":"passing-parameters-to-vertexshader","depth":2,"text":"Passing parameters to VertexShader"},{"id":"applying-transformations","depth":2,"text":"Applying transformations"}]}},"_type":"markdown","_id":"content:Frontend:WebGL:Vertex Shaders.md","_source":"content","_file":"Frontend/WebGL/Vertex Shaders.md","_extension":"md"}
\ No newline at end of file
diff --git a/docs/blockchain/common-typescript-examples/_payload.js b/docs/blockchain/common-typescript-examples/_payload.js
index 0356897..9af899c 100644
--- a/docs/blockchain/common-typescript-examples/_payload.js
+++ b/docs/blockchain/common-typescript-examples/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av,aw,ax,ay,az,aA,aB,aC,aD,aE,aF,aG,aH,aI,aJ,aK,aL,aM,aN,aO,aP,aQ,aR,aS,aT,aU,aV,aW,aX,aY,aZ,a_,a$,ba,bb,bc,bd,be,bf,bg,bh,bi,bj,bk,bl,bm,bn,bo,bp,bq,br,bs,bt,bu,bv,bw,bx,by,bz,bA,bB,bC,bD,bE,bF,bG,bH,bI,bJ,bK,bL,bM,bN,bO,bP,bQ,bR,bS,bT,bU,bV,bW,bX,bY,bZ,b_,b$,ca,cb,cc){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:aY,_path:aZ},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-84dtRQ1pg6":{_path:aZ,_dir:"blockchain",_draft:ak,_partial:ak,_locale:"en",_empty:ak,title:aY,description:p,excerpt:{type:a_,children:[{type:a,tag:a$,props:{},children:[{type:a,tag:Y,props:{},children:[{type:c,value:ba},{type:a,tag:M,props:{href:Z,rel:[_]},children:[{type:c,value:Z}]}]},{type:a,tag:Y,props:{},children:[{type:c,value:bb},{type:a,tag:M,props:{href:bc},children:[{type:c,value:bd}]}]}]},{type:a,tag:u,props:{id:al},children:[{type:c,value:am}]},{type:a,tag:D,props:{},children:[{type:c,value:be},{type:a,tag:N,props:{},children:[{type:c,value:bf}]},{type:c,value:bg},{type:a,tag:M,props:{href:bh,rel:[_]},children:[{type:c,value:bi}]},{type:c,value:bj}]},{type:a,tag:j,props:{code:an,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:c,value:an}]}]}]},{type:a,tag:u,props:{id:ao},children:[{type:c,value:ap}]},{type:a,tag:j,props:{code:aq,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:c,value:aq}]}]}]},{type:a,tag:u,props:{id:ar},children:[{type:c,value:as}]},{type:a,tag:j,props:{code:at,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:c,value:at}]}]}]},{type:a,tag:u,props:{id:au},children:[{type:c,value:av}]},{type:a,tag:D,props:{},children:[{type:c,value:bk},{type:a,tag:N,props:{},children:[{type:c,value:O}]},{type:c,value:bl},{type:a,tag:N,props:{},children:[{type:c,value:P}]},{type:c,value:bm}]},{type:a,tag:j,props:{code:aw,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:c,value:aw}]}]}]},{type:a,tag:u,props:{id:ax},children:[{type:c,value:ay}]},{type:a,tag:D,props:{},children:[{type:c,value:bn}]},{type:a,tag:j,props:{code:az,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:c,value:az}]}]}]},{type:a,tag:u,props:{id:aA},children:[{type:c,value:aB}]},{type:a,tag:j,props:{code:aC,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:c,value:aC}]}]}]},{type:a,tag:u,props:{id:aD},children:[{type:c,value:aE}]},{type:a,tag:j,props:{code:aF,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:c,value:aF}]}]}]},{type:a,tag:u,props:{id:aG},children:[{type:c,value:aH}]},{type:a,tag:j,props:{code:aI,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:c,value:aI}]}]}]},{type:a,tag:u,props:{id:aJ},children:[{type:c,value:aK}]},{type:a,tag:D,props:{},children:[{type:c,value:bo}]},{type:a,tag:j,props:{code:aL,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:c,value:aL}]}]}]},{type:a,tag:D,props:{},children:[{type:c,value:bp}]},{type:a,tag:j,props:{code:aM,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:c,value:aM}]}]}]}]},body:{type:a_,children:[{type:a,tag:a$,props:{},children:[{type:a,tag:Y,props:{},children:[{type:c,value:ba},{type:a,tag:M,props:{href:Z,rel:[_]},children:[{type:c,value:Z}]}]},{type:a,tag:Y,props:{},children:[{type:c,value:bb},{type:a,tag:M,props:{href:bc},children:[{type:c,value:bd}]}]}]},{type:a,tag:u,props:{id:al},children:[{type:c,value:am}]},{type:a,tag:D,props:{},children:[{type:c,value:be},{type:a,tag:N,props:{},children:[{type:c,value:bf}]},{type:c,value:bg},{type:a,tag:M,props:{href:bh,rel:[_]},children:[{type:c,value:bi}]},{type:c,value:bj}]},{type:a,tag:j,props:{code:an,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:i},children:[{type:c,value:aN}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'web3'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:R}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:H},children:[{type:c,value:"\u002F\u002F URL of your node"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:o},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:bq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'https:\u002F\u002F...'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:R}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:i},children:[{type:c,value:"export"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:aO}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"givenProvider"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"||"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:bq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]}]}]}]}]},{type:a,tag:u,props:{id:ao},children:[{type:c,value:ap}]},{type:a,tag:j,props:{code:aq,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:aa},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:br},children:[{type:c,value:bs}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:bt},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:aa},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:bu},children:[{type:c,value:bv}]},{type:a,tag:b,props:{class:bt},children:[{type:c,value:bw}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:"ct-a77722"},children:[{type:c,value:"string"}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:bx}]},{type:a,tag:b,props:{class:aa},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:bs}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:bv}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]}]}]}]},{type:a,tag:u,props:{id:ar},children:[{type:c,value:as}]},{type:a,tag:j,props:{code:at,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:H},children:[{type:c,value:"\u002F\u002F first we need to authorize"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:o},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"authorize"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aP}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aQ}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:by}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'eth_requestAccounts'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" });"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:H},children:[{type:c,value:"\u002F\u002F then we can get wallet address"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:o},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"getCurrentAddressUser"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aP}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aQ}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"selectedAddress"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:R}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]}]}]}]},{type:a,tag:u,props:{id:au},children:[{type:c,value:av}]},{type:a,tag:D,props:{},children:[{type:c,value:bk},{type:a,tag:N,props:{},children:[{type:c,value:O}]},{type:c,value:bl},{type:a,tag:N,props:{},children:[{type:c,value:P}]},{type:c,value:bm}]},{type:a,tag:j,props:{code:aw,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:o},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"transfer"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" ({ "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:bz}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bA}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:bB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"getTransactionCount"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:bC}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ae}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:bD}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bE}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:bF}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:bG}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bH}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" gasLimit: "}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:af}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" gasPrice: "}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:af}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" nonce: "}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:bB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:af}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bI}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" };"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:bJ}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"EthUtil"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"toBuffer"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:bz}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:aR}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:aO}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"Transaction"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:bD}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aR}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"sign"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:bJ}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:bK}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aR}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"serialize"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ae}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:"this"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"sendSignedTransaction"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"`0x${"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:bK}]},{type:a,tag:b,props:{class:aS},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:ag}]},{type:a,tag:b,props:{class:aS},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'hex'"}]},{type:a,tag:b,props:{class:aS},children:[{type:c,value:ah}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"}`"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bL}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]}]}]}]},{type:a,tag:u,props:{id:ax},children:[{type:c,value:ay}]},{type:a,tag:D,props:{},children:[{type:c,value:bn}]},{type:a,tag:j,props:{code:az,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:i},children:[{type:c,value:aN}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bM}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bN}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:bO}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:R}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:o},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"estimateFee"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" ({"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bA}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:bC}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ae}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"estimateGas"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ai}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bE}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:bF}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:bG}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bH}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bI}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"asciiToHex"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:af}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" })."}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"call"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ae}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"fromWei"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:aT},children:[{type:c,value:bP}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:ag}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"())"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bQ}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"multiply"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:aT},children:[{type:c,value:bP}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:ag}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"()))"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bQ}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:ag}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"()"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bL}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]}]}]}]},{type:a,tag:u,props:{id:aA},children:[{type:c,value:aB}]},{type:a,tag:j,props:{code:aC,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:i},children:[{type:c,value:aN}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bM}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bN}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:bO}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:R}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aQ}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:bR}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'accountsChanged'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"callback"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]}]}]}]}]},{type:a,tag:u,props:{id:aD},children:[{type:c,value:aE}]},{type:a,tag:j,props:{code:aF,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:f},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:bR}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'chainChanged'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"handler"}]},{type:a,tag:b,props:{class:"ct-20099f"},children:[{type:c,value:bw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]}]}]}]}]},{type:a,tag:u,props:{id:aG},children:[{type:c,value:aH}]},{type:a,tag:j,props:{code:aI,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:f},children:[{type:c,value:aU}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:X}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aV}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ai}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bS}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'wallet_watchAsset'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" params: {"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" type: "}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'ERC20'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" options: {"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" address: "}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'0xb60e8dd61c5d32be8058bb8eb970870f07233155'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" symbol: "}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'FOO'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" decimals: "}]},{type:a,tag:b,props:{class:aW},children:[{type:c,value:bT}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" image: "}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'https:\u002F\u002Ffoo.io\u002Ftoken-image.svg'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" },"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" },"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bU}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:y},children:[{type:c,value:aV}]},{type:a,tag:b,props:{class:br},children:[{type:c,value:"then"}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:"(("}]},{type:a,tag:b,props:{class:bu},children:[{type:c,value:bV}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:bx}]},{type:a,tag:b,props:{class:aa},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:bW}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:bV}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aj}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:bX}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"log"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'FOO successfully added to wallet!'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ah}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bY}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"else"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"throw"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:aO}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:aT},children:[{type:c,value:"Error"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'Something went wrong.'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ah}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bZ}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bU}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aV}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:aX}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:bX}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:b_}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ah}]}]}]}]}]},{type:a,tag:u,props:{id:aJ},children:[{type:c,value:aK}]},{type:a,tag:D,props:{},children:[{type:c,value:bo}]},{type:a,tag:j,props:{code:aL,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:o},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"getChainID"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aP}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:by}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'eth_chainId'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" })"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]}]}]}]},{type:a,tag:D,props:{},children:[{type:c,value:bp}]},{type:a,tag:j,props:{code:aM,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:i},children:[{type:c,value:b$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aU}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ai}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bS}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'wallet_switchEthereumChain'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" params: [{ chainId: "}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:ca}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" }], "}]},{type:a,tag:b,props:{class:H},children:[{type:c,value:cb}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" });"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"} "}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:aX}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"switchError"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aj}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:H},children:[{type:c,value:"\u002F\u002F This error code indicates that the chain has not been added to MetaMask."}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:bW}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:b_}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"==="}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:aW},children:[{type:c,value:"4902"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aj}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:b$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aU}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ai}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" method: "}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'wallet_addEthereumChain'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" params: [{ "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" chainId: "}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:ca}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:H},children:[{type:c,value:cb}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" chainName: "}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'Ropsten Test Network'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" nativeCurrency: { "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" name: "}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:cc}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" symbol: "}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:cc}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" decimals: "}]},{type:a,tag:b,props:{class:aW},children:[{type:c,value:bT}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }, "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" rpcUrls: ["}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'https:\u002F\u002Fropsten.infura.io\u002Fv3\u002F9aa3d95b3bc440fa88ea12eaa4456161'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"], "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" blockExplorerUrls: ["}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'https:\u002F\u002Fropsten.etherscan.io'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"] "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }] ,"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" });"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bY}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:aX}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"addError"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aj}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:H},children:[{type:c,value:"\u002F\u002F handle \"add\" error"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bZ}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:H},children:[{type:c,value:"\u002F\u002F handle other \"switch\" errors"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-894d23{color:#79C0FF}.ct-20099f{color:#C9D1D9}.ct-2eedec{color:#79C0FF}.ct-fd0f2b{color:#A5D6FF}.ct-a77722{color:#79C0FF}.ct-ecd2f7{color:#FFA657}.ct-1f936b{color:#FF7B72}.ct-2b9286{color:#D2A8FF}.ct-de9cf1{color:#C9D1D9}.ct-dfc9dd{color:#FF7B72}.ct-a728a9{color:#D2A8FF}.ct-c91062{color:#79C0FF}.ct-fe8bf2{color:#FF7B72}.ct-0a81e7{color:#8B949E}.ct-e80568{color:#A5D6FF}.ct-58e1b5{color:#C9D1D9}.ct-ec66b6{color:#C9D1D9}.ct-414e6d{color:#FF7B72}.light .ct-414e6d{color:#859900}.light .ct-ec66b6{color:#657B83}.light .ct-58e1b5{color:#268BD2}.light .ct-e80568{color:#2AA198}.light .ct-0a81e7{color:#93A1A1}.light .ct-fe8bf2{color:#073642}.light .ct-c91062{color:#268BD2}.light .ct-a728a9{color:#268BD2}.light .ct-dfc9dd{color:#073642}.light .ct-de9cf1{color:#657B83}.light .ct-2b9286{color:#268BD2}.light .ct-1f936b{color:#859900}.light .ct-ecd2f7{color:#657B83}.light .ct-a77722{color:#859900}.light .ct-fd0f2b{color:#657B83}.light .ct-2eedec{color:#859900}.light .ct-20099f{color:#859900}.light .ct-894d23{color:#D33682}"}]}],toc:{title:p,searchDepth:C,depth:C,links:[{id:al,depth:C,text:am},{id:ao,depth:C,text:ap},{id:ar,depth:C,text:as},{id:au,depth:C,text:av},{id:ax,depth:C,text:ay},{id:aA,depth:C,text:aB},{id:aD,depth:C,text:aE},{id:aG,depth:C,text:aH},{id:aJ,depth:C,text:aK}]}},_type:"markdown",_id:"content:Blockchain:Common typescript examples.md",_source:"content",_file:"Blockchain\u002FCommon typescript examples.md",_extension:"md"}},prerenderedAt:1703695529045}}("element","span","text","ct-ec66b6","line","ct-58e1b5"," ",".","ct-414e6d","code","ct-a728a9","ct-e80568"," ","(","ct-fe8bf2","","typescript","pre","web3",",","h2","=","const","ct-c91062","ct-de9cf1"," {"," ",", ",2,"p"," ","utils","from","ct-0a81e7","await",");","=\u003E","}","a","code-inline","value","memo","eth",";","async"," (","return","request","toHex","ethereum","li","https:\u002F\u002Fmetamask.github.io\u002Ftest-dapp\u002F","nofollow","Web3","ct-dfc9dd","to","gasLimit","gasPrice","();","),","toString",")","({",") {",false,"connecting-to-node","Connecting to node","import Web3 from 'web3';\n\n\u002F\u002F URL of your node\nconst PROVIDER_URL = 'https:\u002F\u002F...';\n\nexport const web3 = new Web3(Web3.givenProvider || PROVIDER_URL);\n","getting-wallet-balance","Getting wallet balance","const getBalance = async (address: string) =\u003E {\n return await web3.eth.getBalance(address);\n}\n","getting-wallet-address","Getting wallet address","\u002F\u002F first we need to authorize\nconst authorize = async () =\u003E {\n await web3.currentProvider.request({ method: 'eth_requestAccounts' });\n}\n\n\u002F\u002F then we can get wallet address\nconst getCurrentAddressUser = () =\u003E {\n return web3.currentProvider.selectedAddress;\n}\n","sending-transaction","Sending transaction","\nconst transfer = async ({ \n from, \n to, \n value, \n memo, \n privateKey, \n gasLimit = 44000 \n}) =\u003E {\n const nonce = await web3.eth.getTransactionCount(from);\n const gasPrice = await web3.eth.getGasPrice();\n \n const rawTx = {\n from,\n to,\n value: web3.utils.toHex(Web3.utils.toWei(value, 'ether')),\n gasLimit: web3.utils.toHex(gasLimit),\n gasPrice: web3.utils.toHex(gasPrice),\n nonce: web3.utils.toHex(nonce),\n data: memo,\n };\n \n const privateKeyBuffer = EthUtil.toBuffer(privateKey);\n \n const tx = new Transaction(rawTx);\n \n tx.sign(privateKeyBuffer);\n const serializedTx = tx.serialize();\n \n return this.web3.eth.sendSignedTransaction(\n `0x${serializedTx.toString('hex')}`\n );\n}\n","estimating-transaction-fee","Estimating transaction FEE","import { web3 } from '.';\n\nconst estimateFee = async ({\n from,\n to,\n value,\n memo,\n}) =\u003E {\n const gasPrice = await web3.eth.getGasPrice();\n const gasLimit = await web3.eth.estimateGas({\n from,\n to,\n value: web3.utils.toHex(web3.utils.toWei(value, 'ether')),\n data: web3.utils.asciiToHex(memo),\n }).call();\n \n return web3.utils.fromWei(\n BigInt(gasPrice.toString())\n .multiply(BigInt(gasLimit.toString()))\n .toString()\n );\n}\n","subscribing-to-wallet-address-change","Subscribing to wallet address change","import { web3 } from '.';\n\nweb3.currentProvider.on('accountsChanged', callback);\n","watching-network-change","Watching network change","ethereum.on('chainChanged', handler: (chainId: string) =\u003E void);\n","adding-custom-token-to-wallet","Adding custom token to wallet","window.ethereum\n .request({\n method: 'wallet_watchAsset',\n params: {\n type: 'ERC20',\n options: {\n address: '0xb60e8dd61c5d32be8058bb8eb970870f07233155',\n symbol: 'FOO',\n decimals: 18,\n image: 'https:\u002F\u002Ffoo.io\u002Ftoken-image.svg',\n },\n },\n })\n .then((success) =\u003E {\n if (success) {\n console.log('FOO successfully added to wallet!')\n } else {\n throw new Error('Something went wrong.')\n }\n })\n .catch(console.error)\n","changing-network-to-custom","Changing network to custom","const getChainID = async () =\u003E {\n return ethereum.request({ method: 'eth_chainId' })\n}\n","try {\n await window.ethereum.request({\n method: 'wallet_switchEthereumChain',\n params: [{ chainId: '0x03' }], \u002F\u002F ropsten chainID (3) in hex\n });\n} catch (switchError) {\n \u002F\u002F This error code indicates that the chain has not been added to MetaMask.\n if (error.code === 4902) {\n try {\n await window.ethereum.request({\n method: 'wallet_addEthereumChain',\n params: [{ \n chainId: '0x03', \u002F\u002F ropsten chainID (3) in hex\n chainName: 'Ropsten Test Network', \n nativeCurrency: { \n name: 'ETH',\n symbol: 'ETH',\n decimals: 18\n }, \n rpcUrls: ['https:\u002F\u002Fropsten.infura.io\u002Fv3\u002F9aa3d95b3bc440fa88ea12eaa4456161'], \n blockExplorerUrls: ['https:\u002F\u002Fropsten.etherscan.io'] \n }] ,\n });\n } catch (addError) {\n \u002F\u002F handle \"add\" error\n }\n }\n \u002F\u002F handle other \"switch\" errors\n}\n","import","new"," () ","currentProvider","tx","ct-fd0f2b","ct-2eedec","window"," .","ct-894d23","catch","Common Typescript Examples","\u002Fblockchain\u002Fcommon-typescript-examples","root","ul","Simple #dapp example for tests: ","Interaction with smart contracts described in ","Smart%20contracts","Smart contracts","If #Metamask extension installed, ","Web3.givenProvider"," is available in global window. You can use ","https:\u002F\u002Finfura.io","Infura"," or your node instead:","Sending "," tokens with "," as value:","Useful to get fixed amount of tokens from user with pre-estimated fee.","Checking current chainId:","Asking wallet to change current network:","PROVIDER_URL","ct-2b9286","getBalance","ct-1f936b","ct-ecd2f7","address",":",") ","({ method: ","privateKey","}) ","nonce","getGasPrice","rawTx"," value: ","toWei","'ether'",")),"," data: ","privateKeyBuffer","serializedTx"," );"," { "," } ","'.'","BigInt"," .","on"," method: ","18"," })","success","if","console"," } "," }","error","try","'0x03'","\u002F\u002F ropsten chainID (3) in hex","'ETH'"))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av,aw,ax,ay,az,aA,aB,aC,aD,aE,aF,aG,aH,aI,aJ,aK,aL,aM,aN,aO,aP,aQ,aR,aS,aT,aU,aV,aW,aX,aY,aZ,a_,a$,ba,bb,bc,bd,be,bf,bg,bh,bi,bj,bk,bl,bm,bn,bo,bp,bq,br,bs,bt,bu,bv,bw,bx,by,bz,bA,bB,bC,bD,bE,bF,bG,bH,bI,bJ,bK,bL,bM,bN,bO,bP,bQ,bR,bS,bT,bU,bV,bW,bX,bY,bZ,b_,b$,ca,cb,cc){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:aY,_path:aZ},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-84dtRQ1pg6":{_path:aZ,_dir:"blockchain",_draft:ak,_partial:ak,_locale:"en",_empty:ak,title:aY,description:p,excerpt:{type:a_,children:[{type:a,tag:a$,props:{},children:[{type:a,tag:Y,props:{},children:[{type:c,value:ba},{type:a,tag:M,props:{href:Z,rel:[_]},children:[{type:c,value:Z}]}]},{type:a,tag:Y,props:{},children:[{type:c,value:bb},{type:a,tag:M,props:{href:bc},children:[{type:c,value:bd}]}]}]},{type:a,tag:u,props:{id:al},children:[{type:c,value:am}]},{type:a,tag:D,props:{},children:[{type:c,value:be},{type:a,tag:N,props:{},children:[{type:c,value:bf}]},{type:c,value:bg},{type:a,tag:M,props:{href:bh,rel:[_]},children:[{type:c,value:bi}]},{type:c,value:bj}]},{type:a,tag:j,props:{code:an,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:c,value:an}]}]}]},{type:a,tag:u,props:{id:ao},children:[{type:c,value:ap}]},{type:a,tag:j,props:{code:aq,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:c,value:aq}]}]}]},{type:a,tag:u,props:{id:ar},children:[{type:c,value:as}]},{type:a,tag:j,props:{code:at,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:c,value:at}]}]}]},{type:a,tag:u,props:{id:au},children:[{type:c,value:av}]},{type:a,tag:D,props:{},children:[{type:c,value:bk},{type:a,tag:N,props:{},children:[{type:c,value:O}]},{type:c,value:bl},{type:a,tag:N,props:{},children:[{type:c,value:P}]},{type:c,value:bm}]},{type:a,tag:j,props:{code:aw,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:c,value:aw}]}]}]},{type:a,tag:u,props:{id:ax},children:[{type:c,value:ay}]},{type:a,tag:D,props:{},children:[{type:c,value:bn}]},{type:a,tag:j,props:{code:az,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:c,value:az}]}]}]},{type:a,tag:u,props:{id:aA},children:[{type:c,value:aB}]},{type:a,tag:j,props:{code:aC,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:c,value:aC}]}]}]},{type:a,tag:u,props:{id:aD},children:[{type:c,value:aE}]},{type:a,tag:j,props:{code:aF,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:c,value:aF}]}]}]},{type:a,tag:u,props:{id:aG},children:[{type:c,value:aH}]},{type:a,tag:j,props:{code:aI,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:c,value:aI}]}]}]},{type:a,tag:u,props:{id:aJ},children:[{type:c,value:aK}]},{type:a,tag:D,props:{},children:[{type:c,value:bo}]},{type:a,tag:j,props:{code:aL,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:c,value:aL}]}]}]},{type:a,tag:D,props:{},children:[{type:c,value:bp}]},{type:a,tag:j,props:{code:aM,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:c,value:aM}]}]}]}]},body:{type:a_,children:[{type:a,tag:a$,props:{},children:[{type:a,tag:Y,props:{},children:[{type:c,value:ba},{type:a,tag:M,props:{href:Z,rel:[_]},children:[{type:c,value:Z}]}]},{type:a,tag:Y,props:{},children:[{type:c,value:bb},{type:a,tag:M,props:{href:bc},children:[{type:c,value:bd}]}]}]},{type:a,tag:u,props:{id:al},children:[{type:c,value:am}]},{type:a,tag:D,props:{},children:[{type:c,value:be},{type:a,tag:N,props:{},children:[{type:c,value:bf}]},{type:c,value:bg},{type:a,tag:M,props:{href:bh,rel:[_]},children:[{type:c,value:bi}]},{type:c,value:bj}]},{type:a,tag:j,props:{code:an,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:i},children:[{type:c,value:aN}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'web3'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:R}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:H},children:[{type:c,value:"\u002F\u002F URL of your node"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:o},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:bq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'https:\u002F\u002F...'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:R}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:i},children:[{type:c,value:"export"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:aO}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"givenProvider"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"||"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:bq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]}]}]}]}]},{type:a,tag:u,props:{id:ao},children:[{type:c,value:ap}]},{type:a,tag:j,props:{code:aq,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:aa},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:br},children:[{type:c,value:bs}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:bt},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:aa},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:bu},children:[{type:c,value:bv}]},{type:a,tag:b,props:{class:bt},children:[{type:c,value:bw}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:"ct-2bc6be"},children:[{type:c,value:"string"}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:bx}]},{type:a,tag:b,props:{class:aa},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:bs}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:bv}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]}]}]}]},{type:a,tag:u,props:{id:ar},children:[{type:c,value:as}]},{type:a,tag:j,props:{code:at,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:H},children:[{type:c,value:"\u002F\u002F first we need to authorize"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:o},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"authorize"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aP}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aQ}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:by}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'eth_requestAccounts'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" });"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:H},children:[{type:c,value:"\u002F\u002F then we can get wallet address"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:o},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"getCurrentAddressUser"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aP}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aQ}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"selectedAddress"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:R}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]}]}]}]},{type:a,tag:u,props:{id:au},children:[{type:c,value:av}]},{type:a,tag:D,props:{},children:[{type:c,value:bk},{type:a,tag:N,props:{},children:[{type:c,value:O}]},{type:c,value:bl},{type:a,tag:N,props:{},children:[{type:c,value:P}]},{type:c,value:bm}]},{type:a,tag:j,props:{code:aw,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:o},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"transfer"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" ({ "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:bz}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bA}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:bB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"getTransactionCount"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:bC}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ae}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:bD}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bE}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:bF}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:bG}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bH}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" gasLimit: "}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:af}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" gasPrice: "}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:af}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" nonce: "}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:bB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:af}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bI}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" };"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:bJ}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"EthUtil"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"toBuffer"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:bz}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:aR}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:aO}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"Transaction"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:bD}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aR}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"sign"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:bJ}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:bK}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aR}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"serialize"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ae}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:"this"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"sendSignedTransaction"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"`0x${"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:bK}]},{type:a,tag:b,props:{class:aS},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:ag}]},{type:a,tag:b,props:{class:aS},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'hex'"}]},{type:a,tag:b,props:{class:aS},children:[{type:c,value:ah}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"}`"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bL}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]}]}]}]},{type:a,tag:u,props:{id:ax},children:[{type:c,value:ay}]},{type:a,tag:D,props:{},children:[{type:c,value:bn}]},{type:a,tag:j,props:{code:az,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:i},children:[{type:c,value:aN}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bM}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bN}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:bO}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:R}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:o},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"estimateFee"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" ({"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bA}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:bC}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ae}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"estimateGas"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ai}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bE}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:bF}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:bG}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bH}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bI}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"asciiToHex"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:af}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" })."}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"call"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ae}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"fromWei"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:aT},children:[{type:c,value:bP}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:ag}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"())"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bQ}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"multiply"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:aT},children:[{type:c,value:bP}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:ag}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"()))"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bQ}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:ag}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"()"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bL}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]}]}]}]},{type:a,tag:u,props:{id:aA},children:[{type:c,value:aB}]},{type:a,tag:j,props:{code:aC,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:i},children:[{type:c,value:aN}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bM}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bN}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:bO}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:R}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aQ}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:bR}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'accountsChanged'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"callback"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]}]}]}]}]},{type:a,tag:u,props:{id:aD},children:[{type:c,value:aE}]},{type:a,tag:j,props:{code:aF,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:f},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:bR}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'chainChanged'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"handler"}]},{type:a,tag:b,props:{class:"ct-21a018"},children:[{type:c,value:bw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]}]}]}]}]},{type:a,tag:u,props:{id:aG},children:[{type:c,value:aH}]},{type:a,tag:j,props:{code:aI,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:f},children:[{type:c,value:aU}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:X}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aV}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ai}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bS}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'wallet_watchAsset'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" params: {"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" type: "}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'ERC20'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" options: {"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" address: "}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'0xb60e8dd61c5d32be8058bb8eb970870f07233155'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" symbol: "}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'FOO'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" decimals: "}]},{type:a,tag:b,props:{class:aW},children:[{type:c,value:bT}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" image: "}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'https:\u002F\u002Ffoo.io\u002Ftoken-image.svg'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" },"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" },"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bU}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:y},children:[{type:c,value:aV}]},{type:a,tag:b,props:{class:br},children:[{type:c,value:"then"}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:"(("}]},{type:a,tag:b,props:{class:bu},children:[{type:c,value:bV}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:bx}]},{type:a,tag:b,props:{class:aa},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:bW}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:bV}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aj}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:bX}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"log"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'FOO successfully added to wallet!'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ah}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bY}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"else"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"throw"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:aO}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:aT},children:[{type:c,value:"Error"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'Something went wrong.'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ah}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bZ}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bU}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aV}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:aX}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:bX}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:b_}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ah}]}]}]}]}]},{type:a,tag:u,props:{id:aJ},children:[{type:c,value:aK}]},{type:a,tag:D,props:{},children:[{type:c,value:bo}]},{type:a,tag:j,props:{code:aL,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:o},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"getChainID"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aP}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:by}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'eth_chainId'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" })"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]}]}]}]},{type:a,tag:D,props:{},children:[{type:c,value:bp}]},{type:a,tag:j,props:{code:aM,language:q},children:[{type:a,tag:r,props:{},children:[{type:a,tag:j,props:{__ignoreMap:p},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:i},children:[{type:c,value:b$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aU}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ai}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bS}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'wallet_switchEthereumChain'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" params: [{ chainId: "}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:ca}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" }], "}]},{type:a,tag:b,props:{class:H},children:[{type:c,value:cb}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" });"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"} "}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:aX}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"switchError"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aj}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:H},children:[{type:c,value:"\u002F\u002F This error code indicates that the chain has not been added to MetaMask."}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:bW}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:b_}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"==="}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:aW},children:[{type:c,value:"4902"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aj}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:b$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aU}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ai}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" method: "}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'wallet_addEthereumChain'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" params: [{ "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" chainId: "}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:ca}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:H},children:[{type:c,value:cb}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" chainName: "}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'Ropsten Test Network'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" nativeCurrency: { "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" name: "}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:cc}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" symbol: "}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:cc}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" decimals: "}]},{type:a,tag:b,props:{class:aW},children:[{type:c,value:bT}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }, "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" rpcUrls: ["}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'https:\u002F\u002Fropsten.infura.io\u002Fv3\u002F9aa3d95b3bc440fa88ea12eaa4456161'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"], "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" blockExplorerUrls: ["}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'https:\u002F\u002Fropsten.etherscan.io'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"] "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }] ,"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" });"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bY}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:aX}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"addError"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aj}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:H},children:[{type:c,value:"\u002F\u002F handle \"add\" error"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bZ}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:H},children:[{type:c,value:"\u002F\u002F handle other \"switch\" errors"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-814f05{color:#79C0FF}.ct-21a018{color:#C9D1D9}.ct-254526{color:#79C0FF}.ct-5229fc{color:#A5D6FF}.ct-2bc6be{color:#79C0FF}.ct-3b06ef{color:#FFA657}.ct-17069f{color:#FF7B72}.ct-bc1a9e{color:#D2A8FF}.ct-56d6bf{color:#C9D1D9}.ct-839cc0{color:#FF7B72}.ct-1119a1{color:#D2A8FF}.ct-f6a4a5{color:#79C0FF}.ct-1bac9e{color:#FF7B72}.ct-178967{color:#8B949E}.ct-7a16c5{color:#A5D6FF}.ct-ac9394{color:#C9D1D9}.ct-2d4545{color:#C9D1D9}.ct-d8c97c{color:#FF7B72}.light .ct-d8c97c{color:#859900}.light .ct-2d4545{color:#657B83}.light .ct-ac9394{color:#268BD2}.light .ct-7a16c5{color:#2AA198}.light .ct-178967{color:#93A1A1}.light .ct-1bac9e{color:#073642}.light .ct-f6a4a5{color:#268BD2}.light .ct-1119a1{color:#268BD2}.light .ct-839cc0{color:#073642}.light .ct-56d6bf{color:#657B83}.light .ct-bc1a9e{color:#268BD2}.light .ct-17069f{color:#859900}.light .ct-3b06ef{color:#657B83}.light .ct-2bc6be{color:#859900}.light .ct-5229fc{color:#657B83}.light .ct-254526{color:#859900}.light .ct-21a018{color:#859900}.light .ct-814f05{color:#D33682}"}]}],toc:{title:p,searchDepth:C,depth:C,links:[{id:al,depth:C,text:am},{id:ao,depth:C,text:ap},{id:ar,depth:C,text:as},{id:au,depth:C,text:av},{id:ax,depth:C,text:ay},{id:aA,depth:C,text:aB},{id:aD,depth:C,text:aE},{id:aG,depth:C,text:aH},{id:aJ,depth:C,text:aK}]}},_type:"markdown",_id:"content:Blockchain:Common typescript examples.md",_source:"content",_file:"Blockchain\u002FCommon typescript examples.md",_extension:"md"}},prerenderedAt:1703697989928}}("element","span","text","ct-2d4545","line","ct-ac9394"," ",".","ct-d8c97c","code","ct-1119a1","ct-7a16c5"," ","(","ct-1bac9e","","typescript","pre","web3",",","h2","=","const","ct-f6a4a5","ct-56d6bf"," {"," ",", ",2,"p"," ","utils","from","ct-178967","await",");","=\u003E","}","a","code-inline","value","memo","eth",";","async"," (","return","request","toHex","ethereum","li","https:\u002F\u002Fmetamask.github.io\u002Ftest-dapp\u002F","nofollow","Web3","ct-839cc0","to","gasLimit","gasPrice","();","),","toString",")","({",") {",false,"connecting-to-node","Connecting to node","import Web3 from 'web3';\n\n\u002F\u002F URL of your node\nconst PROVIDER_URL = 'https:\u002F\u002F...';\n\nexport const web3 = new Web3(Web3.givenProvider || PROVIDER_URL);\n","getting-wallet-balance","Getting wallet balance","const getBalance = async (address: string) =\u003E {\n return await web3.eth.getBalance(address);\n}\n","getting-wallet-address","Getting wallet address","\u002F\u002F first we need to authorize\nconst authorize = async () =\u003E {\n await web3.currentProvider.request({ method: 'eth_requestAccounts' });\n}\n\n\u002F\u002F then we can get wallet address\nconst getCurrentAddressUser = () =\u003E {\n return web3.currentProvider.selectedAddress;\n}\n","sending-transaction","Sending transaction","\nconst transfer = async ({ \n from, \n to, \n value, \n memo, \n privateKey, \n gasLimit = 44000 \n}) =\u003E {\n const nonce = await web3.eth.getTransactionCount(from);\n const gasPrice = await web3.eth.getGasPrice();\n \n const rawTx = {\n from,\n to,\n value: web3.utils.toHex(Web3.utils.toWei(value, 'ether')),\n gasLimit: web3.utils.toHex(gasLimit),\n gasPrice: web3.utils.toHex(gasPrice),\n nonce: web3.utils.toHex(nonce),\n data: memo,\n };\n \n const privateKeyBuffer = EthUtil.toBuffer(privateKey);\n \n const tx = new Transaction(rawTx);\n \n tx.sign(privateKeyBuffer);\n const serializedTx = tx.serialize();\n \n return this.web3.eth.sendSignedTransaction(\n `0x${serializedTx.toString('hex')}`\n );\n}\n","estimating-transaction-fee","Estimating transaction FEE","import { web3 } from '.';\n\nconst estimateFee = async ({\n from,\n to,\n value,\n memo,\n}) =\u003E {\n const gasPrice = await web3.eth.getGasPrice();\n const gasLimit = await web3.eth.estimateGas({\n from,\n to,\n value: web3.utils.toHex(web3.utils.toWei(value, 'ether')),\n data: web3.utils.asciiToHex(memo),\n }).call();\n \n return web3.utils.fromWei(\n BigInt(gasPrice.toString())\n .multiply(BigInt(gasLimit.toString()))\n .toString()\n );\n}\n","subscribing-to-wallet-address-change","Subscribing to wallet address change","import { web3 } from '.';\n\nweb3.currentProvider.on('accountsChanged', callback);\n","watching-network-change","Watching network change","ethereum.on('chainChanged', handler: (chainId: string) =\u003E void);\n","adding-custom-token-to-wallet","Adding custom token to wallet","window.ethereum\n .request({\n method: 'wallet_watchAsset',\n params: {\n type: 'ERC20',\n options: {\n address: '0xb60e8dd61c5d32be8058bb8eb970870f07233155',\n symbol: 'FOO',\n decimals: 18,\n image: 'https:\u002F\u002Ffoo.io\u002Ftoken-image.svg',\n },\n },\n })\n .then((success) =\u003E {\n if (success) {\n console.log('FOO successfully added to wallet!')\n } else {\n throw new Error('Something went wrong.')\n }\n })\n .catch(console.error)\n","changing-network-to-custom","Changing network to custom","const getChainID = async () =\u003E {\n return ethereum.request({ method: 'eth_chainId' })\n}\n","try {\n await window.ethereum.request({\n method: 'wallet_switchEthereumChain',\n params: [{ chainId: '0x03' }], \u002F\u002F ropsten chainID (3) in hex\n });\n} catch (switchError) {\n \u002F\u002F This error code indicates that the chain has not been added to MetaMask.\n if (error.code === 4902) {\n try {\n await window.ethereum.request({\n method: 'wallet_addEthereumChain',\n params: [{ \n chainId: '0x03', \u002F\u002F ropsten chainID (3) in hex\n chainName: 'Ropsten Test Network', \n nativeCurrency: { \n name: 'ETH',\n symbol: 'ETH',\n decimals: 18\n }, \n rpcUrls: ['https:\u002F\u002Fropsten.infura.io\u002Fv3\u002F9aa3d95b3bc440fa88ea12eaa4456161'], \n blockExplorerUrls: ['https:\u002F\u002Fropsten.etherscan.io'] \n }] ,\n });\n } catch (addError) {\n \u002F\u002F handle \"add\" error\n }\n }\n \u002F\u002F handle other \"switch\" errors\n}\n","import","new"," () ","currentProvider","tx","ct-5229fc","ct-254526","window"," .","ct-814f05","catch","Common Typescript Examples","\u002Fblockchain\u002Fcommon-typescript-examples","root","ul","Simple #dapp example for tests: ","Interaction with smart contracts described in ","Smart%20contracts","Smart contracts","If #Metamask extension installed, ","Web3.givenProvider"," is available in global window. You can use ","https:\u002F\u002Finfura.io","Infura"," or your node instead:","Sending "," tokens with "," as value:","Useful to get fixed amount of tokens from user with pre-estimated fee.","Checking current chainId:","Asking wallet to change current network:","PROVIDER_URL","ct-bc1a9e","getBalance","ct-17069f","ct-3b06ef","address",":",") ","({ method: ","privateKey","}) ","nonce","getGasPrice","rawTx"," value: ","toWei","'ether'",")),"," data: ","privateKeyBuffer","serializedTx"," );"," { "," } ","'.'","BigInt"," .","on"," method: ","18"," })","success","if","console"," } "," }","error","try","'0x03'","\u002F\u002F ropsten chainID (3) in hex","'ETH'"))
\ No newline at end of file
diff --git a/docs/blockchain/common-typescript-examples/index.html b/docs/blockchain/common-typescript-examples/index.html
index 6a8f612..f05c282 100644
--- a/docs/blockchain/common-typescript-examples/index.html
+++ b/docs/blockchain/common-typescript-examples/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Common Typescript Examples • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="head:count" content="2"><link rel="modulepreload" href="/blockchain/common-typescript-examples/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseUl.b892d423.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseLi.a224f663.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseA.c52e44f8.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseH2.d950f051.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCodeInline.d9bcf614.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a aria-current="page" href="/blockchain/common-typescript-examples" class="router-link-active _active_192pu_81 _link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Common Typescript Examples</h1><article><div><ul><!--[--><li><!--[-->Simple #dapp example for tests: <a href="https://metamask.github.io/test-dapp/" rel="nofollow" target="_blank"><!--[-->https://metamask.github.io/test-dapp/<!--]--></a><!--]--></li><li><!--[-->Interaction with smart contracts described in <a href="/blockchain/smart-contracts" class=""><!--[-->Smart contracts<!--]--></a><!--]--></li><!--]--></ul><h2 id="connecting-to-node"><a href="#connecting-to-node"><!--[-->Connecting to node<!--]--></a></h2><p><!--[-->If #Metamask extension installed, <code><!--[-->Web3.givenProvider<!--]--></code> is available in global window. You can use <a href="https://infura.io" rel="nofollow" target="_blank"><!--[-->Infura<!--]--></a> or your node instead:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-414e6d">import</span><span class="ct-ec66b6"> </span><span class="ct-58e1b5">Web3</span><span class="ct-ec66b6"> </span><span class="ct-414e6d">from</span><span class="ct-ec66b6"> </span><span class="ct-e80568">'web3'</span><span class="ct-ec66b6">;</span></span><span class="line"></span><span class="line"><span class="ct-0a81e7">// URL of your node</span></span><span class="line"><span class="ct-fe8bf2">const</span><span class="ct-ec66b6"> </span><span class="ct-c91062">PROVIDER_URL</span><span class="ct-ec66b6"> </span><span class="ct-414e6d">=</span><span class="ct-ec66b6"> </span><span class="ct-e80568">'https://...'</span><span class="ct-ec66b6">;</span></span><span class="line"></span><span class="line"><span class="ct-414e6d">export</span><span class="ct-ec66b6"> </span><span class="ct-fe8bf2">const</span><span class="ct-ec66b6"> </span><span class="ct-c91062">web3</span><span class="ct-ec66b6"> </span><span class="ct-414e6d">=</span><span class="ct-ec66b6"> </span><span class="ct-414e6d">new</span><span class="ct-ec66b6"> </span><span class="ct-a728a9">Web3</span><span class="ct-ec66b6">(</span><span class="ct-58e1b5">Web3</span><span class="ct-ec66b6">.</span><span class="ct-58e1b5">givenProvider</span><span class="ct-ec66b6"> </span><span class="ct-414e6d">||</span><span class="ct-ec66b6"> </span><span class="ct-c91062">PROVIDER_URL</span><span class="ct-ec66b6">);</span></span></code></pre><!--]--></div><h2 id="getting-wallet-balance"><a href="#getting-wallet-balance"><!--[-->Getting wallet balance<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-dfc9dd">const</span><span class="ct-de9cf1"> </span><span class="ct-2b9286">getBalance</span><span class="ct-de9cf1"> </span><span class="ct-1f936b">=</span><span class="ct-de9cf1"> </span><span class="ct-dfc9dd">async</span><span class="ct-de9cf1"> (</span><span class="ct-ecd2f7">address</span><span class="ct-1f936b">:</span><span class="ct-de9cf1"> </span><span class="ct-a77722">string</span><span class="ct-de9cf1">) </span><span class="ct-dfc9dd">=></span><span class="ct-de9cf1"> {</span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-414e6d">return</span><span class="ct-ec66b6"> </span><span class="ct-414e6d">await</span><span class="ct-ec66b6"> </span><span class="ct-58e1b5">web3</span><span class="ct-ec66b6">.</span><span class="ct-58e1b5">eth</span><span class="ct-ec66b6">.</span><span class="ct-a728a9">getBalance</span><span class="ct-ec66b6">(</span><span class="ct-58e1b5">address</span><span class="ct-ec66b6">);</span></span><span class="line"><span class="ct-ec66b6">}</span></span></code></pre><!--]--></div><h2 id="getting-wallet-address"><a href="#getting-wallet-address"><!--[-->Getting wallet address<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-0a81e7">// first we need to authorize</span></span><span class="line"><span class="ct-fe8bf2">const</span><span class="ct-ec66b6"> </span><span class="ct-a728a9">authorize</span><span class="ct-ec66b6"> </span><span class="ct-414e6d">=</span><span class="ct-ec66b6"> </span><span class="ct-fe8bf2">async</span><span class="ct-ec66b6"> () </span><span class="ct-fe8bf2">=></span><span class="ct-ec66b6"> {</span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-414e6d">await</span><span class="ct-ec66b6"> </span><span class="ct-58e1b5">web3</span><span class="ct-ec66b6">.</span><span class="ct-58e1b5">currentProvider</span><span class="ct-ec66b6">.</span><span class="ct-a728a9">request</span><span class="ct-ec66b6">({ method: </span><span class="ct-e80568">'eth_requestAccounts'</span><span class="ct-ec66b6"> });</span></span><span class="line"><span class="ct-ec66b6">}</span></span><span class="line"></span><span class="line"><span class="ct-0a81e7">// then we can get wallet address</span></span><span class="line"><span class="ct-fe8bf2">const</span><span class="ct-ec66b6"> </span><span class="ct-a728a9">getCurrentAddressUser</span><span class="ct-ec66b6"> </span><span class="ct-414e6d">=</span><span class="ct-ec66b6"> () </span><span class="ct-fe8bf2">=></span><span class="ct-ec66b6"> {</span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-414e6d">return</span><span class="ct-ec66b6"> </span><span class="ct-58e1b5">web3</span><span class="ct-ec66b6">.</span><span class="ct-58e1b5">currentProvider</span><span class="ct-ec66b6">.</span><span class="ct-58e1b5">selectedAddress</span><span class="ct-ec66b6">;</span></span><span class="line"><span class="ct-ec66b6">}</span></span></code></pre><!--]--></div><h2 id="sending-transaction"><a href="#sending-transaction"><!--[-->Sending transaction<!--]--></a></h2><p><!--[-->Sending <code><!--[-->value<!--]--></code> tokens with <code><!--[-->memo<!--]--></code> as value:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"></span><span class="line"><span class="ct-fe8bf2">const</span><span class="ct-ec66b6"> </span><span class="ct-a728a9">transfer</span><span class="ct-ec66b6"> </span><span class="ct-414e6d">=</span><span class="ct-ec66b6"> </span><span class="ct-fe8bf2">async</span><span class="ct-ec66b6"> ({ </span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-58e1b5">from</span><span class="ct-ec66b6">, </span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-58e1b5">to</span><span class="ct-ec66b6">, </span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-58e1b5">value</span><span class="ct-ec66b6">, </span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-58e1b5">memo</span><span class="ct-ec66b6">, </span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-58e1b5">privateKey</span><span class="ct-ec66b6">, </span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-58e1b5">gasLimit</span><span class="ct-ec66b6"> </span><span class="ct-414e6d">=</span><span class="ct-ec66b6"> </span></span><span class="line"><span class="ct-ec66b6">}) </span><span class="ct-fe8bf2">=></span><span class="ct-ec66b6"> {</span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-fe8bf2">const</span><span class="ct-ec66b6"> </span><span class="ct-c91062">nonce</span><span class="ct-ec66b6"> </span><span class="ct-414e6d">=</span><span class="ct-ec66b6"> </span><span class="ct-414e6d">await</span><span class="ct-ec66b6"> </span><span class="ct-58e1b5">web3</span><span class="ct-ec66b6">.</span><span class="ct-58e1b5">eth</span><span class="ct-ec66b6">.</span><span class="ct-a728a9">getTransactionCount</span><span class="ct-ec66b6">(</span><span class="ct-58e1b5">from</span><span class="ct-ec66b6">);</span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-fe8bf2">const</span><span class="ct-ec66b6"> </span><span class="ct-c91062">gasPrice</span><span class="ct-ec66b6"> </span><span class="ct-414e6d">=</span><span class="ct-ec66b6"> </span><span class="ct-414e6d">await</span><span class="ct-ec66b6"> </span><span class="ct-58e1b5">web3</span><span class="ct-ec66b6">.</span><span class="ct-58e1b5">eth</span><span class="ct-ec66b6">.</span><span class="ct-a728a9">getGasPrice</span><span class="ct-ec66b6">();</span></span><span class="line"><span class="ct-ec66b6"> </span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-fe8bf2">const</span><span class="ct-ec66b6"> </span><span class="ct-c91062">rawTx</span><span class="ct-ec66b6"> </span><span class="ct-414e6d">=</span><span class="ct-ec66b6"> {</span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-58e1b5">from</span><span class="ct-ec66b6">,</span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-58e1b5">to</span><span class="ct-ec66b6">,</span></span><span class="line"><span class="ct-ec66b6"> value: </span><span class="ct-58e1b5">web3</span><span class="ct-ec66b6">.</span><span class="ct-58e1b5">utils</span><span class="ct-ec66b6">.</span><span class="ct-a728a9">toHex</span><span class="ct-ec66b6">(</span><span class="ct-58e1b5">Web3</span><span class="ct-ec66b6">.</span><span class="ct-58e1b5">utils</span><span class="ct-ec66b6">.</span><span class="ct-a728a9">toWei</span><span class="ct-ec66b6">(</span><span class="ct-58e1b5">value</span><span class="ct-ec66b6">, </span><span class="ct-e80568">'ether'</span><span class="ct-ec66b6">)),</span></span><span class="line"><span class="ct-ec66b6"> gasLimit: </span><span class="ct-58e1b5">web3</span><span class="ct-ec66b6">.</span><span class="ct-58e1b5">utils</span><span class="ct-ec66b6">.</span><span class="ct-a728a9">toHex</span><span class="ct-ec66b6">(</span><span class="ct-58e1b5">gasLimit</span><span class="ct-ec66b6">),</span></span><span class="line"><span class="ct-ec66b6"> gasPrice: </span><span class="ct-58e1b5">web3</span><span class="ct-ec66b6">.</span><span class="ct-58e1b5">utils</span><span class="ct-ec66b6">.</span><span class="ct-a728a9">toHex</span><span class="ct-ec66b6">(</span><span class="ct-58e1b5">gasPrice</span><span class="ct-ec66b6">),</span></span><span class="line"><span class="ct-ec66b6"> nonce: </span><span class="ct-58e1b5">web3</span><span class="ct-ec66b6">.</span><span class="ct-58e1b5">utils</span><span class="ct-ec66b6">.</span><span class="ct-a728a9">toHex</span><span class="ct-ec66b6">(</span><span class="ct-58e1b5">nonce</span><span class="ct-ec66b6">),</span></span><span class="line"><span class="ct-ec66b6"> data: </span><span class="ct-58e1b5">memo</span><span class="ct-ec66b6">,</span></span><span class="line"><span class="ct-ec66b6"> };</span></span><span class="line"><span class="ct-ec66b6"> </span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-fe8bf2">const</span><span class="ct-ec66b6"> </span><span class="ct-c91062">privateKeyBuffer</span><span class="ct-ec66b6"> </span><span class="ct-414e6d">=</span><span class="ct-ec66b6"> </span><span class="ct-58e1b5">EthUtil</span><span class="ct-ec66b6">.</span><span class="ct-a728a9">toBuffer</span><span class="ct-ec66b6">(</span><span class="ct-58e1b5">privateKey</span><span class="ct-ec66b6">);</span></span><span class="line"><span class="ct-ec66b6"> </span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-fe8bf2">const</span><span class="ct-ec66b6"> </span><span class="ct-c91062">tx</span><span class="ct-ec66b6"> </span><span class="ct-414e6d">=</span><span class="ct-ec66b6"> </span><span class="ct-414e6d">new</span><span class="ct-ec66b6"> </span><span class="ct-a728a9">Transaction</span><span class="ct-ec66b6">(</span><span class="ct-58e1b5">rawTx</span><span class="ct-ec66b6">);</span></span><span class="line"><span class="ct-ec66b6"> </span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-58e1b5">tx</span><span class="ct-ec66b6">.</span><span class="ct-a728a9">sign</span><span class="ct-ec66b6">(</span><span class="ct-58e1b5">privateKeyBuffer</span><span class="ct-ec66b6">);</span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-fe8bf2">const</span><span class="ct-ec66b6"> </span><span class="ct-c91062">serializedTx</span><span class="ct-ec66b6"> </span><span class="ct-414e6d">=</span><span class="ct-ec66b6"> </span><span class="ct-58e1b5">tx</span><span class="ct-ec66b6">.</span><span class="ct-a728a9">serialize</span><span class="ct-ec66b6">();</span></span><span class="line"><span class="ct-ec66b6"> </span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-414e6d">return</span><span class="ct-ec66b6"> </span><span class="ct-c91062">this</span><span class="ct-ec66b6">.</span><span class="ct-58e1b5">web3</span><span class="ct-ec66b6">.</span><span class="ct-58e1b5">eth</span><span class="ct-ec66b6">.</span><span class="ct-a728a9">sendSignedTransaction</span><span class="ct-ec66b6">(</span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-e80568">`0x${</span><span class="ct-58e1b5">serializedTx</span><span class="ct-fd0f2b">.</span><span class="ct-a728a9">toString</span><span class="ct-fd0f2b">(</span><span class="ct-e80568">'hex'</span><span class="ct-fd0f2b">)</span><span class="ct-e80568">}`</span></span><span class="line"><span class="ct-ec66b6"> );</span></span><span class="line"><span class="ct-ec66b6">}</span></span></code></pre><!--]--></div><h2 id="estimating-transaction-fee"><a href="#estimating-transaction-fee"><!--[-->Estimating transaction FEE<!--]--></a></h2><p><!--[-->Useful to get fixed amount of tokens from user with pre-estimated fee.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-414e6d">import</span><span class="ct-ec66b6"> { </span><span class="ct-58e1b5">web3</span><span class="ct-ec66b6"> } </span><span class="ct-414e6d">from</span><span class="ct-ec66b6"> </span><span class="ct-e80568">'.'</span><span class="ct-ec66b6">;</span></span><span class="line"></span><span class="line"><span class="ct-fe8bf2">const</span><span class="ct-ec66b6"> </span><span class="ct-a728a9">estimateFee</span><span class="ct-ec66b6"> </span><span class="ct-414e6d">=</span><span class="ct-ec66b6"> </span><span class="ct-fe8bf2">async</span><span class="ct-ec66b6"> ({</span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-58e1b5">from</span><span class="ct-ec66b6">,</span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-58e1b5">to</span><span class="ct-ec66b6">,</span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-58e1b5">value</span><span class="ct-ec66b6">,</span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-58e1b5">memo</span><span class="ct-ec66b6">,</span></span><span class="line"><span class="ct-ec66b6">}) </span><span class="ct-fe8bf2">=></span><span class="ct-ec66b6"> {</span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-fe8bf2">const</span><span class="ct-ec66b6"> </span><span class="ct-c91062">gasPrice</span><span class="ct-ec66b6"> </span><span class="ct-414e6d">=</span><span class="ct-ec66b6"> </span><span class="ct-414e6d">await</span><span class="ct-ec66b6"> </span><span class="ct-58e1b5">web3</span><span class="ct-ec66b6">.</span><span class="ct-58e1b5">eth</span><span class="ct-ec66b6">.</span><span class="ct-a728a9">getGasPrice</span><span class="ct-ec66b6">();</span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-fe8bf2">const</span><span class="ct-ec66b6"> </span><span class="ct-c91062">gasLimit</span><span class="ct-ec66b6"> </span><span class="ct-414e6d">=</span><span class="ct-ec66b6"> </span><span class="ct-414e6d">await</span><span class="ct-ec66b6"> </span><span class="ct-58e1b5">web3</span><span class="ct-ec66b6">.</span><span class="ct-58e1b5">eth</span><span class="ct-ec66b6">.</span><span class="ct-a728a9">estimateGas</span><span class="ct-ec66b6">({</span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-58e1b5">from</span><span class="ct-ec66b6">,</span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-58e1b5">to</span><span class="ct-ec66b6">,</span></span><span class="line"><span class="ct-ec66b6"> value: </span><span class="ct-58e1b5">web3</span><span class="ct-ec66b6">.</span><span class="ct-58e1b5">utils</span><span class="ct-ec66b6">.</span><span class="ct-a728a9">toHex</span><span class="ct-ec66b6">(</span><span class="ct-58e1b5">web3</span><span class="ct-ec66b6">.</span><span class="ct-58e1b5">utils</span><span class="ct-ec66b6">.</span><span class="ct-a728a9">toWei</span><span class="ct-ec66b6">(</span><span class="ct-58e1b5">value</span><span class="ct-ec66b6">, </span><span class="ct-e80568">'ether'</span><span class="ct-ec66b6">)),</span></span><span class="line"><span class="ct-ec66b6"> data: </span><span class="ct-58e1b5">web3</span><span class="ct-ec66b6">.</span><span class="ct-58e1b5">utils</span><span class="ct-ec66b6">.</span><span class="ct-a728a9">asciiToHex</span><span class="ct-ec66b6">(</span><span class="ct-58e1b5">memo</span><span class="ct-ec66b6">),</span></span><span class="line"><span class="ct-ec66b6"> }).</span><span class="ct-a728a9">call</span><span class="ct-ec66b6">();</span></span><span class="line"><span class="ct-ec66b6"> </span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-414e6d">return</span><span class="ct-ec66b6"> </span><span class="ct-58e1b5">web3</span><span class="ct-ec66b6">.</span><span class="ct-58e1b5">utils</span><span class="ct-ec66b6">.</span><span class="ct-a728a9">fromWei</span><span class="ct-ec66b6">(</span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-2eedec">BigInt</span><span class="ct-ec66b6">(</span><span class="ct-58e1b5">gasPrice</span><span class="ct-ec66b6">.</span><span class="ct-a728a9">toString</span><span class="ct-ec66b6">())</span></span><span class="line"><span class="ct-ec66b6"> .</span><span class="ct-a728a9">multiply</span><span class="ct-ec66b6">(</span><span class="ct-2eedec">BigInt</span><span class="ct-ec66b6">(</span><span class="ct-58e1b5">gasLimit</span><span class="ct-ec66b6">.</span><span class="ct-a728a9">toString</span><span class="ct-ec66b6">()))</span></span><span class="line"><span class="ct-ec66b6"> .</span><span class="ct-a728a9">toString</span><span class="ct-ec66b6">()</span></span><span class="line"><span class="ct-ec66b6"> );</span></span><span class="line"><span class="ct-ec66b6">}</span></span></code></pre><!--]--></div><h2 id="subscribing-to-wallet-address-change"><a href="#subscribing-to-wallet-address-change"><!--[-->Subscribing to wallet address change<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-414e6d">import</span><span class="ct-ec66b6"> { </span><span class="ct-58e1b5">web3</span><span class="ct-ec66b6"> } </span><span class="ct-414e6d">from</span><span class="ct-ec66b6"> </span><span class="ct-e80568">'.'</span><span class="ct-ec66b6">;</span></span><span class="line"></span><span class="line"><span class="ct-58e1b5">web3</span><span class="ct-ec66b6">.</span><span class="ct-58e1b5">currentProvider</span><span class="ct-ec66b6">.</span><span class="ct-a728a9">on</span><span class="ct-ec66b6">(</span><span class="ct-e80568">'accountsChanged'</span><span class="ct-ec66b6">, </span><span class="ct-58e1b5">callback</span><span class="ct-ec66b6">);</span></span></code></pre><!--]--></div><h2 id="watching-network-change"><a href="#watching-network-change"><!--[-->Watching network change<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-58e1b5">ethereum</span><span class="ct-ec66b6">.</span><span class="ct-a728a9">on</span><span class="ct-ec66b6">(</span><span class="ct-e80568">'chainChanged'</span><span class="ct-ec66b6">, </span><span class="ct-58e1b5">handler</span><span class="ct-20099f">:</span><span class="ct-ec66b6"> </span></span></code></pre><!--]--></div><h2 id="adding-custom-token-to-wallet"><a href="#adding-custom-token-to-wallet"><!--[-->Adding custom token to wallet<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-58e1b5">window</span><span class="ct-ec66b6">.</span><span class="ct-58e1b5">ethereum</span></span><span class="line"><span class="ct-ec66b6"> .</span><span class="ct-a728a9">request</span><span class="ct-ec66b6">({</span></span><span class="line"><span class="ct-ec66b6"> method: </span><span class="ct-e80568">'wallet_watchAsset'</span><span class="ct-ec66b6">,</span></span><span class="line"><span class="ct-ec66b6"> params: {</span></span><span class="line"><span class="ct-ec66b6"> type: </span><span class="ct-e80568">'ERC20'</span><span class="ct-ec66b6">,</span></span><span class="line"><span class="ct-ec66b6"> options: {</span></span><span class="line"><span class="ct-ec66b6"> address: </span><span class="ct-e80568">'0xb60e8dd61c5d32be8058bb8eb970870f07233155'</span><span class="ct-ec66b6">,</span></span><span class="line"><span class="ct-ec66b6"> symbol: </span><span class="ct-e80568">'FOO'</span><span class="ct-ec66b6">,</span></span><span class="line"><span class="ct-ec66b6"> decimals: </span><span class="ct-894d23">18</span><span class="ct-ec66b6">,</span></span><span class="line"><span class="ct-ec66b6"> image: </span><span class="ct-e80568">'https://foo.io/token-image.svg'</span><span class="ct-ec66b6">,</span></span><span class="line"><span class="ct-ec66b6"> },</span></span><span class="line"><span class="ct-ec66b6"> },</span></span><span class="line"><span class="ct-ec66b6"> })</span></span><span class="line"><span class="ct-de9cf1"> .</span><span class="ct-2b9286">then</span><span class="ct-de9cf1">((</span><span class="ct-ecd2f7">success</span><span class="ct-de9cf1">) </span><span class="ct-dfc9dd">=></span><span class="ct-de9cf1"> {</span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-414e6d">if</span><span class="ct-ec66b6"> (</span><span class="ct-58e1b5">success</span><span class="ct-ec66b6">) {</span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-58e1b5">console</span><span class="ct-ec66b6">.</span><span class="ct-a728a9">log</span><span class="ct-ec66b6">(</span><span class="ct-e80568">'FOO successfully added to wallet!'</span><span class="ct-ec66b6">)</span></span><span class="line"><span class="ct-ec66b6"> } </span><span class="ct-414e6d">else</span><span class="ct-ec66b6"> {</span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-414e6d">throw</span><span class="ct-ec66b6"> </span><span class="ct-414e6d">new</span><span class="ct-ec66b6"> </span><span class="ct-2eedec">Error</span><span class="ct-ec66b6">(</span><span class="ct-e80568">'Something went wrong.'</span><span class="ct-ec66b6">)</span></span><span class="line"><span class="ct-ec66b6"> }</span></span><span class="line"><span class="ct-ec66b6"> })</span></span><span class="line"><span class="ct-ec66b6"> .</span><span class="ct-a728a9">catch</span><span class="ct-ec66b6">(</span><span class="ct-58e1b5">console</span><span class="ct-ec66b6">.</span><span class="ct-58e1b5">error</span><span class="ct-ec66b6">)</span></span></code></pre><!--]--></div><h2 id="changing-network-to-custom"><a href="#changing-network-to-custom"><!--[-->Changing network to custom<!--]--></a></h2><p><!--[-->Checking current chainId:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-fe8bf2">const</span><span class="ct-ec66b6"> </span><span class="ct-a728a9">getChainID</span><span class="ct-ec66b6"> </span><span class="ct-414e6d">=</span><span class="ct-ec66b6"> </span><span class="ct-fe8bf2">async</span><span class="ct-ec66b6"> () </span><span class="ct-fe8bf2">=></span><span class="ct-ec66b6"> {</span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-414e6d">return</span><span class="ct-ec66b6"> </span><span class="ct-58e1b5">ethereum</span><span class="ct-ec66b6">.</span><span class="ct-a728a9">request</span><span class="ct-ec66b6">({ method: </span><span class="ct-e80568">'eth_chainId'</span><span class="ct-ec66b6"> })</span></span><span class="line"><span class="ct-ec66b6">}</span></span></code></pre><!--]--></div><p><!--[-->Asking wallet to change current network:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-414e6d">try</span><span class="ct-ec66b6"> {</span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-414e6d">await</span><span class="ct-ec66b6"> </span><span class="ct-58e1b5">window</span><span class="ct-ec66b6">.</span><span class="ct-58e1b5">ethereum</span><span class="ct-ec66b6">.</span><span class="ct-a728a9">request</span><span class="ct-ec66b6">({</span></span><span class="line"><span class="ct-ec66b6"> method: </span><span class="ct-e80568">'wallet_switchEthereumChain'</span><span class="ct-ec66b6">,</span></span><span class="line"><span class="ct-ec66b6"> params: [{ chainId: </span><span class="ct-e80568">'0x03'</span><span class="ct-ec66b6"> }], </span><span class="ct-0a81e7">// ropsten chainID (3) in hex</span></span><span class="line"><span class="ct-ec66b6"> });</span></span><span class="line"><span class="ct-ec66b6">} </span><span class="ct-414e6d">catch</span><span class="ct-ec66b6"> (</span><span class="ct-58e1b5">switchError</span><span class="ct-ec66b6">) {</span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-0a81e7">// This error code indicates that the chain has not been added to MetaMask.</span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-414e6d">if</span><span class="ct-ec66b6"> (</span><span class="ct-58e1b5">error</span><span class="ct-ec66b6">.</span><span class="ct-58e1b5">code</span><span class="ct-ec66b6"> </span><span class="ct-414e6d">===</span><span class="ct-ec66b6"> </span><span class="ct-894d23">4902</span><span class="ct-ec66b6">) {</span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-414e6d">try</span><span class="ct-ec66b6"> {</span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-414e6d">await</span><span class="ct-ec66b6"> </span><span class="ct-58e1b5">window</span><span class="ct-ec66b6">.</span><span class="ct-58e1b5">ethereum</span><span class="ct-ec66b6">.</span><span class="ct-a728a9">request</span><span class="ct-ec66b6">({</span></span><span class="line"><span class="ct-ec66b6"> method: </span><span class="ct-e80568">'wallet_addEthereumChain'</span><span class="ct-ec66b6">,</span></span><span class="line"><span class="ct-ec66b6"> params: [{ </span></span><span class="line"><span class="ct-ec66b6"> chainId: </span><span class="ct-e80568">'0x03'</span><span class="ct-ec66b6">, </span><span class="ct-0a81e7">// ropsten chainID (3) in hex</span></span><span class="line"><span class="ct-ec66b6"> chainName: </span><span class="ct-e80568">'Ropsten Test Network'</span><span class="ct-ec66b6">, </span></span><span class="line"><span class="ct-ec66b6"> nativeCurrency: { </span></span><span class="line"><span class="ct-ec66b6"> name: </span><span class="ct-e80568">'ETH'</span><span class="ct-ec66b6">,</span></span><span class="line"><span class="ct-ec66b6"> symbol: </span><span class="ct-e80568">'ETH'</span><span class="ct-ec66b6">,</span></span><span class="line"><span class="ct-ec66b6"> decimals: </span><span class="ct-894d23">18</span></span><span class="line"><span class="ct-ec66b6"> }, </span></span><span class="line"><span class="ct-ec66b6"> rpcUrls: [</span><span class="ct-e80568">'https://ropsten.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161'</span><span class="ct-ec66b6">], </span></span><span class="line"><span class="ct-ec66b6"> blockExplorerUrls: [</span><span class="ct-e80568">'https://ropsten.etherscan.io'</span><span class="ct-ec66b6">] </span></span><span class="line"><span class="ct-ec66b6"> }] ,</span></span><span class="line"><span class="ct-ec66b6"> });</span></span><span class="line"><span class="ct-ec66b6"> } </span><span class="ct-414e6d">catch</span><span class="ct-ec66b6"> (</span><span class="ct-58e1b5">addError</span><span class="ct-ec66b6">) {</span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-0a81e7">// handle "add" error</span></span><span class="line"><span class="ct-ec66b6"> }</span></span><span class="line"><span class="ct-ec66b6"> }</span></span><span class="line"><span class="ct-ec66b6"> </span><span class="ct-0a81e7">// handle other "switch" errors</span></span><span class="line"><span class="ct-ec66b6">}</span></span></code></pre><!--]--></div><style>.ct-894d23{color:#79C0FF}.ct-20099f{color:#C9D1D9}.ct-2eedec{color:#79C0FF}.ct-fd0f2b{color:#A5D6FF}.ct-a77722{color:#79C0FF}.ct-ecd2f7{color:#FFA657}.ct-1f936b{color:#FF7B72}.ct-2b9286{color:#D2A8FF}.ct-de9cf1{color:#C9D1D9}.ct-dfc9dd{color:#FF7B72}.ct-a728a9{color:#D2A8FF}.ct-c91062{color:#79C0FF}.ct-fe8bf2{color:#FF7B72}.ct-0a81e7{color:#8B949E}.ct-e80568{color:#A5D6FF}.ct-58e1b5{color:#C9D1D9}.ct-ec66b6{color:#C9D1D9}.ct-414e6d{color:#FF7B72}.light .ct-414e6d{color:#859900}.light .ct-ec66b6{color:#657B83}.light .ct-58e1b5{color:#268BD2}.light .ct-e80568{color:#2AA198}.light .ct-0a81e7{color:#93A1A1}.light .ct-fe8bf2{color:#073642}.light .ct-c91062{color:#268BD2}.light .ct-a728a9{color:#268BD2}.light .ct-dfc9dd{color:#073642}.light .ct-de9cf1{color:#657B83}.light .ct-2b9286{color:#268BD2}.light .ct-1f936b{color:#859900}.light .ct-ecd2f7{color:#657B83}.light .ct-a77722{color:#859900}.light .ct-fd0f2b{color:#657B83}.light .ct-2eedec{color:#859900}.light .ct-20099f{color:#859900}.light .ct-894d23{color:#D33682}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/blockchain/common-typescript-examples/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695529045}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseUl.b892d423.js" crossorigin></script><script type="module" src="/nuxt/ProseLi.a224f663.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a aria-current="page" href="/blockchain/common-typescript-examples" class="router-link-active _active_192pu_81 _link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Common Typescript Examples</h1><article><div><ul><!--[--><li><!--[-->Simple #dapp example for tests: <a href="https://metamask.github.io/test-dapp/" rel="nofollow" target="_blank"><!--[-->https://metamask.github.io/test-dapp/<!--]--></a><!--]--></li><li><!--[-->Interaction with smart contracts described in <a href="/blockchain/smart-contracts" class=""><!--[-->Smart contracts<!--]--></a><!--]--></li><!--]--></ul><h2 id="connecting-to-node"><a href="#connecting-to-node"><!--[-->Connecting to node<!--]--></a></h2><p><!--[-->If #Metamask extension installed, <code><!--[-->Web3.givenProvider<!--]--></code> is available in global window. You can use <a href="https://infura.io" rel="nofollow" target="_blank"><!--[-->Infura<!--]--></a> or your node instead:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-d8c97c">import</span><span class="ct-2d4545"> </span><span class="ct-ac9394">Web3</span><span class="ct-2d4545"> </span><span class="ct-d8c97c">from</span><span class="ct-2d4545"> </span><span class="ct-7a16c5">'web3'</span><span class="ct-2d4545">;</span></span><span class="line"></span><span class="line"><span class="ct-178967">// URL of your node</span></span><span class="line"><span class="ct-1bac9e">const</span><span class="ct-2d4545"> </span><span class="ct-f6a4a5">PROVIDER_URL</span><span class="ct-2d4545"> </span><span class="ct-d8c97c">=</span><span class="ct-2d4545"> </span><span class="ct-7a16c5">'https://...'</span><span class="ct-2d4545">;</span></span><span class="line"></span><span class="line"><span class="ct-d8c97c">export</span><span class="ct-2d4545"> </span><span class="ct-1bac9e">const</span><span class="ct-2d4545"> </span><span class="ct-f6a4a5">web3</span><span class="ct-2d4545"> </span><span class="ct-d8c97c">=</span><span class="ct-2d4545"> </span><span class="ct-d8c97c">new</span><span class="ct-2d4545"> </span><span class="ct-1119a1">Web3</span><span class="ct-2d4545">(</span><span class="ct-ac9394">Web3</span><span class="ct-2d4545">.</span><span class="ct-ac9394">givenProvider</span><span class="ct-2d4545"> </span><span class="ct-d8c97c">||</span><span class="ct-2d4545"> </span><span class="ct-f6a4a5">PROVIDER_URL</span><span class="ct-2d4545">);</span></span></code></pre><!--]--></div><h2 id="getting-wallet-balance"><a href="#getting-wallet-balance"><!--[-->Getting wallet balance<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-839cc0">const</span><span class="ct-56d6bf"> </span><span class="ct-bc1a9e">getBalance</span><span class="ct-56d6bf"> </span><span class="ct-17069f">=</span><span class="ct-56d6bf"> </span><span class="ct-839cc0">async</span><span class="ct-56d6bf"> (</span><span class="ct-3b06ef">address</span><span class="ct-17069f">:</span><span class="ct-56d6bf"> </span><span class="ct-2bc6be">string</span><span class="ct-56d6bf">) </span><span class="ct-839cc0">=></span><span class="ct-56d6bf"> {</span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-d8c97c">return</span><span class="ct-2d4545"> </span><span class="ct-d8c97c">await</span><span class="ct-2d4545"> </span><span class="ct-ac9394">web3</span><span class="ct-2d4545">.</span><span class="ct-ac9394">eth</span><span class="ct-2d4545">.</span><span class="ct-1119a1">getBalance</span><span class="ct-2d4545">(</span><span class="ct-ac9394">address</span><span class="ct-2d4545">);</span></span><span class="line"><span class="ct-2d4545">}</span></span></code></pre><!--]--></div><h2 id="getting-wallet-address"><a href="#getting-wallet-address"><!--[-->Getting wallet address<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-178967">// first we need to authorize</span></span><span class="line"><span class="ct-1bac9e">const</span><span class="ct-2d4545"> </span><span class="ct-1119a1">authorize</span><span class="ct-2d4545"> </span><span class="ct-d8c97c">=</span><span class="ct-2d4545"> </span><span class="ct-1bac9e">async</span><span class="ct-2d4545"> () </span><span class="ct-1bac9e">=></span><span class="ct-2d4545"> {</span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-d8c97c">await</span><span class="ct-2d4545"> </span><span class="ct-ac9394">web3</span><span class="ct-2d4545">.</span><span class="ct-ac9394">currentProvider</span><span class="ct-2d4545">.</span><span class="ct-1119a1">request</span><span class="ct-2d4545">({ method: </span><span class="ct-7a16c5">'eth_requestAccounts'</span><span class="ct-2d4545"> });</span></span><span class="line"><span class="ct-2d4545">}</span></span><span class="line"></span><span class="line"><span class="ct-178967">// then we can get wallet address</span></span><span class="line"><span class="ct-1bac9e">const</span><span class="ct-2d4545"> </span><span class="ct-1119a1">getCurrentAddressUser</span><span class="ct-2d4545"> </span><span class="ct-d8c97c">=</span><span class="ct-2d4545"> () </span><span class="ct-1bac9e">=></span><span class="ct-2d4545"> {</span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-d8c97c">return</span><span class="ct-2d4545"> </span><span class="ct-ac9394">web3</span><span class="ct-2d4545">.</span><span class="ct-ac9394">currentProvider</span><span class="ct-2d4545">.</span><span class="ct-ac9394">selectedAddress</span><span class="ct-2d4545">;</span></span><span class="line"><span class="ct-2d4545">}</span></span></code></pre><!--]--></div><h2 id="sending-transaction"><a href="#sending-transaction"><!--[-->Sending transaction<!--]--></a></h2><p><!--[-->Sending <code><!--[-->value<!--]--></code> tokens with <code><!--[-->memo<!--]--></code> as value:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"></span><span class="line"><span class="ct-1bac9e">const</span><span class="ct-2d4545"> </span><span class="ct-1119a1">transfer</span><span class="ct-2d4545"> </span><span class="ct-d8c97c">=</span><span class="ct-2d4545"> </span><span class="ct-1bac9e">async</span><span class="ct-2d4545"> ({ </span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-ac9394">from</span><span class="ct-2d4545">, </span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-ac9394">to</span><span class="ct-2d4545">, </span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-ac9394">value</span><span class="ct-2d4545">, </span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-ac9394">memo</span><span class="ct-2d4545">, </span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-ac9394">privateKey</span><span class="ct-2d4545">, </span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-ac9394">gasLimit</span><span class="ct-2d4545"> </span><span class="ct-d8c97c">=</span><span class="ct-2d4545"> </span></span><span class="line"><span class="ct-2d4545">}) </span><span class="ct-1bac9e">=></span><span class="ct-2d4545"> {</span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-1bac9e">const</span><span class="ct-2d4545"> </span><span class="ct-f6a4a5">nonce</span><span class="ct-2d4545"> </span><span class="ct-d8c97c">=</span><span class="ct-2d4545"> </span><span class="ct-d8c97c">await</span><span class="ct-2d4545"> </span><span class="ct-ac9394">web3</span><span class="ct-2d4545">.</span><span class="ct-ac9394">eth</span><span class="ct-2d4545">.</span><span class="ct-1119a1">getTransactionCount</span><span class="ct-2d4545">(</span><span class="ct-ac9394">from</span><span class="ct-2d4545">);</span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-1bac9e">const</span><span class="ct-2d4545"> </span><span class="ct-f6a4a5">gasPrice</span><span class="ct-2d4545"> </span><span class="ct-d8c97c">=</span><span class="ct-2d4545"> </span><span class="ct-d8c97c">await</span><span class="ct-2d4545"> </span><span class="ct-ac9394">web3</span><span class="ct-2d4545">.</span><span class="ct-ac9394">eth</span><span class="ct-2d4545">.</span><span class="ct-1119a1">getGasPrice</span><span class="ct-2d4545">();</span></span><span class="line"><span class="ct-2d4545"> </span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-1bac9e">const</span><span class="ct-2d4545"> </span><span class="ct-f6a4a5">rawTx</span><span class="ct-2d4545"> </span><span class="ct-d8c97c">=</span><span class="ct-2d4545"> {</span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-ac9394">from</span><span class="ct-2d4545">,</span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-ac9394">to</span><span class="ct-2d4545">,</span></span><span class="line"><span class="ct-2d4545"> value: </span><span class="ct-ac9394">web3</span><span class="ct-2d4545">.</span><span class="ct-ac9394">utils</span><span class="ct-2d4545">.</span><span class="ct-1119a1">toHex</span><span class="ct-2d4545">(</span><span class="ct-ac9394">Web3</span><span class="ct-2d4545">.</span><span class="ct-ac9394">utils</span><span class="ct-2d4545">.</span><span class="ct-1119a1">toWei</span><span class="ct-2d4545">(</span><span class="ct-ac9394">value</span><span class="ct-2d4545">, </span><span class="ct-7a16c5">'ether'</span><span class="ct-2d4545">)),</span></span><span class="line"><span class="ct-2d4545"> gasLimit: </span><span class="ct-ac9394">web3</span><span class="ct-2d4545">.</span><span class="ct-ac9394">utils</span><span class="ct-2d4545">.</span><span class="ct-1119a1">toHex</span><span class="ct-2d4545">(</span><span class="ct-ac9394">gasLimit</span><span class="ct-2d4545">),</span></span><span class="line"><span class="ct-2d4545"> gasPrice: </span><span class="ct-ac9394">web3</span><span class="ct-2d4545">.</span><span class="ct-ac9394">utils</span><span class="ct-2d4545">.</span><span class="ct-1119a1">toHex</span><span class="ct-2d4545">(</span><span class="ct-ac9394">gasPrice</span><span class="ct-2d4545">),</span></span><span class="line"><span class="ct-2d4545"> nonce: </span><span class="ct-ac9394">web3</span><span class="ct-2d4545">.</span><span class="ct-ac9394">utils</span><span class="ct-2d4545">.</span><span class="ct-1119a1">toHex</span><span class="ct-2d4545">(</span><span class="ct-ac9394">nonce</span><span class="ct-2d4545">),</span></span><span class="line"><span class="ct-2d4545"> data: </span><span class="ct-ac9394">memo</span><span class="ct-2d4545">,</span></span><span class="line"><span class="ct-2d4545"> };</span></span><span class="line"><span class="ct-2d4545"> </span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-1bac9e">const</span><span class="ct-2d4545"> </span><span class="ct-f6a4a5">privateKeyBuffer</span><span class="ct-2d4545"> </span><span class="ct-d8c97c">=</span><span class="ct-2d4545"> </span><span class="ct-ac9394">EthUtil</span><span class="ct-2d4545">.</span><span class="ct-1119a1">toBuffer</span><span class="ct-2d4545">(</span><span class="ct-ac9394">privateKey</span><span class="ct-2d4545">);</span></span><span class="line"><span class="ct-2d4545"> </span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-1bac9e">const</span><span class="ct-2d4545"> </span><span class="ct-f6a4a5">tx</span><span class="ct-2d4545"> </span><span class="ct-d8c97c">=</span><span class="ct-2d4545"> </span><span class="ct-d8c97c">new</span><span class="ct-2d4545"> </span><span class="ct-1119a1">Transaction</span><span class="ct-2d4545">(</span><span class="ct-ac9394">rawTx</span><span class="ct-2d4545">);</span></span><span class="line"><span class="ct-2d4545"> </span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-ac9394">tx</span><span class="ct-2d4545">.</span><span class="ct-1119a1">sign</span><span class="ct-2d4545">(</span><span class="ct-ac9394">privateKeyBuffer</span><span class="ct-2d4545">);</span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-1bac9e">const</span><span class="ct-2d4545"> </span><span class="ct-f6a4a5">serializedTx</span><span class="ct-2d4545"> </span><span class="ct-d8c97c">=</span><span class="ct-2d4545"> </span><span class="ct-ac9394">tx</span><span class="ct-2d4545">.</span><span class="ct-1119a1">serialize</span><span class="ct-2d4545">();</span></span><span class="line"><span class="ct-2d4545"> </span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-d8c97c">return</span><span class="ct-2d4545"> </span><span class="ct-f6a4a5">this</span><span class="ct-2d4545">.</span><span class="ct-ac9394">web3</span><span class="ct-2d4545">.</span><span class="ct-ac9394">eth</span><span class="ct-2d4545">.</span><span class="ct-1119a1">sendSignedTransaction</span><span class="ct-2d4545">(</span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-7a16c5">`0x${</span><span class="ct-ac9394">serializedTx</span><span class="ct-5229fc">.</span><span class="ct-1119a1">toString</span><span class="ct-5229fc">(</span><span class="ct-7a16c5">'hex'</span><span class="ct-5229fc">)</span><span class="ct-7a16c5">}`</span></span><span class="line"><span class="ct-2d4545"> );</span></span><span class="line"><span class="ct-2d4545">}</span></span></code></pre><!--]--></div><h2 id="estimating-transaction-fee"><a href="#estimating-transaction-fee"><!--[-->Estimating transaction FEE<!--]--></a></h2><p><!--[-->Useful to get fixed amount of tokens from user with pre-estimated fee.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-d8c97c">import</span><span class="ct-2d4545"> { </span><span class="ct-ac9394">web3</span><span class="ct-2d4545"> } </span><span class="ct-d8c97c">from</span><span class="ct-2d4545"> </span><span class="ct-7a16c5">'.'</span><span class="ct-2d4545">;</span></span><span class="line"></span><span class="line"><span class="ct-1bac9e">const</span><span class="ct-2d4545"> </span><span class="ct-1119a1">estimateFee</span><span class="ct-2d4545"> </span><span class="ct-d8c97c">=</span><span class="ct-2d4545"> </span><span class="ct-1bac9e">async</span><span class="ct-2d4545"> ({</span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-ac9394">from</span><span class="ct-2d4545">,</span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-ac9394">to</span><span class="ct-2d4545">,</span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-ac9394">value</span><span class="ct-2d4545">,</span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-ac9394">memo</span><span class="ct-2d4545">,</span></span><span class="line"><span class="ct-2d4545">}) </span><span class="ct-1bac9e">=></span><span class="ct-2d4545"> {</span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-1bac9e">const</span><span class="ct-2d4545"> </span><span class="ct-f6a4a5">gasPrice</span><span class="ct-2d4545"> </span><span class="ct-d8c97c">=</span><span class="ct-2d4545"> </span><span class="ct-d8c97c">await</span><span class="ct-2d4545"> </span><span class="ct-ac9394">web3</span><span class="ct-2d4545">.</span><span class="ct-ac9394">eth</span><span class="ct-2d4545">.</span><span class="ct-1119a1">getGasPrice</span><span class="ct-2d4545">();</span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-1bac9e">const</span><span class="ct-2d4545"> </span><span class="ct-f6a4a5">gasLimit</span><span class="ct-2d4545"> </span><span class="ct-d8c97c">=</span><span class="ct-2d4545"> </span><span class="ct-d8c97c">await</span><span class="ct-2d4545"> </span><span class="ct-ac9394">web3</span><span class="ct-2d4545">.</span><span class="ct-ac9394">eth</span><span class="ct-2d4545">.</span><span class="ct-1119a1">estimateGas</span><span class="ct-2d4545">({</span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-ac9394">from</span><span class="ct-2d4545">,</span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-ac9394">to</span><span class="ct-2d4545">,</span></span><span class="line"><span class="ct-2d4545"> value: </span><span class="ct-ac9394">web3</span><span class="ct-2d4545">.</span><span class="ct-ac9394">utils</span><span class="ct-2d4545">.</span><span class="ct-1119a1">toHex</span><span class="ct-2d4545">(</span><span class="ct-ac9394">web3</span><span class="ct-2d4545">.</span><span class="ct-ac9394">utils</span><span class="ct-2d4545">.</span><span class="ct-1119a1">toWei</span><span class="ct-2d4545">(</span><span class="ct-ac9394">value</span><span class="ct-2d4545">, </span><span class="ct-7a16c5">'ether'</span><span class="ct-2d4545">)),</span></span><span class="line"><span class="ct-2d4545"> data: </span><span class="ct-ac9394">web3</span><span class="ct-2d4545">.</span><span class="ct-ac9394">utils</span><span class="ct-2d4545">.</span><span class="ct-1119a1">asciiToHex</span><span class="ct-2d4545">(</span><span class="ct-ac9394">memo</span><span class="ct-2d4545">),</span></span><span class="line"><span class="ct-2d4545"> }).</span><span class="ct-1119a1">call</span><span class="ct-2d4545">();</span></span><span class="line"><span class="ct-2d4545"> </span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-d8c97c">return</span><span class="ct-2d4545"> </span><span class="ct-ac9394">web3</span><span class="ct-2d4545">.</span><span class="ct-ac9394">utils</span><span class="ct-2d4545">.</span><span class="ct-1119a1">fromWei</span><span class="ct-2d4545">(</span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-254526">BigInt</span><span class="ct-2d4545">(</span><span class="ct-ac9394">gasPrice</span><span class="ct-2d4545">.</span><span class="ct-1119a1">toString</span><span class="ct-2d4545">())</span></span><span class="line"><span class="ct-2d4545"> .</span><span class="ct-1119a1">multiply</span><span class="ct-2d4545">(</span><span class="ct-254526">BigInt</span><span class="ct-2d4545">(</span><span class="ct-ac9394">gasLimit</span><span class="ct-2d4545">.</span><span class="ct-1119a1">toString</span><span class="ct-2d4545">()))</span></span><span class="line"><span class="ct-2d4545"> .</span><span class="ct-1119a1">toString</span><span class="ct-2d4545">()</span></span><span class="line"><span class="ct-2d4545"> );</span></span><span class="line"><span class="ct-2d4545">}</span></span></code></pre><!--]--></div><h2 id="subscribing-to-wallet-address-change"><a href="#subscribing-to-wallet-address-change"><!--[-->Subscribing to wallet address change<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-d8c97c">import</span><span class="ct-2d4545"> { </span><span class="ct-ac9394">web3</span><span class="ct-2d4545"> } </span><span class="ct-d8c97c">from</span><span class="ct-2d4545"> </span><span class="ct-7a16c5">'.'</span><span class="ct-2d4545">;</span></span><span class="line"></span><span class="line"><span class="ct-ac9394">web3</span><span class="ct-2d4545">.</span><span class="ct-ac9394">currentProvider</span><span class="ct-2d4545">.</span><span class="ct-1119a1">on</span><span class="ct-2d4545">(</span><span class="ct-7a16c5">'accountsChanged'</span><span class="ct-2d4545">, </span><span class="ct-ac9394">callback</span><span class="ct-2d4545">);</span></span></code></pre><!--]--></div><h2 id="watching-network-change"><a href="#watching-network-change"><!--[-->Watching network change<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-ac9394">ethereum</span><span class="ct-2d4545">.</span><span class="ct-1119a1">on</span><span class="ct-2d4545">(</span><span class="ct-7a16c5">'chainChanged'</span><span class="ct-2d4545">, </span><span class="ct-ac9394">handler</span><span class="ct-21a018">:</span><span class="ct-2d4545"> </span></span></code></pre><!--]--></div><h2 id="adding-custom-token-to-wallet"><a href="#adding-custom-token-to-wallet"><!--[-->Adding custom token to wallet<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-ac9394">window</span><span class="ct-2d4545">.</span><span class="ct-ac9394">ethereum</span></span><span class="line"><span class="ct-2d4545"> .</span><span class="ct-1119a1">request</span><span class="ct-2d4545">({</span></span><span class="line"><span class="ct-2d4545"> method: </span><span class="ct-7a16c5">'wallet_watchAsset'</span><span class="ct-2d4545">,</span></span><span class="line"><span class="ct-2d4545"> params: {</span></span><span class="line"><span class="ct-2d4545"> type: </span><span class="ct-7a16c5">'ERC20'</span><span class="ct-2d4545">,</span></span><span class="line"><span class="ct-2d4545"> options: {</span></span><span class="line"><span class="ct-2d4545"> address: </span><span class="ct-7a16c5">'0xb60e8dd61c5d32be8058bb8eb970870f07233155'</span><span class="ct-2d4545">,</span></span><span class="line"><span class="ct-2d4545"> symbol: </span><span class="ct-7a16c5">'FOO'</span><span class="ct-2d4545">,</span></span><span class="line"><span class="ct-2d4545"> decimals: </span><span class="ct-814f05">18</span><span class="ct-2d4545">,</span></span><span class="line"><span class="ct-2d4545"> image: </span><span class="ct-7a16c5">'https://foo.io/token-image.svg'</span><span class="ct-2d4545">,</span></span><span class="line"><span class="ct-2d4545"> },</span></span><span class="line"><span class="ct-2d4545"> },</span></span><span class="line"><span class="ct-2d4545"> })</span></span><span class="line"><span class="ct-56d6bf"> .</span><span class="ct-bc1a9e">then</span><span class="ct-56d6bf">((</span><span class="ct-3b06ef">success</span><span class="ct-56d6bf">) </span><span class="ct-839cc0">=></span><span class="ct-56d6bf"> {</span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-d8c97c">if</span><span class="ct-2d4545"> (</span><span class="ct-ac9394">success</span><span class="ct-2d4545">) {</span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-ac9394">console</span><span class="ct-2d4545">.</span><span class="ct-1119a1">log</span><span class="ct-2d4545">(</span><span class="ct-7a16c5">'FOO successfully added to wallet!'</span><span class="ct-2d4545">)</span></span><span class="line"><span class="ct-2d4545"> } </span><span class="ct-d8c97c">else</span><span class="ct-2d4545"> {</span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-d8c97c">throw</span><span class="ct-2d4545"> </span><span class="ct-d8c97c">new</span><span class="ct-2d4545"> </span><span class="ct-254526">Error</span><span class="ct-2d4545">(</span><span class="ct-7a16c5">'Something went wrong.'</span><span class="ct-2d4545">)</span></span><span class="line"><span class="ct-2d4545"> }</span></span><span class="line"><span class="ct-2d4545"> })</span></span><span class="line"><span class="ct-2d4545"> .</span><span class="ct-1119a1">catch</span><span class="ct-2d4545">(</span><span class="ct-ac9394">console</span><span class="ct-2d4545">.</span><span class="ct-ac9394">error</span><span class="ct-2d4545">)</span></span></code></pre><!--]--></div><h2 id="changing-network-to-custom"><a href="#changing-network-to-custom"><!--[-->Changing network to custom<!--]--></a></h2><p><!--[-->Checking current chainId:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-1bac9e">const</span><span class="ct-2d4545"> </span><span class="ct-1119a1">getChainID</span><span class="ct-2d4545"> </span><span class="ct-d8c97c">=</span><span class="ct-2d4545"> </span><span class="ct-1bac9e">async</span><span class="ct-2d4545"> () </span><span class="ct-1bac9e">=></span><span class="ct-2d4545"> {</span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-d8c97c">return</span><span class="ct-2d4545"> </span><span class="ct-ac9394">ethereum</span><span class="ct-2d4545">.</span><span class="ct-1119a1">request</span><span class="ct-2d4545">({ method: </span><span class="ct-7a16c5">'eth_chainId'</span><span class="ct-2d4545"> })</span></span><span class="line"><span class="ct-2d4545">}</span></span></code></pre><!--]--></div><p><!--[-->Asking wallet to change current network:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-d8c97c">try</span><span class="ct-2d4545"> {</span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-d8c97c">await</span><span class="ct-2d4545"> </span><span class="ct-ac9394">window</span><span class="ct-2d4545">.</span><span class="ct-ac9394">ethereum</span><span class="ct-2d4545">.</span><span class="ct-1119a1">request</span><span class="ct-2d4545">({</span></span><span class="line"><span class="ct-2d4545"> method: </span><span class="ct-7a16c5">'wallet_switchEthereumChain'</span><span class="ct-2d4545">,</span></span><span class="line"><span class="ct-2d4545"> params: [{ chainId: </span><span class="ct-7a16c5">'0x03'</span><span class="ct-2d4545"> }], </span><span class="ct-178967">// ropsten chainID (3) in hex</span></span><span class="line"><span class="ct-2d4545"> });</span></span><span class="line"><span class="ct-2d4545">} </span><span class="ct-d8c97c">catch</span><span class="ct-2d4545"> (</span><span class="ct-ac9394">switchError</span><span class="ct-2d4545">) {</span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-178967">// This error code indicates that the chain has not been added to MetaMask.</span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-d8c97c">if</span><span class="ct-2d4545"> (</span><span class="ct-ac9394">error</span><span class="ct-2d4545">.</span><span class="ct-ac9394">code</span><span class="ct-2d4545"> </span><span class="ct-d8c97c">===</span><span class="ct-2d4545"> </span><span class="ct-814f05">4902</span><span class="ct-2d4545">) {</span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-d8c97c">try</span><span class="ct-2d4545"> {</span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-d8c97c">await</span><span class="ct-2d4545"> </span><span class="ct-ac9394">window</span><span class="ct-2d4545">.</span><span class="ct-ac9394">ethereum</span><span class="ct-2d4545">.</span><span class="ct-1119a1">request</span><span class="ct-2d4545">({</span></span><span class="line"><span class="ct-2d4545"> method: </span><span class="ct-7a16c5">'wallet_addEthereumChain'</span><span class="ct-2d4545">,</span></span><span class="line"><span class="ct-2d4545"> params: [{ </span></span><span class="line"><span class="ct-2d4545"> chainId: </span><span class="ct-7a16c5">'0x03'</span><span class="ct-2d4545">, </span><span class="ct-178967">// ropsten chainID (3) in hex</span></span><span class="line"><span class="ct-2d4545"> chainName: </span><span class="ct-7a16c5">'Ropsten Test Network'</span><span class="ct-2d4545">, </span></span><span class="line"><span class="ct-2d4545"> nativeCurrency: { </span></span><span class="line"><span class="ct-2d4545"> name: </span><span class="ct-7a16c5">'ETH'</span><span class="ct-2d4545">,</span></span><span class="line"><span class="ct-2d4545"> symbol: </span><span class="ct-7a16c5">'ETH'</span><span class="ct-2d4545">,</span></span><span class="line"><span class="ct-2d4545"> decimals: </span><span class="ct-814f05">18</span></span><span class="line"><span class="ct-2d4545"> }, </span></span><span class="line"><span class="ct-2d4545"> rpcUrls: [</span><span class="ct-7a16c5">'https://ropsten.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161'</span><span class="ct-2d4545">], </span></span><span class="line"><span class="ct-2d4545"> blockExplorerUrls: [</span><span class="ct-7a16c5">'https://ropsten.etherscan.io'</span><span class="ct-2d4545">] </span></span><span class="line"><span class="ct-2d4545"> }] ,</span></span><span class="line"><span class="ct-2d4545"> });</span></span><span class="line"><span class="ct-2d4545"> } </span><span class="ct-d8c97c">catch</span><span class="ct-2d4545"> (</span><span class="ct-ac9394">addError</span><span class="ct-2d4545">) {</span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-178967">// handle "add" error</span></span><span class="line"><span class="ct-2d4545"> }</span></span><span class="line"><span class="ct-2d4545"> }</span></span><span class="line"><span class="ct-2d4545"> </span><span class="ct-178967">// handle other "switch" errors</span></span><span class="line"><span class="ct-2d4545">}</span></span></code></pre><!--]--></div><style>.ct-814f05{color:#79C0FF}.ct-21a018{color:#C9D1D9}.ct-254526{color:#79C0FF}.ct-5229fc{color:#A5D6FF}.ct-2bc6be{color:#79C0FF}.ct-3b06ef{color:#FFA657}.ct-17069f{color:#FF7B72}.ct-bc1a9e{color:#D2A8FF}.ct-56d6bf{color:#C9D1D9}.ct-839cc0{color:#FF7B72}.ct-1119a1{color:#D2A8FF}.ct-f6a4a5{color:#79C0FF}.ct-1bac9e{color:#FF7B72}.ct-178967{color:#8B949E}.ct-7a16c5{color:#A5D6FF}.ct-ac9394{color:#C9D1D9}.ct-2d4545{color:#C9D1D9}.ct-d8c97c{color:#FF7B72}.light .ct-d8c97c{color:#859900}.light .ct-2d4545{color:#657B83}.light .ct-ac9394{color:#268BD2}.light .ct-7a16c5{color:#2AA198}.light .ct-178967{color:#93A1A1}.light .ct-1bac9e{color:#073642}.light .ct-f6a4a5{color:#268BD2}.light .ct-1119a1{color:#268BD2}.light .ct-839cc0{color:#073642}.light .ct-56d6bf{color:#657B83}.light .ct-bc1a9e{color:#268BD2}.light .ct-17069f{color:#859900}.light .ct-3b06ef{color:#657B83}.light .ct-2bc6be{color:#859900}.light .ct-5229fc{color:#657B83}.light .ct-254526{color:#859900}.light .ct-21a018{color:#859900}.light .ct-814f05{color:#D33682}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/blockchain/common-typescript-examples/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697989928}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseUl.b892d423.js" crossorigin></script><script type="module" src="/nuxt/ProseLi.a224f663.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/blockchain/smart-contracts/_payload.js b/docs/blockchain/smart-contracts/_payload.js
index 72c145d..6de1af0 100644
--- a/docs/blockchain/smart-contracts/_payload.js
+++ b/docs/blockchain/smart-contracts/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av,aw,ax,ay,az,aA,aB,aC,aD,aE,aF,aG,aH,aI,aJ,aK,aL,aM,aN,aO,aP,aQ,aR,aS,aT,aU,aV,aW,aX,aY,aZ,a_,a$,ba,bb,bc,bd,be,bf,bg,bh,bi,bj,bk,bl,bm,bn,bo,bp,bq,br,bs,bt,bu,bv,bw,bx,by,bz,bA,bB,bC,bD,bE,bF,bG,bH,bI,bJ,bK,bL,bM,bN,bO,bP,bQ,bR,bS,bT,bU,bV,bW,bX,bY,bZ,b_,b$,ca,cb,cc,cd,ce,cf,cg,ch,ci,cj,ck,cl,cm,cn,co,cp,cq,cr,cs,ct,cu,cv,cw,cx,cy,cz,cA,cB,cC,cD,cE,cF,cG,cH,cI,cJ,cK,cL,cM,cN,cO,cP,cQ,cR,cS,cT,cU,cV,cW,cX,cY,cZ,c_,c$,da,db){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:bI,_path:bJ}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-GyYuUyCYai":{_path:bJ,_dir:"blockchain",_draft:aF,_partial:aF,_locale:"en",_empty:aF,title:bI,description:"For common functions see Common typescript examples.",excerpt:{type:bK,children:[{type:a,tag:A,props:{},children:[{type:c,value:bL},{type:a,tag:_,props:{href:bM},children:[{type:c,value:bN}]},{type:c,value:i}]},{type:a,tag:$,props:{id:aG},children:[{type:c,value:aH}]},{type:a,tag:A,props:{},children:[{type:c,value:bO}]},{type:a,tag:m,props:{code:aI,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:c,value:aI}]}]}]},{type:a,tag:$,props:{id:aJ},children:[{type:c,value:aK}]},{type:a,tag:A,props:{},children:[{type:c,value:bP},{type:a,tag:G,props:{},children:[{type:c,value:bQ}]},{type:c,value:bR},{type:a,tag:G,props:{},children:[{type:c,value:bS}]},{type:c,value:bT},{type:a,tag:_,props:{href:bU,rel:[as]},children:[{type:c,value:bV}]},{type:c,value:bW}]},{type:a,tag:A,props:{},children:[{type:a,tag:G,props:{},children:[{type:c,value:bX}]},{type:c,value:bY},{type:a,tag:G,props:{},children:[{type:c,value:at}]},{type:c,value:bZ},{type:a,tag:G,props:{},children:[{type:c,value:b_}]},{type:c,value:b$},{type:a,tag:G,props:{},children:[{type:c,value:at}]},{type:c,value:ca}]},{type:a,tag:D,props:{id:aL},children:[{type:c,value:aM}]},{type:a,tag:m,props:{code:aN,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:c,value:aN}]}]}]},{type:a,tag:D,props:{id:aO},children:[{type:c,value:aP}]},{type:a,tag:m,props:{code:aQ,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:c,value:aQ}]}]}]},{type:a,tag:D,props:{id:aR},children:[{type:c,value:aS}]},{type:a,tag:A,props:{},children:[{type:c,value:cb}]},{type:a,tag:m,props:{code:aT,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:c,value:aT}]}]}]},{type:a,tag:m,props:{code:aU,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:c,value:aU}]}]}]},{type:a,tag:$,props:{id:aV},children:[{type:c,value:aW}]},{type:a,tag:A,props:{},children:[{type:c,value:cc}]},{type:a,tag:m,props:{code:aX,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:c,value:aX}]}]}]},{type:a,tag:D,props:{id:aY},children:[{type:c,value:aZ}]},{type:a,tag:m,props:{code:a_,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:c,value:a_}]}]}]},{type:a,tag:D,props:{id:a$},children:[{type:c,value:ba}]},{type:a,tag:A,props:{},children:[{type:c,value:cd},{type:a,tag:au,props:{},children:[{type:c,value:af}]},{type:c,value:ce}]},{type:a,tag:m,props:{code:bb,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:c,value:bb}]}]}]},{type:a,tag:D,props:{id:bc},children:[{type:c,value:bd}]},{type:a,tag:A,props:{},children:[{type:c,value:cf}]},{type:a,tag:m,props:{code:be,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:c,value:be}]}]}]},{type:a,tag:D,props:{id:bf},children:[{type:c,value:bg}]},{type:a,tag:A,props:{},children:[{type:c,value:cg},{type:a,tag:au,props:{},children:[{type:c,value:af}]},{type:c,value:ch},{type:a,tag:_,props:{href:ci,rel:[as]},children:[{type:c,value:cj}]}]},{type:a,tag:m,props:{code:bh,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:c,value:bh}]}]}]}]},body:{type:bK,children:[{type:a,tag:A,props:{},children:[{type:c,value:bL},{type:a,tag:_,props:{href:bM},children:[{type:c,value:bN}]},{type:c,value:i}]},{type:a,tag:$,props:{id:aG},children:[{type:c,value:aH}]},{type:a,tag:A,props:{},children:[{type:c,value:bO}]},{type:a,tag:m,props:{code:aI,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:ag}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bi}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ah}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ai}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"'web3-eth-contract'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:ag}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ah}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ai}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:bj}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:I},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:aj},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:L},children:[{type:c,value:"abi"}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:U},children:[{type:c,value:"object"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:L},children:[{type:c,value:bk}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"?:"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:U},children:[{type:c,value:ck}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ak}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:I},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:I},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:cl},children:[{type:c,value:cm}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:"ct-82aa2e"},children:[{type:c,value:"JSON"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:cl},children:[{type:c,value:"parse"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:l}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:al}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:am}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:bi}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cm}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bk}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bl}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:bm}]},{type:a,tag:b,props:{class:av},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:cn}]},{type:a,tag:b,props:{class:av},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]}]}]}]},{type:a,tag:$,props:{id:aJ},children:[{type:c,value:aK}]},{type:a,tag:A,props:{},children:[{type:c,value:bP},{type:a,tag:G,props:{},children:[{type:c,value:bQ}]},{type:c,value:bR},{type:a,tag:G,props:{},children:[{type:c,value:bS}]},{type:c,value:bT},{type:a,tag:_,props:{href:bU,rel:[as]},children:[{type:c,value:bV}]},{type:c,value:bW}]},{type:a,tag:A,props:{},children:[{type:a,tag:G,props:{},children:[{type:c,value:bX}]},{type:c,value:bY},{type:a,tag:G,props:{},children:[{type:c,value:at}]},{type:c,value:bZ},{type:a,tag:G,props:{},children:[{type:c,value:b_}]},{type:c,value:b$},{type:a,tag:G,props:{},children:[{type:c,value:at}]},{type:c,value:ca}]},{type:a,tag:D,props:{id:aL},children:[{type:c,value:aM}]},{type:a,tag:m,props:{code:aN,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:u},children:[{type:c,value:co}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:ag}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ah}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ai}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:bj}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002F ABI of contract"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:aw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:cp}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:cq}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002F address for contract"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:cr}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:bm}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:cs}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:bn}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" ({}) "}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:ct}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:aw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002F Calling write method"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ax}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002F authorizing with Metamask"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cu}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:cv}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"({ method: "}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"'eth_requestAccounts'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" });"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002F getting wallet address"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:cw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cu}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"selectedAddress"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002F calling \"store\" store method for contract"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002F payload should include `from` address, that matches"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002F current user's wallet"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bo}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:cx}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:ay},children:[{type:c,value:az}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"'Parameter'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:")."}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"send"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"({"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" from: "}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:X}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cy}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bp}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:an}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ao}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:bq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:br},children:[{type:c,value:cz}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bs}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002F calling read method"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ax}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002F this method can return data"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:bt}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bo}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"retrieve"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bu}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:bv}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aA}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bp}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:an}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ao}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:bq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:br},children:[{type:c,value:cz}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bs}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"}"}]}]}]}]}]},{type:a,tag:D,props:{id:aO},children:[{type:c,value:aP}]},{type:a,tag:m,props:{code:aQ,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:u},children:[{type:c,value:co}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:ag}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ah}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ai}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:bj}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002F ABI контракта"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:aw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:cp}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:cq}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002F contract address"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:cr}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:u},children:[{type:c,value:ct}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:aw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002F account's private key"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:bw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"'...'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002F write-methods requires private key"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:I},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:aj},children:[{type:c,value:cs}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:I},children:[{type:c,value:bn}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:L},children:[{type:c,value:cA}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:U},children:[{type:c,value:"number"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aB}]},{type:a,tag:b,props:{class:I},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:bx}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bo}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:cx}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cA}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:cB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:am}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cC}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"privateKeyToAccount"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" to: "}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:X}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" data: "}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bx}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"encodeABI"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:cD}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" gas: "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bx}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"estimateGas"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"({ from: "}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bk}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" }),"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" gasPrice: "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:am}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"getGasPrice"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:cD}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" };"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:cE}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:am}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cC}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"signTransaction"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:X}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:X}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" );"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:am}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"sendSignedTransaction"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cE}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"rawTransaction"}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:cF}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bl}]}]}]}]}]},{type:a,tag:D,props:{id:aR},children:[{type:c,value:aS}]},{type:a,tag:A,props:{},children:[{type:c,value:cb}]},{type:a,tag:m,props:{code:aT,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:"requests"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" ["}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cG}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cH}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"balanceOf"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bu}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bv}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:X}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cG}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cH}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"getStaked"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bu}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bv}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" ]"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:bt}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:by}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cv}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]}]}]}]},{type:a,tag:m,props:{code:aU,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:ap}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ap}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"givenProvider"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"||"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:"PROVIDER_URL"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:I},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:aj},children:[{type:c,value:by}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:L},children:[{type:c,value:cI}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:U},children:[{type:c,value:"any"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"[]) "}]},{type:a,tag:b,props:{class:I},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ax}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"getWeb3NoAccount"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aA}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:bz}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"BatchRequest"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aA}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:cJ}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cI}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"map"}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:al}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:U},children:[{type:c,value:cK}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"(("}]},{type:a,tag:b,props:{class:L},children:[{type:c,value:cL}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:L},children:[{type:c,value:cM}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aB}]},{type:a,tag:b,props:{class:I},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bz}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"add"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:bA}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aC}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ao}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cN}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:cM}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aC}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" } "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"else"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cN}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:cL}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bt}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" })"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" );"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" });"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cy}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bz}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"execute"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aA}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:al}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:br},children:[{type:c,value:cK}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"all"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cJ}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bp}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:an}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:al}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:"ct-f1ea08"},children:[{type:c,value:"null"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bs}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bl}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:bm}]},{type:a,tag:b,props:{class:av},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:cn}]},{type:a,tag:b,props:{class:av},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:by}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]}]}]}]},{type:a,tag:$,props:{id:aV},children:[{type:c,value:aW}]},{type:a,tag:A,props:{},children:[{type:c,value:cc}]},{type:a,tag:m,props:{code:aX,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ag}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ap}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ai}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"'web3'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:ap}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"'YOUR_RPC_ENDPOINT_HERE'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:cO}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"'YOUR ABI HERE'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"'YOUR CONTRACT ADDRESS HERE'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:bB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ap}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:bi}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:cO}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]}]}]}]},{type:a,tag:D,props:{id:aY},children:[{type:c,value:aZ}]},{type:a,tag:m,props:{code:a_,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:"referralProgramContract"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cP}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aD}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"RegisterUser"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"()"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:aD}]},{type:a,tag:b,props:{class:aj},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:cQ},children:[{type:c,value:bC}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:cR}]},{type:a,tag:b,props:{class:L},children:[{type:c,value:cS}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:U},children:[{type:c,value:ck}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aB}]},{type:a,tag:b,props:{class:I},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"`| UserRegistered | events | ${"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cS}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:cT}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" })"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aD}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:bD}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:X}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:I},children:[{type:c,value:bn}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:L},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:L},children:[{type:c,value:cU}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:U},children:[{type:c,value:"boolean"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:L},children:[{type:c,value:cV}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:cW},children:[{type:c,value:"RegisterUserResponseInterface"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }) "}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ax}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:bA}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cU}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ao}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:al}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:cX}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:cY}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ah}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cV}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cX}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cY}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" } "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:an}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ao}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"`| ONCE | ${"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:cT}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bE}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" )"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:aD}]},{type:a,tag:b,props:{class:aj},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:cQ},children:[{type:c,value:bF}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:cR}]},{type:a,tag:b,props:{class:L},children:[{type:c,value:cZ}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:cW},children:[{type:c,value:"ErrnoException"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aB}]},{type:a,tag:b,props:{class:I},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cZ}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:c_}]}]}]}]}]},{type:a,tag:D,props:{id:a$},children:[{type:c,value:ba}]},{type:a,tag:A,props:{},children:[{type:c,value:cd},{type:a,tag:au,props:{},children:[{type:c,value:af}]},{type:c,value:ce}]},{type:a,tag:m,props:{code:bb,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:aE}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:c$}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" value: [],"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bE}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bG}]},{type:a,tag:b,props:{class:ay},children:[{type:c,value:az}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bH}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cP}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:af}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ak}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ae}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:bD}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ae}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:da}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:db}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ae}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:bF}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ae}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:bC}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"str"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Y}]}]}]}]}]},{type:a,tag:D,props:{id:bc},children:[{type:c,value:bd}]},{type:a,tag:A,props:{},children:[{type:c,value:cf}]},{type:a,tag:m,props:{code:be,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:aE}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bG}]},{type:a,tag:b,props:{class:ay},children:[{type:c,value:az}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:X}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" address: ["}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"'address-1'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"'address-2'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"], "}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002FOnly get events from specific addresses"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" topics: [] "}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002FWhat topics to subscribe to"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bH}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:aE}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"'logs'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:R}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:bA}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:cF}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aC}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ak}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ak}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:c_}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:bD}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:da}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:db}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:bF}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:bq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aC}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" })"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:bC}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"nr"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Y}]}]}]}]}]},{type:a,tag:D,props:{id:bf},children:[{type:c,value:bg}]},{type:a,tag:A,props:{},children:[{type:c,value:cg},{type:a,tag:au,props:{},children:[{type:c,value:af}]},{type:c,value:ch},{type:a,tag:_,props:{href:ci,rel:[as]},children:[{type:c,value:cj}]}]},{type:a,tag:m,props:{code:bh,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002Fexample options(optional)"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:aE}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:c$}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002F only get events where transfer value was 1000 or 1337"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" value: ["}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"'1000'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"'1337'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"] "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bE}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002F number | \"earliest\" | \"pending\" | \"latest\""}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bG}]},{type:a,tag:b,props:{class:ay},children:[{type:c,value:az}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:", "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" toBlock: "}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"'latest'"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bH}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"getPastEvents"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"'Transfer'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ak}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ae}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"then"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"results"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ae}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:an}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-156cde{color:#FFA657}.ct-86b87d{color:#A5D6FF}.ct-f1ea08{color:#79C0FF}.ct-ee6b52{color:#79C0FF}.ct-6138fb{color:#79C0FF}.ct-d06ad1{color:#79C0FF}.ct-7cfc7d{color:#FF7B72}.ct-709ef0{color:#8B949E}.ct-d2d503{color:#FFA657}.ct-af8265{color:#D2A8FF}.ct-82aa2e{color:#79C0FF}.ct-f3b352{color:#79C0FF}.ct-6e9d8e{color:#79C0FF}.ct-8d5659{color:#FFA657}.ct-ba7760{color:#FF7B72}.ct-98d685{color:#D2A8FF}.ct-303309{color:#C9D1D9}.ct-39fbef{color:#FF7B72}.ct-ba7e2c{color:#A5D6FF}.ct-7194b1{color:#C9D1D9}.ct-b1eeeb{color:#C9D1D9}.ct-c8ffb0{color:#FF7B72}.light .ct-c8ffb0{color:#859900}.light .ct-b1eeeb{color:#657B83}.light .ct-7194b1{color:#268BD2}.light .ct-ba7e2c{color:#2AA198}.light .ct-39fbef{color:#073642}.light .ct-303309{color:#657B83}.light .ct-98d685{color:#268BD2}.light .ct-ba7760{color:#859900}.light .ct-8d5659{color:#657B83}.light .ct-6e9d8e{color:#859900}.light .ct-f3b352{color:#268BD2}.light .ct-82aa2e{color:#657B83}.light .ct-af8265{color:#268BD2}.light .ct-d2d503{color:#657B83}.light .ct-709ef0{color:#93A1A1}.light .ct-7cfc7d{color:#073642}.light .ct-d06ad1{color:#268BD2}.light .ct-6138fb{color:#D33682}.light .ct-ee6b52{color:#859900}.light .ct-f1ea08{color:#B58900}.light .ct-86b87d{color:#2AA198}.light .ct-156cde{color:#268BD2}"}]}],toc:{title:v,searchDepth:ar,depth:ar,links:[{id:aG,depth:ar,text:aH},{id:aJ,depth:ar,text:aK,children:[{id:aL,depth:Z,text:aM},{id:aO,depth:Z,text:aP},{id:aR,depth:Z,text:aS}]},{id:aV,depth:ar,text:aW,children:[{id:aY,depth:Z,text:aZ},{id:a$,depth:Z,text:ba},{id:bc,depth:Z,text:bd},{id:bf,depth:Z,text:bg}]}]}},_type:"markdown",_id:"content:Blockchain:Smart contracts.md",_source:"content",_file:"Blockchain\u002FSmart contracts.md",_extension:"md"}},prerenderedAt:1703695529362}}("element","span","text","ct-b1eeeb","line"," ","ct-7194b1","ct-c8ffb0",".","ct-303309","ct-af8265","(","code","ct-7cfc7d","ct-ba7e2c","=","ct-d06ad1","const"," "," ","ct-709ef0","","typescript","pre"," {",");","p",";","ct-ba7760","h3",", ","=\u003E","strong","web3","ct-39fbef","log"," (","ct-8d5659","on",":"," { ","new","await","options"," ","console","ct-6e9d8e","CONTRACT_ADDRESS","contract",",","))",3,"a","h2","getContract","e"," ","event"," .","Transfer","import"," } ","from","ct-98d685",")","return","eth","catch",") {","Web3","subscription",2,"nofollow","gas","code-inline","ct-d2d503","CONTRACT_ABI","try","ct-6138fb","0","();",") ","err"," .","let",false,"getting-smart-contract-instance","Getting smart contract instance","import { Contract } from 'web3-eth-contract';\nimport { web3 } from '.';\n\nconst getContract = (abi: object, address?: string): Contract =\u003E {\n const abiFromJson = JSON.parse(JSON.stringify(abi));\n return new web3.eth.Contract(abiFromJson, address);\n};\n\nexport default getContract;\n","executing-contract-method","Executing contract method","example-for-metamask-without-private-key","Example for #Metamask without private key","\u002F\u002F see example below\nimport { getContract } from '.';\n\n\u002F\u002F ABI of contract\nconst CONTRACT_ABI = { \u002F* ... *\u002F };\n \u002F\u002F address for contract\nconst CONTRACT_ADDRESS = '0xdea164f67df4dbfe675d5271c9d404e0260f33bb';\n\nexport const executeContractMethod = async ({}) =\u003E {\n \u002F\u002F getting contract\n const contract = getContract(CONTRACT_ABI, CONTRACT_ADDRESS);\n \n \u002F\u002F Calling write method\n try {\n \u002F\u002F authorizing with Metamask\n await web3.currentProvider.request({ method: 'eth_requestAccounts' });\n \u002F\u002F getting wallet address\n const addressUser = web3.currentProvider.selectedAddress;\n \u002F\u002F calling \"store\" store method for contract\n \u002F\u002F payload should include `from` address, that matches\n \u002F\u002F current user's wallet\n await contract.methods.store(0, 'Parameter').send({\n from: addressUser,\n });\n } catch (e) {\n throw new Error(e);\n }\n \n \u002F\u002F calling read method\n try {\n \u002F\u002F this method can return data\n const result = await contract.methods.retrieve().call();\n } catch (e) {\n throw new Error(e);\n }\n}\n","nodejs-and-react-native-example","Node.js and React Native example","\u002F\u002F see example below\nimport { getContract } from '.';\n\n\u002F\u002F ABI контракта\nconst CONTRACT_ABI = { \u002F* ... *\u002F };\n\u002F\u002F contract address\nconst CONTRACT_ADDRESS = '0xdea164f67df4dbfe675d5271c9d404e0260f33bb';\n\u002F\u002F getting contract\nconst contract = getContract(CONTRACT_ABI, CONTRACT_ADDRESS);\n\u002F\u002F account's private key\nconst privateKey = '...';\n\n\u002F\u002F write-methods requires private key\nconst executeContractMethod = async (val: number) =\u003E {\n const transaction = contract.methods.store(val);\n const account = web3.eth.accounts.privateKeyToAccount(privateKey);\n const options = {\n to: CONTRACT_ADDRESS,\n data: transaction.encodeABI(),\n gas: await transaction.estimateGas({ from: account.address }),\n gasPrice: await web3.eth.getGasPrice(),\n };\n const signed = await web3.eth.accounts.signTransaction(\n options,\n privateKey,\n );\n await web3.eth.sendSignedTransaction(signed.rawTransaction!);\n};\n","calling-a-batch-of-contracts-methods","Calling a batch of contract's methods"," const requests = [\n contract.method.balanceOf().call,\n contract.method.getStaked().call\n ]\n\n const result = await makeBatchRequest(request);\n","const web3 = new Web3(Web3.givenProvider || PROVIDER_URL);\n\nconst makeBatchRequest = (calls: any[]) =\u003E {\n try {\n const web3 = getWeb3NoAccount();\n const batch = new web3.BatchRequest();\n\n const promises = calls.map((call) =\u003E {\n return new Promise((resolve, reject) =\u003E {\n batch.add(\n call.request({}, (err, result) =\u003E {\n if (err) {\n reject(err);\n } else {\n resolve(result);\n }\n })\n );\n });\n });\n\n batch.execute();\n\n return Promise.all(promises);\n } catch {\n return null;\n }\n};\n\nexport default makeBatchRequest;\n","subscribing-to-smart-contract-events","Subscribing to smart contract events"," import Web3 from 'web3';\n const web3 = new Web3('YOUR_RPC_ENDPOINT_HERE');\n const ABI = 'YOUR ABI HERE';\n const CONTRACT_ADDRESS = 'YOUR CONTRACT ADDRESS HERE';\n const myContract = new Web3.Contract(ABI, CONTRACT_ADDRESS);\n","by-accessing-contractevents","By accessing contract.events","referralProgramContract.events\n .RegisterUser()\n .on('connected', (subscriptionId: string) =\u003E {\n console.log(`| UserRegistered | events | ${subscriptionId}`);\n })\n .on(\n 'data',\n async (event: {\n removed: boolean;\n returnValues: RegisterUserResponseInterface;\n }) =\u003E {\n try {\n if (event.removed) {\n return;\n }\n const { user, referrer } = event.returnValues;\n console.log(user, referrer);\n } catch (e) {\n console.log(`| ONCE | ${e}`);\n }\n },\n )\n .on('error', (error: ErrnoException) =\u003E {\n console.log(error);\n });\n","with-filtering","With filtering"," let options = {\n filter: {\n value: [],\n },\n fromBlock: 0\n };\n\n myContract.events.Transfer(options)\n .on('data', event =\u003E console.log(event))\n .on('changed', changed =\u003E console.log(changed))\n .on('error', err =\u003E throw err)\n .on('connected', str =\u003E console.log(str))\n","common-subscribe-method","Common Subscribe method"," let options = {\n fromBlock: 0,\n address: ['address-1', 'address-2'], \u002F\u002FOnly get events from specific addresses\n topics: [] \u002F\u002FWhat topics to subscribe to\n };\n\n let subscription = ('logs', options, (err,event) =\u003E {\n if (!err)\n console.log(event)\n });\n\n subscription.on('data', event =\u003E console.log(event))\n subscription.on('changed', changed =\u003E console.log(changed))\n subscription.on('error', err =\u003E { throw err })\n subscription.on('connected', nr =\u003E console.log(nr))\n","getting-event-history","Getting event history"," \u002F\u002Fexample options(optional)\n let options = {\n filter: {\n \u002F\u002F only get events where transfer value was 1000 or 1337\n value: ['1000', '1337'] \n },\n \u002F\u002F number | \"earliest\" | \"pending\" | \"latest\"\n fromBlock: 0, \n toBlock: 'latest'\n };\n\n myContract.getPastEvents('Transfer', options)\n .then(results =\u003E console.log(results))\n .catch(err =\u003E throw err);\n\n","Contract","'.'","address","};","export","async","methods"," } ","throw","ct-ee6b52"," }","result","().","call","privateKey","transaction","makeBatchRequest","batch","if","myContract","'connected'","'data'"," },","'error'"," fromBlock: "," };","Smart Contracts","\u002Fblockchain\u002Fsmart-contracts","root","For common functions see ","Common%20typescript%20examples","Common typescript examples","Useful for calling smart contract methods:","Contract has ","read"," and ","write"," methods. To get a list of methods, you can paste contract address on ","https:\u002F\u002Fetherscan.io\u002Ftoken\u002F0xdac17f958d2ee523a2206206994597c13d831ec7#readContract","https:\u002F\u002Fetherscan.io\u002F ETH"," or any other service.","Read"," methods doesn't require spending ",". ","Write"," methods cost some amount of ",", hence they will be executed with confirmation from user.","Function calls batch of requests, returning array of results. For example:","There're different ways to subscribe for contract events. For all of them you will need following variables:","We're listening to "," event here:","Filtering options can also be specified:","Getting history for "," events for specific values. More info can be found ","https:\u002F\u002Fweb3js.readthedocs.io\u002Fen\u002Fv1.2.11\u002Fweb3-eth-subscribe.html#","here","string","ct-f3b352","abiFromJson","default","\u002F\u002F see example below","\u002F* ... *\u002F"," };","'0xdea164f67df4dbfe675d5271c9d404e0260f33bb'","executeContractMethod","\u002F\u002F getting contract","currentProvider","request","addressUser","store"," });","Error","val","account","accounts","(),","signed","!"," ","method","calls","promises","Promise","resolve","reject"," ","ABI","events","ct-86b87d",", (","subscriptionId","}`","removed","returnValues","ct-156cde","user","referrer","error"," });"," filter: {","'changed'","changed"))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av,aw,ax,ay,az,aA,aB,aC,aD,aE,aF,aG,aH,aI,aJ,aK,aL,aM,aN,aO,aP,aQ,aR,aS,aT,aU,aV,aW,aX,aY,aZ,a_,a$,ba,bb,bc,bd,be,bf,bg,bh,bi,bj,bk,bl,bm,bn,bo,bp,bq,br,bs,bt,bu,bv,bw,bx,by,bz,bA,bB,bC,bD,bE,bF,bG,bH,bI,bJ,bK,bL,bM,bN,bO,bP,bQ,bR,bS,bT,bU,bV,bW,bX,bY,bZ,b_,b$,ca,cb,cc,cd,ce,cf,cg,ch,ci,cj,ck,cl,cm,cn,co,cp,cq,cr,cs,ct,cu,cv,cw,cx,cy,cz,cA,cB,cC,cD,cE,cF,cG,cH,cI,cJ,cK,cL,cM,cN,cO,cP,cQ,cR,cS,cT,cU,cV,cW,cX,cY,cZ,c_,c$,da,db){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:bI,_path:bJ}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-GyYuUyCYai":{_path:bJ,_dir:"blockchain",_draft:aF,_partial:aF,_locale:"en",_empty:aF,title:bI,description:"For common functions see Common typescript examples.",excerpt:{type:bK,children:[{type:a,tag:A,props:{},children:[{type:c,value:bL},{type:a,tag:_,props:{href:bM},children:[{type:c,value:bN}]},{type:c,value:i}]},{type:a,tag:$,props:{id:aG},children:[{type:c,value:aH}]},{type:a,tag:A,props:{},children:[{type:c,value:bO}]},{type:a,tag:m,props:{code:aI,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:c,value:aI}]}]}]},{type:a,tag:$,props:{id:aJ},children:[{type:c,value:aK}]},{type:a,tag:A,props:{},children:[{type:c,value:bP},{type:a,tag:G,props:{},children:[{type:c,value:bQ}]},{type:c,value:bR},{type:a,tag:G,props:{},children:[{type:c,value:bS}]},{type:c,value:bT},{type:a,tag:_,props:{href:bU,rel:[as]},children:[{type:c,value:bV}]},{type:c,value:bW}]},{type:a,tag:A,props:{},children:[{type:a,tag:G,props:{},children:[{type:c,value:bX}]},{type:c,value:bY},{type:a,tag:G,props:{},children:[{type:c,value:at}]},{type:c,value:bZ},{type:a,tag:G,props:{},children:[{type:c,value:b_}]},{type:c,value:b$},{type:a,tag:G,props:{},children:[{type:c,value:at}]},{type:c,value:ca}]},{type:a,tag:D,props:{id:aL},children:[{type:c,value:aM}]},{type:a,tag:m,props:{code:aN,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:c,value:aN}]}]}]},{type:a,tag:D,props:{id:aO},children:[{type:c,value:aP}]},{type:a,tag:m,props:{code:aQ,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:c,value:aQ}]}]}]},{type:a,tag:D,props:{id:aR},children:[{type:c,value:aS}]},{type:a,tag:A,props:{},children:[{type:c,value:cb}]},{type:a,tag:m,props:{code:aT,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:c,value:aT}]}]}]},{type:a,tag:m,props:{code:aU,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:c,value:aU}]}]}]},{type:a,tag:$,props:{id:aV},children:[{type:c,value:aW}]},{type:a,tag:A,props:{},children:[{type:c,value:cc}]},{type:a,tag:m,props:{code:aX,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:c,value:aX}]}]}]},{type:a,tag:D,props:{id:aY},children:[{type:c,value:aZ}]},{type:a,tag:m,props:{code:a_,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:c,value:a_}]}]}]},{type:a,tag:D,props:{id:a$},children:[{type:c,value:ba}]},{type:a,tag:A,props:{},children:[{type:c,value:cd},{type:a,tag:au,props:{},children:[{type:c,value:af}]},{type:c,value:ce}]},{type:a,tag:m,props:{code:bb,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:c,value:bb}]}]}]},{type:a,tag:D,props:{id:bc},children:[{type:c,value:bd}]},{type:a,tag:A,props:{},children:[{type:c,value:cf}]},{type:a,tag:m,props:{code:be,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:c,value:be}]}]}]},{type:a,tag:D,props:{id:bf},children:[{type:c,value:bg}]},{type:a,tag:A,props:{},children:[{type:c,value:cg},{type:a,tag:au,props:{},children:[{type:c,value:af}]},{type:c,value:ch},{type:a,tag:_,props:{href:ci,rel:[as]},children:[{type:c,value:cj}]}]},{type:a,tag:m,props:{code:bh,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:c,value:bh}]}]}]}]},body:{type:bK,children:[{type:a,tag:A,props:{},children:[{type:c,value:bL},{type:a,tag:_,props:{href:bM},children:[{type:c,value:bN}]},{type:c,value:i}]},{type:a,tag:$,props:{id:aG},children:[{type:c,value:aH}]},{type:a,tag:A,props:{},children:[{type:c,value:bO}]},{type:a,tag:m,props:{code:aI,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:ag}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bi}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ah}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ai}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"'web3-eth-contract'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:ag}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ah}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ai}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:bj}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:I},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:aj},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:L},children:[{type:c,value:"abi"}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:U},children:[{type:c,value:"object"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:L},children:[{type:c,value:bk}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"?:"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:U},children:[{type:c,value:ck}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ak}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:I},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:I},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:cl},children:[{type:c,value:cm}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:"ct-55e18c"},children:[{type:c,value:"JSON"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:cl},children:[{type:c,value:"parse"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:l}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:al}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:am}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:bi}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cm}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bk}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bl}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:bm}]},{type:a,tag:b,props:{class:av},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:cn}]},{type:a,tag:b,props:{class:av},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]}]}]}]},{type:a,tag:$,props:{id:aJ},children:[{type:c,value:aK}]},{type:a,tag:A,props:{},children:[{type:c,value:bP},{type:a,tag:G,props:{},children:[{type:c,value:bQ}]},{type:c,value:bR},{type:a,tag:G,props:{},children:[{type:c,value:bS}]},{type:c,value:bT},{type:a,tag:_,props:{href:bU,rel:[as]},children:[{type:c,value:bV}]},{type:c,value:bW}]},{type:a,tag:A,props:{},children:[{type:a,tag:G,props:{},children:[{type:c,value:bX}]},{type:c,value:bY},{type:a,tag:G,props:{},children:[{type:c,value:at}]},{type:c,value:bZ},{type:a,tag:G,props:{},children:[{type:c,value:b_}]},{type:c,value:b$},{type:a,tag:G,props:{},children:[{type:c,value:at}]},{type:c,value:ca}]},{type:a,tag:D,props:{id:aL},children:[{type:c,value:aM}]},{type:a,tag:m,props:{code:aN,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:u},children:[{type:c,value:co}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:ag}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ah}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ai}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:bj}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002F ABI of contract"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:aw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:cp}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:cq}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002F address for contract"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:cr}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:bm}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:cs}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:bn}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" ({}) "}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:ct}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:aw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002F Calling write method"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ax}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002F authorizing with Metamask"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cu}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:cv}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"({ method: "}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"'eth_requestAccounts'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" });"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002F getting wallet address"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:cw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cu}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"selectedAddress"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002F calling \"store\" store method for contract"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002F payload should include `from` address, that matches"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002F current user's wallet"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bo}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:cx}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:ay},children:[{type:c,value:az}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"'Parameter'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:")."}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"send"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"({"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" from: "}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:X}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cy}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bp}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:an}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ao}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:bq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:br},children:[{type:c,value:cz}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bs}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002F calling read method"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ax}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002F this method can return data"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:bt}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bo}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"retrieve"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bu}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:bv}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aA}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bp}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:an}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ao}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:bq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:br},children:[{type:c,value:cz}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bs}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"}"}]}]}]}]}]},{type:a,tag:D,props:{id:aO},children:[{type:c,value:aP}]},{type:a,tag:m,props:{code:aQ,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:u},children:[{type:c,value:co}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:ag}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ah}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ai}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:bj}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002F ABI контракта"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:aw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:cp}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:cq}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002F contract address"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:cr}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:u},children:[{type:c,value:ct}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:aw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002F account's private key"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:bw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"'...'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002F write-methods requires private key"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:I},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:aj},children:[{type:c,value:cs}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:I},children:[{type:c,value:bn}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:L},children:[{type:c,value:cA}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:U},children:[{type:c,value:"number"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aB}]},{type:a,tag:b,props:{class:I},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:bx}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bo}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:cx}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cA}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:cB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:am}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cC}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"privateKeyToAccount"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" to: "}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:X}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" data: "}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bx}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"encodeABI"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:cD}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" gas: "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bx}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"estimateGas"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"({ from: "}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bk}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" }),"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" gasPrice: "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:am}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"getGasPrice"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:cD}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" };"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:cE}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:am}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cC}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"signTransaction"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:X}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:X}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" );"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:am}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"sendSignedTransaction"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cE}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"rawTransaction"}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:cF}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bl}]}]}]}]}]},{type:a,tag:D,props:{id:aR},children:[{type:c,value:aS}]},{type:a,tag:A,props:{},children:[{type:c,value:cb}]},{type:a,tag:m,props:{code:aT,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:"requests"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" ["}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cG}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cH}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"balanceOf"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bu}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bv}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:X}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cG}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cH}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"getStaked"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bu}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bv}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" ]"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:bt}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:by}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cv}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]}]}]}]},{type:a,tag:m,props:{code:aU,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:ap}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ap}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"givenProvider"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"||"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:"PROVIDER_URL"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:I},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:aj},children:[{type:c,value:by}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:L},children:[{type:c,value:cI}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:U},children:[{type:c,value:"any"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"[]) "}]},{type:a,tag:b,props:{class:I},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ax}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"getWeb3NoAccount"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aA}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:bz}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"BatchRequest"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aA}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:cJ}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cI}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"map"}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:al}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:U},children:[{type:c,value:cK}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"(("}]},{type:a,tag:b,props:{class:L},children:[{type:c,value:cL}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:L},children:[{type:c,value:cM}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aB}]},{type:a,tag:b,props:{class:I},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bz}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"add"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:bA}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aC}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ao}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cN}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:cM}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aC}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" } "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"else"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cN}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:cL}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bt}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" })"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" );"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" });"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cy}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bz}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"execute"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aA}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:al}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:br},children:[{type:c,value:cK}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"all"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cJ}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bp}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:an}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:al}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:"ct-5e1c9b"},children:[{type:c,value:"null"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bs}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bl}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:bm}]},{type:a,tag:b,props:{class:av},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:cn}]},{type:a,tag:b,props:{class:av},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:by}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]}]}]}]},{type:a,tag:$,props:{id:aV},children:[{type:c,value:aW}]},{type:a,tag:A,props:{},children:[{type:c,value:cc}]},{type:a,tag:m,props:{code:aX,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ag}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ap}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ai}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"'web3'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:ap}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"'YOUR_RPC_ENDPOINT_HERE'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:cO}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"'YOUR ABI HERE'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"'YOUR CONTRACT ADDRESS HERE'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:bB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ap}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:bi}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:cO}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]}]}]}]},{type:a,tag:D,props:{id:aY},children:[{type:c,value:aZ}]},{type:a,tag:m,props:{code:a_,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:"referralProgramContract"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cP}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aD}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"RegisterUser"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"()"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:aD}]},{type:a,tag:b,props:{class:aj},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:cQ},children:[{type:c,value:bC}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:cR}]},{type:a,tag:b,props:{class:L},children:[{type:c,value:cS}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:U},children:[{type:c,value:ck}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aB}]},{type:a,tag:b,props:{class:I},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"`| UserRegistered | events | ${"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cS}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:cT}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" })"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aD}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:bD}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:X}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:I},children:[{type:c,value:bn}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:L},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:L},children:[{type:c,value:cU}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:U},children:[{type:c,value:"boolean"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:L},children:[{type:c,value:cV}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:cW},children:[{type:c,value:"RegisterUserResponseInterface"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }) "}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ax}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:bA}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cU}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ao}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:al}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:cX}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:cY}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ah}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cV}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cX}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cY}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" } "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:an}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ao}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"`| ONCE | ${"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:cT}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bE}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" )"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:aD}]},{type:a,tag:b,props:{class:aj},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:cQ},children:[{type:c,value:bF}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:cR}]},{type:a,tag:b,props:{class:L},children:[{type:c,value:cZ}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:cW},children:[{type:c,value:"ErrnoException"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aB}]},{type:a,tag:b,props:{class:I},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cZ}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:c_}]}]}]}]}]},{type:a,tag:D,props:{id:a$},children:[{type:c,value:ba}]},{type:a,tag:A,props:{},children:[{type:c,value:cd},{type:a,tag:au,props:{},children:[{type:c,value:af}]},{type:c,value:ce}]},{type:a,tag:m,props:{code:bb,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:aE}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:c$}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" value: [],"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bE}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bG}]},{type:a,tag:b,props:{class:ay},children:[{type:c,value:az}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bH}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:cP}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:af}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ak}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ae}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:bD}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ae}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:da}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:db}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ae}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:bF}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ae}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:bC}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"str"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Y}]}]}]}]}]},{type:a,tag:D,props:{id:bc},children:[{type:c,value:bd}]},{type:a,tag:A,props:{},children:[{type:c,value:cf}]},{type:a,tag:m,props:{code:be,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:aE}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bG}]},{type:a,tag:b,props:{class:ay},children:[{type:c,value:az}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:X}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" address: ["}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"'address-1'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"'address-2'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"], "}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002FOnly get events from specific addresses"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" topics: [] "}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002FWhat topics to subscribe to"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bH}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:aE}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"'logs'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:R}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:bA}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:cF}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aC}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ak}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ak}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:c_}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:bD}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:da}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:db}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:bF}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:bq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aC}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" })"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:bC}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"nr"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Y}]}]}]}]}]},{type:a,tag:D,props:{id:bf},children:[{type:c,value:bg}]},{type:a,tag:A,props:{},children:[{type:c,value:cg},{type:a,tag:au,props:{},children:[{type:c,value:af}]},{type:c,value:ch},{type:a,tag:_,props:{href:ci,rel:[as]},children:[{type:c,value:cj}]}]},{type:a,tag:m,props:{code:bh,language:w},children:[{type:a,tag:x,props:{},children:[{type:a,tag:m,props:{__ignoreMap:v},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002Fexample options(optional)"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:aE}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:c$}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002F only get events where transfer value was 1000 or 1337"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" value: ["}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"'1000'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"'1337'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"] "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bE}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"\u002F\u002F number | \"earliest\" | \"pending\" | \"latest\""}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bG}]},{type:a,tag:b,props:{class:ay},children:[{type:c,value:az}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:", "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" toBlock: "}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"'latest'"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bH}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"getPastEvents"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"'Transfer'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ak}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ae}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"then"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"results"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ae}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:an}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-f6baa6{color:#FFA657}.ct-f141aa{color:#A5D6FF}.ct-5e1c9b{color:#79C0FF}.ct-ba447c{color:#79C0FF}.ct-38e3ec{color:#79C0FF}.ct-86670b{color:#79C0FF}.ct-c7a0e7{color:#FF7B72}.ct-89bed9{color:#8B949E}.ct-84aa9a{color:#FFA657}.ct-8d27c1{color:#D2A8FF}.ct-55e18c{color:#79C0FF}.ct-2c18b2{color:#79C0FF}.ct-66877e{color:#79C0FF}.ct-6edc38{color:#FFA657}.ct-4075f5{color:#FF7B72}.ct-011e68{color:#D2A8FF}.ct-a86e1f{color:#C9D1D9}.ct-c29147{color:#FF7B72}.ct-a09c09{color:#A5D6FF}.ct-de2679{color:#C9D1D9}.ct-d70533{color:#C9D1D9}.ct-8b4f62{color:#FF7B72}.light .ct-8b4f62{color:#859900}.light .ct-d70533{color:#657B83}.light .ct-de2679{color:#268BD2}.light .ct-a09c09{color:#2AA198}.light .ct-c29147{color:#073642}.light .ct-a86e1f{color:#657B83}.light .ct-011e68{color:#268BD2}.light .ct-4075f5{color:#859900}.light .ct-6edc38{color:#657B83}.light .ct-66877e{color:#859900}.light .ct-2c18b2{color:#268BD2}.light .ct-55e18c{color:#657B83}.light .ct-8d27c1{color:#268BD2}.light .ct-84aa9a{color:#657B83}.light .ct-89bed9{color:#93A1A1}.light .ct-c7a0e7{color:#073642}.light .ct-86670b{color:#268BD2}.light .ct-38e3ec{color:#D33682}.light .ct-ba447c{color:#859900}.light .ct-5e1c9b{color:#B58900}.light .ct-f141aa{color:#2AA198}.light .ct-f6baa6{color:#268BD2}"}]}],toc:{title:v,searchDepth:ar,depth:ar,links:[{id:aG,depth:ar,text:aH},{id:aJ,depth:ar,text:aK,children:[{id:aL,depth:Z,text:aM},{id:aO,depth:Z,text:aP},{id:aR,depth:Z,text:aS}]},{id:aV,depth:ar,text:aW,children:[{id:aY,depth:Z,text:aZ},{id:a$,depth:Z,text:ba},{id:bc,depth:Z,text:bd},{id:bf,depth:Z,text:bg}]}]}},_type:"markdown",_id:"content:Blockchain:Smart contracts.md",_source:"content",_file:"Blockchain\u002FSmart contracts.md",_extension:"md"}},prerenderedAt:1703697990298}}("element","span","text","ct-d70533","line"," ","ct-de2679","ct-8b4f62",".","ct-a86e1f","ct-8d27c1","(","code","ct-c7a0e7","ct-a09c09","=","ct-86670b","const"," "," ","ct-89bed9","","typescript","pre"," {",");","p",";","ct-4075f5","h3",", ","=\u003E","strong","web3","ct-c29147","log"," (","ct-6edc38","on",":"," { ","new","await","options"," ","console","ct-66877e","CONTRACT_ADDRESS","contract",",","))",3,"a","h2","getContract","e"," ","event"," .","Transfer","import"," } ","from","ct-011e68",")","return","eth","catch",") {","Web3","subscription",2,"nofollow","gas","code-inline","ct-84aa9a","CONTRACT_ABI","try","ct-38e3ec","0","();",") ","err"," .","let",false,"getting-smart-contract-instance","Getting smart contract instance","import { Contract } from 'web3-eth-contract';\nimport { web3 } from '.';\n\nconst getContract = (abi: object, address?: string): Contract =\u003E {\n const abiFromJson = JSON.parse(JSON.stringify(abi));\n return new web3.eth.Contract(abiFromJson, address);\n};\n\nexport default getContract;\n","executing-contract-method","Executing contract method","example-for-metamask-without-private-key","Example for #Metamask without private key","\u002F\u002F see example below\nimport { getContract } from '.';\n\n\u002F\u002F ABI of contract\nconst CONTRACT_ABI = { \u002F* ... *\u002F };\n \u002F\u002F address for contract\nconst CONTRACT_ADDRESS = '0xdea164f67df4dbfe675d5271c9d404e0260f33bb';\n\nexport const executeContractMethod = async ({}) =\u003E {\n \u002F\u002F getting contract\n const contract = getContract(CONTRACT_ABI, CONTRACT_ADDRESS);\n \n \u002F\u002F Calling write method\n try {\n \u002F\u002F authorizing with Metamask\n await web3.currentProvider.request({ method: 'eth_requestAccounts' });\n \u002F\u002F getting wallet address\n const addressUser = web3.currentProvider.selectedAddress;\n \u002F\u002F calling \"store\" store method for contract\n \u002F\u002F payload should include `from` address, that matches\n \u002F\u002F current user's wallet\n await contract.methods.store(0, 'Parameter').send({\n from: addressUser,\n });\n } catch (e) {\n throw new Error(e);\n }\n \n \u002F\u002F calling read method\n try {\n \u002F\u002F this method can return data\n const result = await contract.methods.retrieve().call();\n } catch (e) {\n throw new Error(e);\n }\n}\n","nodejs-and-react-native-example","Node.js and React Native example","\u002F\u002F see example below\nimport { getContract } from '.';\n\n\u002F\u002F ABI контракта\nconst CONTRACT_ABI = { \u002F* ... *\u002F };\n\u002F\u002F contract address\nconst CONTRACT_ADDRESS = '0xdea164f67df4dbfe675d5271c9d404e0260f33bb';\n\u002F\u002F getting contract\nconst contract = getContract(CONTRACT_ABI, CONTRACT_ADDRESS);\n\u002F\u002F account's private key\nconst privateKey = '...';\n\n\u002F\u002F write-methods requires private key\nconst executeContractMethod = async (val: number) =\u003E {\n const transaction = contract.methods.store(val);\n const account = web3.eth.accounts.privateKeyToAccount(privateKey);\n const options = {\n to: CONTRACT_ADDRESS,\n data: transaction.encodeABI(),\n gas: await transaction.estimateGas({ from: account.address }),\n gasPrice: await web3.eth.getGasPrice(),\n };\n const signed = await web3.eth.accounts.signTransaction(\n options,\n privateKey,\n );\n await web3.eth.sendSignedTransaction(signed.rawTransaction!);\n};\n","calling-a-batch-of-contracts-methods","Calling a batch of contract's methods"," const requests = [\n contract.method.balanceOf().call,\n contract.method.getStaked().call\n ]\n\n const result = await makeBatchRequest(request);\n","const web3 = new Web3(Web3.givenProvider || PROVIDER_URL);\n\nconst makeBatchRequest = (calls: any[]) =\u003E {\n try {\n const web3 = getWeb3NoAccount();\n const batch = new web3.BatchRequest();\n\n const promises = calls.map((call) =\u003E {\n return new Promise((resolve, reject) =\u003E {\n batch.add(\n call.request({}, (err, result) =\u003E {\n if (err) {\n reject(err);\n } else {\n resolve(result);\n }\n })\n );\n });\n });\n\n batch.execute();\n\n return Promise.all(promises);\n } catch {\n return null;\n }\n};\n\nexport default makeBatchRequest;\n","subscribing-to-smart-contract-events","Subscribing to smart contract events"," import Web3 from 'web3';\n const web3 = new Web3('YOUR_RPC_ENDPOINT_HERE');\n const ABI = 'YOUR ABI HERE';\n const CONTRACT_ADDRESS = 'YOUR CONTRACT ADDRESS HERE';\n const myContract = new Web3.Contract(ABI, CONTRACT_ADDRESS);\n","by-accessing-contractevents","By accessing contract.events","referralProgramContract.events\n .RegisterUser()\n .on('connected', (subscriptionId: string) =\u003E {\n console.log(`| UserRegistered | events | ${subscriptionId}`);\n })\n .on(\n 'data',\n async (event: {\n removed: boolean;\n returnValues: RegisterUserResponseInterface;\n }) =\u003E {\n try {\n if (event.removed) {\n return;\n }\n const { user, referrer } = event.returnValues;\n console.log(user, referrer);\n } catch (e) {\n console.log(`| ONCE | ${e}`);\n }\n },\n )\n .on('error', (error: ErrnoException) =\u003E {\n console.log(error);\n });\n","with-filtering","With filtering"," let options = {\n filter: {\n value: [],\n },\n fromBlock: 0\n };\n\n myContract.events.Transfer(options)\n .on('data', event =\u003E console.log(event))\n .on('changed', changed =\u003E console.log(changed))\n .on('error', err =\u003E throw err)\n .on('connected', str =\u003E console.log(str))\n","common-subscribe-method","Common Subscribe method"," let options = {\n fromBlock: 0,\n address: ['address-1', 'address-2'], \u002F\u002FOnly get events from specific addresses\n topics: [] \u002F\u002FWhat topics to subscribe to\n };\n\n let subscription = ('logs', options, (err,event) =\u003E {\n if (!err)\n console.log(event)\n });\n\n subscription.on('data', event =\u003E console.log(event))\n subscription.on('changed', changed =\u003E console.log(changed))\n subscription.on('error', err =\u003E { throw err })\n subscription.on('connected', nr =\u003E console.log(nr))\n","getting-event-history","Getting event history"," \u002F\u002Fexample options(optional)\n let options = {\n filter: {\n \u002F\u002F only get events where transfer value was 1000 or 1337\n value: ['1000', '1337'] \n },\n \u002F\u002F number | \"earliest\" | \"pending\" | \"latest\"\n fromBlock: 0, \n toBlock: 'latest'\n };\n\n myContract.getPastEvents('Transfer', options)\n .then(results =\u003E console.log(results))\n .catch(err =\u003E throw err);\n\n","Contract","'.'","address","};","export","async","methods"," } ","throw","ct-ba447c"," }","result","().","call","privateKey","transaction","makeBatchRequest","batch","if","myContract","'connected'","'data'"," },","'error'"," fromBlock: "," };","Smart Contracts","\u002Fblockchain\u002Fsmart-contracts","root","For common functions see ","Common%20typescript%20examples","Common typescript examples","Useful for calling smart contract methods:","Contract has ","read"," and ","write"," methods. To get a list of methods, you can paste contract address on ","https:\u002F\u002Fetherscan.io\u002Ftoken\u002F0xdac17f958d2ee523a2206206994597c13d831ec7#readContract","https:\u002F\u002Fetherscan.io\u002F ETH"," or any other service.","Read"," methods doesn't require spending ",". ","Write"," methods cost some amount of ",", hence they will be executed with confirmation from user.","Function calls batch of requests, returning array of results. For example:","There're different ways to subscribe for contract events. For all of them you will need following variables:","We're listening to "," event here:","Filtering options can also be specified:","Getting history for "," events for specific values. More info can be found ","https:\u002F\u002Fweb3js.readthedocs.io\u002Fen\u002Fv1.2.11\u002Fweb3-eth-subscribe.html#","here","string","ct-2c18b2","abiFromJson","default","\u002F\u002F see example below","\u002F* ... *\u002F"," };","'0xdea164f67df4dbfe675d5271c9d404e0260f33bb'","executeContractMethod","\u002F\u002F getting contract","currentProvider","request","addressUser","store"," });","Error","val","account","accounts","(),","signed","!"," ","method","calls","promises","Promise","resolve","reject"," ","ABI","events","ct-f141aa",", (","subscriptionId","}`","removed","returnValues","ct-f6baa6","user","referrer","error"," });"," filter: {","'changed'","changed"))
\ No newline at end of file
diff --git a/docs/blockchain/smart-contracts/index.html b/docs/blockchain/smart-contracts/index.html
index a4e147b..1428ffd 100644
--- a/docs/blockchain/smart-contracts/index.html
+++ b/docs/blockchain/smart-contracts/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Smart Contracts • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="For common functions see Common typescript examples."><meta name="head:count" content="3"><link rel="modulepreload" href="/blockchain/smart-contracts/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseA.c52e44f8.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseH2.d950f051.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseStrong.e968ffe9.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseH3.462e5228.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCodeInline.d9bcf614.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a aria-current="page" href="/blockchain/smart-contracts" class="router-link-active _active_192pu_81 _link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Smart Contracts</h1><article><div><p><!--[-->For common functions see <a href="/blockchain/common-typescript-examples" class=""><!--[-->Common typescript examples<!--]--></a>.<!--]--></p><h2 id="getting-smart-contract-instance"><a href="#getting-smart-contract-instance"><!--[-->Getting smart contract instance<!--]--></a></h2><p><!--[-->Useful for calling smart contract methods:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-c8ffb0">import</span><span class="ct-b1eeeb"> { </span><span class="ct-7194b1">Contract</span><span class="ct-b1eeeb"> } </span><span class="ct-c8ffb0">from</span><span class="ct-b1eeeb"> </span><span class="ct-ba7e2c">'web3-eth-contract'</span><span class="ct-b1eeeb">;</span></span><span class="line"><span class="ct-c8ffb0">import</span><span class="ct-b1eeeb"> { </span><span class="ct-7194b1">web3</span><span class="ct-b1eeeb"> } </span><span class="ct-c8ffb0">from</span><span class="ct-b1eeeb"> </span><span class="ct-ba7e2c">'.'</span><span class="ct-b1eeeb">;</span></span><span class="line"></span><span class="line"><span class="ct-39fbef">const</span><span class="ct-303309"> </span><span class="ct-98d685">getContract</span><span class="ct-303309"> </span><span class="ct-ba7760">=</span><span class="ct-303309"> (</span><span class="ct-8d5659">abi</span><span class="ct-ba7760">:</span><span class="ct-303309"> </span><span class="ct-6e9d8e">object</span><span class="ct-303309">, </span><span class="ct-8d5659">address</span><span class="ct-ba7760">?:</span><span class="ct-303309"> </span><span class="ct-6e9d8e">string</span><span class="ct-303309">)</span><span class="ct-ba7760">:</span><span class="ct-303309"> </span><span class="ct-39fbef">=></span><span class="ct-303309"> {</span></span><span class="line"><span class="ct-303309"> </span><span class="ct-39fbef">const</span><span class="ct-303309"> </span><span class="ct-f3b352">abiFromJson</span><span class="ct-303309"> </span><span class="ct-ba7760">=</span><span class="ct-303309"> </span><span class="ct-82aa2e">JSON</span><span class="ct-303309">.</span><span class="ct-f3b352">parse</span><span class="ct-303309">(</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">return</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">new</span><span class="ct-b1eeeb"> </span><span class="ct-7194b1">web3</span><span class="ct-b1eeeb">.</span><span class="ct-7194b1">eth</span><span class="ct-b1eeeb">.</span><span class="ct-af8265">Contract</span><span class="ct-b1eeeb">(</span><span class="ct-7194b1">abiFromJson</span><span class="ct-b1eeeb">, </span><span class="ct-7194b1">address</span><span class="ct-b1eeeb">);</span></span><span class="line"><span class="ct-b1eeeb">};</span></span><span class="line"></span><span class="line"><span class="ct-c8ffb0">export</span><span class="ct-d2d503"> </span><span class="ct-c8ffb0">default</span><span class="ct-d2d503"> </span><span class="ct-7194b1">getContract</span><span class="ct-b1eeeb">;</span></span></code></pre><!--]--></div><h2 id="executing-contract-method"><a href="#executing-contract-method"><!--[-->Executing contract method<!--]--></a></h2><p><!--[-->Contract has <strong><!--[-->read<!--]--></strong> and <strong><!--[-->write<!--]--></strong> methods. To get a list of methods, you can paste contract address on <a href="https://etherscan.io/token/0xdac17f958d2ee523a2206206994597c13d831ec7#readContract" rel="nofollow" target="_blank"><!--[-->https://etherscan.io/ ETH<!--]--></a> or any other service.<!--]--></p><p><!--[--><strong><!--[-->Read<!--]--></strong> methods doesn't require spending <strong><!--[-->gas<!--]--></strong>. <strong><!--[-->Write<!--]--></strong> methods cost some amount of <strong><!--[-->gas<!--]--></strong>, hence they will be executed with confirmation from user.<!--]--></p><h3 id="example-for-metamask-without-private-key"><a href="#example-for-metamask-without-private-key"><!--[-->Example for #Metamask without private key<!--]--></a></h3><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-709ef0">// see example below</span></span><span class="line"><span class="ct-c8ffb0">import</span><span class="ct-b1eeeb"> { </span><span class="ct-7194b1">getContract</span><span class="ct-b1eeeb"> } </span><span class="ct-c8ffb0">from</span><span class="ct-b1eeeb"> </span><span class="ct-ba7e2c">'.'</span><span class="ct-b1eeeb">;</span></span><span class="line"></span><span class="line"><span class="ct-709ef0">// ABI of contract</span></span><span class="line"><span class="ct-7cfc7d">const</span><span class="ct-b1eeeb"> </span><span class="ct-d06ad1">CONTRACT_ABI</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">=</span><span class="ct-b1eeeb"> { </span><span class="ct-709ef0">/* ... */</span><span class="ct-b1eeeb"> };</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-709ef0">// address for contract</span></span><span class="line"><span class="ct-7cfc7d">const</span><span class="ct-b1eeeb"> </span><span class="ct-d06ad1">CONTRACT_ADDRESS</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">=</span><span class="ct-b1eeeb"> </span><span class="ct-ba7e2c">'0xdea164f67df4dbfe675d5271c9d404e0260f33bb'</span><span class="ct-b1eeeb">;</span></span><span class="line"></span><span class="line"><span class="ct-c8ffb0">export</span><span class="ct-b1eeeb"> </span><span class="ct-7cfc7d">const</span><span class="ct-b1eeeb"> </span><span class="ct-af8265">executeContractMethod</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">=</span><span class="ct-b1eeeb"> </span><span class="ct-7cfc7d">async</span><span class="ct-b1eeeb"> ({}) </span><span class="ct-7cfc7d">=></span><span class="ct-b1eeeb"> {</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-709ef0">// getting contract</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7cfc7d">const</span><span class="ct-b1eeeb"> </span><span class="ct-d06ad1">contract</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">=</span><span class="ct-b1eeeb"> </span><span class="ct-af8265">getContract</span><span class="ct-b1eeeb">(</span><span class="ct-d06ad1">CONTRACT_ABI</span><span class="ct-b1eeeb">, </span><span class="ct-d06ad1">CONTRACT_ADDRESS</span><span class="ct-b1eeeb">);</span></span><span class="line"><span class="ct-b1eeeb"> </span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-709ef0">// Calling write method</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">try</span><span class="ct-b1eeeb"> {</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-709ef0">// authorizing with Metamask</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">await</span><span class="ct-b1eeeb"> </span><span class="ct-7194b1">web3</span><span class="ct-b1eeeb">.</span><span class="ct-7194b1">currentProvider</span><span class="ct-b1eeeb">.</span><span class="ct-af8265">request</span><span class="ct-b1eeeb">({ method: </span><span class="ct-ba7e2c">'eth_requestAccounts'</span><span class="ct-b1eeeb"> });</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-709ef0">// getting wallet address</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7cfc7d">const</span><span class="ct-b1eeeb"> </span><span class="ct-d06ad1">addressUser</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">=</span><span class="ct-b1eeeb"> </span><span class="ct-7194b1">web3</span><span class="ct-b1eeeb">.</span><span class="ct-7194b1">currentProvider</span><span class="ct-b1eeeb">.</span><span class="ct-7194b1">selectedAddress</span><span class="ct-b1eeeb">;</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-709ef0">// calling "store" store method for contract</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-709ef0">// payload should include `from` address, that matches</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-709ef0">// current user's wallet</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">await</span><span class="ct-b1eeeb"> </span><span class="ct-7194b1">contract</span><span class="ct-b1eeeb">.</span><span class="ct-7194b1">methods</span><span class="ct-b1eeeb">.</span><span class="ct-af8265">store</span><span class="ct-b1eeeb">(</span><span class="ct-6138fb">0</span><span class="ct-b1eeeb">, </span><span class="ct-ba7e2c">'Parameter'</span><span class="ct-b1eeeb">).</span><span class="ct-af8265">send</span><span class="ct-b1eeeb">({</span></span><span class="line"><span class="ct-b1eeeb"> from: </span><span class="ct-7194b1">addressUser</span><span class="ct-b1eeeb">,</span></span><span class="line"><span class="ct-b1eeeb"> });</span></span><span class="line"><span class="ct-b1eeeb"> } </span><span class="ct-c8ffb0">catch</span><span class="ct-b1eeeb"> (</span><span class="ct-7194b1">e</span><span class="ct-b1eeeb">) {</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">throw</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">new</span><span class="ct-b1eeeb"> </span><span class="ct-ee6b52">Error</span><span class="ct-b1eeeb">(</span><span class="ct-7194b1">e</span><span class="ct-b1eeeb">);</span></span><span class="line"><span class="ct-b1eeeb"> }</span></span><span class="line"><span class="ct-b1eeeb"> </span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-709ef0">// calling read method</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">try</span><span class="ct-b1eeeb"> {</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-709ef0">// this method can return data</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7cfc7d">const</span><span class="ct-b1eeeb"> </span><span class="ct-d06ad1">result</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">=</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">await</span><span class="ct-b1eeeb"> </span><span class="ct-7194b1">contract</span><span class="ct-b1eeeb">.</span><span class="ct-7194b1">methods</span><span class="ct-b1eeeb">.</span><span class="ct-af8265">retrieve</span><span class="ct-b1eeeb">().</span><span class="ct-af8265">call</span><span class="ct-b1eeeb">();</span></span><span class="line"><span class="ct-b1eeeb"> } </span><span class="ct-c8ffb0">catch</span><span class="ct-b1eeeb"> (</span><span class="ct-7194b1">e</span><span class="ct-b1eeeb">) {</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">throw</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">new</span><span class="ct-b1eeeb"> </span><span class="ct-ee6b52">Error</span><span class="ct-b1eeeb">(</span><span class="ct-7194b1">e</span><span class="ct-b1eeeb">);</span></span><span class="line"><span class="ct-b1eeeb"> }</span></span><span class="line"><span class="ct-b1eeeb">}</span></span></code></pre><!--]--></div><h3 id="nodejs-and-react-native-example"><a href="#nodejs-and-react-native-example"><!--[-->Node.js and React Native example<!--]--></a></h3><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-709ef0">// see example below</span></span><span class="line"><span class="ct-c8ffb0">import</span><span class="ct-b1eeeb"> { </span><span class="ct-7194b1">getContract</span><span class="ct-b1eeeb"> } </span><span class="ct-c8ffb0">from</span><span class="ct-b1eeeb"> </span><span class="ct-ba7e2c">'.'</span><span class="ct-b1eeeb">;</span></span><span class="line"></span><span class="line"><span class="ct-709ef0">// ABI контракта</span></span><span class="line"><span class="ct-7cfc7d">const</span><span class="ct-b1eeeb"> </span><span class="ct-d06ad1">CONTRACT_ABI</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">=</span><span class="ct-b1eeeb"> { </span><span class="ct-709ef0">/* ... */</span><span class="ct-b1eeeb"> };</span></span><span class="line"><span class="ct-709ef0">// contract address</span></span><span class="line"><span class="ct-7cfc7d">const</span><span class="ct-b1eeeb"> </span><span class="ct-d06ad1">CONTRACT_ADDRESS</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">=</span><span class="ct-b1eeeb"> </span><span class="ct-ba7e2c">'0xdea164f67df4dbfe675d5271c9d404e0260f33bb'</span><span class="ct-b1eeeb">;</span></span><span class="line"><span class="ct-709ef0">// getting contract</span></span><span class="line"><span class="ct-7cfc7d">const</span><span class="ct-b1eeeb"> </span><span class="ct-d06ad1">contract</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">=</span><span class="ct-b1eeeb"> </span><span class="ct-af8265">getContract</span><span class="ct-b1eeeb">(</span><span class="ct-d06ad1">CONTRACT_ABI</span><span class="ct-b1eeeb">, </span><span class="ct-d06ad1">CONTRACT_ADDRESS</span><span class="ct-b1eeeb">);</span></span><span class="line"><span class="ct-709ef0">// account's private key</span></span><span class="line"><span class="ct-7cfc7d">const</span><span class="ct-b1eeeb"> </span><span class="ct-d06ad1">privateKey</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">=</span><span class="ct-b1eeeb"> </span><span class="ct-ba7e2c">'...'</span><span class="ct-b1eeeb">;</span></span><span class="line"></span><span class="line"><span class="ct-709ef0">// write-methods requires private key</span></span><span class="line"><span class="ct-39fbef">const</span><span class="ct-303309"> </span><span class="ct-98d685">executeContractMethod</span><span class="ct-303309"> </span><span class="ct-ba7760">=</span><span class="ct-303309"> </span><span class="ct-39fbef">async</span><span class="ct-303309"> (</span><span class="ct-8d5659">val</span><span class="ct-ba7760">:</span><span class="ct-303309"> </span><span class="ct-6e9d8e">number</span><span class="ct-303309">) </span><span class="ct-39fbef">=></span><span class="ct-303309"> {</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7cfc7d">const</span><span class="ct-b1eeeb"> </span><span class="ct-d06ad1">transaction</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">=</span><span class="ct-b1eeeb"> </span><span class="ct-7194b1">contract</span><span class="ct-b1eeeb">.</span><span class="ct-7194b1">methods</span><span class="ct-b1eeeb">.</span><span class="ct-af8265">store</span><span class="ct-b1eeeb">(</span><span class="ct-7194b1">val</span><span class="ct-b1eeeb">);</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7cfc7d">const</span><span class="ct-b1eeeb"> </span><span class="ct-d06ad1">account</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">=</span><span class="ct-b1eeeb"> </span><span class="ct-7194b1">web3</span><span class="ct-b1eeeb">.</span><span class="ct-7194b1">eth</span><span class="ct-b1eeeb">.</span><span class="ct-7194b1">accounts</span><span class="ct-b1eeeb">.</span><span class="ct-af8265">privateKeyToAccount</span><span class="ct-b1eeeb">(</span><span class="ct-7194b1">privateKey</span><span class="ct-b1eeeb">);</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7cfc7d">const</span><span class="ct-b1eeeb"> </span><span class="ct-d06ad1">options</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">=</span><span class="ct-b1eeeb"> {</span></span><span class="line"><span class="ct-b1eeeb"> to: </span><span class="ct-d06ad1">CONTRACT_ADDRESS</span><span class="ct-b1eeeb">,</span></span><span class="line"><span class="ct-b1eeeb"> data: </span><span class="ct-7194b1">transaction</span><span class="ct-b1eeeb">.</span><span class="ct-af8265">encodeABI</span><span class="ct-b1eeeb">(),</span></span><span class="line"><span class="ct-b1eeeb"> gas: </span><span class="ct-c8ffb0">await</span><span class="ct-b1eeeb"> </span><span class="ct-7194b1">transaction</span><span class="ct-b1eeeb">.</span><span class="ct-af8265">estimateGas</span><span class="ct-b1eeeb">({ from: </span><span class="ct-7194b1">account</span><span class="ct-b1eeeb">.</span><span class="ct-7194b1">address</span><span class="ct-b1eeeb"> }),</span></span><span class="line"><span class="ct-b1eeeb"> gasPrice: </span><span class="ct-c8ffb0">await</span><span class="ct-b1eeeb"> </span><span class="ct-7194b1">web3</span><span class="ct-b1eeeb">.</span><span class="ct-7194b1">eth</span><span class="ct-b1eeeb">.</span><span class="ct-af8265">getGasPrice</span><span class="ct-b1eeeb">(),</span></span><span class="line"><span class="ct-b1eeeb"> };</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7cfc7d">const</span><span class="ct-b1eeeb"> </span><span class="ct-d06ad1">signed</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">=</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">await</span><span class="ct-b1eeeb"> </span><span class="ct-7194b1">web3</span><span class="ct-b1eeeb">.</span><span class="ct-7194b1">eth</span><span class="ct-b1eeeb">.</span><span class="ct-7194b1">accounts</span><span class="ct-b1eeeb">.</span><span class="ct-af8265">signTransaction</span><span class="ct-b1eeeb">(</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7194b1">options</span><span class="ct-b1eeeb">,</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7194b1">privateKey</span><span class="ct-b1eeeb">,</span></span><span class="line"><span class="ct-b1eeeb"> );</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">await</span><span class="ct-b1eeeb"> </span><span class="ct-7194b1">web3</span><span class="ct-b1eeeb">.</span><span class="ct-7194b1">eth</span><span class="ct-b1eeeb">.</span><span class="ct-af8265">sendSignedTransaction</span><span class="ct-b1eeeb">(</span><span class="ct-7194b1">signed</span><span class="ct-b1eeeb">.</span><span class="ct-7194b1">rawTransaction</span><span class="ct-c8ffb0">!</span><span class="ct-b1eeeb">);</span></span><span class="line"><span class="ct-b1eeeb">};</span></span></code></pre><!--]--></div><h3 id="calling-a-batch-of-contracts-methods"><a href="#calling-a-batch-of-contracts-methods"><!--[-->Calling a batch of contract's methods<!--]--></a></h3><p><!--[-->Function calls batch of requests, returning array of results. For example:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7cfc7d">const</span><span class="ct-b1eeeb"> </span><span class="ct-d06ad1">requests</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">=</span><span class="ct-b1eeeb"> [</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7194b1">contract</span><span class="ct-b1eeeb">.</span><span class="ct-7194b1">method</span><span class="ct-b1eeeb">.</span><span class="ct-af8265">balanceOf</span><span class="ct-b1eeeb">().</span><span class="ct-7194b1">call</span><span class="ct-b1eeeb">,</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7194b1">contract</span><span class="ct-b1eeeb">.</span><span class="ct-7194b1">method</span><span class="ct-b1eeeb">.</span><span class="ct-af8265">getStaked</span><span class="ct-b1eeeb">().</span><span class="ct-7194b1">call</span></span><span class="line"><span class="ct-b1eeeb"> ]</span></span><span class="line"></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7cfc7d">const</span><span class="ct-b1eeeb"> </span><span class="ct-d06ad1">result</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">=</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">await</span><span class="ct-b1eeeb"> </span><span class="ct-af8265">makeBatchRequest</span><span class="ct-b1eeeb">(</span><span class="ct-7194b1">request</span><span class="ct-b1eeeb">);</span></span></code></pre><!--]--></div><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-7cfc7d">const</span><span class="ct-b1eeeb"> </span><span class="ct-d06ad1">web3</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">=</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">new</span><span class="ct-b1eeeb"> </span><span class="ct-af8265">Web3</span><span class="ct-b1eeeb">(</span><span class="ct-7194b1">Web3</span><span class="ct-b1eeeb">.</span><span class="ct-7194b1">givenProvider</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">||</span><span class="ct-b1eeeb"> </span><span class="ct-d06ad1">PROVIDER_URL</span><span class="ct-b1eeeb">);</span></span><span class="line"></span><span class="line"><span class="ct-39fbef">const</span><span class="ct-303309"> </span><span class="ct-98d685">makeBatchRequest</span><span class="ct-303309"> </span><span class="ct-ba7760">=</span><span class="ct-303309"> (</span><span class="ct-8d5659">calls</span><span class="ct-ba7760">:</span><span class="ct-303309"> </span><span class="ct-6e9d8e">any</span><span class="ct-303309">[]) </span><span class="ct-39fbef">=></span><span class="ct-303309"> {</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">try</span><span class="ct-b1eeeb"> {</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7cfc7d">const</span><span class="ct-b1eeeb"> </span><span class="ct-d06ad1">web3</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">=</span><span class="ct-b1eeeb"> </span><span class="ct-af8265">getWeb3NoAccount</span><span class="ct-b1eeeb">();</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7cfc7d">const</span><span class="ct-b1eeeb"> </span><span class="ct-d06ad1">batch</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">=</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">new</span><span class="ct-b1eeeb"> </span><span class="ct-7194b1">web3</span><span class="ct-b1eeeb">.</span><span class="ct-af8265">BatchRequest</span><span class="ct-b1eeeb">();</span></span><span class="line"></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7cfc7d">const</span><span class="ct-b1eeeb"> </span><span class="ct-d06ad1">promises</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">=</span><span class="ct-b1eeeb"> </span><span class="ct-7194b1">calls</span><span class="ct-b1eeeb">.</span><span class="ct-af8265">map</span><span class="ct-7cfc7d">=></span><span class="ct-b1eeeb"> {</span></span><span class="line"><span class="ct-303309"> </span><span class="ct-ba7760">return</span><span class="ct-303309"> </span><span class="ct-ba7760">new</span><span class="ct-303309"> </span><span class="ct-6e9d8e">Promise</span><span class="ct-303309">((</span><span class="ct-8d5659">resolve</span><span class="ct-303309">, </span><span class="ct-8d5659">reject</span><span class="ct-303309">) </span><span class="ct-39fbef">=></span><span class="ct-303309"> {</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7194b1">batch</span><span class="ct-b1eeeb">.</span><span class="ct-af8265">add</span><span class="ct-b1eeeb">(</span></span><span class="line"></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">if</span><span class="ct-b1eeeb"> (</span><span class="ct-7194b1">err</span><span class="ct-b1eeeb">) {</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-af8265">reject</span><span class="ct-b1eeeb">(</span><span class="ct-7194b1">err</span><span class="ct-b1eeeb">);</span></span><span class="line"><span class="ct-b1eeeb"> } </span><span class="ct-c8ffb0">else</span><span class="ct-b1eeeb"> {</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-af8265">resolve</span><span class="ct-b1eeeb">(</span><span class="ct-7194b1">result</span><span class="ct-b1eeeb">);</span></span><span class="line"><span class="ct-b1eeeb"> }</span></span><span class="line"><span class="ct-b1eeeb"> })</span></span><span class="line"><span class="ct-b1eeeb"> );</span></span><span class="line"><span class="ct-b1eeeb"> });</span></span><span class="line"><span class="ct-b1eeeb"> });</span></span><span class="line"></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7194b1">batch</span><span class="ct-b1eeeb">.</span><span class="ct-af8265">execute</span><span class="ct-b1eeeb">();</span></span><span class="line"></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">return</span><span class="ct-b1eeeb"> </span><span class="ct-ee6b52">Promise</span><span class="ct-b1eeeb">.</span><span class="ct-af8265">all</span><span class="ct-b1eeeb">(</span><span class="ct-7194b1">promises</span><span class="ct-b1eeeb">);</span></span><span class="line"><span class="ct-b1eeeb"> } </span><span class="ct-c8ffb0">catch</span><span class="ct-b1eeeb"> {</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">return</span><span class="ct-b1eeeb"> </span><span class="ct-f1ea08">null</span><span class="ct-b1eeeb">;</span></span><span class="line"><span class="ct-b1eeeb"> }</span></span><span class="line"><span class="ct-b1eeeb">};</span></span><span class="line"></span><span class="line"><span class="ct-c8ffb0">export</span><span class="ct-d2d503"> </span><span class="ct-c8ffb0">default</span><span class="ct-d2d503"> </span><span class="ct-7194b1">makeBatchRequest</span><span class="ct-b1eeeb">;</span></span></code></pre><!--]--></div><h2 id="subscribing-to-smart-contract-events"><a href="#subscribing-to-smart-contract-events"><!--[-->Subscribing to smart contract events<!--]--></a></h2><p><!--[-->There're different ways to subscribe for contract events. For all of them you will need following variables:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">import</span><span class="ct-b1eeeb"> </span><span class="ct-7194b1">Web3</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">from</span><span class="ct-b1eeeb"> </span><span class="ct-ba7e2c">'web3'</span><span class="ct-b1eeeb">;</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7cfc7d">const</span><span class="ct-b1eeeb"> </span><span class="ct-d06ad1">web3</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">=</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">new</span><span class="ct-b1eeeb"> </span><span class="ct-af8265">Web3</span><span class="ct-b1eeeb">(</span><span class="ct-ba7e2c">'YOUR_RPC_ENDPOINT_HERE'</span><span class="ct-b1eeeb">);</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7cfc7d">const</span><span class="ct-b1eeeb"> </span><span class="ct-d06ad1">ABI</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">=</span><span class="ct-b1eeeb"> </span><span class="ct-ba7e2c">'YOUR ABI HERE'</span><span class="ct-b1eeeb">;</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7cfc7d">const</span><span class="ct-b1eeeb"> </span><span class="ct-d06ad1">CONTRACT_ADDRESS</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">=</span><span class="ct-b1eeeb"> </span><span class="ct-ba7e2c">'YOUR CONTRACT ADDRESS HERE'</span><span class="ct-b1eeeb">;</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7cfc7d">const</span><span class="ct-b1eeeb"> </span><span class="ct-d06ad1">myContract</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">=</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">new</span><span class="ct-b1eeeb"> </span><span class="ct-7194b1">Web3</span><span class="ct-b1eeeb">.</span><span class="ct-af8265">Contract</span><span class="ct-b1eeeb">(</span><span class="ct-d06ad1">ABI</span><span class="ct-b1eeeb">, </span><span class="ct-d06ad1">CONTRACT_ADDRESS</span><span class="ct-b1eeeb">);</span></span></code></pre><!--]--></div><h3 id="by-accessing-contractevents"><a href="#by-accessing-contractevents"><!--[-->By accessing contract.events<!--]--></a></h3><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-7194b1">referralProgramContract</span><span class="ct-b1eeeb">.</span><span class="ct-7194b1">events</span></span><span class="line"><span class="ct-b1eeeb"> .</span><span class="ct-af8265">RegisterUser</span><span class="ct-b1eeeb">()</span></span><span class="line"><span class="ct-303309"> .</span><span class="ct-98d685">on</span><span class="ct-303309">(</span><span class="ct-86b87d">'connected'</span><span class="ct-303309">, (</span><span class="ct-8d5659">subscriptionId</span><span class="ct-ba7760">:</span><span class="ct-303309"> </span><span class="ct-6e9d8e">string</span><span class="ct-303309">) </span><span class="ct-39fbef">=></span><span class="ct-303309"> {</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7194b1">console</span><span class="ct-b1eeeb">.</span><span class="ct-af8265">log</span><span class="ct-b1eeeb">(</span><span class="ct-ba7e2c">`| UserRegistered | events | ${</span><span class="ct-7194b1">subscriptionId</span><span class="ct-ba7e2c">}`</span><span class="ct-b1eeeb">);</span></span><span class="line"><span class="ct-b1eeeb"> })</span></span><span class="line"><span class="ct-b1eeeb"> .</span><span class="ct-af8265">on</span><span class="ct-b1eeeb">(</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-ba7e2c">'data'</span><span class="ct-b1eeeb">,</span></span><span class="line"><span class="ct-303309"> </span><span class="ct-39fbef">async</span><span class="ct-303309"> (</span><span class="ct-8d5659">event</span><span class="ct-ba7760">:</span><span class="ct-303309"> {</span></span><span class="line"><span class="ct-303309"> </span><span class="ct-8d5659">removed</span><span class="ct-ba7760">:</span><span class="ct-303309"> </span><span class="ct-6e9d8e">boolean</span><span class="ct-303309">;</span></span><span class="line"><span class="ct-303309"> </span><span class="ct-8d5659">returnValues</span><span class="ct-ba7760">:</span><span class="ct-303309"> </span><span class="ct-156cde">RegisterUserResponseInterface</span><span class="ct-303309">;</span></span><span class="line"><span class="ct-b1eeeb"> }) </span><span class="ct-7cfc7d">=></span><span class="ct-b1eeeb"> {</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">try</span><span class="ct-b1eeeb"> {</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">if</span><span class="ct-b1eeeb"> (</span><span class="ct-7194b1">event</span><span class="ct-b1eeeb">.</span><span class="ct-7194b1">removed</span><span class="ct-b1eeeb">) {</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">return</span><span class="ct-b1eeeb">;</span></span><span class="line"><span class="ct-b1eeeb"> }</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7cfc7d">const</span><span class="ct-b1eeeb"> { </span><span class="ct-d06ad1">user</span><span class="ct-b1eeeb">, </span><span class="ct-d06ad1">referrer</span><span class="ct-b1eeeb"> } </span><span class="ct-c8ffb0">=</span><span class="ct-b1eeeb"> </span><span class="ct-7194b1">event</span><span class="ct-b1eeeb">.</span><span class="ct-7194b1">returnValues</span><span class="ct-b1eeeb">;</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7194b1">console</span><span class="ct-b1eeeb">.</span><span class="ct-af8265">log</span><span class="ct-b1eeeb">(</span><span class="ct-7194b1">user</span><span class="ct-b1eeeb">, </span><span class="ct-7194b1">referrer</span><span class="ct-b1eeeb">);</span></span><span class="line"><span class="ct-b1eeeb"> } </span><span class="ct-c8ffb0">catch</span><span class="ct-b1eeeb"> (</span><span class="ct-7194b1">e</span><span class="ct-b1eeeb">) {</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7194b1">console</span><span class="ct-b1eeeb">.</span><span class="ct-af8265">log</span><span class="ct-b1eeeb">(</span><span class="ct-ba7e2c">`| ONCE | ${</span><span class="ct-7194b1">e</span><span class="ct-ba7e2c">}`</span><span class="ct-b1eeeb">);</span></span><span class="line"><span class="ct-b1eeeb"> }</span></span><span class="line"><span class="ct-b1eeeb"> },</span></span><span class="line"><span class="ct-b1eeeb"> )</span></span><span class="line"><span class="ct-303309"> .</span><span class="ct-98d685">on</span><span class="ct-303309">(</span><span class="ct-86b87d">'error'</span><span class="ct-303309">, (</span><span class="ct-8d5659">error</span><span class="ct-ba7760">:</span><span class="ct-303309"> </span><span class="ct-156cde">ErrnoException</span><span class="ct-303309">) </span><span class="ct-39fbef">=></span><span class="ct-303309"> {</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7194b1">console</span><span class="ct-b1eeeb">.</span><span class="ct-af8265">log</span><span class="ct-b1eeeb">(</span><span class="ct-7194b1">error</span><span class="ct-b1eeeb">);</span></span><span class="line"><span class="ct-b1eeeb"> });</span></span></code></pre><!--]--></div><h3 id="with-filtering"><a href="#with-filtering"><!--[-->With filtering<!--]--></a></h3><p><!--[-->We're listening to <code><!--[-->Transfer<!--]--></code> event here:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7cfc7d">let</span><span class="ct-b1eeeb"> </span><span class="ct-7194b1">options</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">=</span><span class="ct-b1eeeb"> {</span></span><span class="line"><span class="ct-b1eeeb"> filter: {</span></span><span class="line"><span class="ct-b1eeeb"> value: [],</span></span><span class="line"><span class="ct-b1eeeb"> },</span></span><span class="line"><span class="ct-b1eeeb"> fromBlock: </span><span class="ct-6138fb">0</span></span><span class="line"><span class="ct-b1eeeb"> };</span></span><span class="line"></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7194b1">myContract</span><span class="ct-b1eeeb">.</span><span class="ct-7194b1">events</span><span class="ct-b1eeeb">.</span><span class="ct-af8265">Transfer</span><span class="ct-b1eeeb">(</span><span class="ct-7194b1">options</span><span class="ct-b1eeeb">)</span></span><span class="line"><span class="ct-b1eeeb"> .</span><span class="ct-af8265">on</span><span class="ct-b1eeeb">(</span><span class="ct-ba7e2c">'data'</span><span class="ct-b1eeeb"> </span><span class="ct-af8265">log</span><span class="ct-b1eeeb">(</span><span class="ct-7194b1">event</span><span class="ct-b1eeeb">))</span></span><span class="line"><span class="ct-b1eeeb"> .</span><span class="ct-af8265">on</span><span class="ct-b1eeeb">(</span><span class="ct-ba7e2c">'changed'</span><span class="ct-b1eeeb"> </span><span class="ct-af8265">log</span><span class="ct-b1eeeb">(</span><span class="ct-7194b1">changed</span><span class="ct-b1eeeb">))</span></span><span class="line"><span class="ct-b1eeeb"> .</span><span class="ct-af8265">on</span><span class="ct-b1eeeb">(</span><span class="ct-ba7e2c">'error'</span><span class="ct-b1eeeb"> </span></span><span class="line"><span class="ct-b1eeeb"> .</span><span class="ct-af8265">on</span><span class="ct-b1eeeb">(</span><span class="ct-ba7e2c">'connected'</span><span class="ct-b1eeeb"> </span><span class="ct-af8265">log</span><span class="ct-b1eeeb">(</span><span class="ct-7194b1">str</span><span class="ct-b1eeeb">))</span></span></code></pre><!--]--></div><h3 id="common-subscribe-method"><a href="#common-subscribe-method"><!--[-->Common Subscribe method<!--]--></a></h3><p><!--[-->Filtering options can also be specified:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7cfc7d">let</span><span class="ct-b1eeeb"> </span><span class="ct-7194b1">options</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">=</span><span class="ct-b1eeeb"> {</span></span><span class="line"><span class="ct-b1eeeb"> fromBlock: </span><span class="ct-6138fb">0</span><span class="ct-b1eeeb">,</span></span><span class="line"><span class="ct-b1eeeb"> address: [</span><span class="ct-ba7e2c">'address-1'</span><span class="ct-b1eeeb">, </span><span class="ct-ba7e2c">'address-2'</span><span class="ct-b1eeeb">], </span><span class="ct-709ef0">//Only get events from specific addresses</span></span><span class="line"><span class="ct-b1eeeb"> topics: [] </span><span class="ct-709ef0">//What topics to subscribe to</span></span><span class="line"><span class="ct-b1eeeb"> };</span></span><span class="line"></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7cfc7d">let</span><span class="ct-b1eeeb"> </span><span class="ct-7194b1">subscription</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">=</span><span class="ct-b1eeeb"> (</span><span class="ct-ba7e2c">'logs'</span><span class="ct-b1eeeb">, </span><span class="ct-7194b1">options</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">if</span><span class="ct-b1eeeb"> (</span><span class="ct-c8ffb0">!</span><span class="ct-7194b1">err</span><span class="ct-b1eeeb">)</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7194b1">console</span><span class="ct-b1eeeb">.</span><span class="ct-af8265">log</span><span class="ct-b1eeeb">(</span><span class="ct-7194b1">event</span><span class="ct-b1eeeb">)</span></span><span class="line"><span class="ct-b1eeeb"> });</span></span><span class="line"></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7194b1">subscription</span><span class="ct-b1eeeb">.</span><span class="ct-af8265">on</span><span class="ct-b1eeeb">(</span><span class="ct-ba7e2c">'data'</span><span class="ct-7cfc7d">=></span><span class="ct-b1eeeb"> </span><span class="ct-7194b1">console</span><span class="ct-b1eeeb">.</span><span class="ct-af8265">log</span><span class="ct-b1eeeb">(</span><span class="ct-7194b1">event</span><span class="ct-b1eeeb">))</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7194b1">subscription</span><span class="ct-b1eeeb">.</span><span class="ct-af8265">on</span><span class="ct-b1eeeb">(</span><span class="ct-ba7e2c">'changed'</span><span class="ct-7cfc7d">=></span><span class="ct-b1eeeb"> </span><span class="ct-7194b1">console</span><span class="ct-b1eeeb">.</span><span class="ct-af8265">log</span><span class="ct-b1eeeb">(</span><span class="ct-7194b1">changed</span><span class="ct-b1eeeb">))</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7194b1">subscription</span><span class="ct-b1eeeb">.</span><span class="ct-af8265">on</span><span class="ct-b1eeeb">(</span><span class="ct-ba7e2c">'error'</span><span class="ct-7cfc7d">=></span><span class="ct-b1eeeb"> { </span><span class="ct-c8ffb0">throw</span><span class="ct-b1eeeb"> </span><span class="ct-7194b1">err</span><span class="ct-b1eeeb"> })</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7194b1">subscription</span><span class="ct-b1eeeb">.</span><span class="ct-af8265">on</span><span class="ct-b1eeeb">(</span><span class="ct-ba7e2c">'connected'</span><span class="ct-7cfc7d">=></span><span class="ct-b1eeeb"> </span><span class="ct-7194b1">console</span><span class="ct-b1eeeb">.</span><span class="ct-af8265">log</span><span class="ct-b1eeeb">(</span><span class="ct-7194b1">nr</span><span class="ct-b1eeeb">))</span></span></code></pre><!--]--></div><h3 id="getting-event-history"><a href="#getting-event-history"><!--[-->Getting event history<!--]--></a></h3><p><!--[-->Getting history for <code><!--[-->Transfer<!--]--></code> events for specific values. More info can be found <a href="https://web3js.readthedocs.io/en/v1.2.11/web3-eth-subscribe.html#" rel="nofollow" target="_blank"><!--[-->here<!--]--></a><!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-709ef0">//example options(optional)</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7cfc7d">let</span><span class="ct-b1eeeb"> </span><span class="ct-7194b1">options</span><span class="ct-b1eeeb"> </span><span class="ct-c8ffb0">=</span><span class="ct-b1eeeb"> {</span></span><span class="line"><span class="ct-b1eeeb"> filter: {</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-709ef0">// only get events where transfer value was 1000 or 1337</span></span><span class="line"><span class="ct-b1eeeb"> value: [</span><span class="ct-ba7e2c">'1000'</span><span class="ct-b1eeeb">, </span><span class="ct-ba7e2c">'1337'</span><span class="ct-b1eeeb">] </span></span><span class="line"><span class="ct-b1eeeb"> },</span></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-709ef0">// number | "earliest" | "pending" | "latest"</span></span><span class="line"><span class="ct-b1eeeb"> fromBlock: </span><span class="ct-6138fb">0</span><span class="ct-b1eeeb">, </span></span><span class="line"><span class="ct-b1eeeb"> toBlock: </span><span class="ct-ba7e2c">'latest'</span></span><span class="line"><span class="ct-b1eeeb"> };</span></span><span class="line"></span><span class="line"><span class="ct-b1eeeb"> </span><span class="ct-7194b1">myContract</span><span class="ct-b1eeeb">.</span><span class="ct-af8265">getPastEvents</span><span class="ct-b1eeeb">(</span><span class="ct-ba7e2c">'Transfer'</span><span class="ct-b1eeeb">, </span><span class="ct-7194b1">options</span><span class="ct-b1eeeb">)</span></span><span class="line"><span class="ct-b1eeeb"> .</span><span class="ct-af8265">then</span><span class="ct-b1eeeb"> </span><span class="ct-af8265">log</span><span class="ct-b1eeeb">(</span><span class="ct-7194b1">results</span><span class="ct-b1eeeb">))</span></span><span class="line"><span class="ct-b1eeeb"> .</span><span class="ct-af8265">catch</span><span class="ct-b1eeeb"> </span></span></code></pre><!--]--></div><style>.ct-156cde{color:#FFA657}.ct-86b87d{color:#A5D6FF}.ct-f1ea08{color:#79C0FF}.ct-ee6b52{color:#79C0FF}.ct-6138fb{color:#79C0FF}.ct-d06ad1{color:#79C0FF}.ct-7cfc7d{color:#FF7B72}.ct-709ef0{color:#8B949E}.ct-d2d503{color:#FFA657}.ct-af8265{color:#D2A8FF}.ct-82aa2e{color:#79C0FF}.ct-f3b352{color:#79C0FF}.ct-6e9d8e{color:#79C0FF}.ct-8d5659{color:#FFA657}.ct-ba7760{color:#FF7B72}.ct-98d685{color:#D2A8FF}.ct-303309{color:#C9D1D9}.ct-39fbef{color:#FF7B72}.ct-ba7e2c{color:#A5D6FF}.ct-7194b1{color:#C9D1D9}.ct-b1eeeb{color:#C9D1D9}.ct-c8ffb0{color:#FF7B72}.light .ct-c8ffb0{color:#859900}.light .ct-b1eeeb{color:#657B83}.light .ct-7194b1{color:#268BD2}.light .ct-ba7e2c{color:#2AA198}.light .ct-39fbef{color:#073642}.light .ct-303309{color:#657B83}.light .ct-98d685{color:#268BD2}.light .ct-ba7760{color:#859900}.light .ct-8d5659{color:#657B83}.light .ct-6e9d8e{color:#859900}.light .ct-f3b352{color:#268BD2}.light .ct-82aa2e{color:#657B83}.light .ct-af8265{color:#268BD2}.light .ct-d2d503{color:#657B83}.light .ct-709ef0{color:#93A1A1}.light .ct-7cfc7d{color:#073642}.light .ct-d06ad1{color:#268BD2}.light .ct-6138fb{color:#D33682}.light .ct-ee6b52{color:#859900}.light .ct-f1ea08{color:#B58900}.light .ct-86b87d{color:#2AA198}.light .ct-156cde{color:#268BD2}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/blockchain/smart-contracts/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695529362}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script><script type="module" src="/nuxt/ProseStrong.e968ffe9.js" crossorigin></script><script type="module" src="/nuxt/ProseH3.462e5228.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a aria-current="page" href="/blockchain/smart-contracts" class="router-link-active _active_192pu_81 _link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Smart Contracts</h1><article><div><p><!--[-->For common functions see <a href="/blockchain/common-typescript-examples" class=""><!--[-->Common typescript examples<!--]--></a>.<!--]--></p><h2 id="getting-smart-contract-instance"><a href="#getting-smart-contract-instance"><!--[-->Getting smart contract instance<!--]--></a></h2><p><!--[-->Useful for calling smart contract methods:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-8b4f62">import</span><span class="ct-d70533"> { </span><span class="ct-de2679">Contract</span><span class="ct-d70533"> } </span><span class="ct-8b4f62">from</span><span class="ct-d70533"> </span><span class="ct-a09c09">'web3-eth-contract'</span><span class="ct-d70533">;</span></span><span class="line"><span class="ct-8b4f62">import</span><span class="ct-d70533"> { </span><span class="ct-de2679">web3</span><span class="ct-d70533"> } </span><span class="ct-8b4f62">from</span><span class="ct-d70533"> </span><span class="ct-a09c09">'.'</span><span class="ct-d70533">;</span></span><span class="line"></span><span class="line"><span class="ct-c29147">const</span><span class="ct-a86e1f"> </span><span class="ct-011e68">getContract</span><span class="ct-a86e1f"> </span><span class="ct-4075f5">=</span><span class="ct-a86e1f"> (</span><span class="ct-6edc38">abi</span><span class="ct-4075f5">:</span><span class="ct-a86e1f"> </span><span class="ct-66877e">object</span><span class="ct-a86e1f">, </span><span class="ct-6edc38">address</span><span class="ct-4075f5">?:</span><span class="ct-a86e1f"> </span><span class="ct-66877e">string</span><span class="ct-a86e1f">)</span><span class="ct-4075f5">:</span><span class="ct-a86e1f"> </span><span class="ct-c29147">=></span><span class="ct-a86e1f"> {</span></span><span class="line"><span class="ct-a86e1f"> </span><span class="ct-c29147">const</span><span class="ct-a86e1f"> </span><span class="ct-2c18b2">abiFromJson</span><span class="ct-a86e1f"> </span><span class="ct-4075f5">=</span><span class="ct-a86e1f"> </span><span class="ct-55e18c">JSON</span><span class="ct-a86e1f">.</span><span class="ct-2c18b2">parse</span><span class="ct-a86e1f">(</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-8b4f62">return</span><span class="ct-d70533"> </span><span class="ct-8b4f62">new</span><span class="ct-d70533"> </span><span class="ct-de2679">web3</span><span class="ct-d70533">.</span><span class="ct-de2679">eth</span><span class="ct-d70533">.</span><span class="ct-8d27c1">Contract</span><span class="ct-d70533">(</span><span class="ct-de2679">abiFromJson</span><span class="ct-d70533">, </span><span class="ct-de2679">address</span><span class="ct-d70533">);</span></span><span class="line"><span class="ct-d70533">};</span></span><span class="line"></span><span class="line"><span class="ct-8b4f62">export</span><span class="ct-84aa9a"> </span><span class="ct-8b4f62">default</span><span class="ct-84aa9a"> </span><span class="ct-de2679">getContract</span><span class="ct-d70533">;</span></span></code></pre><!--]--></div><h2 id="executing-contract-method"><a href="#executing-contract-method"><!--[-->Executing contract method<!--]--></a></h2><p><!--[-->Contract has <strong><!--[-->read<!--]--></strong> and <strong><!--[-->write<!--]--></strong> methods. To get a list of methods, you can paste contract address on <a href="https://etherscan.io/token/0xdac17f958d2ee523a2206206994597c13d831ec7#readContract" rel="nofollow" target="_blank"><!--[-->https://etherscan.io/ ETH<!--]--></a> or any other service.<!--]--></p><p><!--[--><strong><!--[-->Read<!--]--></strong> methods doesn't require spending <strong><!--[-->gas<!--]--></strong>. <strong><!--[-->Write<!--]--></strong> methods cost some amount of <strong><!--[-->gas<!--]--></strong>, hence they will be executed with confirmation from user.<!--]--></p><h3 id="example-for-metamask-without-private-key"><a href="#example-for-metamask-without-private-key"><!--[-->Example for #Metamask without private key<!--]--></a></h3><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-89bed9">// see example below</span></span><span class="line"><span class="ct-8b4f62">import</span><span class="ct-d70533"> { </span><span class="ct-de2679">getContract</span><span class="ct-d70533"> } </span><span class="ct-8b4f62">from</span><span class="ct-d70533"> </span><span class="ct-a09c09">'.'</span><span class="ct-d70533">;</span></span><span class="line"></span><span class="line"><span class="ct-89bed9">// ABI of contract</span></span><span class="line"><span class="ct-c7a0e7">const</span><span class="ct-d70533"> </span><span class="ct-86670b">CONTRACT_ABI</span><span class="ct-d70533"> </span><span class="ct-8b4f62">=</span><span class="ct-d70533"> { </span><span class="ct-89bed9">/* ... */</span><span class="ct-d70533"> };</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-89bed9">// address for contract</span></span><span class="line"><span class="ct-c7a0e7">const</span><span class="ct-d70533"> </span><span class="ct-86670b">CONTRACT_ADDRESS</span><span class="ct-d70533"> </span><span class="ct-8b4f62">=</span><span class="ct-d70533"> </span><span class="ct-a09c09">'0xdea164f67df4dbfe675d5271c9d404e0260f33bb'</span><span class="ct-d70533">;</span></span><span class="line"></span><span class="line"><span class="ct-8b4f62">export</span><span class="ct-d70533"> </span><span class="ct-c7a0e7">const</span><span class="ct-d70533"> </span><span class="ct-8d27c1">executeContractMethod</span><span class="ct-d70533"> </span><span class="ct-8b4f62">=</span><span class="ct-d70533"> </span><span class="ct-c7a0e7">async</span><span class="ct-d70533"> ({}) </span><span class="ct-c7a0e7">=></span><span class="ct-d70533"> {</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-89bed9">// getting contract</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-c7a0e7">const</span><span class="ct-d70533"> </span><span class="ct-86670b">contract</span><span class="ct-d70533"> </span><span class="ct-8b4f62">=</span><span class="ct-d70533"> </span><span class="ct-8d27c1">getContract</span><span class="ct-d70533">(</span><span class="ct-86670b">CONTRACT_ABI</span><span class="ct-d70533">, </span><span class="ct-86670b">CONTRACT_ADDRESS</span><span class="ct-d70533">);</span></span><span class="line"><span class="ct-d70533"> </span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-89bed9">// Calling write method</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-8b4f62">try</span><span class="ct-d70533"> {</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-89bed9">// authorizing with Metamask</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-8b4f62">await</span><span class="ct-d70533"> </span><span class="ct-de2679">web3</span><span class="ct-d70533">.</span><span class="ct-de2679">currentProvider</span><span class="ct-d70533">.</span><span class="ct-8d27c1">request</span><span class="ct-d70533">({ method: </span><span class="ct-a09c09">'eth_requestAccounts'</span><span class="ct-d70533"> });</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-89bed9">// getting wallet address</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-c7a0e7">const</span><span class="ct-d70533"> </span><span class="ct-86670b">addressUser</span><span class="ct-d70533"> </span><span class="ct-8b4f62">=</span><span class="ct-d70533"> </span><span class="ct-de2679">web3</span><span class="ct-d70533">.</span><span class="ct-de2679">currentProvider</span><span class="ct-d70533">.</span><span class="ct-de2679">selectedAddress</span><span class="ct-d70533">;</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-89bed9">// calling "store" store method for contract</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-89bed9">// payload should include `from` address, that matches</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-89bed9">// current user's wallet</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-8b4f62">await</span><span class="ct-d70533"> </span><span class="ct-de2679">contract</span><span class="ct-d70533">.</span><span class="ct-de2679">methods</span><span class="ct-d70533">.</span><span class="ct-8d27c1">store</span><span class="ct-d70533">(</span><span class="ct-38e3ec">0</span><span class="ct-d70533">, </span><span class="ct-a09c09">'Parameter'</span><span class="ct-d70533">).</span><span class="ct-8d27c1">send</span><span class="ct-d70533">({</span></span><span class="line"><span class="ct-d70533"> from: </span><span class="ct-de2679">addressUser</span><span class="ct-d70533">,</span></span><span class="line"><span class="ct-d70533"> });</span></span><span class="line"><span class="ct-d70533"> } </span><span class="ct-8b4f62">catch</span><span class="ct-d70533"> (</span><span class="ct-de2679">e</span><span class="ct-d70533">) {</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-8b4f62">throw</span><span class="ct-d70533"> </span><span class="ct-8b4f62">new</span><span class="ct-d70533"> </span><span class="ct-ba447c">Error</span><span class="ct-d70533">(</span><span class="ct-de2679">e</span><span class="ct-d70533">);</span></span><span class="line"><span class="ct-d70533"> }</span></span><span class="line"><span class="ct-d70533"> </span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-89bed9">// calling read method</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-8b4f62">try</span><span class="ct-d70533"> {</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-89bed9">// this method can return data</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-c7a0e7">const</span><span class="ct-d70533"> </span><span class="ct-86670b">result</span><span class="ct-d70533"> </span><span class="ct-8b4f62">=</span><span class="ct-d70533"> </span><span class="ct-8b4f62">await</span><span class="ct-d70533"> </span><span class="ct-de2679">contract</span><span class="ct-d70533">.</span><span class="ct-de2679">methods</span><span class="ct-d70533">.</span><span class="ct-8d27c1">retrieve</span><span class="ct-d70533">().</span><span class="ct-8d27c1">call</span><span class="ct-d70533">();</span></span><span class="line"><span class="ct-d70533"> } </span><span class="ct-8b4f62">catch</span><span class="ct-d70533"> (</span><span class="ct-de2679">e</span><span class="ct-d70533">) {</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-8b4f62">throw</span><span class="ct-d70533"> </span><span class="ct-8b4f62">new</span><span class="ct-d70533"> </span><span class="ct-ba447c">Error</span><span class="ct-d70533">(</span><span class="ct-de2679">e</span><span class="ct-d70533">);</span></span><span class="line"><span class="ct-d70533"> }</span></span><span class="line"><span class="ct-d70533">}</span></span></code></pre><!--]--></div><h3 id="nodejs-and-react-native-example"><a href="#nodejs-and-react-native-example"><!--[-->Node.js and React Native example<!--]--></a></h3><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-89bed9">// see example below</span></span><span class="line"><span class="ct-8b4f62">import</span><span class="ct-d70533"> { </span><span class="ct-de2679">getContract</span><span class="ct-d70533"> } </span><span class="ct-8b4f62">from</span><span class="ct-d70533"> </span><span class="ct-a09c09">'.'</span><span class="ct-d70533">;</span></span><span class="line"></span><span class="line"><span class="ct-89bed9">// ABI контракта</span></span><span class="line"><span class="ct-c7a0e7">const</span><span class="ct-d70533"> </span><span class="ct-86670b">CONTRACT_ABI</span><span class="ct-d70533"> </span><span class="ct-8b4f62">=</span><span class="ct-d70533"> { </span><span class="ct-89bed9">/* ... */</span><span class="ct-d70533"> };</span></span><span class="line"><span class="ct-89bed9">// contract address</span></span><span class="line"><span class="ct-c7a0e7">const</span><span class="ct-d70533"> </span><span class="ct-86670b">CONTRACT_ADDRESS</span><span class="ct-d70533"> </span><span class="ct-8b4f62">=</span><span class="ct-d70533"> </span><span class="ct-a09c09">'0xdea164f67df4dbfe675d5271c9d404e0260f33bb'</span><span class="ct-d70533">;</span></span><span class="line"><span class="ct-89bed9">// getting contract</span></span><span class="line"><span class="ct-c7a0e7">const</span><span class="ct-d70533"> </span><span class="ct-86670b">contract</span><span class="ct-d70533"> </span><span class="ct-8b4f62">=</span><span class="ct-d70533"> </span><span class="ct-8d27c1">getContract</span><span class="ct-d70533">(</span><span class="ct-86670b">CONTRACT_ABI</span><span class="ct-d70533">, </span><span class="ct-86670b">CONTRACT_ADDRESS</span><span class="ct-d70533">);</span></span><span class="line"><span class="ct-89bed9">// account's private key</span></span><span class="line"><span class="ct-c7a0e7">const</span><span class="ct-d70533"> </span><span class="ct-86670b">privateKey</span><span class="ct-d70533"> </span><span class="ct-8b4f62">=</span><span class="ct-d70533"> </span><span class="ct-a09c09">'...'</span><span class="ct-d70533">;</span></span><span class="line"></span><span class="line"><span class="ct-89bed9">// write-methods requires private key</span></span><span class="line"><span class="ct-c29147">const</span><span class="ct-a86e1f"> </span><span class="ct-011e68">executeContractMethod</span><span class="ct-a86e1f"> </span><span class="ct-4075f5">=</span><span class="ct-a86e1f"> </span><span class="ct-c29147">async</span><span class="ct-a86e1f"> (</span><span class="ct-6edc38">val</span><span class="ct-4075f5">:</span><span class="ct-a86e1f"> </span><span class="ct-66877e">number</span><span class="ct-a86e1f">) </span><span class="ct-c29147">=></span><span class="ct-a86e1f"> {</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-c7a0e7">const</span><span class="ct-d70533"> </span><span class="ct-86670b">transaction</span><span class="ct-d70533"> </span><span class="ct-8b4f62">=</span><span class="ct-d70533"> </span><span class="ct-de2679">contract</span><span class="ct-d70533">.</span><span class="ct-de2679">methods</span><span class="ct-d70533">.</span><span class="ct-8d27c1">store</span><span class="ct-d70533">(</span><span class="ct-de2679">val</span><span class="ct-d70533">);</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-c7a0e7">const</span><span class="ct-d70533"> </span><span class="ct-86670b">account</span><span class="ct-d70533"> </span><span class="ct-8b4f62">=</span><span class="ct-d70533"> </span><span class="ct-de2679">web3</span><span class="ct-d70533">.</span><span class="ct-de2679">eth</span><span class="ct-d70533">.</span><span class="ct-de2679">accounts</span><span class="ct-d70533">.</span><span class="ct-8d27c1">privateKeyToAccount</span><span class="ct-d70533">(</span><span class="ct-de2679">privateKey</span><span class="ct-d70533">);</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-c7a0e7">const</span><span class="ct-d70533"> </span><span class="ct-86670b">options</span><span class="ct-d70533"> </span><span class="ct-8b4f62">=</span><span class="ct-d70533"> {</span></span><span class="line"><span class="ct-d70533"> to: </span><span class="ct-86670b">CONTRACT_ADDRESS</span><span class="ct-d70533">,</span></span><span class="line"><span class="ct-d70533"> data: </span><span class="ct-de2679">transaction</span><span class="ct-d70533">.</span><span class="ct-8d27c1">encodeABI</span><span class="ct-d70533">(),</span></span><span class="line"><span class="ct-d70533"> gas: </span><span class="ct-8b4f62">await</span><span class="ct-d70533"> </span><span class="ct-de2679">transaction</span><span class="ct-d70533">.</span><span class="ct-8d27c1">estimateGas</span><span class="ct-d70533">({ from: </span><span class="ct-de2679">account</span><span class="ct-d70533">.</span><span class="ct-de2679">address</span><span class="ct-d70533"> }),</span></span><span class="line"><span class="ct-d70533"> gasPrice: </span><span class="ct-8b4f62">await</span><span class="ct-d70533"> </span><span class="ct-de2679">web3</span><span class="ct-d70533">.</span><span class="ct-de2679">eth</span><span class="ct-d70533">.</span><span class="ct-8d27c1">getGasPrice</span><span class="ct-d70533">(),</span></span><span class="line"><span class="ct-d70533"> };</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-c7a0e7">const</span><span class="ct-d70533"> </span><span class="ct-86670b">signed</span><span class="ct-d70533"> </span><span class="ct-8b4f62">=</span><span class="ct-d70533"> </span><span class="ct-8b4f62">await</span><span class="ct-d70533"> </span><span class="ct-de2679">web3</span><span class="ct-d70533">.</span><span class="ct-de2679">eth</span><span class="ct-d70533">.</span><span class="ct-de2679">accounts</span><span class="ct-d70533">.</span><span class="ct-8d27c1">signTransaction</span><span class="ct-d70533">(</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-de2679">options</span><span class="ct-d70533">,</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-de2679">privateKey</span><span class="ct-d70533">,</span></span><span class="line"><span class="ct-d70533"> );</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-8b4f62">await</span><span class="ct-d70533"> </span><span class="ct-de2679">web3</span><span class="ct-d70533">.</span><span class="ct-de2679">eth</span><span class="ct-d70533">.</span><span class="ct-8d27c1">sendSignedTransaction</span><span class="ct-d70533">(</span><span class="ct-de2679">signed</span><span class="ct-d70533">.</span><span class="ct-de2679">rawTransaction</span><span class="ct-8b4f62">!</span><span class="ct-d70533">);</span></span><span class="line"><span class="ct-d70533">};</span></span></code></pre><!--]--></div><h3 id="calling-a-batch-of-contracts-methods"><a href="#calling-a-batch-of-contracts-methods"><!--[-->Calling a batch of contract's methods<!--]--></a></h3><p><!--[-->Function calls batch of requests, returning array of results. For example:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-d70533"> </span><span class="ct-c7a0e7">const</span><span class="ct-d70533"> </span><span class="ct-86670b">requests</span><span class="ct-d70533"> </span><span class="ct-8b4f62">=</span><span class="ct-d70533"> [</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-de2679">contract</span><span class="ct-d70533">.</span><span class="ct-de2679">method</span><span class="ct-d70533">.</span><span class="ct-8d27c1">balanceOf</span><span class="ct-d70533">().</span><span class="ct-de2679">call</span><span class="ct-d70533">,</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-de2679">contract</span><span class="ct-d70533">.</span><span class="ct-de2679">method</span><span class="ct-d70533">.</span><span class="ct-8d27c1">getStaked</span><span class="ct-d70533">().</span><span class="ct-de2679">call</span></span><span class="line"><span class="ct-d70533"> ]</span></span><span class="line"></span><span class="line"><span class="ct-d70533"> </span><span class="ct-c7a0e7">const</span><span class="ct-d70533"> </span><span class="ct-86670b">result</span><span class="ct-d70533"> </span><span class="ct-8b4f62">=</span><span class="ct-d70533"> </span><span class="ct-8b4f62">await</span><span class="ct-d70533"> </span><span class="ct-8d27c1">makeBatchRequest</span><span class="ct-d70533">(</span><span class="ct-de2679">request</span><span class="ct-d70533">);</span></span></code></pre><!--]--></div><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-c7a0e7">const</span><span class="ct-d70533"> </span><span class="ct-86670b">web3</span><span class="ct-d70533"> </span><span class="ct-8b4f62">=</span><span class="ct-d70533"> </span><span class="ct-8b4f62">new</span><span class="ct-d70533"> </span><span class="ct-8d27c1">Web3</span><span class="ct-d70533">(</span><span class="ct-de2679">Web3</span><span class="ct-d70533">.</span><span class="ct-de2679">givenProvider</span><span class="ct-d70533"> </span><span class="ct-8b4f62">||</span><span class="ct-d70533"> </span><span class="ct-86670b">PROVIDER_URL</span><span class="ct-d70533">);</span></span><span class="line"></span><span class="line"><span class="ct-c29147">const</span><span class="ct-a86e1f"> </span><span class="ct-011e68">makeBatchRequest</span><span class="ct-a86e1f"> </span><span class="ct-4075f5">=</span><span class="ct-a86e1f"> (</span><span class="ct-6edc38">calls</span><span class="ct-4075f5">:</span><span class="ct-a86e1f"> </span><span class="ct-66877e">any</span><span class="ct-a86e1f">[]) </span><span class="ct-c29147">=></span><span class="ct-a86e1f"> {</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-8b4f62">try</span><span class="ct-d70533"> {</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-c7a0e7">const</span><span class="ct-d70533"> </span><span class="ct-86670b">web3</span><span class="ct-d70533"> </span><span class="ct-8b4f62">=</span><span class="ct-d70533"> </span><span class="ct-8d27c1">getWeb3NoAccount</span><span class="ct-d70533">();</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-c7a0e7">const</span><span class="ct-d70533"> </span><span class="ct-86670b">batch</span><span class="ct-d70533"> </span><span class="ct-8b4f62">=</span><span class="ct-d70533"> </span><span class="ct-8b4f62">new</span><span class="ct-d70533"> </span><span class="ct-de2679">web3</span><span class="ct-d70533">.</span><span class="ct-8d27c1">BatchRequest</span><span class="ct-d70533">();</span></span><span class="line"></span><span class="line"><span class="ct-d70533"> </span><span class="ct-c7a0e7">const</span><span class="ct-d70533"> </span><span class="ct-86670b">promises</span><span class="ct-d70533"> </span><span class="ct-8b4f62">=</span><span class="ct-d70533"> </span><span class="ct-de2679">calls</span><span class="ct-d70533">.</span><span class="ct-8d27c1">map</span><span class="ct-c7a0e7">=></span><span class="ct-d70533"> {</span></span><span class="line"><span class="ct-a86e1f"> </span><span class="ct-4075f5">return</span><span class="ct-a86e1f"> </span><span class="ct-4075f5">new</span><span class="ct-a86e1f"> </span><span class="ct-66877e">Promise</span><span class="ct-a86e1f">((</span><span class="ct-6edc38">resolve</span><span class="ct-a86e1f">, </span><span class="ct-6edc38">reject</span><span class="ct-a86e1f">) </span><span class="ct-c29147">=></span><span class="ct-a86e1f"> {</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-de2679">batch</span><span class="ct-d70533">.</span><span class="ct-8d27c1">add</span><span class="ct-d70533">(</span></span><span class="line"></span><span class="line"><span class="ct-d70533"> </span><span class="ct-8b4f62">if</span><span class="ct-d70533"> (</span><span class="ct-de2679">err</span><span class="ct-d70533">) {</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-8d27c1">reject</span><span class="ct-d70533">(</span><span class="ct-de2679">err</span><span class="ct-d70533">);</span></span><span class="line"><span class="ct-d70533"> } </span><span class="ct-8b4f62">else</span><span class="ct-d70533"> {</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-8d27c1">resolve</span><span class="ct-d70533">(</span><span class="ct-de2679">result</span><span class="ct-d70533">);</span></span><span class="line"><span class="ct-d70533"> }</span></span><span class="line"><span class="ct-d70533"> })</span></span><span class="line"><span class="ct-d70533"> );</span></span><span class="line"><span class="ct-d70533"> });</span></span><span class="line"><span class="ct-d70533"> });</span></span><span class="line"></span><span class="line"><span class="ct-d70533"> </span><span class="ct-de2679">batch</span><span class="ct-d70533">.</span><span class="ct-8d27c1">execute</span><span class="ct-d70533">();</span></span><span class="line"></span><span class="line"><span class="ct-d70533"> </span><span class="ct-8b4f62">return</span><span class="ct-d70533"> </span><span class="ct-ba447c">Promise</span><span class="ct-d70533">.</span><span class="ct-8d27c1">all</span><span class="ct-d70533">(</span><span class="ct-de2679">promises</span><span class="ct-d70533">);</span></span><span class="line"><span class="ct-d70533"> } </span><span class="ct-8b4f62">catch</span><span class="ct-d70533"> {</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-8b4f62">return</span><span class="ct-d70533"> </span><span class="ct-5e1c9b">null</span><span class="ct-d70533">;</span></span><span class="line"><span class="ct-d70533"> }</span></span><span class="line"><span class="ct-d70533">};</span></span><span class="line"></span><span class="line"><span class="ct-8b4f62">export</span><span class="ct-84aa9a"> </span><span class="ct-8b4f62">default</span><span class="ct-84aa9a"> </span><span class="ct-de2679">makeBatchRequest</span><span class="ct-d70533">;</span></span></code></pre><!--]--></div><h2 id="subscribing-to-smart-contract-events"><a href="#subscribing-to-smart-contract-events"><!--[-->Subscribing to smart contract events<!--]--></a></h2><p><!--[-->There're different ways to subscribe for contract events. For all of them you will need following variables:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-d70533"> </span><span class="ct-8b4f62">import</span><span class="ct-d70533"> </span><span class="ct-de2679">Web3</span><span class="ct-d70533"> </span><span class="ct-8b4f62">from</span><span class="ct-d70533"> </span><span class="ct-a09c09">'web3'</span><span class="ct-d70533">;</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-c7a0e7">const</span><span class="ct-d70533"> </span><span class="ct-86670b">web3</span><span class="ct-d70533"> </span><span class="ct-8b4f62">=</span><span class="ct-d70533"> </span><span class="ct-8b4f62">new</span><span class="ct-d70533"> </span><span class="ct-8d27c1">Web3</span><span class="ct-d70533">(</span><span class="ct-a09c09">'YOUR_RPC_ENDPOINT_HERE'</span><span class="ct-d70533">);</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-c7a0e7">const</span><span class="ct-d70533"> </span><span class="ct-86670b">ABI</span><span class="ct-d70533"> </span><span class="ct-8b4f62">=</span><span class="ct-d70533"> </span><span class="ct-a09c09">'YOUR ABI HERE'</span><span class="ct-d70533">;</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-c7a0e7">const</span><span class="ct-d70533"> </span><span class="ct-86670b">CONTRACT_ADDRESS</span><span class="ct-d70533"> </span><span class="ct-8b4f62">=</span><span class="ct-d70533"> </span><span class="ct-a09c09">'YOUR CONTRACT ADDRESS HERE'</span><span class="ct-d70533">;</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-c7a0e7">const</span><span class="ct-d70533"> </span><span class="ct-86670b">myContract</span><span class="ct-d70533"> </span><span class="ct-8b4f62">=</span><span class="ct-d70533"> </span><span class="ct-8b4f62">new</span><span class="ct-d70533"> </span><span class="ct-de2679">Web3</span><span class="ct-d70533">.</span><span class="ct-8d27c1">Contract</span><span class="ct-d70533">(</span><span class="ct-86670b">ABI</span><span class="ct-d70533">, </span><span class="ct-86670b">CONTRACT_ADDRESS</span><span class="ct-d70533">);</span></span></code></pre><!--]--></div><h3 id="by-accessing-contractevents"><a href="#by-accessing-contractevents"><!--[-->By accessing contract.events<!--]--></a></h3><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-de2679">referralProgramContract</span><span class="ct-d70533">.</span><span class="ct-de2679">events</span></span><span class="line"><span class="ct-d70533"> .</span><span class="ct-8d27c1">RegisterUser</span><span class="ct-d70533">()</span></span><span class="line"><span class="ct-a86e1f"> .</span><span class="ct-011e68">on</span><span class="ct-a86e1f">(</span><span class="ct-f141aa">'connected'</span><span class="ct-a86e1f">, (</span><span class="ct-6edc38">subscriptionId</span><span class="ct-4075f5">:</span><span class="ct-a86e1f"> </span><span class="ct-66877e">string</span><span class="ct-a86e1f">) </span><span class="ct-c29147">=></span><span class="ct-a86e1f"> {</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-de2679">console</span><span class="ct-d70533">.</span><span class="ct-8d27c1">log</span><span class="ct-d70533">(</span><span class="ct-a09c09">`| UserRegistered | events | ${</span><span class="ct-de2679">subscriptionId</span><span class="ct-a09c09">}`</span><span class="ct-d70533">);</span></span><span class="line"><span class="ct-d70533"> })</span></span><span class="line"><span class="ct-d70533"> .</span><span class="ct-8d27c1">on</span><span class="ct-d70533">(</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-a09c09">'data'</span><span class="ct-d70533">,</span></span><span class="line"><span class="ct-a86e1f"> </span><span class="ct-c29147">async</span><span class="ct-a86e1f"> (</span><span class="ct-6edc38">event</span><span class="ct-4075f5">:</span><span class="ct-a86e1f"> {</span></span><span class="line"><span class="ct-a86e1f"> </span><span class="ct-6edc38">removed</span><span class="ct-4075f5">:</span><span class="ct-a86e1f"> </span><span class="ct-66877e">boolean</span><span class="ct-a86e1f">;</span></span><span class="line"><span class="ct-a86e1f"> </span><span class="ct-6edc38">returnValues</span><span class="ct-4075f5">:</span><span class="ct-a86e1f"> </span><span class="ct-f6baa6">RegisterUserResponseInterface</span><span class="ct-a86e1f">;</span></span><span class="line"><span class="ct-d70533"> }) </span><span class="ct-c7a0e7">=></span><span class="ct-d70533"> {</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-8b4f62">try</span><span class="ct-d70533"> {</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-8b4f62">if</span><span class="ct-d70533"> (</span><span class="ct-de2679">event</span><span class="ct-d70533">.</span><span class="ct-de2679">removed</span><span class="ct-d70533">) {</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-8b4f62">return</span><span class="ct-d70533">;</span></span><span class="line"><span class="ct-d70533"> }</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-c7a0e7">const</span><span class="ct-d70533"> { </span><span class="ct-86670b">user</span><span class="ct-d70533">, </span><span class="ct-86670b">referrer</span><span class="ct-d70533"> } </span><span class="ct-8b4f62">=</span><span class="ct-d70533"> </span><span class="ct-de2679">event</span><span class="ct-d70533">.</span><span class="ct-de2679">returnValues</span><span class="ct-d70533">;</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-de2679">console</span><span class="ct-d70533">.</span><span class="ct-8d27c1">log</span><span class="ct-d70533">(</span><span class="ct-de2679">user</span><span class="ct-d70533">, </span><span class="ct-de2679">referrer</span><span class="ct-d70533">);</span></span><span class="line"><span class="ct-d70533"> } </span><span class="ct-8b4f62">catch</span><span class="ct-d70533"> (</span><span class="ct-de2679">e</span><span class="ct-d70533">) {</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-de2679">console</span><span class="ct-d70533">.</span><span class="ct-8d27c1">log</span><span class="ct-d70533">(</span><span class="ct-a09c09">`| ONCE | ${</span><span class="ct-de2679">e</span><span class="ct-a09c09">}`</span><span class="ct-d70533">);</span></span><span class="line"><span class="ct-d70533"> }</span></span><span class="line"><span class="ct-d70533"> },</span></span><span class="line"><span class="ct-d70533"> )</span></span><span class="line"><span class="ct-a86e1f"> .</span><span class="ct-011e68">on</span><span class="ct-a86e1f">(</span><span class="ct-f141aa">'error'</span><span class="ct-a86e1f">, (</span><span class="ct-6edc38">error</span><span class="ct-4075f5">:</span><span class="ct-a86e1f"> </span><span class="ct-f6baa6">ErrnoException</span><span class="ct-a86e1f">) </span><span class="ct-c29147">=></span><span class="ct-a86e1f"> {</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-de2679">console</span><span class="ct-d70533">.</span><span class="ct-8d27c1">log</span><span class="ct-d70533">(</span><span class="ct-de2679">error</span><span class="ct-d70533">);</span></span><span class="line"><span class="ct-d70533"> });</span></span></code></pre><!--]--></div><h3 id="with-filtering"><a href="#with-filtering"><!--[-->With filtering<!--]--></a></h3><p><!--[-->We're listening to <code><!--[-->Transfer<!--]--></code> event here:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-d70533"> </span><span class="ct-c7a0e7">let</span><span class="ct-d70533"> </span><span class="ct-de2679">options</span><span class="ct-d70533"> </span><span class="ct-8b4f62">=</span><span class="ct-d70533"> {</span></span><span class="line"><span class="ct-d70533"> filter: {</span></span><span class="line"><span class="ct-d70533"> value: [],</span></span><span class="line"><span class="ct-d70533"> },</span></span><span class="line"><span class="ct-d70533"> fromBlock: </span><span class="ct-38e3ec">0</span></span><span class="line"><span class="ct-d70533"> };</span></span><span class="line"></span><span class="line"><span class="ct-d70533"> </span><span class="ct-de2679">myContract</span><span class="ct-d70533">.</span><span class="ct-de2679">events</span><span class="ct-d70533">.</span><span class="ct-8d27c1">Transfer</span><span class="ct-d70533">(</span><span class="ct-de2679">options</span><span class="ct-d70533">)</span></span><span class="line"><span class="ct-d70533"> .</span><span class="ct-8d27c1">on</span><span class="ct-d70533">(</span><span class="ct-a09c09">'data'</span><span class="ct-d70533"> </span><span class="ct-8d27c1">log</span><span class="ct-d70533">(</span><span class="ct-de2679">event</span><span class="ct-d70533">))</span></span><span class="line"><span class="ct-d70533"> .</span><span class="ct-8d27c1">on</span><span class="ct-d70533">(</span><span class="ct-a09c09">'changed'</span><span class="ct-d70533"> </span><span class="ct-8d27c1">log</span><span class="ct-d70533">(</span><span class="ct-de2679">changed</span><span class="ct-d70533">))</span></span><span class="line"><span class="ct-d70533"> .</span><span class="ct-8d27c1">on</span><span class="ct-d70533">(</span><span class="ct-a09c09">'error'</span><span class="ct-d70533"> </span></span><span class="line"><span class="ct-d70533"> .</span><span class="ct-8d27c1">on</span><span class="ct-d70533">(</span><span class="ct-a09c09">'connected'</span><span class="ct-d70533"> </span><span class="ct-8d27c1">log</span><span class="ct-d70533">(</span><span class="ct-de2679">str</span><span class="ct-d70533">))</span></span></code></pre><!--]--></div><h3 id="common-subscribe-method"><a href="#common-subscribe-method"><!--[-->Common Subscribe method<!--]--></a></h3><p><!--[-->Filtering options can also be specified:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-d70533"> </span><span class="ct-c7a0e7">let</span><span class="ct-d70533"> </span><span class="ct-de2679">options</span><span class="ct-d70533"> </span><span class="ct-8b4f62">=</span><span class="ct-d70533"> {</span></span><span class="line"><span class="ct-d70533"> fromBlock: </span><span class="ct-38e3ec">0</span><span class="ct-d70533">,</span></span><span class="line"><span class="ct-d70533"> address: [</span><span class="ct-a09c09">'address-1'</span><span class="ct-d70533">, </span><span class="ct-a09c09">'address-2'</span><span class="ct-d70533">], </span><span class="ct-89bed9">//Only get events from specific addresses</span></span><span class="line"><span class="ct-d70533"> topics: [] </span><span class="ct-89bed9">//What topics to subscribe to</span></span><span class="line"><span class="ct-d70533"> };</span></span><span class="line"></span><span class="line"><span class="ct-d70533"> </span><span class="ct-c7a0e7">let</span><span class="ct-d70533"> </span><span class="ct-de2679">subscription</span><span class="ct-d70533"> </span><span class="ct-8b4f62">=</span><span class="ct-d70533"> (</span><span class="ct-a09c09">'logs'</span><span class="ct-d70533">, </span><span class="ct-de2679">options</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-8b4f62">if</span><span class="ct-d70533"> (</span><span class="ct-8b4f62">!</span><span class="ct-de2679">err</span><span class="ct-d70533">)</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-de2679">console</span><span class="ct-d70533">.</span><span class="ct-8d27c1">log</span><span class="ct-d70533">(</span><span class="ct-de2679">event</span><span class="ct-d70533">)</span></span><span class="line"><span class="ct-d70533"> });</span></span><span class="line"></span><span class="line"><span class="ct-d70533"> </span><span class="ct-de2679">subscription</span><span class="ct-d70533">.</span><span class="ct-8d27c1">on</span><span class="ct-d70533">(</span><span class="ct-a09c09">'data'</span><span class="ct-c7a0e7">=></span><span class="ct-d70533"> </span><span class="ct-de2679">console</span><span class="ct-d70533">.</span><span class="ct-8d27c1">log</span><span class="ct-d70533">(</span><span class="ct-de2679">event</span><span class="ct-d70533">))</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-de2679">subscription</span><span class="ct-d70533">.</span><span class="ct-8d27c1">on</span><span class="ct-d70533">(</span><span class="ct-a09c09">'changed'</span><span class="ct-c7a0e7">=></span><span class="ct-d70533"> </span><span class="ct-de2679">console</span><span class="ct-d70533">.</span><span class="ct-8d27c1">log</span><span class="ct-d70533">(</span><span class="ct-de2679">changed</span><span class="ct-d70533">))</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-de2679">subscription</span><span class="ct-d70533">.</span><span class="ct-8d27c1">on</span><span class="ct-d70533">(</span><span class="ct-a09c09">'error'</span><span class="ct-c7a0e7">=></span><span class="ct-d70533"> { </span><span class="ct-8b4f62">throw</span><span class="ct-d70533"> </span><span class="ct-de2679">err</span><span class="ct-d70533"> })</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-de2679">subscription</span><span class="ct-d70533">.</span><span class="ct-8d27c1">on</span><span class="ct-d70533">(</span><span class="ct-a09c09">'connected'</span><span class="ct-c7a0e7">=></span><span class="ct-d70533"> </span><span class="ct-de2679">console</span><span class="ct-d70533">.</span><span class="ct-8d27c1">log</span><span class="ct-d70533">(</span><span class="ct-de2679">nr</span><span class="ct-d70533">))</span></span></code></pre><!--]--></div><h3 id="getting-event-history"><a href="#getting-event-history"><!--[-->Getting event history<!--]--></a></h3><p><!--[-->Getting history for <code><!--[-->Transfer<!--]--></code> events for specific values. More info can be found <a href="https://web3js.readthedocs.io/en/v1.2.11/web3-eth-subscribe.html#" rel="nofollow" target="_blank"><!--[-->here<!--]--></a><!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-d70533"> </span><span class="ct-89bed9">//example options(optional)</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-c7a0e7">let</span><span class="ct-d70533"> </span><span class="ct-de2679">options</span><span class="ct-d70533"> </span><span class="ct-8b4f62">=</span><span class="ct-d70533"> {</span></span><span class="line"><span class="ct-d70533"> filter: {</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-89bed9">// only get events where transfer value was 1000 or 1337</span></span><span class="line"><span class="ct-d70533"> value: [</span><span class="ct-a09c09">'1000'</span><span class="ct-d70533">, </span><span class="ct-a09c09">'1337'</span><span class="ct-d70533">] </span></span><span class="line"><span class="ct-d70533"> },</span></span><span class="line"><span class="ct-d70533"> </span><span class="ct-89bed9">// number | "earliest" | "pending" | "latest"</span></span><span class="line"><span class="ct-d70533"> fromBlock: </span><span class="ct-38e3ec">0</span><span class="ct-d70533">, </span></span><span class="line"><span class="ct-d70533"> toBlock: </span><span class="ct-a09c09">'latest'</span></span><span class="line"><span class="ct-d70533"> };</span></span><span class="line"></span><span class="line"><span class="ct-d70533"> </span><span class="ct-de2679">myContract</span><span class="ct-d70533">.</span><span class="ct-8d27c1">getPastEvents</span><span class="ct-d70533">(</span><span class="ct-a09c09">'Transfer'</span><span class="ct-d70533">, </span><span class="ct-de2679">options</span><span class="ct-d70533">)</span></span><span class="line"><span class="ct-d70533"> .</span><span class="ct-8d27c1">then</span><span class="ct-d70533"> </span><span class="ct-8d27c1">log</span><span class="ct-d70533">(</span><span class="ct-de2679">results</span><span class="ct-d70533">))</span></span><span class="line"><span class="ct-d70533"> .</span><span class="ct-8d27c1">catch</span><span class="ct-d70533"> </span></span></code></pre><!--]--></div><style>.ct-f6baa6{color:#FFA657}.ct-f141aa{color:#A5D6FF}.ct-5e1c9b{color:#79C0FF}.ct-ba447c{color:#79C0FF}.ct-38e3ec{color:#79C0FF}.ct-86670b{color:#79C0FF}.ct-c7a0e7{color:#FF7B72}.ct-89bed9{color:#8B949E}.ct-84aa9a{color:#FFA657}.ct-8d27c1{color:#D2A8FF}.ct-55e18c{color:#79C0FF}.ct-2c18b2{color:#79C0FF}.ct-66877e{color:#79C0FF}.ct-6edc38{color:#FFA657}.ct-4075f5{color:#FF7B72}.ct-011e68{color:#D2A8FF}.ct-a86e1f{color:#C9D1D9}.ct-c29147{color:#FF7B72}.ct-a09c09{color:#A5D6FF}.ct-de2679{color:#C9D1D9}.ct-d70533{color:#C9D1D9}.ct-8b4f62{color:#FF7B72}.light .ct-8b4f62{color:#859900}.light .ct-d70533{color:#657B83}.light .ct-de2679{color:#268BD2}.light .ct-a09c09{color:#2AA198}.light .ct-c29147{color:#073642}.light .ct-a86e1f{color:#657B83}.light .ct-011e68{color:#268BD2}.light .ct-4075f5{color:#859900}.light .ct-6edc38{color:#657B83}.light .ct-66877e{color:#859900}.light .ct-2c18b2{color:#268BD2}.light .ct-55e18c{color:#657B83}.light .ct-8d27c1{color:#268BD2}.light .ct-84aa9a{color:#657B83}.light .ct-89bed9{color:#93A1A1}.light .ct-c7a0e7{color:#073642}.light .ct-86670b{color:#268BD2}.light .ct-38e3ec{color:#D33682}.light .ct-ba447c{color:#859900}.light .ct-5e1c9b{color:#B58900}.light .ct-f141aa{color:#2AA198}.light .ct-f6baa6{color:#268BD2}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/blockchain/smart-contracts/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697990298}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script><script type="module" src="/nuxt/ProseStrong.e968ffe9.js" crossorigin></script><script type="module" src="/nuxt/ProseH3.462e5228.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/contacts/_payload.js b/docs/contacts/_payload.js
index c7acbef..edd898e 100644
--- a/docs/contacts/_payload.js
+++ b/docs/contacts/_payload.js
@@ -1 +1 @@
-export default {data:{},prerenderedAt:1703695523371}
\ No newline at end of file
+export default {data:{},prerenderedAt:1703697981996}
\ No newline at end of file
diff --git a/docs/contacts/index.html b/docs/contacts/index.html
index e4d9f54..4d1edf4 100644
--- a/docs/contacts/index.html
+++ b/docs/contacts/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Contacts</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="head:count" content="2"><link rel="modulepreload" href="/contacts/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="preload" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/contacts.2ca5d985.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ContactInformation.412c5d5b.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/IconsTelegram.0725bc49.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ContactRow.a37f3548.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiCard.6ae63afe.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiCard.vue_used_vue_type_style_index_0_lang.module.a0027dfd.js"><link rel="preload" as="style" href="/nuxt/UiCard.vue_used_vue_type_style_index_0_lang.7760099e.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ContactInformation.vue_used_vue_type_style_index_0_lang.module.80c3b839.js"><link rel="preload" as="style" href="/nuxt/ContactInformation.vue_used_vue_type_style_index_0_lang.826cd7fe.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/IconsGithub.16cd9b9e.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/IconsLinkedin.09cca809.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/IconsSend.7a402237.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="prefetch" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/writing.6bbe30c3.svg"><link rel="stylesheet" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/UiCard.vue_used_vue_type_style_index_0_lang.7760099e.css"><link rel="stylesheet" href="/nuxt/ContactInformation.vue_used_vue_type_style_index_0_lang.826cd7fe.css"><style>._wrapper_1qq06_1{display:flex;flex-direction:column;height:100%;min-height:100vh}._header_container_1qq06_8{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);position:sticky;top:0;z-index:10}._header_container_1qq06_8:before{background:var(--top-gradient);content:" ";height:4px;left:0;position:absolute;right:0;top:0;z-index:2}._header_container_1qq06_8:after{background:var(--color-background);content:"";inset:0;opacity:.95;position:absolute;z-index:0}@supports ((-webkit-backdrop-filter:blur(5px)) or (backdrop-filter:blur(5px))){._header_container_1qq06_8:after{opacity:.85}}._header_content_1qq06_38{margin:auto;max-width:min(1280px,100vw);padding:0 40px;position:relative;z-index:1}@media (max-width:1024px){._header_content_1qq06_38{padding:0 40px}}@media (max-width:768px){._header_content_1qq06_38{padding:0 20px}}</style><style>._header_t5iqp_1{padding:22px 0 20px;text-align:left}._header_t5iqp_1 a{color:var(--color-text);padding:0 25px 0 0;position:relative;text-decoration:none}._header_t5iqp_1 a._active_t5iqp_11{color:var(--color-link)}._header_t5iqp_1 a._active_t5iqp_11:after{background:var(--color-link);left:3px;right:28px}._header_t5iqp_1 a:after{background:var(--color-text);bottom:-6px;content:"";height:2px;left:50%;position:absolute;right:50%;transition:all .25s}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._text_f0wic_1{padding-bottom:40px}@media (max-width:560px){._text_f0wic_1{text-align:center}}._content_f0wic_10{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_f0wic_10{padding:0 40px}}@media (max-width:768px){._content_f0wic_10{padding:0 20px}}._grid_f0wic_26{align-items:center;display:grid;gap:80px;grid-template-columns:2fr 1fr}@media (max-width:1024px){._grid_f0wic_26{gap:20px;grid-template-columns:1fr 1fr}}@media (max-width:768px){._grid_f0wic_26{gap:20px;grid-template-columns:2fr 1fr}}@media (max-width:560px){._grid_f0wic_26{display:flex;flex-direction:column-reverse}}._contacts_f0wic_51{margin-top:60px;max-width:700px}@media (max-width:560px){._contacts_f0wic_51{margin-top:40px}}._title_f0wic_61{margin-bottom:10px}._image_f0wic_65{max-width:100%}@media (max-width:560px){._image_f0wic_65{max-height:25vh}}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_wrapper_1qq06_1" hastransition="true"><div class="_header_container_1qq06_8"><div class="_header_content_1qq06_38"><header class="_header_t5iqp_1"><a href="/" class="">Home</a><a href="/about" class="">About</a><a aria-current="page" href="/contacts" class="_active_t5iqp_11 router-link-exact-active">Contacts</a></header></div></div><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><article class="_content_f0wic_10"><div class="_grid_f0wic_26"><div class="_text_f0wic_1"><h1 class="_title_f0wic_61">Write me a letter!</h1><div class=""><b>Current Location:</b> Pavlodar, Rep. Kazakhstan</div><div class="_contacts_f0wic_51"><div class="_grid_1wtbo_1"><div class="_card_e1njf_1 _row_69wrb_1 _row_69wrb_1"><!--[--><div class="_grid_69wrb_7"><div class="_icon_69wrb_14"><!--[--><svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewbox="0 0 240 240" fill="currentColor"><path d="M222.51 19.53c-2.674.083-5.354.78-7.783 1.872-4.433 1.702-51.103 19.78-97.79 37.834C93.576 68.27 70.25 77.28 52.292 84.2 34.333 91.12 21.27 96.114 19.98 96.565c-4.28 1.502-10.448 3.905-14.582 8.76-2.066 2.428-3.617 6.794-1.804 10.53 1.812 3.74 5.303 5.804 10.244 7.69l.152.058.156.048c17.998 5.55 45.162 14.065 48.823 15.213.95 3.134 12.412 40.865 18.65 61.285 1.602 4.226 6.357 7.058 10.773 6.46.794.027 2.264.014 3.898-.378 2.383-.57 5.454-1.924 8.374-4.667l.002-.002c4.153-3.9 18.925-18.373 23.332-22.693l48.27 35.643.18.11s4.368 2.894 10.134 3.284c2.883.195 6.406-.33 9.455-2.556 3.05-2.228 5.25-5.91 6.352-10.71 3.764-16.395 29.428-138.487 33.83-158.837 2.742-10.348 1.442-18.38-3.7-22.872-2.59-2.26-5.675-3.275-8.827-3.395-.394-.015-.788-.016-1.183-.004zm.545 10.02c1.254.02 2.26.365 2.886.91 1.252 1.093 2.878 4.386.574 12.944-12.437 55.246-23.276 111.71-33.87 158.994-.73 3.168-1.752 4.323-2.505 4.873-.754.552-1.613.744-2.884.658-2.487-.17-5.36-1.72-5.488-1.79l-78.207-57.745c7.685-7.266 59.17-55.912 87.352-81.63 3.064-2.95.584-8.278-3.53-8.214-5.294 1.07-9.64 4.85-14.437 7.212-34.79 20.36-100.58 60.213-106.402 63.742-3.04-.954-30.89-9.686-49.197-15.332-2.925-1.128-3.962-2.02-4.344-2.36.007-.01.002.004.01-.005 1.362-1.6 6.97-4.646 10.277-5.807 2.503-.878 14.633-5.544 32.6-12.467 17.965-6.922 41.294-15.938 64.653-24.97 32.706-12.647 65.46-25.32 98.137-37.98 1.617-.75 3.12-1.052 4.375-1.032zM100.293 158.41l19.555 14.44c-5.433 5.32-18.327 17.937-21.924 21.322l2.37-35.762z"></path></svg><!--]--></div><div class=""><div class="_label_69wrb_24">Telegram</div><a href="https://t.me/vv4000" rel="noopener noreferrer" target="_blank" class="_link_69wrb_20">@vv4000</a></div></div><!--]--></div><div class="_card_e1njf_1 _row_69wrb_1 _row_69wrb_1"><!--[--><div class="_grid_69wrb_7"><div class="_icon_69wrb_14"><!--[--><svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewbox="0 0 1024 1024" fill="currentColor"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg><!--]--></div><div class=""><div class="_label_69wrb_24">Github</div><a href="https://github.com/muerwre" rel="noopener noreferrer" target="_blank" class="_link_69wrb_20">@muerwre</a></div></div><!--]--></div><div class="_card_e1njf_1 _row_69wrb_1 _row_69wrb_1"><!--[--><div class="_grid_69wrb_7"><div class="_icon_69wrb_14"><!--[--><svg height="24" viewbox="0 0 72 72" width="24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><g fill-rule="evenodd"><path d="M8,72 L64,72 C68.418278,72 72,68.418278 72,64 L72,8 C72,3.581722 68.418278,-8.11624501e-16 64,0 L8,0 C3.581722,8.11624501e-16 -5.41083001e-16,3.581722 0,8 L0,64 C5.41083001e-16,68.418278 3.581722,72 8,72 ZM62,62 L51.315625,62 L51.315625,43.8021149 C51.315625,38.8127542 49.4197917,36.0245323 45.4707031,36.0245323 C41.1746094,36.0245323 38.9300781,38.9261103 38.9300781,43.8021149 L38.9300781,62 L28.6333333,62 L28.6333333,27.3333333 L38.9300781,27.3333333 L38.9300781,32.0029283 C38.9300781,32.0029283 42.0260417,26.2742151 49.3825521,26.2742151 C56.7356771,26.2742151 62,30.7644705 62,40.051212 L62,62 Z M16.349349,22.7940133 C12.8420573,22.7940133 10,19.9296567 10,16.3970067 C10,12.8643566 12.8420573,10 16.349349,10 C19.8566406,10 22.6970052,12.8643566 22.6970052,16.3970067 C22.6970052,19.9296567 19.8566406,22.7940133 16.349349,22.7940133 Z M11.0325521,62 L21.769401,62 L21.769401,27.3333333 L11.0325521,27.3333333 L11.0325521,62 Z"></path></g></svg><!--]--></div><div class=""><div class="_label_69wrb_24">LinkedIn</div><a href="https://www.linkedin.com/in/fedor-katurov-811aa721b/" rel="noopener noreferrer" target="_blank" class="_link_69wrb_20">Fedor Katurov</a></div></div><!--]--></div><div class="_card_e1njf_1 _row_69wrb_1 _row_69wrb_1"><!--[--><div class="_grid_69wrb_7"><div class="_icon_69wrb_14"><!--[--><svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewbox="0 0 48 48" fill="currentColor"><path xmlns="http://www.w3.org/2000/svg" d="M7 34.05Q5.85 33.8 4.925 33 4 32.2 4 31.05V13.9q0-.6.25-1.125t.95-.875l16-7.9 15.35 7.9q.45.35.9 1.025.45.675.6 1.225h-3.7L21.2 7.35 7 14.4ZM11.5 42q-1.2 0-2.1-.925-.9-.925-.9-2.075V18.65q0-1.15.9-2.075.9-.925 2.1-.925H41q1.15 0 2.075.925Q44 17.5 44 18.65V39q0 1.15-.925 2.075Q42.15 42 41 42Zm14.75-12.9L11.5 21.85V39H41V21.85Zm0-3.35 14.45-7.1H11.8ZM41 18.65H11.5 41Z"></path></svg><!--]--></div><div class=""><div class="_label_69wrb_24">Mail</div><a href="mailto:...loading" rel="noopener noreferrer" target="_blank" class="_link_69wrb_20">...loading</a></div></div><!--]--></div></div></div></div><div><img src="/nuxt/writing.6bbe30c3.svg" alt="" class="_image_f0wic_65"></div></div></article><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div><script type="module">import p from "/contacts/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695523371}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/landing.ff1ac866.js" crossorigin></script><script type="module" src="/nuxt/LayoutHeader.76a50cb0.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/contacts.2ca5d985.js" crossorigin></script><script type="module" src="/nuxt/ContactRow.a37f3548.js" crossorigin></script><script type="module" src="/nuxt/UiCard.6ae63afe.js" crossorigin></script><script type="module" src="/nuxt/IconsTelegram.0725bc49.js" crossorigin></script><script type="module" src="/nuxt/IconsGithub.16cd9b9e.js" crossorigin></script><script type="module" src="/nuxt/IconsLinkedin.09cca809.js" crossorigin></script><script type="module" src="/nuxt/IconsSend.7a402237.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_wrapper_1qq06_1" hastransition="true"><div class="_header_container_1qq06_8"><div class="_header_content_1qq06_38"><header class="_header_t5iqp_1"><a href="/" class="">Home</a><a href="/about" class="">About</a><a aria-current="page" href="/contacts" class="_active_t5iqp_11 router-link-exact-active">Contacts</a></header></div></div><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><article class="_content_f0wic_10"><div class="_grid_f0wic_26"><div class="_text_f0wic_1"><h1 class="_title_f0wic_61">Write me a letter!</h1><div class=""><b>Current Location:</b> Pavlodar, Rep. Kazakhstan</div><div class="_contacts_f0wic_51"><div class="_grid_1wtbo_1"><div class="_card_e1njf_1 _row_69wrb_1 _row_69wrb_1"><!--[--><div class="_grid_69wrb_7"><div class="_icon_69wrb_14"><!--[--><svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewbox="0 0 240 240" fill="currentColor"><path d="M222.51 19.53c-2.674.083-5.354.78-7.783 1.872-4.433 1.702-51.103 19.78-97.79 37.834C93.576 68.27 70.25 77.28 52.292 84.2 34.333 91.12 21.27 96.114 19.98 96.565c-4.28 1.502-10.448 3.905-14.582 8.76-2.066 2.428-3.617 6.794-1.804 10.53 1.812 3.74 5.303 5.804 10.244 7.69l.152.058.156.048c17.998 5.55 45.162 14.065 48.823 15.213.95 3.134 12.412 40.865 18.65 61.285 1.602 4.226 6.357 7.058 10.773 6.46.794.027 2.264.014 3.898-.378 2.383-.57 5.454-1.924 8.374-4.667l.002-.002c4.153-3.9 18.925-18.373 23.332-22.693l48.27 35.643.18.11s4.368 2.894 10.134 3.284c2.883.195 6.406-.33 9.455-2.556 3.05-2.228 5.25-5.91 6.352-10.71 3.764-16.395 29.428-138.487 33.83-158.837 2.742-10.348 1.442-18.38-3.7-22.872-2.59-2.26-5.675-3.275-8.827-3.395-.394-.015-.788-.016-1.183-.004zm.545 10.02c1.254.02 2.26.365 2.886.91 1.252 1.093 2.878 4.386.574 12.944-12.437 55.246-23.276 111.71-33.87 158.994-.73 3.168-1.752 4.323-2.505 4.873-.754.552-1.613.744-2.884.658-2.487-.17-5.36-1.72-5.488-1.79l-78.207-57.745c7.685-7.266 59.17-55.912 87.352-81.63 3.064-2.95.584-8.278-3.53-8.214-5.294 1.07-9.64 4.85-14.437 7.212-34.79 20.36-100.58 60.213-106.402 63.742-3.04-.954-30.89-9.686-49.197-15.332-2.925-1.128-3.962-2.02-4.344-2.36.007-.01.002.004.01-.005 1.362-1.6 6.97-4.646 10.277-5.807 2.503-.878 14.633-5.544 32.6-12.467 17.965-6.922 41.294-15.938 64.653-24.97 32.706-12.647 65.46-25.32 98.137-37.98 1.617-.75 3.12-1.052 4.375-1.032zM100.293 158.41l19.555 14.44c-5.433 5.32-18.327 17.937-21.924 21.322l2.37-35.762z"></path></svg><!--]--></div><div class=""><div class="_label_69wrb_24">Telegram</div><a href="https://t.me/vv4000" rel="noopener noreferrer" target="_blank" class="_link_69wrb_20">@vv4000</a></div></div><!--]--></div><div class="_card_e1njf_1 _row_69wrb_1 _row_69wrb_1"><!--[--><div class="_grid_69wrb_7"><div class="_icon_69wrb_14"><!--[--><svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewbox="0 0 1024 1024" fill="currentColor"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg><!--]--></div><div class=""><div class="_label_69wrb_24">Github</div><a href="https://github.com/muerwre" rel="noopener noreferrer" target="_blank" class="_link_69wrb_20">@muerwre</a></div></div><!--]--></div><div class="_card_e1njf_1 _row_69wrb_1 _row_69wrb_1"><!--[--><div class="_grid_69wrb_7"><div class="_icon_69wrb_14"><!--[--><svg height="24" viewbox="0 0 72 72" width="24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><g fill-rule="evenodd"><path d="M8,72 L64,72 C68.418278,72 72,68.418278 72,64 L72,8 C72,3.581722 68.418278,-8.11624501e-16 64,0 L8,0 C3.581722,8.11624501e-16 -5.41083001e-16,3.581722 0,8 L0,64 C5.41083001e-16,68.418278 3.581722,72 8,72 ZM62,62 L51.315625,62 L51.315625,43.8021149 C51.315625,38.8127542 49.4197917,36.0245323 45.4707031,36.0245323 C41.1746094,36.0245323 38.9300781,38.9261103 38.9300781,43.8021149 L38.9300781,62 L28.6333333,62 L28.6333333,27.3333333 L38.9300781,27.3333333 L38.9300781,32.0029283 C38.9300781,32.0029283 42.0260417,26.2742151 49.3825521,26.2742151 C56.7356771,26.2742151 62,30.7644705 62,40.051212 L62,62 Z M16.349349,22.7940133 C12.8420573,22.7940133 10,19.9296567 10,16.3970067 C10,12.8643566 12.8420573,10 16.349349,10 C19.8566406,10 22.6970052,12.8643566 22.6970052,16.3970067 C22.6970052,19.9296567 19.8566406,22.7940133 16.349349,22.7940133 Z M11.0325521,62 L21.769401,62 L21.769401,27.3333333 L11.0325521,27.3333333 L11.0325521,62 Z"></path></g></svg><!--]--></div><div class=""><div class="_label_69wrb_24">LinkedIn</div><a href="https://www.linkedin.com/in/fedor-katurov-811aa721b/" rel="noopener noreferrer" target="_blank" class="_link_69wrb_20">Fedor Katurov</a></div></div><!--]--></div><div class="_card_e1njf_1 _row_69wrb_1 _row_69wrb_1"><!--[--><div class="_grid_69wrb_7"><div class="_icon_69wrb_14"><!--[--><svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewbox="0 0 48 48" fill="currentColor"><path xmlns="http://www.w3.org/2000/svg" d="M7 34.05Q5.85 33.8 4.925 33 4 32.2 4 31.05V13.9q0-.6.25-1.125t.95-.875l16-7.9 15.35 7.9q.45.35.9 1.025.45.675.6 1.225h-3.7L21.2 7.35 7 14.4ZM11.5 42q-1.2 0-2.1-.925-.9-.925-.9-2.075V18.65q0-1.15.9-2.075.9-.925 2.1-.925H41q1.15 0 2.075.925Q44 17.5 44 18.65V39q0 1.15-.925 2.075Q42.15 42 41 42Zm14.75-12.9L11.5 21.85V39H41V21.85Zm0-3.35 14.45-7.1H11.8ZM41 18.65H11.5 41Z"></path></svg><!--]--></div><div class=""><div class="_label_69wrb_24">Mail</div><a href="mailto:...loading" rel="noopener noreferrer" target="_blank" class="_link_69wrb_20">...loading</a></div></div><!--]--></div></div></div></div><div><img src="/nuxt/writing.6bbe30c3.svg" alt="" class="_image_f0wic_65"></div></div></article><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div><script type="module">import p from "/contacts/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697981996}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/landing.ff1ac866.js" crossorigin></script><script type="module" src="/nuxt/LayoutHeader.76a50cb0.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/contacts.2ca5d985.js" crossorigin></script><script type="module" src="/nuxt/ContactRow.a37f3548.js" crossorigin></script><script type="module" src="/nuxt/UiCard.6ae63afe.js" crossorigin></script><script type="module" src="/nuxt/IconsTelegram.0725bc49.js" crossorigin></script><script type="module" src="/nuxt/IconsGithub.16cd9b9e.js" crossorigin></script><script type="module" src="/nuxt/IconsLinkedin.09cca809.js" crossorigin></script><script type="module" src="/nuxt/IconsSend.7a402237.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/css/automatic-grid-like-masonry-with-pure-css/_payload.js b/docs/css/automatic-grid-like-masonry-with-pure-css/_payload.js
index d1d3a33..ff474e9 100644
--- a/docs/css/automatic-grid-like-masonry-with-pure-css/_payload.js
+++ b/docs/css/automatic-grid-like-masonry-with-pure-css/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:Q,_path:R},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-yoYMujrz1O":{_path:R,_dir:"css",_draft:y,_partial:y,_locale:"en",_empty:y,title:Q,description:z,excerpt:{type:S,children:[{type:a,tag:T,props:{},children:[{type:c,value:z}]},{type:a,tag:g,props:{code:A,language:n},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:c,value:A}]}]}]},{type:a,tag:q,props:{id:B},children:[{type:c,value:C}]},{type:a,tag:g,props:{code:D,language:n},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:c,value:D}]}]}]},{type:a,tag:q,props:{id:E},children:[{type:c,value:F}]},{type:a,tag:g,props:{code:G,language:n},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:c,value:G}]}]}]},{type:a,tag:q,props:{id:H},children:[{type:c,value:I}]},{type:a,tag:g,props:{code:J,language:n},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:c,value:J}]}]}]}]},body:{type:S,children:[{type:a,tag:T,props:{},children:[{type:c,value:z}]},{type:a,tag:g,props:{code:A,language:n},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:U},children:[{type:c,value:"$cell: "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"250"}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:U},children:[{type:c,value:"$gap: "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"20"}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:s},children:[{type:c,value:".grid"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:f},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:t},children:[{type:c,value:"display"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:M},children:[{type:c,value:"grid"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:f},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:t},children:[{type:c,value:"grid-template-columns"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:V},children:[{type:c,value:"repeat"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:w},children:[{type:c,value:"auto-fit"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:V},children:[{type:c,value:"minmax"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:w},children:[{type:c,value:"$cell"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:"ct-6a1d51"},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:"ct-b72695"},children:[{type:c,value:"fr"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"));"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:"grid-auto-rows"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"256"}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:f},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:t},children:[{type:c,value:"grid-auto-flow"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:M},children:[{type:c,value:"row"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:M},children:[{type:c,value:"dense"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:f},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:t},children:[{type:c,value:"grid-column-gap"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:w},children:[{type:c,value:Y}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:f},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:t},children:[{type:c,value:"grid-row-gap"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:w},children:[{type:c,value:Y}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]}]}]}]}]},{type:a,tag:q,props:{id:B},children:[{type:c,value:C}]},{type:a,tag:g,props:{code:D,language:n},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:s},children:[{type:c,value:".h-2"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Z}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:"\u002F\u002F takes 2 columns"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:"grid-column-end"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:b}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:s},children:[{type:c,value:".v-2"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Z}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:"\u002F\u002F takes 2 rows"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:"grid-row-end"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:b}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]}]}]}]}]},{type:a,tag:q,props:{id:E},children:[{type:c,value:F}]},{type:a,tag:g,props:{code:G,language:n},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:s},children:[{type:c,value:".full-width"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:"\u002F\u002F height: 1 row"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]}]}]}]}]},{type:a,tag:q,props:{id:H},children:[{type:c,value:I}]},{type:a,tag:g,props:{code:J,language:n},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:s},children:[{type:c,value:".top-right"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"3"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:"\u002F\u002F height here"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"-2"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:"\u002F\u002F width here"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-6636be{color:#8B949E}.ct-e72082{color:#79C0FF}.ct-b72695{color:#FF7B72}.ct-6a1d51{color:#79C0FF}.ct-26f635{color:#FFA657}.ct-d99f2d{color:#79C0FF}.ct-486191{color:#79C0FF}.ct-7d1855{color:#79C0FF}.ct-9d7d33{color:#C9D1D9}.ct-782921{color:#79C0FF}.ct-19f723{color:#C9D1D9}.ct-cb9271{color:#FF7B72}.ct-7f7248{color:#79C0FF}.ct-0b1739{color:#FFA657}.light .ct-0b1739{color:#657B83}.light .ct-7f7248{color:#D33682}.light .ct-cb9271{color:#859900}.light .ct-19f723{color:#657B83}.light .ct-782921{color:#93A1A1}.light .ct-9d7d33{color:#657B83}.light .ct-7d1855{color:#859900}.light .ct-486191{color:#657B83}.light .ct-d99f2d{color:#268BD2}.light .ct-26f635{color:#657B83}.light .ct-6a1d51{color:#D33682}.light .ct-b72695{color:#859900}.light .ct-e72082{color:#859900}.light .ct-6636be{color:#93A1A1}"}]}],toc:{title:l,searchDepth:ae,depth:ae,links:[{id:B,depth:P,text:C},{id:E,depth:P,text:F},{id:H,depth:P,text:I}]}},_type:"markdown",_id:"content:CSS:Automatic Grid like Masonry with pure CSS.md",_source:"content",_file:"CSS\u002FAutomatic Grid like Masonry with pure CSS.md",_extension:"md"}},prerenderedAt:1703695529621}}("element","span","text","ct-19f723","line","ct-9d7d33","code","ct-7f7248",": ",";"," ","","ct-e72082","scss","pre"," ","h3","ct-cb9271","ct-782921","ct-7d1855","}","ct-6636be","ct-26f635","1",false,"Grid, that places items by density. Pure #css solution. Can be used with items, that take different amount of rows\u002Fcolumns.","$cell: 250px;\n$gap: 20px;\n\n.grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax($cell, 1fr));\n grid-auto-rows: 256px;\n grid-auto-flow: row dense;\n grid-column-gap: $gap;\n grid-row-gap: $gap;\n}\n","basic-elements-with-double-height-or-width","Basic elements with double height or width",".h-2 { \u002F\u002F takes 2 columns\n grid-column-end: span 2;\n}\n\n.v-2 { \u002F\u002F takes 2 rows\n grid-row-end: span 2;\n}\n","header-that-fills-all-columns","Header, that fills all columns",".full-width {\n grid-row: 1 \u002F 2; \u002F\u002F height: 1 row\n grid-column: 1 \u002F -1;\n}\n","stamp-element-that-takes-3-rows-in-the-top-right-corner","Stamp element, that takes 3 rows in the top right corner",".top-right {\n grid-row: 1 \u002F 3; \u002F\u002F height here\n grid-column: -2 \u002F -1; \u002F\u002F width here\n}\n","px"," {","ct-486191","2","; ",3,"Automatic Grid Like Masonry With Pure CSS","\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css","root","p","ct-0b1739","ct-d99f2d","(",", ","$gap"," { "," ","grid-row","\u002F","grid-column"," \u002F ","-1",2))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:Q,_path:R},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-yoYMujrz1O":{_path:R,_dir:"css",_draft:y,_partial:y,_locale:"en",_empty:y,title:Q,description:z,excerpt:{type:S,children:[{type:a,tag:T,props:{},children:[{type:c,value:z}]},{type:a,tag:g,props:{code:A,language:n},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:c,value:A}]}]}]},{type:a,tag:q,props:{id:B},children:[{type:c,value:C}]},{type:a,tag:g,props:{code:D,language:n},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:c,value:D}]}]}]},{type:a,tag:q,props:{id:E},children:[{type:c,value:F}]},{type:a,tag:g,props:{code:G,language:n},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:c,value:G}]}]}]},{type:a,tag:q,props:{id:H},children:[{type:c,value:I}]},{type:a,tag:g,props:{code:J,language:n},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:c,value:J}]}]}]}]},body:{type:S,children:[{type:a,tag:T,props:{},children:[{type:c,value:z}]},{type:a,tag:g,props:{code:A,language:n},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:U},children:[{type:c,value:"$cell: "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"250"}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:U},children:[{type:c,value:"$gap: "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"20"}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:s},children:[{type:c,value:".grid"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:f},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:t},children:[{type:c,value:"display"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:M},children:[{type:c,value:"grid"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:f},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:t},children:[{type:c,value:"grid-template-columns"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:V},children:[{type:c,value:"repeat"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:w},children:[{type:c,value:"auto-fit"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:V},children:[{type:c,value:"minmax"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:w},children:[{type:c,value:"$cell"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:"ct-a29ed9"},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:"ct-c55733"},children:[{type:c,value:"fr"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"));"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:"grid-auto-rows"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"256"}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:f},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:t},children:[{type:c,value:"grid-auto-flow"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:M},children:[{type:c,value:"row"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:M},children:[{type:c,value:"dense"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:f},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:t},children:[{type:c,value:"grid-column-gap"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:w},children:[{type:c,value:Y}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:f},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:t},children:[{type:c,value:"grid-row-gap"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:w},children:[{type:c,value:Y}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]}]}]}]}]},{type:a,tag:q,props:{id:B},children:[{type:c,value:C}]},{type:a,tag:g,props:{code:D,language:n},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:s},children:[{type:c,value:".h-2"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Z}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:"\u002F\u002F takes 2 columns"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:"grid-column-end"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:b}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:s},children:[{type:c,value:".v-2"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Z}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:"\u002F\u002F takes 2 rows"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:"grid-row-end"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:b}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]}]}]}]}]},{type:a,tag:q,props:{id:E},children:[{type:c,value:F}]},{type:a,tag:g,props:{code:G,language:n},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:s},children:[{type:c,value:".full-width"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:"\u002F\u002F height: 1 row"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]}]}]}]}]},{type:a,tag:q,props:{id:H},children:[{type:c,value:I}]},{type:a,tag:g,props:{code:J,language:n},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:s},children:[{type:c,value:".top-right"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"3"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:"\u002F\u002F height here"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"-2"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:"\u002F\u002F width here"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-0f60fc{color:#8B949E}.ct-db8cc5{color:#79C0FF}.ct-c55733{color:#FF7B72}.ct-a29ed9{color:#79C0FF}.ct-9e6b01{color:#FFA657}.ct-d8b9cf{color:#79C0FF}.ct-8d33fd{color:#79C0FF}.ct-9aa8a5{color:#79C0FF}.ct-ed4939{color:#C9D1D9}.ct-810bae{color:#79C0FF}.ct-d93ca5{color:#C9D1D9}.ct-7d5daa{color:#FF7B72}.ct-64f3a7{color:#79C0FF}.ct-0a7911{color:#FFA657}.light .ct-0a7911{color:#657B83}.light .ct-64f3a7{color:#D33682}.light .ct-7d5daa{color:#859900}.light .ct-d93ca5{color:#657B83}.light .ct-810bae{color:#93A1A1}.light .ct-ed4939{color:#657B83}.light .ct-9aa8a5{color:#859900}.light .ct-8d33fd{color:#657B83}.light .ct-d8b9cf{color:#268BD2}.light .ct-9e6b01{color:#657B83}.light .ct-a29ed9{color:#D33682}.light .ct-c55733{color:#859900}.light .ct-db8cc5{color:#859900}.light .ct-0f60fc{color:#93A1A1}"}]}],toc:{title:l,searchDepth:ae,depth:ae,links:[{id:B,depth:P,text:C},{id:E,depth:P,text:F},{id:H,depth:P,text:I}]}},_type:"markdown",_id:"content:CSS:Automatic Grid like Masonry with pure CSS.md",_source:"content",_file:"CSS\u002FAutomatic Grid like Masonry with pure CSS.md",_extension:"md"}},prerenderedAt:1703697990620}}("element","span","text","ct-d93ca5","line","ct-ed4939","code","ct-64f3a7",": ",";"," ","","ct-db8cc5","scss","pre"," ","h3","ct-7d5daa","ct-810bae","ct-9aa8a5","}","ct-0f60fc","ct-9e6b01","1",false,"Grid, that places items by density. Pure #css solution. Can be used with items, that take different amount of rows\u002Fcolumns.","$cell: 250px;\n$gap: 20px;\n\n.grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax($cell, 1fr));\n grid-auto-rows: 256px;\n grid-auto-flow: row dense;\n grid-column-gap: $gap;\n grid-row-gap: $gap;\n}\n","basic-elements-with-double-height-or-width","Basic elements with double height or width",".h-2 { \u002F\u002F takes 2 columns\n grid-column-end: span 2;\n}\n\n.v-2 { \u002F\u002F takes 2 rows\n grid-row-end: span 2;\n}\n","header-that-fills-all-columns","Header, that fills all columns",".full-width {\n grid-row: 1 \u002F 2; \u002F\u002F height: 1 row\n grid-column: 1 \u002F -1;\n}\n","stamp-element-that-takes-3-rows-in-the-top-right-corner","Stamp element, that takes 3 rows in the top right corner",".top-right {\n grid-row: 1 \u002F 3; \u002F\u002F height here\n grid-column: -2 \u002F -1; \u002F\u002F width here\n}\n","px"," {","ct-8d33fd","2","; ",3,"Automatic Grid Like Masonry With Pure CSS","\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css","root","p","ct-0a7911","ct-d8b9cf","(",", ","$gap"," { "," ","grid-row","\u002F","grid-column"," \u002F ","-1",2))
\ No newline at end of file
diff --git a/docs/css/automatic-grid-like-masonry-with-pure-css/index.html b/docs/css/automatic-grid-like-masonry-with-pure-css/index.html
index 1b49349..9308cfc 100644
--- a/docs/css/automatic-grid-like-masonry-with-pure-css/index.html
+++ b/docs/css/automatic-grid-like-masonry-with-pure-css/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Automatic Grid Like Masonry With Pure CSS • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Grid, that places items by density. Pure #css solution. Can be used with items, that take different amount of rows/columns."><meta name="head:count" content="3"><link rel="modulepreload" href="/css/automatic-grid-like-masonry-with-pure-css/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseH3.462e5228.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a aria-current="page" href="/css/automatic-grid-like-masonry-with-pure-css" class="router-link-active _active_192pu_81 _link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Automatic Grid Like Masonry With Pure CSS</h1><article><div><p><!--[-->Grid, that places items by density. Pure #css solution. Can be used with items, that take different amount of rows/columns.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>scss</span></button><!--[--><pre><code><span class="line"><span class="ct-0b1739">$cell: </span><span class="ct-7f7248">250</span><span class="ct-cb9271">px</span><span class="ct-19f723">;</span></span><span class="line"><span class="ct-0b1739">$gap: </span><span class="ct-7f7248">20</span><span class="ct-cb9271">px</span><span class="ct-19f723">;</span></span><span class="line"></span><span class="line"><span class="ct-782921">.grid</span><span class="ct-19f723"> {</span></span><span class="line"><span class="ct-9d7d33"> </span><span class="ct-7d1855">display</span><span class="ct-9d7d33">: </span><span class="ct-486191">grid</span><span class="ct-9d7d33">;</span></span><span class="line"><span class="ct-9d7d33"> </span><span class="ct-7d1855">grid-template-columns</span><span class="ct-9d7d33">: </span><span class="ct-d99f2d">repeat</span><span class="ct-9d7d33">(</span><span class="ct-26f635">auto-fit</span><span class="ct-9d7d33">, </span><span class="ct-d99f2d">minmax</span><span class="ct-9d7d33">(</span><span class="ct-26f635">$cell</span><span class="ct-9d7d33">, </span><span class="ct-6a1d51">1</span><span class="ct-b72695">fr</span><span class="ct-9d7d33">));</span></span><span class="line"><span class="ct-19f723"> </span><span class="ct-e72082">grid-auto-rows</span><span class="ct-19f723">: </span><span class="ct-7f7248">256</span><span class="ct-cb9271">px</span><span class="ct-19f723">;</span></span><span class="line"><span class="ct-9d7d33"> </span><span class="ct-7d1855">grid-auto-flow</span><span class="ct-9d7d33">: </span><span class="ct-486191">row</span><span class="ct-9d7d33"> </span><span class="ct-486191">dense</span><span class="ct-9d7d33">;</span></span><span class="line"><span class="ct-9d7d33"> </span><span class="ct-7d1855">grid-column-gap</span><span class="ct-9d7d33">: </span><span class="ct-26f635">$gap</span><span class="ct-9d7d33">;</span></span><span class="line"><span class="ct-9d7d33"> </span><span class="ct-7d1855">grid-row-gap</span><span class="ct-9d7d33">: </span><span class="ct-26f635">$gap</span><span class="ct-9d7d33">;</span></span><span class="line"><span class="ct-19f723">}</span></span></code></pre><!--]--></div><h3 id="basic-elements-with-double-height-or-width"><a href="#basic-elements-with-double-height-or-width"><!--[-->Basic elements with double height or width<!--]--></a></h3><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>scss</span></button><!--[--><pre><code><span class="line"><span class="ct-782921">.h-2</span><span class="ct-19f723"> { </span><span class="ct-6636be">// takes 2 columns</span></span><span class="line"><span class="ct-19f723"> </span><span class="ct-e72082">grid-column-end</span><span class="ct-19f723">: </span><span class="ct-e72082">span</span><span class="ct-19f723"> </span><span class="ct-7f7248">2</span><span class="ct-19f723">;</span></span><span class="line"><span class="ct-19f723">}</span></span><span class="line"></span><span class="line"><span class="ct-782921">.v-2</span><span class="ct-19f723"> { </span><span class="ct-6636be">// takes 2 rows</span></span><span class="line"><span class="ct-19f723"> </span><span class="ct-e72082">grid-row-end</span><span class="ct-19f723">: </span><span class="ct-e72082">span</span><span class="ct-19f723"> </span><span class="ct-7f7248">2</span><span class="ct-19f723">;</span></span><span class="line"><span class="ct-19f723">}</span></span></code></pre><!--]--></div><h3 id="header-that-fills-all-columns"><a href="#header-that-fills-all-columns"><!--[-->Header, that fills all columns<!--]--></a></h3><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>scss</span></button><!--[--><pre><code><span class="line"><span class="ct-782921">.full-width</span><span class="ct-19f723"> {</span></span><span class="line"><span class="ct-19f723"> </span><span class="ct-e72082">grid-row</span><span class="ct-19f723">: </span><span class="ct-7f7248">1</span><span class="ct-19f723"> </span><span class="ct-cb9271">/</span><span class="ct-19f723"> </span><span class="ct-7f7248">2</span><span class="ct-19f723">; </span><span class="ct-6636be">// height: 1 row</span></span><span class="line"><span class="ct-19f723"> </span><span class="ct-e72082">grid-column</span><span class="ct-19f723">: </span><span class="ct-7f7248">1</span><span class="ct-19f723"> / </span><span class="ct-7f7248">-1</span><span class="ct-19f723">;</span></span><span class="line"><span class="ct-19f723">}</span></span></code></pre><!--]--></div><h3 id="stamp-element-that-takes-3-rows-in-the-top-right-corner"><a href="#stamp-element-that-takes-3-rows-in-the-top-right-corner"><!--[-->Stamp element, that takes 3 rows in the top right corner<!--]--></a></h3><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>scss</span></button><!--[--><pre><code><span class="line"><span class="ct-782921">.top-right</span><span class="ct-19f723"> {</span></span><span class="line"><span class="ct-19f723"> </span><span class="ct-e72082">grid-row</span><span class="ct-19f723">: </span><span class="ct-7f7248">1</span><span class="ct-19f723"> </span><span class="ct-cb9271">/</span><span class="ct-19f723"> </span><span class="ct-7f7248">3</span><span class="ct-19f723">; </span><span class="ct-6636be">// height here</span></span><span class="line"><span class="ct-19f723"> </span><span class="ct-e72082">grid-column</span><span class="ct-19f723">: </span><span class="ct-7f7248">-2</span><span class="ct-19f723"> / </span><span class="ct-7f7248">-1</span><span class="ct-19f723">; </span><span class="ct-6636be">// width here</span></span><span class="line"><span class="ct-19f723">}</span></span></code></pre><!--]--></div><style>.ct-6636be{color:#8B949E}.ct-e72082{color:#79C0FF}.ct-b72695{color:#FF7B72}.ct-6a1d51{color:#79C0FF}.ct-26f635{color:#FFA657}.ct-d99f2d{color:#79C0FF}.ct-486191{color:#79C0FF}.ct-7d1855{color:#79C0FF}.ct-9d7d33{color:#C9D1D9}.ct-782921{color:#79C0FF}.ct-19f723{color:#C9D1D9}.ct-cb9271{color:#FF7B72}.ct-7f7248{color:#79C0FF}.ct-0b1739{color:#FFA657}.light .ct-0b1739{color:#657B83}.light .ct-7f7248{color:#D33682}.light .ct-cb9271{color:#859900}.light .ct-19f723{color:#657B83}.light .ct-782921{color:#93A1A1}.light .ct-9d7d33{color:#657B83}.light .ct-7d1855{color:#859900}.light .ct-486191{color:#657B83}.light .ct-d99f2d{color:#268BD2}.light .ct-26f635{color:#657B83}.light .ct-6a1d51{color:#D33682}.light .ct-b72695{color:#859900}.light .ct-e72082{color:#859900}.light .ct-6636be{color:#93A1A1}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/css/automatic-grid-like-masonry-with-pure-css/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695529621}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script><script type="module" src="/nuxt/ProseH3.462e5228.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a aria-current="page" href="/css/automatic-grid-like-masonry-with-pure-css" class="router-link-active _active_192pu_81 _link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Automatic Grid Like Masonry With Pure CSS</h1><article><div><p><!--[-->Grid, that places items by density. Pure #css solution. Can be used with items, that take different amount of rows/columns.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>scss</span></button><!--[--><pre><code><span class="line"><span class="ct-0a7911">$cell: </span><span class="ct-64f3a7">250</span><span class="ct-7d5daa">px</span><span class="ct-d93ca5">;</span></span><span class="line"><span class="ct-0a7911">$gap: </span><span class="ct-64f3a7">20</span><span class="ct-7d5daa">px</span><span class="ct-d93ca5">;</span></span><span class="line"></span><span class="line"><span class="ct-810bae">.grid</span><span class="ct-d93ca5"> {</span></span><span class="line"><span class="ct-ed4939"> </span><span class="ct-9aa8a5">display</span><span class="ct-ed4939">: </span><span class="ct-8d33fd">grid</span><span class="ct-ed4939">;</span></span><span class="line"><span class="ct-ed4939"> </span><span class="ct-9aa8a5">grid-template-columns</span><span class="ct-ed4939">: </span><span class="ct-d8b9cf">repeat</span><span class="ct-ed4939">(</span><span class="ct-9e6b01">auto-fit</span><span class="ct-ed4939">, </span><span class="ct-d8b9cf">minmax</span><span class="ct-ed4939">(</span><span class="ct-9e6b01">$cell</span><span class="ct-ed4939">, </span><span class="ct-a29ed9">1</span><span class="ct-c55733">fr</span><span class="ct-ed4939">));</span></span><span class="line"><span class="ct-d93ca5"> </span><span class="ct-db8cc5">grid-auto-rows</span><span class="ct-d93ca5">: </span><span class="ct-64f3a7">256</span><span class="ct-7d5daa">px</span><span class="ct-d93ca5">;</span></span><span class="line"><span class="ct-ed4939"> </span><span class="ct-9aa8a5">grid-auto-flow</span><span class="ct-ed4939">: </span><span class="ct-8d33fd">row</span><span class="ct-ed4939"> </span><span class="ct-8d33fd">dense</span><span class="ct-ed4939">;</span></span><span class="line"><span class="ct-ed4939"> </span><span class="ct-9aa8a5">grid-column-gap</span><span class="ct-ed4939">: </span><span class="ct-9e6b01">$gap</span><span class="ct-ed4939">;</span></span><span class="line"><span class="ct-ed4939"> </span><span class="ct-9aa8a5">grid-row-gap</span><span class="ct-ed4939">: </span><span class="ct-9e6b01">$gap</span><span class="ct-ed4939">;</span></span><span class="line"><span class="ct-d93ca5">}</span></span></code></pre><!--]--></div><h3 id="basic-elements-with-double-height-or-width"><a href="#basic-elements-with-double-height-or-width"><!--[-->Basic elements with double height or width<!--]--></a></h3><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>scss</span></button><!--[--><pre><code><span class="line"><span class="ct-810bae">.h-2</span><span class="ct-d93ca5"> { </span><span class="ct-0f60fc">// takes 2 columns</span></span><span class="line"><span class="ct-d93ca5"> </span><span class="ct-db8cc5">grid-column-end</span><span class="ct-d93ca5">: </span><span class="ct-db8cc5">span</span><span class="ct-d93ca5"> </span><span class="ct-64f3a7">2</span><span class="ct-d93ca5">;</span></span><span class="line"><span class="ct-d93ca5">}</span></span><span class="line"></span><span class="line"><span class="ct-810bae">.v-2</span><span class="ct-d93ca5"> { </span><span class="ct-0f60fc">// takes 2 rows</span></span><span class="line"><span class="ct-d93ca5"> </span><span class="ct-db8cc5">grid-row-end</span><span class="ct-d93ca5">: </span><span class="ct-db8cc5">span</span><span class="ct-d93ca5"> </span><span class="ct-64f3a7">2</span><span class="ct-d93ca5">;</span></span><span class="line"><span class="ct-d93ca5">}</span></span></code></pre><!--]--></div><h3 id="header-that-fills-all-columns"><a href="#header-that-fills-all-columns"><!--[-->Header, that fills all columns<!--]--></a></h3><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>scss</span></button><!--[--><pre><code><span class="line"><span class="ct-810bae">.full-width</span><span class="ct-d93ca5"> {</span></span><span class="line"><span class="ct-d93ca5"> </span><span class="ct-db8cc5">grid-row</span><span class="ct-d93ca5">: </span><span class="ct-64f3a7">1</span><span class="ct-d93ca5"> </span><span class="ct-7d5daa">/</span><span class="ct-d93ca5"> </span><span class="ct-64f3a7">2</span><span class="ct-d93ca5">; </span><span class="ct-0f60fc">// height: 1 row</span></span><span class="line"><span class="ct-d93ca5"> </span><span class="ct-db8cc5">grid-column</span><span class="ct-d93ca5">: </span><span class="ct-64f3a7">1</span><span class="ct-d93ca5"> / </span><span class="ct-64f3a7">-1</span><span class="ct-d93ca5">;</span></span><span class="line"><span class="ct-d93ca5">}</span></span></code></pre><!--]--></div><h3 id="stamp-element-that-takes-3-rows-in-the-top-right-corner"><a href="#stamp-element-that-takes-3-rows-in-the-top-right-corner"><!--[-->Stamp element, that takes 3 rows in the top right corner<!--]--></a></h3><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>scss</span></button><!--[--><pre><code><span class="line"><span class="ct-810bae">.top-right</span><span class="ct-d93ca5"> {</span></span><span class="line"><span class="ct-d93ca5"> </span><span class="ct-db8cc5">grid-row</span><span class="ct-d93ca5">: </span><span class="ct-64f3a7">1</span><span class="ct-d93ca5"> </span><span class="ct-7d5daa">/</span><span class="ct-d93ca5"> </span><span class="ct-64f3a7">3</span><span class="ct-d93ca5">; </span><span class="ct-0f60fc">// height here</span></span><span class="line"><span class="ct-d93ca5"> </span><span class="ct-db8cc5">grid-column</span><span class="ct-d93ca5">: </span><span class="ct-64f3a7">-2</span><span class="ct-d93ca5"> / </span><span class="ct-64f3a7">-1</span><span class="ct-d93ca5">; </span><span class="ct-0f60fc">// width here</span></span><span class="line"><span class="ct-d93ca5">}</span></span></code></pre><!--]--></div><style>.ct-0f60fc{color:#8B949E}.ct-db8cc5{color:#79C0FF}.ct-c55733{color:#FF7B72}.ct-a29ed9{color:#79C0FF}.ct-9e6b01{color:#FFA657}.ct-d8b9cf{color:#79C0FF}.ct-8d33fd{color:#79C0FF}.ct-9aa8a5{color:#79C0FF}.ct-ed4939{color:#C9D1D9}.ct-810bae{color:#79C0FF}.ct-d93ca5{color:#C9D1D9}.ct-7d5daa{color:#FF7B72}.ct-64f3a7{color:#79C0FF}.ct-0a7911{color:#FFA657}.light .ct-0a7911{color:#657B83}.light .ct-64f3a7{color:#D33682}.light .ct-7d5daa{color:#859900}.light .ct-d93ca5{color:#657B83}.light .ct-810bae{color:#93A1A1}.light .ct-ed4939{color:#657B83}.light .ct-9aa8a5{color:#859900}.light .ct-8d33fd{color:#657B83}.light .ct-d8b9cf{color:#268BD2}.light .ct-9e6b01{color:#657B83}.light .ct-a29ed9{color:#D33682}.light .ct-c55733{color:#859900}.light .ct-db8cc5{color:#859900}.light .ct-0f60fc{color:#93A1A1}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/css/automatic-grid-like-masonry-with-pure-css/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697990620}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script><script type="module" src="/nuxt/ProseH3.462e5228.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/css/sass-nth-child-iterate-mixin/_payload.js b/docs/css/sass-nth-child-iterate-mixin/_payload.js
index cee21be..dbb55e3 100644
--- a/docs/css/sass-nth-child-iterate-mixin/_payload.js
+++ b/docs/css/sass-nth-child-iterate-mixin/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:t,_path:u},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-ex7u9maCrE":{_path:u,_dir:"css",_draft:p,_partial:p,_locale:"en",_empty:p,title:t,description:"Say, we need to color n items by specific colors, which depend on its position. #SCSS supports iteration over lists for that purposes:",excerpt:{type:v,children:[{type:a,tag:l,props:{},children:[{type:b,value:w},{type:a,tag:x,props:{},children:[{type:b,value:y}]},{type:b,value:z},{type:a,tag:A,props:{href:B,rel:[C]},children:[{type:b,value:D}]},{type:b,value:E}]},{type:a,tag:g,props:{code:q,language:m},children:[{type:a,tag:n,props:{},children:[{type:a,tag:g,props:{__ignoreMap:i},children:[{type:b,value:q}]}]}]},{type:a,tag:l,props:{},children:[{type:b,value:F}]},{type:a,tag:g,props:{code:r,language:m},children:[{type:a,tag:n,props:{},children:[{type:a,tag:g,props:{__ignoreMap:i},children:[{type:b,value:r}]}]}]}]},body:{type:v,children:[{type:a,tag:l,props:{},children:[{type:b,value:w},{type:a,tag:x,props:{},children:[{type:b,value:y}]},{type:b,value:z},{type:a,tag:A,props:{href:B,rel:[C]},children:[{type:b,value:D}]},{type:b,value:E}]},{type:a,tag:g,props:{code:q,language:m},children:[{type:a,tag:n,props:{},children:[{type:a,tag:g,props:{__ignoreMap:i},children:[{type:a,tag:c,props:{class:f},children:[{type:a,tag:c,props:{class:s},children:[{type:b,value:"@mixin"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:"ct-93c23f"},children:[{type:b,value:"color-per-child"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:G}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:H}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:I}]}]},{type:a,tag:c,props:{class:f},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:J}]},{type:a,tag:c,props:{class:s},children:[{type:b,value:"@each"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:K}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:s},children:[{type:b,value:"in"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:H}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:L}]}]},{type:a,tag:c,props:{class:f},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" "}]},{type:a,tag:c,props:{class:"ct-81e54c"},children:[{type:b,value:"&"}]},{type:a,tag:c,props:{class:"ct-606577"},children:[{type:b,value:":nth-child"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:G}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"#{"}]},{type:a,tag:c,props:{class:"ct-38e3eb"},children:[{type:b,value:"index"}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"(($colors), ($color))}"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:I}]}]},{type:a,tag:c,props:{class:f},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" "}]},{type:a,tag:c,props:{class:"ct-fbabdd"},children:[{type:b,value:"color"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:": "}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:K}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:";"}]}]},{type:a,tag:c,props:{class:f},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:" }"}]}]},{type:a,tag:c,props:{class:f},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:" }"}]}]},{type:a,tag:c,props:{class:f},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:M}]}]}]}]}]},{type:a,tag:l,props:{},children:[{type:b,value:F}]},{type:a,tag:g,props:{code:r,language:m},children:[{type:a,tag:n,props:{},children:[{type:a,tag:g,props:{__ignoreMap:i},children:[{type:a,tag:c,props:{class:f},children:[{type:a,tag:c,props:{class:"ct-bd28ed"},children:[{type:b,value:".item"}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:L}]}]},{type:a,tag:c,props:{class:f},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:J}]},{type:a,tag:c,props:{class:"ct-d98769"},children:[{type:b,value:"@include"}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:"ct-dc09c5"},children:[{type:b,value:"color_per_child"}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:"(("}]},{type:a,tag:c,props:{class:k},children:[{type:b,value:"#ded187"}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:k},children:[{type:b,value:"#dbde87"}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:k},children:[{type:b,value:"#bade87"}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:k},children:[{type:b,value:"#9cde87"}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:k},children:[{type:b,value:"#87deaa"}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:"));"}]}]},{type:a,tag:c,props:{class:f},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:M}]}]}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-e8ce17{color:#79C0FF}.ct-dc09c5{color:#D2A8FF}.ct-d98769{color:#FF7B72}.ct-bd28ed{color:#79C0FF}.ct-ea5dba{color:#C9D1D9}.ct-fbabdd{color:#79C0FF}.ct-38e3eb{color:#79C0FF}.ct-606577{color:#79C0FF}.ct-81e54c{color:#7EE787}.ct-7a6104{color:#FFA657}.ct-93c23f{color:#D2A8FF}.ct-dd77e2{color:#C9D1D9}.ct-981420{color:#FF7B72}.light .ct-981420{color:#859900}.light .ct-dd77e2{color:#657B83}.light .ct-93c23f{color:#268BD2}.light .ct-7a6104{color:#657B83}.light .ct-81e54c{color:#268BD2}.light .ct-606577{color:#93A1A1}.light .ct-38e3eb{color:#268BD2}.light .ct-fbabdd{color:#859900}.light .ct-ea5dba{color:#657B83}.light .ct-bd28ed{color:#93A1A1}.light .ct-d98769{color:#859900}.light .ct-dc09c5{color:#268BD2}.light .ct-e8ce17{color:#CB4B16}"}]}],toc:{title:i,searchDepth:N,depth:N,links:[]}},_type:"markdown",_id:"content:CSS:Sass nth-child iterate mixin.md",_source:"content",_file:"CSS\u002FSass nth-child iterate mixin.md",_extension:"md"}},prerenderedAt:1703695529682}}("element","text","span","ct-dd77e2","ct-ea5dba","line","code","ct-7a6104",""," ","ct-e8ce17","p","scss","pre",", ",false,"@mixin color-per-child($colors) {\n @each $color in $colors {\n &:nth-child(#{index(($colors), ($color))}) {\n color: $color;\n }\n }\n}\n",".item {\n @include color_per_child((#ded187, #dbde87, #bade87, #9cde87, #87deaa));\n}\n","ct-981420","Sass Nth Child Iterate Mixin","\u002Fcss\u002Fsass-nth-child-iterate-mixin","root","Say, we need to color ","code-inline","n"," items by specific colors, which depend on its position. #SCSS supports ","a","https:\u002F\u002Fsass-lang.com\u002Fdocumentation\u002Fat-rules\u002Fcontrol\u002Feach","nofollow","iteration over lists"," for that purposes:","Usage is simple:","(","$colors",") {"," ","$color"," {","}",2))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:t,_path:u},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-ex7u9maCrE":{_path:u,_dir:"css",_draft:p,_partial:p,_locale:"en",_empty:p,title:t,description:"Say, we need to color n items by specific colors, which depend on its position. #SCSS supports iteration over lists for that purposes:",excerpt:{type:v,children:[{type:a,tag:l,props:{},children:[{type:b,value:w},{type:a,tag:x,props:{},children:[{type:b,value:y}]},{type:b,value:z},{type:a,tag:A,props:{href:B,rel:[C]},children:[{type:b,value:D}]},{type:b,value:E}]},{type:a,tag:g,props:{code:q,language:m},children:[{type:a,tag:n,props:{},children:[{type:a,tag:g,props:{__ignoreMap:i},children:[{type:b,value:q}]}]}]},{type:a,tag:l,props:{},children:[{type:b,value:F}]},{type:a,tag:g,props:{code:r,language:m},children:[{type:a,tag:n,props:{},children:[{type:a,tag:g,props:{__ignoreMap:i},children:[{type:b,value:r}]}]}]}]},body:{type:v,children:[{type:a,tag:l,props:{},children:[{type:b,value:w},{type:a,tag:x,props:{},children:[{type:b,value:y}]},{type:b,value:z},{type:a,tag:A,props:{href:B,rel:[C]},children:[{type:b,value:D}]},{type:b,value:E}]},{type:a,tag:g,props:{code:q,language:m},children:[{type:a,tag:n,props:{},children:[{type:a,tag:g,props:{__ignoreMap:i},children:[{type:a,tag:c,props:{class:f},children:[{type:a,tag:c,props:{class:s},children:[{type:b,value:"@mixin"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:"ct-f9af5d"},children:[{type:b,value:"color-per-child"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:G}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:H}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:I}]}]},{type:a,tag:c,props:{class:f},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:J}]},{type:a,tag:c,props:{class:s},children:[{type:b,value:"@each"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:K}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:s},children:[{type:b,value:"in"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:H}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:L}]}]},{type:a,tag:c,props:{class:f},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" "}]},{type:a,tag:c,props:{class:"ct-7cb522"},children:[{type:b,value:"&"}]},{type:a,tag:c,props:{class:"ct-c6ad1e"},children:[{type:b,value:":nth-child"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:G}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"#{"}]},{type:a,tag:c,props:{class:"ct-673c53"},children:[{type:b,value:"index"}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"(($colors), ($color))}"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:I}]}]},{type:a,tag:c,props:{class:f},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" "}]},{type:a,tag:c,props:{class:"ct-2c3b25"},children:[{type:b,value:"color"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:": "}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:K}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:";"}]}]},{type:a,tag:c,props:{class:f},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:" }"}]}]},{type:a,tag:c,props:{class:f},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:" }"}]}]},{type:a,tag:c,props:{class:f},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:M}]}]}]}]}]},{type:a,tag:l,props:{},children:[{type:b,value:F}]},{type:a,tag:g,props:{code:r,language:m},children:[{type:a,tag:n,props:{},children:[{type:a,tag:g,props:{__ignoreMap:i},children:[{type:a,tag:c,props:{class:f},children:[{type:a,tag:c,props:{class:"ct-16cb29"},children:[{type:b,value:".item"}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:L}]}]},{type:a,tag:c,props:{class:f},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:J}]},{type:a,tag:c,props:{class:"ct-b9d1fe"},children:[{type:b,value:"@include"}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:"ct-09f479"},children:[{type:b,value:"color_per_child"}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:"(("}]},{type:a,tag:c,props:{class:k},children:[{type:b,value:"#ded187"}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:k},children:[{type:b,value:"#dbde87"}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:k},children:[{type:b,value:"#bade87"}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:k},children:[{type:b,value:"#9cde87"}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:k},children:[{type:b,value:"#87deaa"}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:"));"}]}]},{type:a,tag:c,props:{class:f},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:M}]}]}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-9ce1dc{color:#79C0FF}.ct-09f479{color:#D2A8FF}.ct-b9d1fe{color:#FF7B72}.ct-16cb29{color:#79C0FF}.ct-81d937{color:#C9D1D9}.ct-2c3b25{color:#79C0FF}.ct-673c53{color:#79C0FF}.ct-c6ad1e{color:#79C0FF}.ct-7cb522{color:#7EE787}.ct-c602c5{color:#FFA657}.ct-f9af5d{color:#D2A8FF}.ct-c632ae{color:#C9D1D9}.ct-f2cade{color:#FF7B72}.light .ct-f2cade{color:#859900}.light .ct-c632ae{color:#657B83}.light .ct-f9af5d{color:#268BD2}.light .ct-c602c5{color:#657B83}.light .ct-7cb522{color:#268BD2}.light .ct-c6ad1e{color:#93A1A1}.light .ct-673c53{color:#268BD2}.light .ct-2c3b25{color:#859900}.light .ct-81d937{color:#657B83}.light .ct-16cb29{color:#93A1A1}.light .ct-b9d1fe{color:#859900}.light .ct-09f479{color:#268BD2}.light .ct-9ce1dc{color:#CB4B16}"}]}],toc:{title:i,searchDepth:N,depth:N,links:[]}},_type:"markdown",_id:"content:CSS:Sass nth-child iterate mixin.md",_source:"content",_file:"CSS\u002FSass nth-child iterate mixin.md",_extension:"md"}},prerenderedAt:1703697990694}}("element","text","span","ct-c632ae","ct-81d937","line","code","ct-c602c5",""," ","ct-9ce1dc","p","scss","pre",", ",false,"@mixin color-per-child($colors) {\n @each $color in $colors {\n &:nth-child(#{index(($colors), ($color))}) {\n color: $color;\n }\n }\n}\n",".item {\n @include color_per_child((#ded187, #dbde87, #bade87, #9cde87, #87deaa));\n}\n","ct-f2cade","Sass Nth Child Iterate Mixin","\u002Fcss\u002Fsass-nth-child-iterate-mixin","root","Say, we need to color ","code-inline","n"," items by specific colors, which depend on its position. #SCSS supports ","a","https:\u002F\u002Fsass-lang.com\u002Fdocumentation\u002Fat-rules\u002Fcontrol\u002Feach","nofollow","iteration over lists"," for that purposes:","Usage is simple:","(","$colors",") {"," ","$color"," {","}",2))
\ No newline at end of file
diff --git a/docs/css/sass-nth-child-iterate-mixin/index.html b/docs/css/sass-nth-child-iterate-mixin/index.html
index a1f812c..93e9e7b 100644
--- a/docs/css/sass-nth-child-iterate-mixin/index.html
+++ b/docs/css/sass-nth-child-iterate-mixin/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Sass Nth Child Iterate Mixin • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Say, we need to color n items by specific colors, which depend on its position. #SCSS supports iteration over lists for that purposes:"><meta name="head:count" content="3"><link rel="modulepreload" href="/css/sass-nth-child-iterate-mixin/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCodeInline.d9bcf614.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseA.c52e44f8.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a aria-current="page" href="/css/sass-nth-child-iterate-mixin" class="router-link-active _active_192pu_81 _link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Sass Nth Child Iterate Mixin</h1><article><div><p><!--[-->Say, we need to color <code><!--[-->n<!--]--></code> items by specific colors, which depend on its position. #SCSS supports <a href="https://sass-lang.com/documentation/at-rules/control/each" rel="nofollow" target="_blank"><!--[-->iteration over lists<!--]--></a> for that purposes:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>scss</span></button><!--[--><pre><code><span class="line"><span class="ct-981420">@mixin</span><span class="ct-dd77e2"> </span><span class="ct-93c23f">color-per-child</span><span class="ct-dd77e2">(</span><span class="ct-7a6104">$colors</span><span class="ct-dd77e2">) {</span></span><span class="line"><span class="ct-dd77e2"> </span><span class="ct-981420">@each</span><span class="ct-dd77e2"> </span><span class="ct-7a6104">$color</span><span class="ct-dd77e2"> </span><span class="ct-981420">in</span><span class="ct-dd77e2"> </span><span class="ct-7a6104">$colors</span><span class="ct-dd77e2"> {</span></span><span class="line"><span class="ct-dd77e2"> </span><span class="ct-81e54c">&</span><span class="ct-606577">:nth-child</span><span class="ct-dd77e2">(</span><span class="ct-7a6104">#{</span><span class="ct-38e3eb">index</span><span class="ct-7a6104">(($colors), ($color))}</span><span class="ct-dd77e2">) {</span></span><span class="line"><span class="ct-dd77e2"> </span><span class="ct-fbabdd">color</span><span class="ct-dd77e2">: </span><span class="ct-7a6104">$color</span><span class="ct-dd77e2">;</span></span><span class="line"><span class="ct-ea5dba"> }</span></span><span class="line"><span class="ct-ea5dba"> }</span></span><span class="line"><span class="ct-ea5dba">}</span></span></code></pre><!--]--></div><p><!--[-->Usage is simple:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>scss</span></button><!--[--><pre><code><span class="line"><span class="ct-bd28ed">.item</span><span class="ct-ea5dba"> {</span></span><span class="line"><span class="ct-ea5dba"> </span><span class="ct-d98769">@include</span><span class="ct-ea5dba"> </span><span class="ct-dc09c5">color_per_child</span><span class="ct-ea5dba">((</span><span class="ct-e8ce17">#ded187</span><span class="ct-ea5dba">, </span><span class="ct-e8ce17">#dbde87</span><span class="ct-ea5dba">, </span><span class="ct-e8ce17">#bade87</span><span class="ct-ea5dba">, </span><span class="ct-e8ce17">#9cde87</span><span class="ct-ea5dba">, </span><span class="ct-e8ce17">#87deaa</span><span class="ct-ea5dba">));</span></span><span class="line"><span class="ct-ea5dba">}</span></span></code></pre><!--]--></div><style>.ct-e8ce17{color:#79C0FF}.ct-dc09c5{color:#D2A8FF}.ct-d98769{color:#FF7B72}.ct-bd28ed{color:#79C0FF}.ct-ea5dba{color:#C9D1D9}.ct-fbabdd{color:#79C0FF}.ct-38e3eb{color:#79C0FF}.ct-606577{color:#79C0FF}.ct-81e54c{color:#7EE787}.ct-7a6104{color:#FFA657}.ct-93c23f{color:#D2A8FF}.ct-dd77e2{color:#C9D1D9}.ct-981420{color:#FF7B72}.light .ct-981420{color:#859900}.light .ct-dd77e2{color:#657B83}.light .ct-93c23f{color:#268BD2}.light .ct-7a6104{color:#657B83}.light .ct-81e54c{color:#268BD2}.light .ct-606577{color:#93A1A1}.light .ct-38e3eb{color:#268BD2}.light .ct-fbabdd{color:#859900}.light .ct-ea5dba{color:#657B83}.light .ct-bd28ed{color:#93A1A1}.light .ct-d98769{color:#859900}.light .ct-dc09c5{color:#268BD2}.light .ct-e8ce17{color:#CB4B16}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/css/sass-nth-child-iterate-mixin/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695529682}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a aria-current="page" href="/css/sass-nth-child-iterate-mixin" class="router-link-active _active_192pu_81 _link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Sass Nth Child Iterate Mixin</h1><article><div><p><!--[-->Say, we need to color <code><!--[-->n<!--]--></code> items by specific colors, which depend on its position. #SCSS supports <a href="https://sass-lang.com/documentation/at-rules/control/each" rel="nofollow" target="_blank"><!--[-->iteration over lists<!--]--></a> for that purposes:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>scss</span></button><!--[--><pre><code><span class="line"><span class="ct-f2cade">@mixin</span><span class="ct-c632ae"> </span><span class="ct-f9af5d">color-per-child</span><span class="ct-c632ae">(</span><span class="ct-c602c5">$colors</span><span class="ct-c632ae">) {</span></span><span class="line"><span class="ct-c632ae"> </span><span class="ct-f2cade">@each</span><span class="ct-c632ae"> </span><span class="ct-c602c5">$color</span><span class="ct-c632ae"> </span><span class="ct-f2cade">in</span><span class="ct-c632ae"> </span><span class="ct-c602c5">$colors</span><span class="ct-c632ae"> {</span></span><span class="line"><span class="ct-c632ae"> </span><span class="ct-7cb522">&</span><span class="ct-c6ad1e">:nth-child</span><span class="ct-c632ae">(</span><span class="ct-c602c5">#{</span><span class="ct-673c53">index</span><span class="ct-c602c5">(($colors), ($color))}</span><span class="ct-c632ae">) {</span></span><span class="line"><span class="ct-c632ae"> </span><span class="ct-2c3b25">color</span><span class="ct-c632ae">: </span><span class="ct-c602c5">$color</span><span class="ct-c632ae">;</span></span><span class="line"><span class="ct-81d937"> }</span></span><span class="line"><span class="ct-81d937"> }</span></span><span class="line"><span class="ct-81d937">}</span></span></code></pre><!--]--></div><p><!--[-->Usage is simple:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>scss</span></button><!--[--><pre><code><span class="line"><span class="ct-16cb29">.item</span><span class="ct-81d937"> {</span></span><span class="line"><span class="ct-81d937"> </span><span class="ct-b9d1fe">@include</span><span class="ct-81d937"> </span><span class="ct-09f479">color_per_child</span><span class="ct-81d937">((</span><span class="ct-9ce1dc">#ded187</span><span class="ct-81d937">, </span><span class="ct-9ce1dc">#dbde87</span><span class="ct-81d937">, </span><span class="ct-9ce1dc">#bade87</span><span class="ct-81d937">, </span><span class="ct-9ce1dc">#9cde87</span><span class="ct-81d937">, </span><span class="ct-9ce1dc">#87deaa</span><span class="ct-81d937">));</span></span><span class="line"><span class="ct-81d937">}</span></span></code></pre><!--]--></div><style>.ct-9ce1dc{color:#79C0FF}.ct-09f479{color:#D2A8FF}.ct-b9d1fe{color:#FF7B72}.ct-16cb29{color:#79C0FF}.ct-81d937{color:#C9D1D9}.ct-2c3b25{color:#79C0FF}.ct-673c53{color:#79C0FF}.ct-c6ad1e{color:#79C0FF}.ct-7cb522{color:#7EE787}.ct-c602c5{color:#FFA657}.ct-f9af5d{color:#D2A8FF}.ct-c632ae{color:#C9D1D9}.ct-f2cade{color:#FF7B72}.light .ct-f2cade{color:#859900}.light .ct-c632ae{color:#657B83}.light .ct-f9af5d{color:#268BD2}.light .ct-c602c5{color:#657B83}.light .ct-7cb522{color:#268BD2}.light .ct-c6ad1e{color:#93A1A1}.light .ct-673c53{color:#268BD2}.light .ct-2c3b25{color:#859900}.light .ct-81d937{color:#657B83}.light .ct-16cb29{color:#93A1A1}.light .ct-b9d1fe{color:#859900}.light .ct-09f479{color:#268BD2}.light .ct-9ce1dc{color:#CB4B16}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/css/sass-nth-child-iterate-mixin/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697990694}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/css/test-if-browser-supports-css-rules/_payload.js b/docs/css/test-if-browser-supports-css-rules/_payload.js
index c51d46a..facdca3 100644
--- a/docs/css/test-if-browser-supports-css-rules/_payload.js
+++ b/docs/css/test-if-browser-supports-css-rules/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:x,_path:y}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-OwjCJk80Rt":{_path:y,_dir:l,_draft:m,_partial:m,_locale:"en",_empty:m,title:x,description:n,excerpt:{type:z,children:[{type:a,tag:j,props:{},children:[{type:b,value:n}]},{type:a,tag:f,props:{code:o,language:l},children:[{type:a,tag:k,props:{},children:[{type:a,tag:f,props:{__ignoreMap:h},children:[{type:b,value:o}]}]}]},{type:a,tag:j,props:{},children:[{type:b,value:A},{type:a,tag:B,props:{},children:[{type:b,value:p}]},{type:b,value:C}]},{type:a,tag:f,props:{code:q,language:D},children:[{type:a,tag:k,props:{},children:[{type:a,tag:f,props:{__ignoreMap:h},children:[{type:b,value:q}]}]}]}]},body:{type:z,children:[{type:a,tag:j,props:{},children:[{type:b,value:n}]},{type:a,tag:f,props:{code:o,language:l},children:[{type:a,tag:k,props:{},children:[{type:a,tag:f,props:{__ignoreMap:h},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:g},children:[{type:b,value:E}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:F}]},{type:a,tag:c,props:{class:G},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:s}]},{type:a,tag:c,props:{class:H},children:[{type:b,value:t}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:u}]},{type:a,tag:c,props:{class:I},children:[{type:b,value:v}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:w}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:")) {"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:J}]},{type:a,tag:c,props:{class:"ct-dfa80f"},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:": blur(5px);"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:K}]}]}]}]}]},{type:a,tag:j,props:{},children:[{type:b,value:A},{type:a,tag:B,props:{},children:[{type:b,value:p}]},{type:b,value:C}]},{type:a,tag:f,props:{code:q,language:D},children:[{type:a,tag:k,props:{},children:[{type:a,tag:f,props:{__ignoreMap:h},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:g},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:L}]},{type:a,tag:c,props:{class:"ct-9b8524"},children:[{type:b,value:"can_backdrop"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" {"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:E}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:F}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:i},children:[{type:b,value:M}]},{type:a,tag:c,props:{class:"ct-d2edfc"},children:[{type:b,value:"-webkit-backdrop-filter"}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:s}]},{type:a,tag:c,props:{class:"ct-950408"},children:[{type:b,value:t}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:u}]},{type:a,tag:c,props:{class:"ct-84a56d"},children:[{type:b,value:v}]},{type:a,tag:c,props:{class:"ct-e1945f"},children:[{type:b,value:w}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:")) "}]},{type:a,tag:c,props:{class:"ct-28c7f2"},children:[{type:b,value:"or"}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:L}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:M}]},{type:a,tag:c,props:{class:G},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:s}]},{type:a,tag:c,props:{class:H},children:[{type:b,value:t}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:u}]},{type:a,tag:c,props:{class:I},children:[{type:b,value:v}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:w}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"))"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" ) {"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:J}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"@content"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:";"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" }"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:K}]}]}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-28c7f2{color:#79C0FF}.ct-e1945f{color:#FF7B72}.ct-84a56d{color:#79C0FF}.ct-950408{color:#79C0FF}.ct-d2edfc{color:#79C0FF}.ct-3b70c6{color:#C9D1D9}.ct-9b8524{color:#D2A8FF}.ct-dfa80f{color:#7EE787}.ct-402ddd{color:#79C0FF}.ct-1fdda1{color:#79C0FF}.ct-c952c5{color:#79C0FF}.ct-6538af{color:#C9D1D9}.ct-7a463c{color:#FF7B72}.light .ct-7a463c{color:#859900}.light .ct-6538af{color:#657B83}.light .ct-c952c5{color:#859900}.light .ct-1fdda1{color:#268BD2}.light .ct-402ddd{color:#D33682}.light .ct-dfa80f{color:#268BD2}.light .ct-9b8524{color:#268BD2}.light .ct-3b70c6{color:#657B83}.light .ct-d2edfc{color:#859900}.light .ct-950408{color:#268BD2}.light .ct-84a56d{color:#D33682}.light .ct-e1945f{color:#859900}.light .ct-28c7f2{color:#657B83}"}]}],toc:{title:h,searchDepth:N,depth:N,links:[]}},_type:"markdown",_id:"content:CSS:Test if browser supports CSS rules.md",_source:"content",_file:"CSS\u002FTest if browser supports CSS rules.md",_extension:"md"}},prerenderedAt:1703695529756}}("element","text","span","ct-6538af","line","code","ct-7a463c","","ct-3b70c6","p","pre","css",false,"To test if browser supports some #CSS rules, do following:","@supports (backdrop-filter: blur(5px)) {\n backdrop-filter: blur(5px);\n}\n","@mixin","@mixin can_backdrop {\n @supports (\n (-webkit-backdrop-filter: blur(5px)) or \n (backdrop-filter: blur(5px))\n ) {\n @content;\n }\n}\n","backdrop-filter",": ","blur","(","5","px","Test If Browser Supports CSS Rules","\u002Fcss\u002Ftest-if-browser-supports-css-rules","root","This ","code-inline"," will only apply rule if browser support backdrop filtering:","scss","@supports"," (","ct-c952c5","ct-1fdda1","ct-402ddd"," ","}"," "," (",2))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:x,_path:y}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-OwjCJk80Rt":{_path:y,_dir:l,_draft:m,_partial:m,_locale:"en",_empty:m,title:x,description:n,excerpt:{type:z,children:[{type:a,tag:j,props:{},children:[{type:b,value:n}]},{type:a,tag:f,props:{code:o,language:l},children:[{type:a,tag:k,props:{},children:[{type:a,tag:f,props:{__ignoreMap:h},children:[{type:b,value:o}]}]}]},{type:a,tag:j,props:{},children:[{type:b,value:A},{type:a,tag:B,props:{},children:[{type:b,value:p}]},{type:b,value:C}]},{type:a,tag:f,props:{code:q,language:D},children:[{type:a,tag:k,props:{},children:[{type:a,tag:f,props:{__ignoreMap:h},children:[{type:b,value:q}]}]}]}]},body:{type:z,children:[{type:a,tag:j,props:{},children:[{type:b,value:n}]},{type:a,tag:f,props:{code:o,language:l},children:[{type:a,tag:k,props:{},children:[{type:a,tag:f,props:{__ignoreMap:h},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:g},children:[{type:b,value:E}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:F}]},{type:a,tag:c,props:{class:G},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:s}]},{type:a,tag:c,props:{class:H},children:[{type:b,value:t}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:u}]},{type:a,tag:c,props:{class:I},children:[{type:b,value:v}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:w}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:")) {"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:J}]},{type:a,tag:c,props:{class:"ct-b1b623"},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:": blur(5px);"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:K}]}]}]}]}]},{type:a,tag:j,props:{},children:[{type:b,value:A},{type:a,tag:B,props:{},children:[{type:b,value:p}]},{type:b,value:C}]},{type:a,tag:f,props:{code:q,language:D},children:[{type:a,tag:k,props:{},children:[{type:a,tag:f,props:{__ignoreMap:h},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:g},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:L}]},{type:a,tag:c,props:{class:"ct-32ba5f"},children:[{type:b,value:"can_backdrop"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" {"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:E}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:F}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:i},children:[{type:b,value:M}]},{type:a,tag:c,props:{class:"ct-414602"},children:[{type:b,value:"-webkit-backdrop-filter"}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:s}]},{type:a,tag:c,props:{class:"ct-5bfb02"},children:[{type:b,value:t}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:u}]},{type:a,tag:c,props:{class:"ct-b3a8ef"},children:[{type:b,value:v}]},{type:a,tag:c,props:{class:"ct-352265"},children:[{type:b,value:w}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:")) "}]},{type:a,tag:c,props:{class:"ct-7c4f33"},children:[{type:b,value:"or"}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:L}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:M}]},{type:a,tag:c,props:{class:G},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:s}]},{type:a,tag:c,props:{class:H},children:[{type:b,value:t}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:u}]},{type:a,tag:c,props:{class:I},children:[{type:b,value:v}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:w}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"))"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" ) {"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:J}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"@content"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:";"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" }"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:K}]}]}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-7c4f33{color:#79C0FF}.ct-352265{color:#FF7B72}.ct-b3a8ef{color:#79C0FF}.ct-5bfb02{color:#79C0FF}.ct-414602{color:#79C0FF}.ct-65b5bb{color:#C9D1D9}.ct-32ba5f{color:#D2A8FF}.ct-b1b623{color:#7EE787}.ct-1352cd{color:#79C0FF}.ct-2bd9f1{color:#79C0FF}.ct-cfcc41{color:#79C0FF}.ct-3d885b{color:#C9D1D9}.ct-7302b2{color:#FF7B72}.light .ct-7302b2{color:#859900}.light .ct-3d885b{color:#657B83}.light .ct-cfcc41{color:#859900}.light .ct-2bd9f1{color:#268BD2}.light .ct-1352cd{color:#D33682}.light .ct-b1b623{color:#268BD2}.light .ct-32ba5f{color:#268BD2}.light .ct-65b5bb{color:#657B83}.light .ct-414602{color:#859900}.light .ct-5bfb02{color:#268BD2}.light .ct-b3a8ef{color:#D33682}.light .ct-352265{color:#859900}.light .ct-7c4f33{color:#657B83}"}]}],toc:{title:h,searchDepth:N,depth:N,links:[]}},_type:"markdown",_id:"content:CSS:Test if browser supports CSS rules.md",_source:"content",_file:"CSS\u002FTest if browser supports CSS rules.md",_extension:"md"}},prerenderedAt:1703697990769}}("element","text","span","ct-3d885b","line","code","ct-7302b2","","ct-65b5bb","p","pre","css",false,"To test if browser supports some #CSS rules, do following:","@supports (backdrop-filter: blur(5px)) {\n backdrop-filter: blur(5px);\n}\n","@mixin","@mixin can_backdrop {\n @supports (\n (-webkit-backdrop-filter: blur(5px)) or \n (backdrop-filter: blur(5px))\n ) {\n @content;\n }\n}\n","backdrop-filter",": ","blur","(","5","px","Test If Browser Supports CSS Rules","\u002Fcss\u002Ftest-if-browser-supports-css-rules","root","This ","code-inline"," will only apply rule if browser support backdrop filtering:","scss","@supports"," (","ct-cfcc41","ct-2bd9f1","ct-1352cd"," ","}"," "," (",2))
\ No newline at end of file
diff --git a/docs/css/test-if-browser-supports-css-rules/index.html b/docs/css/test-if-browser-supports-css-rules/index.html
index 8ca7812..490264b 100644
--- a/docs/css/test-if-browser-supports-css-rules/index.html
+++ b/docs/css/test-if-browser-supports-css-rules/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Test If Browser Supports CSS Rules • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="To test if browser supports some #CSS rules, do following:"><meta name="head:count" content="3"><link rel="modulepreload" href="/css/test-if-browser-supports-css-rules/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCodeInline.d9bcf614.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a aria-current="page" href="/css/test-if-browser-supports-css-rules" class="router-link-active _active_192pu_81 _link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Test If Browser Supports CSS Rules</h1><article><div><p><!--[-->To test if browser supports some #CSS rules, do following:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>css</span></button><!--[--><pre><code><span class="line"><span class="ct-7a463c">@supports</span><span class="ct-6538af"> (</span><span class="ct-c952c5">backdrop-filter</span><span class="ct-6538af">: </span><span class="ct-1fdda1">blur</span><span class="ct-6538af">(</span><span class="ct-402ddd">5</span><span class="ct-7a463c">px</span><span class="ct-6538af">)) {</span></span><span class="line"><span class="ct-6538af"> </span><span class="ct-dfa80f">backdrop-filter</span><span class="ct-6538af">: blur(5px);</span></span><span class="line"><span class="ct-6538af">}</span></span></code></pre><!--]--></div><p><!--[-->This <code><!--[-->@mixin<!--]--></code> will only apply rule if browser support backdrop filtering:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>scss</span></button><!--[--><pre><code><span class="line"><span class="ct-7a463c">@mixin</span><span class="ct-6538af"> </span><span class="ct-9b8524">can_backdrop</span><span class="ct-6538af"> {</span></span><span class="line"><span class="ct-6538af"> </span><span class="ct-7a463c">@supports</span><span class="ct-6538af"> (</span></span><span class="line"><span class="ct-3b70c6"> (</span><span class="ct-d2edfc">-webkit-backdrop-filter</span><span class="ct-3b70c6">: </span><span class="ct-950408">blur</span><span class="ct-3b70c6">(</span><span class="ct-84a56d">5</span><span class="ct-e1945f">px</span><span class="ct-3b70c6">)) </span><span class="ct-28c7f2">or</span><span class="ct-3b70c6"> </span></span><span class="line"><span class="ct-6538af"> (</span><span class="ct-c952c5">backdrop-filter</span><span class="ct-6538af">: </span><span class="ct-1fdda1">blur</span><span class="ct-6538af">(</span><span class="ct-402ddd">5</span><span class="ct-7a463c">px</span><span class="ct-6538af">))</span></span><span class="line"><span class="ct-6538af"> ) {</span></span><span class="line"><span class="ct-6538af"> </span><span class="ct-7a463c">@content</span><span class="ct-6538af">;</span></span><span class="line"><span class="ct-6538af"> }</span></span><span class="line"><span class="ct-6538af">}</span></span></code></pre><!--]--></div><style>.ct-28c7f2{color:#79C0FF}.ct-e1945f{color:#FF7B72}.ct-84a56d{color:#79C0FF}.ct-950408{color:#79C0FF}.ct-d2edfc{color:#79C0FF}.ct-3b70c6{color:#C9D1D9}.ct-9b8524{color:#D2A8FF}.ct-dfa80f{color:#7EE787}.ct-402ddd{color:#79C0FF}.ct-1fdda1{color:#79C0FF}.ct-c952c5{color:#79C0FF}.ct-6538af{color:#C9D1D9}.ct-7a463c{color:#FF7B72}.light .ct-7a463c{color:#859900}.light .ct-6538af{color:#657B83}.light .ct-c952c5{color:#859900}.light .ct-1fdda1{color:#268BD2}.light .ct-402ddd{color:#D33682}.light .ct-dfa80f{color:#268BD2}.light .ct-9b8524{color:#268BD2}.light .ct-3b70c6{color:#657B83}.light .ct-d2edfc{color:#859900}.light .ct-950408{color:#268BD2}.light .ct-84a56d{color:#D33682}.light .ct-e1945f{color:#859900}.light .ct-28c7f2{color:#657B83}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/css/test-if-browser-supports-css-rules/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695529756}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a aria-current="page" href="/css/test-if-browser-supports-css-rules" class="router-link-active _active_192pu_81 _link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Test If Browser Supports CSS Rules</h1><article><div><p><!--[-->To test if browser supports some #CSS rules, do following:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>css</span></button><!--[--><pre><code><span class="line"><span class="ct-7302b2">@supports</span><span class="ct-3d885b"> (</span><span class="ct-cfcc41">backdrop-filter</span><span class="ct-3d885b">: </span><span class="ct-2bd9f1">blur</span><span class="ct-3d885b">(</span><span class="ct-1352cd">5</span><span class="ct-7302b2">px</span><span class="ct-3d885b">)) {</span></span><span class="line"><span class="ct-3d885b"> </span><span class="ct-b1b623">backdrop-filter</span><span class="ct-3d885b">: blur(5px);</span></span><span class="line"><span class="ct-3d885b">}</span></span></code></pre><!--]--></div><p><!--[-->This <code><!--[-->@mixin<!--]--></code> will only apply rule if browser support backdrop filtering:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>scss</span></button><!--[--><pre><code><span class="line"><span class="ct-7302b2">@mixin</span><span class="ct-3d885b"> </span><span class="ct-32ba5f">can_backdrop</span><span class="ct-3d885b"> {</span></span><span class="line"><span class="ct-3d885b"> </span><span class="ct-7302b2">@supports</span><span class="ct-3d885b"> (</span></span><span class="line"><span class="ct-65b5bb"> (</span><span class="ct-414602">-webkit-backdrop-filter</span><span class="ct-65b5bb">: </span><span class="ct-5bfb02">blur</span><span class="ct-65b5bb">(</span><span class="ct-b3a8ef">5</span><span class="ct-352265">px</span><span class="ct-65b5bb">)) </span><span class="ct-7c4f33">or</span><span class="ct-65b5bb"> </span></span><span class="line"><span class="ct-3d885b"> (</span><span class="ct-cfcc41">backdrop-filter</span><span class="ct-3d885b">: </span><span class="ct-2bd9f1">blur</span><span class="ct-3d885b">(</span><span class="ct-1352cd">5</span><span class="ct-7302b2">px</span><span class="ct-3d885b">))</span></span><span class="line"><span class="ct-3d885b"> ) {</span></span><span class="line"><span class="ct-3d885b"> </span><span class="ct-7302b2">@content</span><span class="ct-3d885b">;</span></span><span class="line"><span class="ct-3d885b"> }</span></span><span class="line"><span class="ct-3d885b">}</span></span></code></pre><!--]--></div><style>.ct-7c4f33{color:#79C0FF}.ct-352265{color:#FF7B72}.ct-b3a8ef{color:#79C0FF}.ct-5bfb02{color:#79C0FF}.ct-414602{color:#79C0FF}.ct-65b5bb{color:#C9D1D9}.ct-32ba5f{color:#D2A8FF}.ct-b1b623{color:#7EE787}.ct-1352cd{color:#79C0FF}.ct-2bd9f1{color:#79C0FF}.ct-cfcc41{color:#79C0FF}.ct-3d885b{color:#C9D1D9}.ct-7302b2{color:#FF7B72}.light .ct-7302b2{color:#859900}.light .ct-3d885b{color:#657B83}.light .ct-cfcc41{color:#859900}.light .ct-2bd9f1{color:#268BD2}.light .ct-1352cd{color:#D33682}.light .ct-b1b623{color:#268BD2}.light .ct-32ba5f{color:#268BD2}.light .ct-65b5bb{color:#657B83}.light .ct-414602{color:#859900}.light .ct-5bfb02{color:#268BD2}.light .ct-b3a8ef{color:#D33682}.light .ct-352265{color:#859900}.light .ct-7c4f33{color:#657B83}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/css/test-if-browser-supports-css-rules/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697990769}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/docker/building-static-pages-with-docker/_payload.js b/docs/docker/building-static-pages-with-docker/_payload.js
index 958fdf3..5f9ab26 100644
--- a/docs/docker/building-static-pages-with-docker/_payload.js
+++ b/docs/docker/building-static-pages-with-docker/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:h,_path:i},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-QKxL2z8jga":{_path:i,_dir:"docker",_draft:d,_partial:d,_locale:"en",_empty:d,title:h,description:e,excerpt:{type:j,children:[{type:a,tag:k,props:{},children:[{type:b,value:e}]},{type:a,tag:c,props:{code:f,language:l},children:[{type:a,tag:m,props:{},children:[{type:a,tag:c,props:{__ignoreMap:g},children:[{type:b,value:f}]}]}]}]},body:{type:j,children:[{type:a,tag:k,props:{},children:[{type:b,value:e}]},{type:a,tag:c,props:{code:f,language:l},children:[{type:a,tag:m,props:{},children:[{type:a,tag:c,props:{__ignoreMap:g},children:[{type:a,tag:n,props:{class:"line"},children:[{type:a,tag:n,props:{},children:[{type:b,value:"FROM node:16-alpine as builder\nWORKDIR \u002Fapp\nCOPY package.json yarn.lock .\u002F\nRUN yarn\nCOPY . .\n\n# your generate command here\nRUN yarn generate\n\nFROM nginx\nCOPY --from=builder \u002Fapp\u002Fdist \u002Fusr\u002Fshare\u002Fnginx\u002Fhtml"}]}]}]}]}]}],toc:{title:g,searchDepth:o,depth:o,links:[]}},_type:"markdown",_id:"content:Docker:Building static pages with Docker.md",_source:"content",_file:"Docker\u002FBuilding static pages with Docker.md",_extension:"md"}},prerenderedAt:1703695529819}}("element","text","code",false,"Sample #Dockerfile for static Typescript builds such a #nextjs, #gatsby or #nuxt:","FROM node:16-alpine as builder\nWORKDIR \u002Fapp\nCOPY package.json yarn.lock .\u002F\nRUN yarn\nCOPY . .\n\n# your generate command here\nRUN yarn generate\n\nFROM nginx\nCOPY --from=builder \u002Fapp\u002Fdist \u002Fusr\u002Fshare\u002Fnginx\u002Fhtml\n","","Building Static Pages With Docker","\u002Fdocker\u002Fbuilding-static-pages-with-docker","root","p","Dockerfile","pre","span",2))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:h,_path:i},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-QKxL2z8jga":{_path:i,_dir:"docker",_draft:d,_partial:d,_locale:"en",_empty:d,title:h,description:e,excerpt:{type:j,children:[{type:a,tag:k,props:{},children:[{type:b,value:e}]},{type:a,tag:c,props:{code:f,language:l},children:[{type:a,tag:m,props:{},children:[{type:a,tag:c,props:{__ignoreMap:g},children:[{type:b,value:f}]}]}]}]},body:{type:j,children:[{type:a,tag:k,props:{},children:[{type:b,value:e}]},{type:a,tag:c,props:{code:f,language:l},children:[{type:a,tag:m,props:{},children:[{type:a,tag:c,props:{__ignoreMap:g},children:[{type:a,tag:n,props:{class:"line"},children:[{type:a,tag:n,props:{},children:[{type:b,value:"FROM node:16-alpine as builder\nWORKDIR \u002Fapp\nCOPY package.json yarn.lock .\u002F\nRUN yarn\nCOPY . .\n\n# your generate command here\nRUN yarn generate\n\nFROM nginx\nCOPY --from=builder \u002Fapp\u002Fdist \u002Fusr\u002Fshare\u002Fnginx\u002Fhtml"}]}]}]}]}]}],toc:{title:g,searchDepth:o,depth:o,links:[]}},_type:"markdown",_id:"content:Docker:Building static pages with Docker.md",_source:"content",_file:"Docker\u002FBuilding static pages with Docker.md",_extension:"md"}},prerenderedAt:1703697990849}}("element","text","code",false,"Sample #Dockerfile for static Typescript builds such a #nextjs, #gatsby or #nuxt:","FROM node:16-alpine as builder\nWORKDIR \u002Fapp\nCOPY package.json yarn.lock .\u002F\nRUN yarn\nCOPY . .\n\n# your generate command here\nRUN yarn generate\n\nFROM nginx\nCOPY --from=builder \u002Fapp\u002Fdist \u002Fusr\u002Fshare\u002Fnginx\u002Fhtml\n","","Building Static Pages With Docker","\u002Fdocker\u002Fbuilding-static-pages-with-docker","root","p","Dockerfile","pre","span",2))
\ No newline at end of file
diff --git a/docs/docker/building-static-pages-with-docker/index.html b/docs/docker/building-static-pages-with-docker/index.html
index 4d87dad..e9e80f2 100644
--- a/docs/docker/building-static-pages-with-docker/index.html
+++ b/docs/docker/building-static-pages-with-docker/index.html
@@ -2,7 +2,7 @@
<html data-head-attrs="">
<head><title>Building Static Pages With Docker • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Sample #Dockerfile for static Typescript builds such a #nextjs, #gatsby or #nuxt:"><meta name="head:count" content="3"><link rel="modulepreload" href="/docker/building-static-pages-with-docker/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a aria-current="page" href="/docker/building-static-pages-with-docker" class="router-link-active _active_192pu_81 _link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Building Static Pages With Docker</h1><article><div><p><!--[-->Sample #Dockerfile for static Typescript builds such a #nextjs, #gatsby or #nuxt:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>Dockerfile</span></button><!--[--><pre><code><span class="line"><span>FROM node:16-alpine as builder
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a aria-current="page" href="/docker/building-static-pages-with-docker" class="router-link-active _active_192pu_81 _link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Building Static Pages With Docker</h1><article><div><p><!--[-->Sample #Dockerfile for static Typescript builds such a #nextjs, #gatsby or #nuxt:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>Dockerfile</span></button><!--[--><pre><code><span class="line"><span>FROM node:16-alpine as builder
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn
@@ -12,5 +12,5 @@ COPY . .
RUN yarn generate
FROM nginx
-COPY --from=builder /app/dist /usr/share/nginx/html</span></span></code></pre><!--]--></div></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/docker/building-static-pages-with-docker/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695529819}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
+COPY --from=builder /app/dist /usr/share/nginx/html</span></span></code></pre><!--]--></div></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/docker/building-static-pages-with-docker/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697990849}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/docker/common-things-with-docker-mailserver/_payload.js b/docs/docker/common-things-with-docker-mailserver/_payload.js
new file mode 100644
index 0000000..bff2e21
--- /dev/null
+++ b/docs/docker/common-things-with-docker-mailserver/_payload.js
@@ -0,0 +1 @@
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av,aw,ax,ay,az,aA,aB,aC,aD,aE,aF,aG,aH,aI,aJ,aK,aL,aM,aN,aO,aP,aQ,aR,aS,aT,aU,aV,aW,aX,aY,aZ,a_,a$,ba,bb,bc,bd,be){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:Y,_path:Z},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-8zleGIr63C":{_path:Z,_dir:"docker",_draft:D,_partial:D,_locale:"en",_empty:D,title:Y,description:i,excerpt:{type:_,children:[{type:a,tag:$,props:{id:E},children:[{type:b,value:F}]},{type:a,tag:e,props:{},children:[{type:b,value:aa},{type:a,tag:d,props:{},children:[{type:b,value:w}]},{type:b,value:j}]},{type:a,tag:f,props:{code:G},children:[{type:a,tag:k,props:{},children:[{type:a,tag:f,props:{__ignoreMap:i},children:[{type:b,value:G}]}]}]},{type:a,tag:e,props:{},children:[{type:b,value:ab}]},{type:a,tag:m,props:{id:H},children:[{type:b,value:I}]},{type:a,tag:e,props:{},children:[{type:b,value:x},{type:a,tag:d,props:{},children:[{type:b,value:ac}]},{type:b,value:ad},{type:a,tag:d,props:{},children:[{type:b,value:y}]},{type:b,value:ae},{type:a,tag:d,props:{},children:[{type:b,value:w}]},{type:b,value:af},{type:a,tag:d,props:{},children:[{type:b,value:ag}]},{type:b,value:n}]},{type:a,tag:e,props:{},children:[{type:b,value:ah},{type:a,tag:d,props:{},children:[{type:b,value:ai}]},{type:b,value:aj},{type:a,tag:d,props:{},children:[{type:b,value:ak}]},{type:b,value:al},{type:a,tag:d,props:{},children:[{type:b,value:am}]}]},{type:a,tag:e,props:{},children:[{type:a,tag:o,props:{},children:[{type:b,value:z}]},{type:b,value:j}]},{type:a,tag:e,props:{},children:[{type:b,value:an}]},{type:a,tag:ao,props:{},children:[{type:a,tag:p,props:{},children:[{type:a,tag:d,props:{},children:[{type:b,value:ap}]}]},{type:a,tag:p,props:{},children:[{type:a,tag:d,props:{},children:[{type:b,value:aq}]}]},{type:a,tag:p,props:{},children:[{type:a,tag:d,props:{},children:[{type:b,value:ar}]}]}]},{type:a,tag:e,props:{},children:[{type:b,value:as},{type:a,tag:d,props:{},children:[{type:b,value:at}]},{type:b,value:au},{type:a,tag:d,props:{},children:[{type:b,value:av}]},{type:b,value:aw},{type:a,tag:d,props:{},children:[{type:b,value:y}]},{type:b,value:n}]},{type:a,tag:e,props:{},children:[{type:b,value:A},{type:a,tag:q,props:{href:ax,rel:[r]},children:[{type:b,value:B}]},{type:b,value:ay}]},{type:a,tag:m,props:{id:J},children:[{type:b,value:K}]},{type:a,tag:e,props:{},children:[{type:b,value:az},{type:a,tag:d,props:{},children:[{type:b,value:aA}]},{type:b,value:aB},{type:a,tag:d,props:{},children:[{type:b,value:L}]},{type:b,value:aC},{type:a,tag:d,props:{},children:[{type:b,value:aD}]},{type:b,value:n}]},{type:a,tag:e,props:{},children:[{type:a,tag:o,props:{},children:[{type:b,value:aE}]},{type:b,value:aF}]},{type:a,tag:m,props:{id:M},children:[{type:b,value:N}]},{type:a,tag:e,props:{},children:[{type:b,value:aG}]},{type:a,tag:f,props:{code:O,language:s},children:[{type:a,tag:k,props:{},children:[{type:a,tag:f,props:{__ignoreMap:i},children:[{type:b,value:O}]}]}]},{type:a,tag:e,props:{},children:[{type:b,value:A},{type:a,tag:q,props:{href:aH,rel:[r]},children:[{type:b,value:B}]},{type:b,value:aI}]},{type:a,tag:m,props:{id:P},children:[{type:b,value:Q}]},{type:a,tag:e,props:{},children:[{type:b,value:aJ},{type:a,tag:d,props:{},children:[{type:b,value:aK}]},{type:b,value:aL},{type:a,tag:d,props:{},children:[{type:b,value:aM}]},{type:b,value:aN},{type:a,tag:d,props:{},children:[{type:b,value:aO}]},{type:b,value:aP},{type:a,tag:d,props:{},children:[{type:b,value:aQ}]},{type:b,value:n}]},{type:a,tag:f,props:{code:R,language:s},children:[{type:a,tag:k,props:{},children:[{type:a,tag:f,props:{__ignoreMap:i},children:[{type:b,value:R}]}]}]},{type:a,tag:f,props:{code:S,language:s},children:[{type:a,tag:k,props:{},children:[{type:a,tag:f,props:{__ignoreMap:i},children:[{type:b,value:S}]}]}]},{type:a,tag:m,props:{id:T},children:[{type:b,value:U}]},{type:a,tag:e,props:{},children:[{type:b,value:x},{type:a,tag:d,props:{},children:[{type:b,value:aR}]},{type:b,value:aS}]},{type:a,tag:f,props:{code:V},children:[{type:a,tag:k,props:{},children:[{type:a,tag:f,props:{__ignoreMap:i},children:[{type:b,value:V}]}]}]},{type:a,tag:e,props:{},children:[{type:a,tag:o,props:{},children:[{type:b,value:z}]},{type:b,value:aT}]},{type:a,tag:f,props:{code:W},children:[{type:a,tag:k,props:{},children:[{type:a,tag:f,props:{__ignoreMap:i},children:[{type:b,value:W}]}]}]},{type:a,tag:e,props:{},children:[{type:b,value:aU},{type:a,tag:d,props:{},children:[{type:b,value:aV}]},{type:b,value:aW},{type:a,tag:d,props:{},children:[{type:b,value:aX}]},{type:b,value:aY}]},{type:a,tag:e,props:{},children:[{type:b,value:aZ},{type:a,tag:q,props:{href:a_,rel:[r]},children:[{type:b,value:a$}]},{type:b,value:ba}]}]},body:{type:_,children:[{type:a,tag:$,props:{id:E},children:[{type:b,value:F}]},{type:a,tag:e,props:{},children:[{type:b,value:aa},{type:a,tag:d,props:{},children:[{type:b,value:w}]},{type:b,value:j}]},{type:a,tag:f,props:{code:G},children:[{type:a,tag:k,props:{},children:[{type:a,tag:f,props:{__ignoreMap:i},children:[{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{},children:[{type:b,value:"TLS handshaking: SSL_accept() failed: error:14094412:SSL routines:ssl3_read_bytes:sslv3 alert bad certificate: SSL alert number 42"}]}]}]}]}]},{type:a,tag:e,props:{},children:[{type:b,value:ab}]},{type:a,tag:m,props:{id:H},children:[{type:b,value:I}]},{type:a,tag:e,props:{},children:[{type:b,value:x},{type:a,tag:d,props:{},children:[{type:b,value:ac}]},{type:b,value:ad},{type:a,tag:d,props:{},children:[{type:b,value:y}]},{type:b,value:ae},{type:a,tag:d,props:{},children:[{type:b,value:w}]},{type:b,value:af},{type:a,tag:d,props:{},children:[{type:b,value:ag}]},{type:b,value:n}]},{type:a,tag:e,props:{},children:[{type:b,value:ah},{type:a,tag:d,props:{},children:[{type:b,value:ai}]},{type:b,value:aj},{type:a,tag:d,props:{},children:[{type:b,value:ak}]},{type:b,value:al},{type:a,tag:d,props:{},children:[{type:b,value:am}]}]},{type:a,tag:e,props:{},children:[{type:a,tag:o,props:{},children:[{type:b,value:z}]},{type:b,value:j}]},{type:a,tag:e,props:{},children:[{type:b,value:an}]},{type:a,tag:ao,props:{},children:[{type:a,tag:p,props:{},children:[{type:a,tag:d,props:{},children:[{type:b,value:ap}]}]},{type:a,tag:p,props:{},children:[{type:a,tag:d,props:{},children:[{type:b,value:aq}]}]},{type:a,tag:p,props:{},children:[{type:a,tag:d,props:{},children:[{type:b,value:ar}]}]}]},{type:a,tag:e,props:{},children:[{type:b,value:as},{type:a,tag:d,props:{},children:[{type:b,value:at}]},{type:b,value:au},{type:a,tag:d,props:{},children:[{type:b,value:av}]},{type:b,value:aw},{type:a,tag:d,props:{},children:[{type:b,value:y}]},{type:b,value:n}]},{type:a,tag:e,props:{},children:[{type:b,value:A},{type:a,tag:q,props:{href:ax,rel:[r]},children:[{type:b,value:B}]},{type:b,value:ay}]},{type:a,tag:m,props:{id:J},children:[{type:b,value:K}]},{type:a,tag:e,props:{},children:[{type:b,value:az},{type:a,tag:d,props:{},children:[{type:b,value:aA}]},{type:b,value:aB},{type:a,tag:d,props:{},children:[{type:b,value:L}]},{type:b,value:aC},{type:a,tag:d,props:{},children:[{type:b,value:aD}]},{type:b,value:n}]},{type:a,tag:e,props:{},children:[{type:a,tag:o,props:{},children:[{type:b,value:aE}]},{type:b,value:aF}]},{type:a,tag:m,props:{id:M},children:[{type:b,value:N}]},{type:a,tag:e,props:{},children:[{type:b,value:aG}]},{type:a,tag:f,props:{code:O,language:s},children:[{type:a,tag:k,props:{},children:[{type:a,tag:f,props:{__ignoreMap:i},children:[{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:g},children:[{type:b,value:u}]},{type:a,tag:c,props:{class:l},children:[{type:b,value:"ports"}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:j}]}]},{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:g},children:[{type:b,value:bb}]},{type:a,tag:c,props:{class:t},children:[{type:b,value:"\"25:25\""}]}]}]}]}]},{type:a,tag:e,props:{},children:[{type:b,value:A},{type:a,tag:q,props:{href:aH,rel:[r]},children:[{type:b,value:B}]},{type:b,value:aI}]},{type:a,tag:m,props:{id:P},children:[{type:b,value:Q}]},{type:a,tag:e,props:{},children:[{type:b,value:aJ},{type:a,tag:d,props:{},children:[{type:b,value:aK}]},{type:b,value:aL},{type:a,tag:d,props:{},children:[{type:b,value:aM}]},{type:b,value:aN},{type:a,tag:d,props:{},children:[{type:b,value:aO}]},{type:b,value:aP},{type:a,tag:d,props:{},children:[{type:b,value:aQ}]},{type:b,value:n}]},{type:a,tag:f,props:{code:R,language:s},children:[{type:a,tag:k,props:{},children:[{type:a,tag:f,props:{__ignoreMap:i},children:[{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:t},children:[{type:b,value:"\u002F\u002F application\u002Fcompose.yaml"}]}]},{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:l},children:[{type:b,value:"app"}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:j}]}]},{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:g},children:[{type:b,value:u}]},{type:a,tag:c,props:{class:l},children:[{type:b,value:C}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:j}]}]},{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:g},children:[{type:b,value:bb}]},{type:a,tag:c,props:{class:t},children:[{type:b,value:bc}]}]},{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:l},children:[{type:b,value:C}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:j}]}]},{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:g},children:[{type:b,value:u}]},{type:a,tag:c,props:{class:l},children:[{type:b,value:bc}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:j}]}]},{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:g},children:[{type:b,value:bd}]},{type:a,tag:c,props:{class:l},children:[{type:b,value:"driver"}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:be}]},{type:a,tag:c,props:{class:t},children:[{type:b,value:"bridge"}]}]}]}]}]},{type:a,tag:f,props:{code:S,language:s},children:[{type:a,tag:k,props:{},children:[{type:a,tag:f,props:{__ignoreMap:i},children:[{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:t},children:[{type:b,value:"\u002F\u002F\u002F mailserver\u002Fcompose.yaml"}]}]},{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:l},children:[{type:b,value:L}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:j}]}]},{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:g},children:[{type:b,value:u}]},{type:a,tag:c,props:{class:l},children:[{type:b,value:C}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:j}]}]},{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:g},children:[{type:b,value:" - "}]},{type:a,tag:c,props:{class:t},children:[{type:b,value:"\"application_shared\""}]}]},{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:l},children:[{type:b,value:C}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:j}]}]},{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:g},children:[{type:b,value:u}]},{type:a,tag:c,props:{class:l},children:[{type:b,value:"application_shared"}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:j}]}]},{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:g},children:[{type:b,value:bd}]},{type:a,tag:c,props:{class:l},children:[{type:b,value:"external"}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:be}]},{type:a,tag:c,props:{class:"ct-c5561e"},children:[{type:b,value:"true"}]}]}]}]}]},{type:a,tag:m,props:{id:T},children:[{type:b,value:U}]},{type:a,tag:e,props:{},children:[{type:b,value:x},{type:a,tag:d,props:{},children:[{type:b,value:aR}]},{type:b,value:aS}]},{type:a,tag:f,props:{code:V},children:[{type:a,tag:k,props:{},children:[{type:a,tag:f,props:{__ignoreMap:i},children:[{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{},children:[{type:b,value:"mail._domainkey IN TXT ( \"v=DKIM1; h=sha256; k=rsa; \"\n \"p=sOmEJuNkLiKeRaNdOmOrLikeThat\"\n \"eVeNmOrERANdOmStuFf\" ) ; ----- DKIM key mail for example.com"}]}]}]}]}]},{type:a,tag:e,props:{},children:[{type:a,tag:o,props:{},children:[{type:b,value:z}]},{type:b,value:aT}]},{type:a,tag:f,props:{code:W},children:[{type:a,tag:k,props:{},children:[{type:a,tag:f,props:{__ignoreMap:i},children:[{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{},children:[{type:b,value:"v=DKIM1; h=sha256; k=rsa; p=sOmEJuNkLiKeRaNdOmOrLikeThateVeNmOrERANdOmStuFf"}]}]}]}]}]},{type:a,tag:e,props:{},children:[{type:b,value:aU},{type:a,tag:d,props:{},children:[{type:b,value:aV}]},{type:b,value:aW},{type:a,tag:d,props:{},children:[{type:b,value:aX}]},{type:b,value:aY}]},{type:a,tag:e,props:{},children:[{type:b,value:aZ},{type:a,tag:q,props:{href:a_,rel:[r]},children:[{type:b,value:a$}]},{type:b,value:ba}]},{type:a,tag:"style",children:[{type:b,value:".ct-c5561e{color:#79C0FF}.ct-5d2a12{color:#A5D6FF}.ct-da08ce{color:#7EE787}.ct-fe4aeb{color:#C9D1D9}.light .ct-fe4aeb{color:#657B83}.light .ct-da08ce{color:#268BD2}.light .ct-5d2a12{color:#2AA198}.light .ct-c5561e{color:#B58900}"}]}],toc:{title:i,searchDepth:X,depth:X,links:[{id:E,depth:X,text:F,children:[{id:H,depth:v,text:I},{id:J,depth:v,text:K},{id:M,depth:v,text:N},{id:P,depth:v,text:Q},{id:T,depth:v,text:U}]}]}},_type:"markdown",_id:"content:Docker:Common things with docker-mailserver.md",_source:"content",_file:"Docker\u002FCommon things with docker-mailserver.md",_extension:"md"}},prerenderedAt:1703697990898}}("element","text","span","code-inline","p","code","ct-fe4aeb","line","",":","pre","ct-da08ce","h3",".","strong","li","a","nofollow","yaml","ct-5d2a12"," ",3,"letsencrypt","My ","example.com","SOLUTION","This ","ticket","networks",false,"1-docker-mailserver-ssl-alert-number-42","1. docker-mailserver SSL alert number 42","TLS handshaking: SSL_accept() failed: error:14094412:SSL routines:ssl3_read_bytes:sslv3 alert bad certificate: SSL alert number 42\n","11-letsencrypt-and-wildcard-domains","1.1. Letsencrypt and wildcard domains","12-docker-was-using-internal-hostname-of-docker-mailserver","1.2. Docker was using internal hostname of docker-mailserver","mail","2-docker-mailserver-not-listening-on-25-port-smtp","2. docker-mailserver not listening on 25 port (SMTP)"," ports:\n - \"25:25\"\n","3-connect-to-docker-mailserver-from-other-docker-compose","3. Connect to docker-mailserver from other docker-compose","\u002F\u002F application\u002Fcompose.yaml\napp:\n networks:\n - shared\nnetworks:\n shared:\n driver: bridge\n","\u002F\u002F\u002F mailserver\u002Fcompose.yaml\nmail:\n networks:\n - \"application_shared\"\nnetworks:\n application_shared:\n external: true\n","4-how-to-convert-dkim-mailtxt-to-dns-record","4. How to convert DKIM mail.txt to DNS record","mail._domainkey IN TXT ( \"v=DKIM1; h=sha256; k=rsa; \"\n \"p=sOmEJuNkLiKeRaNdOmOrLikeThat\"\n \"eVeNmOrERANdOmStuFf\" ) ; ----- DKIM key mail for example.com\n","v=DKIM1; h=sha256; k=rsa; p=sOmEJuNkLiKeRaNdOmOrLikeThateVeNmOrERANdOmStuFf\n",2,"Common Things With Docker Mailserver","\u002Fdocker\u002Fcommon-things-with-docker-mailserver","root","h2","I was getting following error after setting up TLS certificates in docker-mailserver after setting it up with ","The problem was caused by two reasons","MX"," domain was ",", bu "," have been set up with wildcard certificate on ","*.example.com","So, specifying ","SSL_MODE=letsencrypt"," made it searching for ","\u002Fetc\u002Fletsencrypt\u002Fmail.example.com",", when it was just ","\u002Fetc\u002Fletsencrypt\u002Fexample.com","Change .env file to:","ul","SSL_MODE=manual","SSL_KEY_PATH=\u002Fetc\u002Fletsencrypt\u002Fexample.com\u002Ffullchain.pem","SSL_KEY_PATH=\u002Fetc\u002Fletsencrypt\u002Fexample.com\u002Fprivkey.pem","Don't forget to modify ","docker-compose"," volumes and pass certs from host filesystem. Note: they're not ","mail.example.com",", they're just ","https:\u002F\u002Fgithub.com\u002Fdocker-mailserver\u002Fdocker-mailserver\u002Fissues\u002F1607"," describes it well.","Internal hostname for ","docker-mailserver"," was just ",", and other container tried to send emails to ","mail:25","SOLUTION:"," change internal hostname in your app settings to actual, specified in your certificates and MX record.","Solution was to add quotes in your docker compose, just like that:","https:\u002F\u002Fgithub.com\u002Fdocker-mailserver\u002Fdocker-mailserver\u002Fissues\u002F684#issuecomment-322029794"," solved it","I've had ","mailserver\u002Fcompose.yaml"," and ","application\u002Fcompose.yaml"," and needed to connect ","application"," to ","mailserver","mail.txt"," was like:",": concatenate all strings inside round brackets:","And add them as a ","TXT"," record on my DNS provider control panel under ","mail._domainkey"," record.","Solution was right in ","https:\u002F\u002Fdocker-mailserver.github.io\u002Fdocker-mailserver\u002Fedge\u002Fconfig\u002Fbest-practices\u002Fdkim_dmarc_spf\u002F#dkim-dns","official documentation",", just hidden a little bit."," - ","shared"," ",": "))
\ No newline at end of file
diff --git a/docs/docker/common-things-with-docker-mailserver/index.html b/docs/docker/common-things-with-docker-mailserver/index.html
new file mode 100644
index 0000000..a3525a4
--- /dev/null
+++ b/docs/docker/common-things-with-docker-mailserver/index.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html data-head-attrs="">
+<head><title>Common Things With Docker Mailserver • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="head:count" content="2"><link rel="modulepreload" href="/docker/common-things-with-docker-mailserver/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseH2.d950f051.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCodeInline.d9bcf614.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseH3.462e5228.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseStrong.e968ffe9.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseUl.b892d423.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseLi.a224f663.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseA.c52e44f8.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
+</script></head>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a aria-current="page" href="/docker/common-things-with-docker-mailserver" class="router-link-active _active_192pu_81 _link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Common Things With Docker Mailserver</h1><article><div><h2 id="1-docker-mailserver-ssl-alert-number-42"><a href="#1-docker-mailserver-ssl-alert-number-42"><!--[-->1. docker-mailserver SSL alert number 42<!--]--></a></h2><p><!--[-->I was getting following error after setting up TLS certificates in docker-mailserver after setting it up with <code><!--[-->letsencrypt<!--]--></code>:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><!----></button><!--[--><pre><code><span class="line"><span>TLS handshaking: SSL_accept() failed: error:14094412:SSL routines:ssl3_read_bytes:sslv3 alert bad certificate: SSL alert number 42</span></span></code></pre><!--]--></div><p><!--[-->The problem was caused by two reasons<!--]--></p><h3 id="11-letsencrypt-and-wildcard-domains"><a href="#11-letsencrypt-and-wildcard-domains"><!--[-->1.1. Letsencrypt and wildcard domains<!--]--></a></h3><p><!--[-->My <code><!--[-->MX<!--]--></code> domain was <code><!--[-->example.com<!--]--></code>, bu <code><!--[-->letsencrypt<!--]--></code> have been set up with wildcard certificate on <code><!--[-->*.example.com<!--]--></code>.<!--]--></p><p><!--[-->So, specifying <code><!--[-->SSL_MODE=letsencrypt<!--]--></code> made it searching for <code><!--[-->/etc/letsencrypt/mail.example.com<!--]--></code>, when it was just <code><!--[-->/etc/letsencrypt/example.com<!--]--></code><!--]--></p><p><!--[--><strong><!--[-->SOLUTION<!--]--></strong>:<!--]--></p><p><!--[-->Change .env file to:<!--]--></p><ul><!--[--><li><!--[--><code><!--[-->SSL_MODE=manual<!--]--></code><!--]--></li><li><!--[--><code><!--[-->SSL_KEY_PATH=/etc/letsencrypt/example.com/fullchain.pem<!--]--></code><!--]--></li><li><!--[--><code><!--[-->SSL_KEY_PATH=/etc/letsencrypt/example.com/privkey.pem<!--]--></code><!--]--></li><!--]--></ul><p><!--[-->Don't forget to modify <code><!--[-->docker-compose<!--]--></code> volumes and pass certs from host filesystem. Note: they're not <code><!--[-->mail.example.com<!--]--></code>, they're just <code><!--[-->example.com<!--]--></code>.<!--]--></p><p><!--[-->This <a href="https://github.com/docker-mailserver/docker-mailserver/issues/1607" rel="nofollow" target="_blank"><!--[-->ticket<!--]--></a> describes it well.<!--]--></p><h3 id="12-docker-was-using-internal-hostname-of-docker-mailserver"><a href="#12-docker-was-using-internal-hostname-of-docker-mailserver"><!--[-->1.2. Docker was using internal hostname of docker-mailserver<!--]--></a></h3><p><!--[-->Internal hostname for <code><!--[-->docker-mailserver<!--]--></code> was just <code><!--[-->mail<!--]--></code>, and other container tried to send emails to <code><!--[-->mail:25<!--]--></code>.<!--]--></p><p><!--[--><strong><!--[-->SOLUTION:<!--]--></strong> change internal hostname in your app settings to actual, specified in your certificates and MX record.<!--]--></p><h3 id="2-docker-mailserver-not-listening-on-25-port-smtp"><a href="#2-docker-mailserver-not-listening-on-25-port-smtp"><!--[-->2. docker-mailserver not listening on 25 port (SMTP)<!--]--></a></h3><p><!--[-->Solution was to add quotes in your docker compose, just like that:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>yaml</span></button><!--[--><pre><code><span class="line"><span class="ct-fe4aeb"> </span><span class="ct-da08ce">ports</span><span class="ct-fe4aeb">:</span></span><span class="line"><span class="ct-fe4aeb"> - </span><span class="ct-5d2a12">"25:25"</span></span></code></pre><!--]--></div><p><!--[-->This <a href="https://github.com/docker-mailserver/docker-mailserver/issues/684#issuecomment-322029794" rel="nofollow" target="_blank"><!--[-->ticket<!--]--></a> solved it<!--]--></p><h3 id="3-connect-to-docker-mailserver-from-other-docker-compose"><a href="#3-connect-to-docker-mailserver-from-other-docker-compose"><!--[-->3. Connect to docker-mailserver from other docker-compose<!--]--></a></h3><p><!--[-->I've had <code><!--[-->mailserver/compose.yaml<!--]--></code> and <code><!--[-->application/compose.yaml<!--]--></code> and needed to connect <code><!--[-->application<!--]--></code> to <code><!--[-->mailserver<!--]--></code>.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>yaml</span></button><!--[--><pre><code><span class="line"><span class="ct-5d2a12">// application/compose.yaml</span></span><span class="line"><span class="ct-da08ce">app</span><span class="ct-fe4aeb">:</span></span><span class="line"><span class="ct-fe4aeb"> </span><span class="ct-da08ce">networks</span><span class="ct-fe4aeb">:</span></span><span class="line"><span class="ct-fe4aeb"> - </span><span class="ct-5d2a12">shared</span></span><span class="line"><span class="ct-da08ce">networks</span><span class="ct-fe4aeb">:</span></span><span class="line"><span class="ct-fe4aeb"> </span><span class="ct-da08ce">shared</span><span class="ct-fe4aeb">:</span></span><span class="line"><span class="ct-fe4aeb"> </span><span class="ct-da08ce">driver</span><span class="ct-fe4aeb">: </span><span class="ct-5d2a12">bridge</span></span></code></pre><!--]--></div><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>yaml</span></button><!--[--><pre><code><span class="line"><span class="ct-5d2a12">/// mailserver/compose.yaml</span></span><span class="line"><span class="ct-da08ce">mail</span><span class="ct-fe4aeb">:</span></span><span class="line"><span class="ct-fe4aeb"> </span><span class="ct-da08ce">networks</span><span class="ct-fe4aeb">:</span></span><span class="line"><span class="ct-fe4aeb"> - </span><span class="ct-5d2a12">"application_shared"</span></span><span class="line"><span class="ct-da08ce">networks</span><span class="ct-fe4aeb">:</span></span><span class="line"><span class="ct-fe4aeb"> </span><span class="ct-da08ce">application_shared</span><span class="ct-fe4aeb">:</span></span><span class="line"><span class="ct-fe4aeb"> </span><span class="ct-da08ce">external</span><span class="ct-fe4aeb">: </span><span class="ct-c5561e">true</span></span></code></pre><!--]--></div><h3 id="4-how-to-convert-dkim-mailtxt-to-dns-record"><a href="#4-how-to-convert-dkim-mailtxt-to-dns-record"><!--[-->4. How to convert DKIM mail.txt to DNS record<!--]--></a></h3><p><!--[-->My <code><!--[-->mail.txt<!--]--></code> was like:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><!----></button><!--[--><pre><code><span class="line"><span>mail._domainkey IN TXT ( "v=DKIM1; h=sha256; k=rsa; "
+ "p=sOmEJuNkLiKeRaNdOmOrLikeThat"
+ "eVeNmOrERANdOmStuFf" ) ; ----- DKIM key mail for example.com</span></span></code></pre><!--]--></div><p><!--[--><strong><!--[-->SOLUTION<!--]--></strong>: concatenate all strings inside round brackets:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><!----></button><!--[--><pre><code><span class="line"><span>v=DKIM1; h=sha256; k=rsa; p=sOmEJuNkLiKeRaNdOmOrLikeThateVeNmOrERANdOmStuFf</span></span></code></pre><!--]--></div><p><!--[-->And add them as a <code><!--[-->TXT<!--]--></code> record on my DNS provider control panel under <code><!--[-->mail._domainkey<!--]--></code> record.<!--]--></p><p><!--[-->Solution was right in <a href="https://docker-mailserver.github.io/docker-mailserver/edge/config/best-practices/dkim_dmarc_spf/#dkim-dns" rel="nofollow" target="_blank"><!--[-->official documentation<!--]--></a>, just hidden a little bit.<!--]--></p><style>.ct-c5561e{color:#79C0FF}.ct-5d2a12{color:#A5D6FF}.ct-da08ce{color:#7EE787}.ct-fe4aeb{color:#C9D1D9}.light .ct-fe4aeb{color:#657B83}.light .ct-da08ce{color:#268BD2}.light .ct-5d2a12{color:#2AA198}.light .ct-c5561e{color:#B58900}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/docker/common-things-with-docker-mailserver/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697990898}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script><script type="module" src="/nuxt/ProseH3.462e5228.js" crossorigin></script><script type="module" src="/nuxt/ProseStrong.e968ffe9.js" crossorigin></script><script type="module" src="/nuxt/ProseUl.b892d423.js" crossorigin></script><script type="module" src="/nuxt/ProseLi.a224f663.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script></body>
+</html>
\ No newline at end of file
diff --git a/docs/docker/drone-ci/_payload.js b/docs/docker/drone-ci/_payload.js
index 0da3564..2760144 100644
--- a/docs/docker/drone-ci/_payload.js
+++ b/docs/docker/drone-ci/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av,aw,ax,ay,az,aA,aB,aC,aD,aE,aF,aG,aH,aI,aJ,aK,aL,aM,aN,aO,aP,aQ,aR,aS){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:_,_path:$},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-uFdiCIitkN":{_path:$,_dir:aa,_draft:F,_partial:F,_locale:"en",_empty:F,title:_,description:"Can be used with Private docker registry to deploy things using #docker.",excerpt:{type:ab,children:[{type:a,tag:n,props:{},children:[{type:b,value:ac},{type:a,tag:q,props:{href:w},children:[{type:b,value:ad}]},{type:b,value:ae}]},{type:a,tag:o,props:{id:G},children:[{type:b,value:H}]},{type:a,tag:n,props:{},children:[{type:b,value:af},{type:a,tag:h,props:{},children:[{type:b,value:I}]},{type:b,value:u},{type:a,tag:h,props:{},children:[{type:b,value:J}]},{type:b,value:u},{type:a,tag:h,props:{},children:[{type:b,value:K}]},{type:b,value:ag},{type:a,tag:ah,props:{},children:[{type:b,value:v}]},{type:b,value:ai},{type:a,tag:h,props:{},children:[{type:b,value:L}]},{type:b,value:aj},{type:a,tag:h,props:{},children:[{type:b,value:ak}]},{type:b,value:x}]},{type:a,tag:n,props:{},children:[{type:b,value:al},{type:a,tag:h,props:{},children:[{type:b,value:am}]},{type:b,value:an},{type:a,tag:q,props:{href:w},children:[{type:b,value:ao}]},{type:b,value:i}]},{type:a,tag:k,props:{code:M,language:y},children:[{type:a,tag:r,props:{},children:[{type:a,tag:k,props:{__ignoreMap:p},children:[{type:b,value:M}]}]}]},{type:a,tag:o,props:{id:N},children:[{type:b,value:O}]},{type:a,tag:n,props:{},children:[{type:b,value:ap},{type:a,tag:h,props:{},children:[{type:b,value:v}]},{type:b,value:aq},{type:a,tag:h,props:{},children:[{type:b,value:P}]},{type:b,value:ar}]},{type:a,tag:n,props:{},children:[{type:b,value:as},{type:a,tag:h,props:{},children:[{type:b,value:at}]},{type:b,value:u},{type:a,tag:h,props:{},children:[{type:b,value:au}]},{type:b,value:av},{type:a,tag:h,props:{},children:[{type:b,value:aw}]},{type:b,value:ax}]},{type:a,tag:k,props:{code:Q,language:y},children:[{type:a,tag:r,props:{},children:[{type:a,tag:k,props:{__ignoreMap:p},children:[{type:b,value:Q}]}]}]},{type:a,tag:o,props:{id:R},children:[{type:b,value:S}]},{type:a,tag:n,props:{},children:[{type:b,value:ay},{type:a,tag:q,props:{href:az,rel:[z]},children:[{type:b,value:aA}]},{type:b,value:aB},{type:a,tag:q,props:{href:aC,rel:[z]},children:[{type:b,value:aD}]},{type:b,value:aE}]},{type:a,tag:o,props:{id:T},children:[{type:b,value:U}]},{type:a,tag:k,props:{code:V,language:A},children:[{type:a,tag:r,props:{},children:[{type:a,tag:k,props:{__ignoreMap:p},children:[{type:b,value:V}]}]}]},{type:a,tag:o,props:{id:W},children:[{type:b,value:X}]},{type:a,tag:n,props:{},children:[{type:b,value:aF},{type:a,tag:h,props:{},children:[{type:b,value:B}]},{type:b,value:x}]},{type:a,tag:k,props:{code:Y,language:A},children:[{type:a,tag:r,props:{},children:[{type:a,tag:k,props:{__ignoreMap:p},children:[{type:b,value:Y}]}]}]}]},body:{type:ab,children:[{type:a,tag:n,props:{},children:[{type:b,value:ac},{type:a,tag:q,props:{href:w},children:[{type:b,value:ad}]},{type:b,value:ae}]},{type:a,tag:o,props:{id:G},children:[{type:b,value:H}]},{type:a,tag:n,props:{},children:[{type:b,value:af},{type:a,tag:h,props:{},children:[{type:b,value:I}]},{type:b,value:u},{type:a,tag:h,props:{},children:[{type:b,value:J}]},{type:b,value:u},{type:a,tag:h,props:{},children:[{type:b,value:K}]},{type:b,value:ag},{type:a,tag:ah,props:{},children:[{type:b,value:v}]},{type:b,value:ai},{type:a,tag:h,props:{},children:[{type:b,value:L}]},{type:b,value:aj},{type:a,tag:h,props:{},children:[{type:b,value:ak}]},{type:b,value:x}]},{type:a,tag:n,props:{},children:[{type:b,value:al},{type:a,tag:h,props:{},children:[{type:b,value:am}]},{type:b,value:an},{type:a,tag:q,props:{href:w},children:[{type:b,value:ao}]},{type:b,value:i}]},{type:a,tag:k,props:{code:M,language:y},children:[{type:a,tag:r,props:{},children:[{type:a,tag:k,props:{__ignoreMap:p},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:f},children:[{type:b,value:"kind"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"pipeline"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:f},children:[{type:b,value:aG}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"build"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:f},children:[{type:b,value:"type"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:aa}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:f},children:[{type:b,value:"platform"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:C}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"os"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"linux"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:C}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"arch"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"amd64"}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:f},children:[{type:b,value:"steps"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" - "}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:aG}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"build-master"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:Z}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"plugins\u002Fdocker"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"when"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:s}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"branch"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:aH}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"master"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"settings"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:s}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"dockerfile"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"Dockerfile"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:s}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"tag"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:aH}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"${DRONE_BRANCH}"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:s}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"username"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:D}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:E}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:I}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:s}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"password"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:D}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:E}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:J}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:s}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"registry"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:D}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:E}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:K}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:s}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"repo"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:D}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:E}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:L}]}]}]}]}]},{type:a,tag:o,props:{id:N},children:[{type:b,value:O}]},{type:a,tag:n,props:{},children:[{type:b,value:ap},{type:a,tag:h,props:{},children:[{type:b,value:v}]},{type:b,value:aq},{type:a,tag:h,props:{},children:[{type:b,value:P}]},{type:b,value:ar}]},{type:a,tag:n,props:{},children:[{type:b,value:as},{type:a,tag:h,props:{},children:[{type:b,value:at}]},{type:b,value:u},{type:a,tag:h,props:{},children:[{type:b,value:au}]},{type:b,value:av},{type:a,tag:h,props:{},children:[{type:b,value:aw}]},{type:b,value:ax}]},{type:a,tag:k,props:{code:Q,language:y},children:[{type:a,tag:r,props:{},children:[{type:a,tag:k,props:{__ignoreMap:p},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:f},children:[{type:b,value:"version"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\"3\""}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:f},children:[{type:b,value:"services"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:C}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:v}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:aI}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:v}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:Z}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"drone\u002Fdrone:latest"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:aJ}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"DRONE_GITHUB_CLIENT_ID=secret_id"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"DRONE_GITHUB_CLIENT_SECRET=client_secret"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:aK}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"DRONE_SERVER_HOST=drone.url"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"DRONE_USER_CREATE=\"username:user,admin:true\""}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"DRONE_SERVER_PROTO=https"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"DRONE_TLS_AUTOCERT=false"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"DRONE_GIT_ALWAYS_AUTH=false"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"DRONE_LOGS_DEBUG=true"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"DRONE_LOGS_TRACE=true"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:aL}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:aM}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:aN}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:".\u002Fdata:\u002Fdata"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"ports"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"8090:80"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:C}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:P}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:aI}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"drone__agent"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:Z}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"drone\u002Fagent:latest"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"command"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"agent"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:aL}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:aM}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:aN}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\u002Fvar\u002Frun\u002Fdocker.sock:\u002Fvar\u002Frun\u002Fdocker.sock"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:aJ}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"DRONE_RPC_SERVER=https:\u002F\u002Fdrone.url"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:aK}]}]}]}]}]},{type:a,tag:o,props:{id:R},children:[{type:b,value:S}]},{type:a,tag:n,props:{},children:[{type:b,value:ay},{type:a,tag:q,props:{href:az,rel:[z]},children:[{type:b,value:aA}]},{type:b,value:aB},{type:a,tag:q,props:{href:aC,rel:[z]},children:[{type:b,value:aD}]},{type:b,value:aE}]},{type:a,tag:o,props:{id:T},children:[{type:b,value:U}]},{type:a,tag:k,props:{code:V,language:A},children:[{type:a,tag:r,props:{},children:[{type:a,tag:k,props:{__ignoreMap:p},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:aO},children:[{type:b,value:aP}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" DRONE_SERVER=https:\u002F\u002Fdrone.url"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:aO},children:[{type:b,value:aP}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" DRONE_TOKEN=password"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"drone info"}]}]}]}]}]},{type:a,tag:o,props:{id:W},children:[{type:b,value:X}]},{type:a,tag:n,props:{},children:[{type:b,value:aF},{type:a,tag:h,props:{},children:[{type:b,value:B}]},{type:b,value:x}]},{type:a,tag:k,props:{code:Y,language:A},children:[{type:a,tag:r,props:{},children:[{type:a,tag:k,props:{__ignoreMap:p},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"drone repo update "}]},{type:a,tag:c,props:{class:aQ},children:[{type:b,value:aR}]},{type:a,tag:c,props:{class:aS},children:[{type:b,value:B}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" --trusted=true "}]},{type:a,tag:c,props:{class:"ct-512f70"},children:[{type:b,value:"&&"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" drone repo info "}]},{type:a,tag:c,props:{class:aQ},children:[{type:b,value:aR}]},{type:a,tag:c,props:{class:aS},children:[{type:b,value:B}]}]}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-512f70{color:#FF7B72}.ct-c3cfa5{color:#C9D1D9}.ct-bba773{color:#C9D1D9}.ct-f8e52f{color:#FF7B72}.ct-e7e4f6{color:#A5D6FF}.ct-ead287{color:#C9D1D9}.ct-5001cf{color:#7EE787}.light .ct-5001cf{color:#268BD2}.light .ct-ead287{color:#657B83}.light .ct-e7e4f6{color:#2AA198}.light .ct-f8e52f{color:#073642}.light .ct-bba773{color:#859900}.light .ct-c3cfa5{color:#268BD2}.light .ct-512f70{color:#859900}"}]}],toc:{title:p,searchDepth:t,depth:t,links:[{id:G,depth:t,text:H},{id:N,depth:t,text:O},{id:R,depth:t,text:S},{id:T,depth:t,text:U},{id:W,depth:t,text:X}]}},_type:"markdown",_id:"content:Docker:Drone-ci.md",_source:"content",_file:"Docker\u002FDrone-ci.md",_extension:"md"}},prerenderedAt:1703695529856}}("element","text","span","ct-ead287","line","ct-5001cf","ct-e7e4f6","code-inline",":",": ","code"," "," - ","p","h2","","a","pre"," ",2,", ","drone","Private%20docker%20registry",".","yaml","nofollow","shell","1"," "," ","from_secret",false,"pushing-to-private-docker_registry","Pushing to private docker_registry","global_docker_login","global_docker_password","global_docker_registry","docker_repo","kind: pipeline\nname: build\ntype: docker\n\nplatform:\n os: linux\n arch: amd64\n\nsteps:\n - name: build-master\n image: plugins\u002Fdocker\n when:\n branch:\n - master\n settings:\n dockerfile: Dockerfile\n tag:\n - ${DRONE_BRANCH}\n username:\n from_secret: global_docker_login\n password:\n from_secret: global_docker_password\n registry:\n from_secret: global_docker_registry\n repo:\n from_secret: docker_repo\n","docker-compose-file-for-drone-ci","Docker-compose file for drone-ci","drone-agent","version: \"3\"\n\nservices:\n drone:\n container_name: drone\n image: drone\u002Fdrone:latest\n environment:\n - DRONE_GITHUB_CLIENT_ID=secret_id\n - DRONE_GITHUB_CLIENT_SECRET=client_secret\n - DRONE_RPC_SECRET=rpc_secret\n - DRONE_SERVER_HOST=drone.url\n - DRONE_USER_CREATE=\"username:user,admin:true\"\n - DRONE_SERVER_PROTO=https\n - DRONE_TLS_AUTOCERT=false\n - DRONE_GIT_ALWAYS_AUTH=false\n - DRONE_LOGS_DEBUG=true\n - DRONE_LOGS_TRACE=true\n restart: always\n volumes:\n - .\u002Fdata:\u002Fdata\n ports:\n - 8090:80\n drone-agent:\n container_name: drone__agent\n image: drone\u002Fagent:latest\n command: agent\n restart: always\n volumes:\n - \u002Fvar\u002Frun\u002Fdocker.sock:\u002Fvar\u002Frun\u002Fdocker.sock\n environment:\n - DRONE_RPC_SERVER=https:\u002F\u002Fdrone.url\n - DRONE_RPC_SECRET=rpc_secret\n","caching-builds","Caching builds","get-user-info","Get user info","export DRONE_SERVER=https:\u002F\u002Fdrone.url\nexport DRONE_TOKEN=password\ndrone info\n","mark-user-as-trusted","Mark user as trusted","drone repo update $1 --trusted=true && drone repo info $1\n","image","Drone Ci","\u002Fdocker\u002Fdrone-ci","docker","root","Can be used with ","Private docker registry"," to deploy things using #docker.","You should specify "," organizations variables in your ","strong",". And "," variable for your repo as ","docker.yourdomain.com\u002Fyour-image","This is example of ",".droneci"," for ","private docker registry","The "," service is ui itself and "," is runner for builds, that can be started on different machine (or machines).","Change ","secret_id","rpc_secret"," and ","drone.url"," to something you like.","Haven't checked that yet, but there's a ","https:\u002F\u002Flaszlo.cloud\u002Fthe-ultimate-droneci-caching-guide","manual"," from ","https:\u002F\u002Flaszlo.cloud\u002F","Laszlo Fogas"," about that.","Sometimes it won't help, then connect to drone database with sqlite and change user's trusted flag to ","name"," - ","container_name","environment","DRONE_RPC_SECRET=rpc_secret","restart","always","volumes","ct-f8e52f","export","ct-bba773","$","ct-c3cfa5"))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av,aw,ax,ay,az,aA,aB,aC,aD,aE,aF,aG,aH,aI,aJ,aK,aL,aM,aN,aO,aP,aQ,aR,aS){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:_,_path:$},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-uFdiCIitkN":{_path:$,_dir:aa,_draft:F,_partial:F,_locale:"en",_empty:F,title:_,description:"Can be used with Private docker registry to deploy things using #docker.",excerpt:{type:ab,children:[{type:a,tag:n,props:{},children:[{type:b,value:ac},{type:a,tag:q,props:{href:w},children:[{type:b,value:ad}]},{type:b,value:ae}]},{type:a,tag:o,props:{id:G},children:[{type:b,value:H}]},{type:a,tag:n,props:{},children:[{type:b,value:af},{type:a,tag:h,props:{},children:[{type:b,value:I}]},{type:b,value:u},{type:a,tag:h,props:{},children:[{type:b,value:J}]},{type:b,value:u},{type:a,tag:h,props:{},children:[{type:b,value:K}]},{type:b,value:ag},{type:a,tag:ah,props:{},children:[{type:b,value:v}]},{type:b,value:ai},{type:a,tag:h,props:{},children:[{type:b,value:L}]},{type:b,value:aj},{type:a,tag:h,props:{},children:[{type:b,value:ak}]},{type:b,value:x}]},{type:a,tag:n,props:{},children:[{type:b,value:al},{type:a,tag:h,props:{},children:[{type:b,value:am}]},{type:b,value:an},{type:a,tag:q,props:{href:w},children:[{type:b,value:ao}]},{type:b,value:i}]},{type:a,tag:k,props:{code:M,language:y},children:[{type:a,tag:r,props:{},children:[{type:a,tag:k,props:{__ignoreMap:p},children:[{type:b,value:M}]}]}]},{type:a,tag:o,props:{id:N},children:[{type:b,value:O}]},{type:a,tag:n,props:{},children:[{type:b,value:ap},{type:a,tag:h,props:{},children:[{type:b,value:v}]},{type:b,value:aq},{type:a,tag:h,props:{},children:[{type:b,value:P}]},{type:b,value:ar}]},{type:a,tag:n,props:{},children:[{type:b,value:as},{type:a,tag:h,props:{},children:[{type:b,value:at}]},{type:b,value:u},{type:a,tag:h,props:{},children:[{type:b,value:au}]},{type:b,value:av},{type:a,tag:h,props:{},children:[{type:b,value:aw}]},{type:b,value:ax}]},{type:a,tag:k,props:{code:Q,language:y},children:[{type:a,tag:r,props:{},children:[{type:a,tag:k,props:{__ignoreMap:p},children:[{type:b,value:Q}]}]}]},{type:a,tag:o,props:{id:R},children:[{type:b,value:S}]},{type:a,tag:n,props:{},children:[{type:b,value:ay},{type:a,tag:q,props:{href:az,rel:[z]},children:[{type:b,value:aA}]},{type:b,value:aB},{type:a,tag:q,props:{href:aC,rel:[z]},children:[{type:b,value:aD}]},{type:b,value:aE}]},{type:a,tag:o,props:{id:T},children:[{type:b,value:U}]},{type:a,tag:k,props:{code:V,language:A},children:[{type:a,tag:r,props:{},children:[{type:a,tag:k,props:{__ignoreMap:p},children:[{type:b,value:V}]}]}]},{type:a,tag:o,props:{id:W},children:[{type:b,value:X}]},{type:a,tag:n,props:{},children:[{type:b,value:aF},{type:a,tag:h,props:{},children:[{type:b,value:B}]},{type:b,value:x}]},{type:a,tag:k,props:{code:Y,language:A},children:[{type:a,tag:r,props:{},children:[{type:a,tag:k,props:{__ignoreMap:p},children:[{type:b,value:Y}]}]}]}]},body:{type:ab,children:[{type:a,tag:n,props:{},children:[{type:b,value:ac},{type:a,tag:q,props:{href:w},children:[{type:b,value:ad}]},{type:b,value:ae}]},{type:a,tag:o,props:{id:G},children:[{type:b,value:H}]},{type:a,tag:n,props:{},children:[{type:b,value:af},{type:a,tag:h,props:{},children:[{type:b,value:I}]},{type:b,value:u},{type:a,tag:h,props:{},children:[{type:b,value:J}]},{type:b,value:u},{type:a,tag:h,props:{},children:[{type:b,value:K}]},{type:b,value:ag},{type:a,tag:ah,props:{},children:[{type:b,value:v}]},{type:b,value:ai},{type:a,tag:h,props:{},children:[{type:b,value:L}]},{type:b,value:aj},{type:a,tag:h,props:{},children:[{type:b,value:ak}]},{type:b,value:x}]},{type:a,tag:n,props:{},children:[{type:b,value:al},{type:a,tag:h,props:{},children:[{type:b,value:am}]},{type:b,value:an},{type:a,tag:q,props:{href:w},children:[{type:b,value:ao}]},{type:b,value:i}]},{type:a,tag:k,props:{code:M,language:y},children:[{type:a,tag:r,props:{},children:[{type:a,tag:k,props:{__ignoreMap:p},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:f},children:[{type:b,value:"kind"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"pipeline"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:f},children:[{type:b,value:aG}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"build"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:f},children:[{type:b,value:"type"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:aa}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:f},children:[{type:b,value:"platform"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:C}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"os"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"linux"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:C}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"arch"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"amd64"}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:f},children:[{type:b,value:"steps"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" - "}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:aG}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"build-master"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:Z}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"plugins\u002Fdocker"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"when"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:s}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"branch"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:aH}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"master"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"settings"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:s}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"dockerfile"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"Dockerfile"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:s}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"tag"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:aH}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"${DRONE_BRANCH}"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:s}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"username"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:D}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:E}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:I}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:s}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"password"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:D}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:E}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:J}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:s}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"registry"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:D}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:E}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:K}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:s}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"repo"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:D}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:E}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:L}]}]}]}]}]},{type:a,tag:o,props:{id:N},children:[{type:b,value:O}]},{type:a,tag:n,props:{},children:[{type:b,value:ap},{type:a,tag:h,props:{},children:[{type:b,value:v}]},{type:b,value:aq},{type:a,tag:h,props:{},children:[{type:b,value:P}]},{type:b,value:ar}]},{type:a,tag:n,props:{},children:[{type:b,value:as},{type:a,tag:h,props:{},children:[{type:b,value:at}]},{type:b,value:u},{type:a,tag:h,props:{},children:[{type:b,value:au}]},{type:b,value:av},{type:a,tag:h,props:{},children:[{type:b,value:aw}]},{type:b,value:ax}]},{type:a,tag:k,props:{code:Q,language:y},children:[{type:a,tag:r,props:{},children:[{type:a,tag:k,props:{__ignoreMap:p},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:f},children:[{type:b,value:"version"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\"3\""}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:f},children:[{type:b,value:"services"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:C}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:v}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:aI}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:v}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:Z}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"drone\u002Fdrone:latest"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:aJ}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"DRONE_GITHUB_CLIENT_ID=secret_id"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"DRONE_GITHUB_CLIENT_SECRET=client_secret"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:aK}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"DRONE_SERVER_HOST=drone.url"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"DRONE_USER_CREATE=\"username:user,admin:true\""}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"DRONE_SERVER_PROTO=https"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"DRONE_TLS_AUTOCERT=false"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"DRONE_GIT_ALWAYS_AUTH=false"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"DRONE_LOGS_DEBUG=true"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"DRONE_LOGS_TRACE=true"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:aL}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:aM}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:aN}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:".\u002Fdata:\u002Fdata"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"ports"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"8090:80"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:C}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:P}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:aI}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"drone__agent"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:Z}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"drone\u002Fagent:latest"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"command"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"agent"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:aL}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:aM}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:aN}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\u002Fvar\u002Frun\u002Fdocker.sock:\u002Fvar\u002Frun\u002Fdocker.sock"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:aJ}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"DRONE_RPC_SERVER=https:\u002F\u002Fdrone.url"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:aK}]}]}]}]}]},{type:a,tag:o,props:{id:R},children:[{type:b,value:S}]},{type:a,tag:n,props:{},children:[{type:b,value:ay},{type:a,tag:q,props:{href:az,rel:[z]},children:[{type:b,value:aA}]},{type:b,value:aB},{type:a,tag:q,props:{href:aC,rel:[z]},children:[{type:b,value:aD}]},{type:b,value:aE}]},{type:a,tag:o,props:{id:T},children:[{type:b,value:U}]},{type:a,tag:k,props:{code:V,language:A},children:[{type:a,tag:r,props:{},children:[{type:a,tag:k,props:{__ignoreMap:p},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:aO},children:[{type:b,value:aP}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" DRONE_SERVER=https:\u002F\u002Fdrone.url"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:aO},children:[{type:b,value:aP}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" DRONE_TOKEN=password"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"drone info"}]}]}]}]}]},{type:a,tag:o,props:{id:W},children:[{type:b,value:X}]},{type:a,tag:n,props:{},children:[{type:b,value:aF},{type:a,tag:h,props:{},children:[{type:b,value:B}]},{type:b,value:x}]},{type:a,tag:k,props:{code:Y,language:A},children:[{type:a,tag:r,props:{},children:[{type:a,tag:k,props:{__ignoreMap:p},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"drone repo update "}]},{type:a,tag:c,props:{class:aQ},children:[{type:b,value:aR}]},{type:a,tag:c,props:{class:aS},children:[{type:b,value:B}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" --trusted=true "}]},{type:a,tag:c,props:{class:"ct-ade66c"},children:[{type:b,value:"&&"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" drone repo info "}]},{type:a,tag:c,props:{class:aQ},children:[{type:b,value:aR}]},{type:a,tag:c,props:{class:aS},children:[{type:b,value:B}]}]}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-ade66c{color:#FF7B72}.ct-305369{color:#C9D1D9}.ct-84c07e{color:#C9D1D9}.ct-2ef772{color:#FF7B72}.ct-9adcae{color:#A5D6FF}.ct-dd895a{color:#C9D1D9}.ct-5897b9{color:#7EE787}.light .ct-5897b9{color:#268BD2}.light .ct-dd895a{color:#657B83}.light .ct-9adcae{color:#2AA198}.light .ct-2ef772{color:#073642}.light .ct-84c07e{color:#859900}.light .ct-305369{color:#268BD2}.light .ct-ade66c{color:#859900}"}]}],toc:{title:p,searchDepth:t,depth:t,links:[{id:G,depth:t,text:H},{id:N,depth:t,text:O},{id:R,depth:t,text:S},{id:T,depth:t,text:U},{id:W,depth:t,text:X}]}},_type:"markdown",_id:"content:Docker:Drone-ci.md",_source:"content",_file:"Docker\u002FDrone-ci.md",_extension:"md"}},prerenderedAt:1703697990979}}("element","text","span","ct-dd895a","line","ct-5897b9","ct-9adcae","code-inline",":",": ","code"," "," - ","p","h2","","a","pre"," ",2,", ","drone","Private%20docker%20registry",".","yaml","nofollow","shell","1"," "," ","from_secret",false,"pushing-to-private-docker_registry","Pushing to private docker_registry","global_docker_login","global_docker_password","global_docker_registry","docker_repo","kind: pipeline\nname: build\ntype: docker\n\nplatform:\n os: linux\n arch: amd64\n\nsteps:\n - name: build-master\n image: plugins\u002Fdocker\n when:\n branch:\n - master\n settings:\n dockerfile: Dockerfile\n tag:\n - ${DRONE_BRANCH}\n username:\n from_secret: global_docker_login\n password:\n from_secret: global_docker_password\n registry:\n from_secret: global_docker_registry\n repo:\n from_secret: docker_repo\n","docker-compose-file-for-drone-ci","Docker-compose file for drone-ci","drone-agent","version: \"3\"\n\nservices:\n drone:\n container_name: drone\n image: drone\u002Fdrone:latest\n environment:\n - DRONE_GITHUB_CLIENT_ID=secret_id\n - DRONE_GITHUB_CLIENT_SECRET=client_secret\n - DRONE_RPC_SECRET=rpc_secret\n - DRONE_SERVER_HOST=drone.url\n - DRONE_USER_CREATE=\"username:user,admin:true\"\n - DRONE_SERVER_PROTO=https\n - DRONE_TLS_AUTOCERT=false\n - DRONE_GIT_ALWAYS_AUTH=false\n - DRONE_LOGS_DEBUG=true\n - DRONE_LOGS_TRACE=true\n restart: always\n volumes:\n - .\u002Fdata:\u002Fdata\n ports:\n - 8090:80\n drone-agent:\n container_name: drone__agent\n image: drone\u002Fagent:latest\n command: agent\n restart: always\n volumes:\n - \u002Fvar\u002Frun\u002Fdocker.sock:\u002Fvar\u002Frun\u002Fdocker.sock\n environment:\n - DRONE_RPC_SERVER=https:\u002F\u002Fdrone.url\n - DRONE_RPC_SECRET=rpc_secret\n","caching-builds","Caching builds","get-user-info","Get user info","export DRONE_SERVER=https:\u002F\u002Fdrone.url\nexport DRONE_TOKEN=password\ndrone info\n","mark-user-as-trusted","Mark user as trusted","drone repo update $1 --trusted=true && drone repo info $1\n","image","Drone Ci","\u002Fdocker\u002Fdrone-ci","docker","root","Can be used with ","Private docker registry"," to deploy things using #docker.","You should specify "," organizations variables in your ","strong",". And "," variable for your repo as ","docker.yourdomain.com\u002Fyour-image","This is example of ",".droneci"," for ","private docker registry","The "," service is ui itself and "," is runner for builds, that can be started on different machine (or machines).","Change ","secret_id","rpc_secret"," and ","drone.url"," to something you like.","Haven't checked that yet, but there's a ","https:\u002F\u002Flaszlo.cloud\u002Fthe-ultimate-droneci-caching-guide","manual"," from ","https:\u002F\u002Flaszlo.cloud\u002F","Laszlo Fogas"," about that.","Sometimes it won't help, then connect to drone database with sqlite and change user's trusted flag to ","name"," - ","container_name","environment","DRONE_RPC_SECRET=rpc_secret","restart","always","volumes","ct-2ef772","export","ct-84c07e","$","ct-305369"))
\ No newline at end of file
diff --git a/docs/docker/drone-ci/index.html b/docs/docker/drone-ci/index.html
index 2d21fad..4b26d1b 100644
--- a/docs/docker/drone-ci/index.html
+++ b/docs/docker/drone-ci/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Drone Ci • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Can be used with Private docker registry to deploy things using #docker."><meta name="head:count" content="3"><link rel="modulepreload" href="/docker/drone-ci/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseA.c52e44f8.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseH2.d950f051.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCodeInline.d9bcf614.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseStrong.e968ffe9.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a aria-current="page" href="/docker/drone-ci" class="router-link-active _active_192pu_81 _link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Drone Ci</h1><article><div><p><!--[-->Can be used with <a href="/docker/private-docker-registry" class=""><!--[-->Private docker registry<!--]--></a> to deploy things using #docker.<!--]--></p><h2 id="pushing-to-private-docker_registry"><a href="#pushing-to-private-docker_registry"><!--[-->Pushing to private docker_registry<!--]--></a></h2><p><!--[-->You should specify <code><!--[-->global_docker_login<!--]--></code>, <code><!--[-->global_docker_password<!--]--></code>, <code><!--[-->global_docker_registry<!--]--></code> organizations variables in your <strong><!--[-->drone<!--]--></strong>. And <code><!--[-->docker_repo<!--]--></code> variable for your repo as <code><!--[-->docker.yourdomain.com/your-image<!--]--></code>.<!--]--></p><p><!--[-->This is example of <code><!--[-->.droneci<!--]--></code> for <a href="/docker/private-docker-registry" class=""><!--[-->private docker registry<!--]--></a>:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>yaml</span></button><!--[--><pre><code><span class="line"><span class="ct-5001cf">kind</span><span class="ct-ead287">: </span><span class="ct-e7e4f6">pipeline</span></span><span class="line"><span class="ct-5001cf">name</span><span class="ct-ead287">: </span><span class="ct-e7e4f6">build</span></span><span class="line"><span class="ct-5001cf">type</span><span class="ct-ead287">: </span><span class="ct-e7e4f6">docker</span></span><span class="line"></span><span class="line"><span class="ct-5001cf">platform</span><span class="ct-ead287">:</span></span><span class="line"><span class="ct-ead287"> </span><span class="ct-5001cf">os</span><span class="ct-ead287">: </span><span class="ct-e7e4f6">linux</span></span><span class="line"><span class="ct-ead287"> </span><span class="ct-5001cf">arch</span><span class="ct-ead287">: </span><span class="ct-e7e4f6">amd64</span></span><span class="line"></span><span class="line"><span class="ct-5001cf">steps</span><span class="ct-ead287">:</span></span><span class="line"><span class="ct-ead287"> - </span><span class="ct-5001cf">name</span><span class="ct-ead287">: </span><span class="ct-e7e4f6">build-master</span></span><span class="line"><span class="ct-ead287"> </span><span class="ct-5001cf">image</span><span class="ct-ead287">: </span><span class="ct-e7e4f6">plugins/docker</span></span><span class="line"><span class="ct-ead287"> </span><span class="ct-5001cf">when</span><span class="ct-ead287">:</span></span><span class="line"><span class="ct-ead287"> </span><span class="ct-5001cf">branch</span><span class="ct-ead287">:</span></span><span class="line"><span class="ct-ead287"> - </span><span class="ct-e7e4f6">master</span></span><span class="line"><span class="ct-ead287"> </span><span class="ct-5001cf">settings</span><span class="ct-ead287">:</span></span><span class="line"><span class="ct-ead287"> </span><span class="ct-5001cf">dockerfile</span><span class="ct-ead287">: </span><span class="ct-e7e4f6">Dockerfile</span></span><span class="line"><span class="ct-ead287"> </span><span class="ct-5001cf">tag</span><span class="ct-ead287">:</span></span><span class="line"><span class="ct-ead287"> - </span><span class="ct-e7e4f6">${DRONE_BRANCH}</span></span><span class="line"><span class="ct-ead287"> </span><span class="ct-5001cf">username</span><span class="ct-ead287">:</span></span><span class="line"><span class="ct-ead287"> </span><span class="ct-5001cf">from_secret</span><span class="ct-ead287">: </span><span class="ct-e7e4f6">global_docker_login</span></span><span class="line"><span class="ct-ead287"> </span><span class="ct-5001cf">password</span><span class="ct-ead287">:</span></span><span class="line"><span class="ct-ead287"> </span><span class="ct-5001cf">from_secret</span><span class="ct-ead287">: </span><span class="ct-e7e4f6">global_docker_password</span></span><span class="line"><span class="ct-ead287"> </span><span class="ct-5001cf">registry</span><span class="ct-ead287">:</span></span><span class="line"><span class="ct-ead287"> </span><span class="ct-5001cf">from_secret</span><span class="ct-ead287">: </span><span class="ct-e7e4f6">global_docker_registry</span></span><span class="line"><span class="ct-ead287"> </span><span class="ct-5001cf">repo</span><span class="ct-ead287">:</span></span><span class="line"><span class="ct-ead287"> </span><span class="ct-5001cf">from_secret</span><span class="ct-ead287">: </span><span class="ct-e7e4f6">docker_repo</span></span></code></pre><!--]--></div><h2 id="docker-compose-file-for-drone-ci"><a href="#docker-compose-file-for-drone-ci"><!--[-->Docker-compose file for drone-ci<!--]--></a></h2><p><!--[-->The <code><!--[-->drone<!--]--></code> service is ui itself and <code><!--[-->drone-agent<!--]--></code> is runner for builds, that can be started on different machine (or machines).<!--]--></p><p><!--[-->Change <code><!--[-->secret_id<!--]--></code>, <code><!--[-->rpc_secret<!--]--></code> and <code><!--[-->drone.url<!--]--></code> to something you like.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>yaml</span></button><!--[--><pre><code><span class="line"><span class="ct-5001cf">version</span><span class="ct-ead287">: </span><span class="ct-e7e4f6">"3"</span></span><span class="line"></span><span class="line"><span class="ct-5001cf">services</span><span class="ct-ead287">:</span></span><span class="line"><span class="ct-ead287"> </span><span class="ct-5001cf">drone</span><span class="ct-ead287">:</span></span><span class="line"><span class="ct-ead287"> </span><span class="ct-5001cf">container_name</span><span class="ct-ead287">: </span><span class="ct-e7e4f6">drone</span></span><span class="line"><span class="ct-ead287"> </span><span class="ct-5001cf">image</span><span class="ct-ead287">: </span><span class="ct-e7e4f6">drone/drone:latest</span></span><span class="line"><span class="ct-ead287"> </span><span class="ct-5001cf">environment</span><span class="ct-ead287">:</span></span><span class="line"><span class="ct-ead287"> - </span><span class="ct-e7e4f6">DRONE_GITHUB_CLIENT_ID=secret_id</span></span><span class="line"><span class="ct-ead287"> - </span><span class="ct-e7e4f6">DRONE_GITHUB_CLIENT_SECRET=client_secret</span></span><span class="line"><span class="ct-ead287"> - </span><span class="ct-e7e4f6">DRONE_RPC_SECRET=rpc_secret</span></span><span class="line"><span class="ct-ead287"> - </span><span class="ct-e7e4f6">DRONE_SERVER_HOST=drone.url</span></span><span class="line"><span class="ct-ead287"> - </span><span class="ct-e7e4f6">DRONE_USER_CREATE="username:user,admin:true"</span></span><span class="line"><span class="ct-ead287"> - </span><span class="ct-e7e4f6">DRONE_SERVER_PROTO=https</span></span><span class="line"><span class="ct-ead287"> - </span><span class="ct-e7e4f6">DRONE_TLS_AUTOCERT=false</span></span><span class="line"><span class="ct-ead287"> - </span><span class="ct-e7e4f6">DRONE_GIT_ALWAYS_AUTH=false</span></span><span class="line"><span class="ct-ead287"> - </span><span class="ct-e7e4f6">DRONE_LOGS_DEBUG=true</span></span><span class="line"><span class="ct-ead287"> - </span><span class="ct-e7e4f6">DRONE_LOGS_TRACE=true</span></span><span class="line"><span class="ct-ead287"> </span><span class="ct-5001cf">restart</span><span class="ct-ead287">: </span><span class="ct-e7e4f6">always</span></span><span class="line"><span class="ct-ead287"> </span><span class="ct-5001cf">volumes</span><span class="ct-ead287">:</span></span><span class="line"><span class="ct-ead287"> - </span><span class="ct-e7e4f6">./data:/data</span></span><span class="line"><span class="ct-ead287"> </span><span class="ct-5001cf">ports</span><span class="ct-ead287">:</span></span><span class="line"><span class="ct-ead287"> - </span><span class="ct-e7e4f6">8090:80</span></span><span class="line"><span class="ct-ead287"> </span><span class="ct-5001cf">drone-agent</span><span class="ct-ead287">:</span></span><span class="line"><span class="ct-ead287"> </span><span class="ct-5001cf">container_name</span><span class="ct-ead287">: </span><span class="ct-e7e4f6">drone__agent</span></span><span class="line"><span class="ct-ead287"> </span><span class="ct-5001cf">image</span><span class="ct-ead287">: </span><span class="ct-e7e4f6">drone/agent:latest</span></span><span class="line"><span class="ct-ead287"> </span><span class="ct-5001cf">command</span><span class="ct-ead287">: </span><span class="ct-e7e4f6">agent</span></span><span class="line"><span class="ct-ead287"> </span><span class="ct-5001cf">restart</span><span class="ct-ead287">: </span><span class="ct-e7e4f6">always</span></span><span class="line"><span class="ct-ead287"> </span><span class="ct-5001cf">volumes</span><span class="ct-ead287">:</span></span><span class="line"><span class="ct-ead287"> - </span><span class="ct-e7e4f6">/var/run/docker.sock:/var/run/docker.sock</span></span><span class="line"><span class="ct-ead287"> </span><span class="ct-5001cf">environment</span><span class="ct-ead287">:</span></span><span class="line"><span class="ct-ead287"> - </span><span class="ct-e7e4f6">DRONE_RPC_SERVER=https://drone.url</span></span><span class="line"><span class="ct-ead287"> - </span><span class="ct-e7e4f6">DRONE_RPC_SECRET=rpc_secret</span></span></code></pre><!--]--></div><h2 id="caching-builds"><a href="#caching-builds"><!--[-->Caching builds<!--]--></a></h2><p><!--[-->Haven't checked that yet, but there's a <a href="https://laszlo.cloud/the-ultimate-droneci-caching-guide" rel="nofollow" target="_blank"><!--[-->manual<!--]--></a> from <a href="https://laszlo.cloud/" rel="nofollow" target="_blank"><!--[-->Laszlo Fogas<!--]--></a> about that.<!--]--></p><h2 id="get-user-info"><a href="#get-user-info"><!--[-->Get user info<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-f8e52f">export</span><span class="ct-ead287"> DRONE_SERVER=https://drone.url</span></span><span class="line"><span class="ct-f8e52f">export</span><span class="ct-ead287"> DRONE_TOKEN=password</span></span><span class="line"><span class="ct-ead287">drone info</span></span></code></pre><!--]--></div><h2 id="mark-user-as-trusted"><a href="#mark-user-as-trusted"><!--[-->Mark user as trusted<!--]--></a></h2><p><!--[-->Sometimes it won't help, then connect to drone database with sqlite and change user's trusted flag to <code><!--[-->1<!--]--></code>.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-ead287">drone repo update </span><span class="ct-bba773">$</span><span class="ct-c3cfa5">1</span><span class="ct-ead287"> --trusted=true </span><span class="ct-512f70">&&</span><span class="ct-ead287"> drone repo info </span><span class="ct-bba773">$</span><span class="ct-c3cfa5">1</span></span></code></pre><!--]--></div><style>.ct-512f70{color:#FF7B72}.ct-c3cfa5{color:#C9D1D9}.ct-bba773{color:#C9D1D9}.ct-f8e52f{color:#FF7B72}.ct-e7e4f6{color:#A5D6FF}.ct-ead287{color:#C9D1D9}.ct-5001cf{color:#7EE787}.light .ct-5001cf{color:#268BD2}.light .ct-ead287{color:#657B83}.light .ct-e7e4f6{color:#2AA198}.light .ct-f8e52f{color:#073642}.light .ct-bba773{color:#859900}.light .ct-c3cfa5{color:#268BD2}.light .ct-512f70{color:#859900}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/docker/drone-ci/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695529856}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseStrong.e968ffe9.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a aria-current="page" href="/docker/drone-ci" class="router-link-active _active_192pu_81 _link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Drone Ci</h1><article><div><p><!--[-->Can be used with <a href="/docker/private-docker-registry" class=""><!--[-->Private docker registry<!--]--></a> to deploy things using #docker.<!--]--></p><h2 id="pushing-to-private-docker_registry"><a href="#pushing-to-private-docker_registry"><!--[-->Pushing to private docker_registry<!--]--></a></h2><p><!--[-->You should specify <code><!--[-->global_docker_login<!--]--></code>, <code><!--[-->global_docker_password<!--]--></code>, <code><!--[-->global_docker_registry<!--]--></code> organizations variables in your <strong><!--[-->drone<!--]--></strong>. And <code><!--[-->docker_repo<!--]--></code> variable for your repo as <code><!--[-->docker.yourdomain.com/your-image<!--]--></code>.<!--]--></p><p><!--[-->This is example of <code><!--[-->.droneci<!--]--></code> for <a href="/docker/private-docker-registry" class=""><!--[-->private docker registry<!--]--></a>:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>yaml</span></button><!--[--><pre><code><span class="line"><span class="ct-5897b9">kind</span><span class="ct-dd895a">: </span><span class="ct-9adcae">pipeline</span></span><span class="line"><span class="ct-5897b9">name</span><span class="ct-dd895a">: </span><span class="ct-9adcae">build</span></span><span class="line"><span class="ct-5897b9">type</span><span class="ct-dd895a">: </span><span class="ct-9adcae">docker</span></span><span class="line"></span><span class="line"><span class="ct-5897b9">platform</span><span class="ct-dd895a">:</span></span><span class="line"><span class="ct-dd895a"> </span><span class="ct-5897b9">os</span><span class="ct-dd895a">: </span><span class="ct-9adcae">linux</span></span><span class="line"><span class="ct-dd895a"> </span><span class="ct-5897b9">arch</span><span class="ct-dd895a">: </span><span class="ct-9adcae">amd64</span></span><span class="line"></span><span class="line"><span class="ct-5897b9">steps</span><span class="ct-dd895a">:</span></span><span class="line"><span class="ct-dd895a"> - </span><span class="ct-5897b9">name</span><span class="ct-dd895a">: </span><span class="ct-9adcae">build-master</span></span><span class="line"><span class="ct-dd895a"> </span><span class="ct-5897b9">image</span><span class="ct-dd895a">: </span><span class="ct-9adcae">plugins/docker</span></span><span class="line"><span class="ct-dd895a"> </span><span class="ct-5897b9">when</span><span class="ct-dd895a">:</span></span><span class="line"><span class="ct-dd895a"> </span><span class="ct-5897b9">branch</span><span class="ct-dd895a">:</span></span><span class="line"><span class="ct-dd895a"> - </span><span class="ct-9adcae">master</span></span><span class="line"><span class="ct-dd895a"> </span><span class="ct-5897b9">settings</span><span class="ct-dd895a">:</span></span><span class="line"><span class="ct-dd895a"> </span><span class="ct-5897b9">dockerfile</span><span class="ct-dd895a">: </span><span class="ct-9adcae">Dockerfile</span></span><span class="line"><span class="ct-dd895a"> </span><span class="ct-5897b9">tag</span><span class="ct-dd895a">:</span></span><span class="line"><span class="ct-dd895a"> - </span><span class="ct-9adcae">${DRONE_BRANCH}</span></span><span class="line"><span class="ct-dd895a"> </span><span class="ct-5897b9">username</span><span class="ct-dd895a">:</span></span><span class="line"><span class="ct-dd895a"> </span><span class="ct-5897b9">from_secret</span><span class="ct-dd895a">: </span><span class="ct-9adcae">global_docker_login</span></span><span class="line"><span class="ct-dd895a"> </span><span class="ct-5897b9">password</span><span class="ct-dd895a">:</span></span><span class="line"><span class="ct-dd895a"> </span><span class="ct-5897b9">from_secret</span><span class="ct-dd895a">: </span><span class="ct-9adcae">global_docker_password</span></span><span class="line"><span class="ct-dd895a"> </span><span class="ct-5897b9">registry</span><span class="ct-dd895a">:</span></span><span class="line"><span class="ct-dd895a"> </span><span class="ct-5897b9">from_secret</span><span class="ct-dd895a">: </span><span class="ct-9adcae">global_docker_registry</span></span><span class="line"><span class="ct-dd895a"> </span><span class="ct-5897b9">repo</span><span class="ct-dd895a">:</span></span><span class="line"><span class="ct-dd895a"> </span><span class="ct-5897b9">from_secret</span><span class="ct-dd895a">: </span><span class="ct-9adcae">docker_repo</span></span></code></pre><!--]--></div><h2 id="docker-compose-file-for-drone-ci"><a href="#docker-compose-file-for-drone-ci"><!--[-->Docker-compose file for drone-ci<!--]--></a></h2><p><!--[-->The <code><!--[-->drone<!--]--></code> service is ui itself and <code><!--[-->drone-agent<!--]--></code> is runner for builds, that can be started on different machine (or machines).<!--]--></p><p><!--[-->Change <code><!--[-->secret_id<!--]--></code>, <code><!--[-->rpc_secret<!--]--></code> and <code><!--[-->drone.url<!--]--></code> to something you like.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>yaml</span></button><!--[--><pre><code><span class="line"><span class="ct-5897b9">version</span><span class="ct-dd895a">: </span><span class="ct-9adcae">"3"</span></span><span class="line"></span><span class="line"><span class="ct-5897b9">services</span><span class="ct-dd895a">:</span></span><span class="line"><span class="ct-dd895a"> </span><span class="ct-5897b9">drone</span><span class="ct-dd895a">:</span></span><span class="line"><span class="ct-dd895a"> </span><span class="ct-5897b9">container_name</span><span class="ct-dd895a">: </span><span class="ct-9adcae">drone</span></span><span class="line"><span class="ct-dd895a"> </span><span class="ct-5897b9">image</span><span class="ct-dd895a">: </span><span class="ct-9adcae">drone/drone:latest</span></span><span class="line"><span class="ct-dd895a"> </span><span class="ct-5897b9">environment</span><span class="ct-dd895a">:</span></span><span class="line"><span class="ct-dd895a"> - </span><span class="ct-9adcae">DRONE_GITHUB_CLIENT_ID=secret_id</span></span><span class="line"><span class="ct-dd895a"> - </span><span class="ct-9adcae">DRONE_GITHUB_CLIENT_SECRET=client_secret</span></span><span class="line"><span class="ct-dd895a"> - </span><span class="ct-9adcae">DRONE_RPC_SECRET=rpc_secret</span></span><span class="line"><span class="ct-dd895a"> - </span><span class="ct-9adcae">DRONE_SERVER_HOST=drone.url</span></span><span class="line"><span class="ct-dd895a"> - </span><span class="ct-9adcae">DRONE_USER_CREATE="username:user,admin:true"</span></span><span class="line"><span class="ct-dd895a"> - </span><span class="ct-9adcae">DRONE_SERVER_PROTO=https</span></span><span class="line"><span class="ct-dd895a"> - </span><span class="ct-9adcae">DRONE_TLS_AUTOCERT=false</span></span><span class="line"><span class="ct-dd895a"> - </span><span class="ct-9adcae">DRONE_GIT_ALWAYS_AUTH=false</span></span><span class="line"><span class="ct-dd895a"> - </span><span class="ct-9adcae">DRONE_LOGS_DEBUG=true</span></span><span class="line"><span class="ct-dd895a"> - </span><span class="ct-9adcae">DRONE_LOGS_TRACE=true</span></span><span class="line"><span class="ct-dd895a"> </span><span class="ct-5897b9">restart</span><span class="ct-dd895a">: </span><span class="ct-9adcae">always</span></span><span class="line"><span class="ct-dd895a"> </span><span class="ct-5897b9">volumes</span><span class="ct-dd895a">:</span></span><span class="line"><span class="ct-dd895a"> - </span><span class="ct-9adcae">./data:/data</span></span><span class="line"><span class="ct-dd895a"> </span><span class="ct-5897b9">ports</span><span class="ct-dd895a">:</span></span><span class="line"><span class="ct-dd895a"> - </span><span class="ct-9adcae">8090:80</span></span><span class="line"><span class="ct-dd895a"> </span><span class="ct-5897b9">drone-agent</span><span class="ct-dd895a">:</span></span><span class="line"><span class="ct-dd895a"> </span><span class="ct-5897b9">container_name</span><span class="ct-dd895a">: </span><span class="ct-9adcae">drone__agent</span></span><span class="line"><span class="ct-dd895a"> </span><span class="ct-5897b9">image</span><span class="ct-dd895a">: </span><span class="ct-9adcae">drone/agent:latest</span></span><span class="line"><span class="ct-dd895a"> </span><span class="ct-5897b9">command</span><span class="ct-dd895a">: </span><span class="ct-9adcae">agent</span></span><span class="line"><span class="ct-dd895a"> </span><span class="ct-5897b9">restart</span><span class="ct-dd895a">: </span><span class="ct-9adcae">always</span></span><span class="line"><span class="ct-dd895a"> </span><span class="ct-5897b9">volumes</span><span class="ct-dd895a">:</span></span><span class="line"><span class="ct-dd895a"> - </span><span class="ct-9adcae">/var/run/docker.sock:/var/run/docker.sock</span></span><span class="line"><span class="ct-dd895a"> </span><span class="ct-5897b9">environment</span><span class="ct-dd895a">:</span></span><span class="line"><span class="ct-dd895a"> - </span><span class="ct-9adcae">DRONE_RPC_SERVER=https://drone.url</span></span><span class="line"><span class="ct-dd895a"> - </span><span class="ct-9adcae">DRONE_RPC_SECRET=rpc_secret</span></span></code></pre><!--]--></div><h2 id="caching-builds"><a href="#caching-builds"><!--[-->Caching builds<!--]--></a></h2><p><!--[-->Haven't checked that yet, but there's a <a href="https://laszlo.cloud/the-ultimate-droneci-caching-guide" rel="nofollow" target="_blank"><!--[-->manual<!--]--></a> from <a href="https://laszlo.cloud/" rel="nofollow" target="_blank"><!--[-->Laszlo Fogas<!--]--></a> about that.<!--]--></p><h2 id="get-user-info"><a href="#get-user-info"><!--[-->Get user info<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-2ef772">export</span><span class="ct-dd895a"> DRONE_SERVER=https://drone.url</span></span><span class="line"><span class="ct-2ef772">export</span><span class="ct-dd895a"> DRONE_TOKEN=password</span></span><span class="line"><span class="ct-dd895a">drone info</span></span></code></pre><!--]--></div><h2 id="mark-user-as-trusted"><a href="#mark-user-as-trusted"><!--[-->Mark user as trusted<!--]--></a></h2><p><!--[-->Sometimes it won't help, then connect to drone database with sqlite and change user's trusted flag to <code><!--[-->1<!--]--></code>.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-dd895a">drone repo update </span><span class="ct-84c07e">$</span><span class="ct-305369">1</span><span class="ct-dd895a"> --trusted=true </span><span class="ct-ade66c">&&</span><span class="ct-dd895a"> drone repo info </span><span class="ct-84c07e">$</span><span class="ct-305369">1</span></span></code></pre><!--]--></div><style>.ct-ade66c{color:#FF7B72}.ct-305369{color:#C9D1D9}.ct-84c07e{color:#C9D1D9}.ct-2ef772{color:#FF7B72}.ct-9adcae{color:#A5D6FF}.ct-dd895a{color:#C9D1D9}.ct-5897b9{color:#7EE787}.light .ct-5897b9{color:#268BD2}.light .ct-dd895a{color:#657B83}.light .ct-9adcae{color:#2AA198}.light .ct-2ef772{color:#073642}.light .ct-84c07e{color:#859900}.light .ct-305369{color:#268BD2}.light .ct-ade66c{color:#859900}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/docker/drone-ci/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697990979}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseStrong.e968ffe9.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/docker/github-pages-with-drone-ci/_payload.js b/docs/docker/github-pages-with-drone-ci/_payload.js
index 0d594a4..be3a33d 100644
--- a/docs/docker/github-pages-with-drone-ci/_payload.js
+++ b/docs/docker/github-pages-with-drone-ci/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av,aw,ax,ay,az){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:H,_path:I},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-ZOfNnzEGMw":{_path:I,_dir:J,_draft:x,_partial:x,_locale:"en",_empty:x,title:H,description:"To deploy github pages with Drone-ci you will need .drone.yml as specified below. You also should define secrets github_username and github_token (get it here) in your drone's repository setup.",excerpt:{type:K,children:[{type:a,tag:j,props:{},children:[{type:b,value:L},{type:a,tag:i,props:{href:p},children:[{type:b,value:p}]},{type:b,value:M},{type:a,tag:f,props:{},children:[{type:b,value:N}]},{type:b,value:O},{type:a,tag:f,props:{},children:[{type:b,value:y}]},{type:b,value:P},{type:a,tag:f,props:{},children:[{type:b,value:z}]},{type:b,value:Q},{type:a,tag:i,props:{href:R,rel:[k]},children:[{type:b,value:S}]},{type:b,value:T}]},{type:a,tag:j,props:{},children:[{type:b,value:U},{type:a,tag:f,props:{},children:[{type:b,value:V}]},{type:b,value:W},{type:a,tag:i,props:{href:q,rel:[k]},children:[{type:b,value:q}]},{type:b,value:X},{type:a,tag:i,props:{href:r,rel:[k]},children:[{type:b,value:r}]},{type:b,value:Y}]},{type:a,tag:j,props:{},children:[{type:b,value:Z},{type:a,tag:f,props:{},children:[{type:b,value:n}]},{type:b,value:_},{type:a,tag:f,props:{},children:[{type:b,value:$}]},{type:b,value:s}]},{type:a,tag:j,props:{},children:[{type:b,value:aa},{type:a,tag:f,props:{},children:[{type:b,value:n}]},{type:b,value:ab}]},{type:a,tag:t,props:{code:A,language:ac},children:[{type:a,tag:ad,props:{},children:[{type:a,tag:t,props:{__ignoreMap:B},children:[{type:b,value:A}]}]}]},{type:a,tag:j,props:{},children:[{type:b,value:ae},{type:a,tag:f,props:{},children:[{type:b,value:af}]},{type:b,value:ag},{type:a,tag:f,props:{},children:[{type:b,value:ah}]},{type:b,value:ai},{type:a,tag:f,props:{},children:[{type:b,value:aj}]},{type:b,value:ak}]},{type:a,tag:j,props:{},children:[{type:b,value:al},{type:a,tag:f,props:{},children:[{type:b,value:am}]},{type:b,value:an},{type:a,tag:i,props:{href:u,rel:[k]},children:[{type:b,value:ao}]},{type:b,value:s}]},{type:a,tag:ap,props:{id:C},children:[{type:b,value:D}]},{type:a,tag:aq,props:{},children:[{type:a,tag:v,props:{},children:[{type:a,tag:i,props:{href:ar,rel:[k]},children:[{type:b,value:as}]}]},{type:a,tag:v,props:{},children:[{type:a,tag:i,props:{href:u,rel:[k]},children:[{type:b,value:at}]}]}]}]},body:{type:K,children:[{type:a,tag:j,props:{},children:[{type:b,value:L},{type:a,tag:i,props:{href:p},children:[{type:b,value:p}]},{type:b,value:M},{type:a,tag:f,props:{},children:[{type:b,value:N}]},{type:b,value:O},{type:a,tag:f,props:{},children:[{type:b,value:y}]},{type:b,value:P},{type:a,tag:f,props:{},children:[{type:b,value:z}]},{type:b,value:Q},{type:a,tag:i,props:{href:R,rel:[k]},children:[{type:b,value:S}]},{type:b,value:T}]},{type:a,tag:j,props:{},children:[{type:b,value:U},{type:a,tag:f,props:{},children:[{type:b,value:V}]},{type:b,value:W},{type:a,tag:i,props:{href:q,rel:[k]},children:[{type:b,value:q}]},{type:b,value:X},{type:a,tag:i,props:{href:r,rel:[k]},children:[{type:b,value:r}]},{type:b,value:Y}]},{type:a,tag:j,props:{},children:[{type:b,value:Z},{type:a,tag:f,props:{},children:[{type:b,value:n}]},{type:b,value:_},{type:a,tag:f,props:{},children:[{type:b,value:$}]},{type:b,value:s}]},{type:a,tag:j,props:{},children:[{type:b,value:aa},{type:a,tag:f,props:{},children:[{type:b,value:n}]},{type:b,value:ab}]},{type:a,tag:t,props:{code:A,language:ac},children:[{type:a,tag:ad,props:{},children:[{type:a,tag:t,props:{__ignoreMap:B},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:g},children:[{type:b,value:"kind"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"pipeline"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:g},children:[{type:b,value:E}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:au}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:g},children:[{type:b,value:"type"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:J}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:g},children:[{type:b,value:"platform"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:av}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"os"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"linux"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:av}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"arch"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"amd64"}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:g},children:[{type:b,value:"steps"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:aw}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:E}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:au}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:w}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:ax}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"node:16"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:w}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"commands"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"yarn"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"yarn generate"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"rm -rf .\u002Fdocs"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"mv .\u002F.output\u002Fpublic .\u002Fdocs"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"touch .\u002Fdocs\u002F.nojekyll"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:aw}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:E}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"publish"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:w}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:ax}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"plugins\u002Fgh-pages"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:w}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"settings"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:F}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"target_branch"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:n}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:F}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"username"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:ay}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:az}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:y}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:F}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"password"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:ay}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:az}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:z}]}]}]}]}]},{type:a,tag:j,props:{},children:[{type:b,value:ae},{type:a,tag:f,props:{},children:[{type:b,value:af}]},{type:b,value:ag},{type:a,tag:f,props:{},children:[{type:b,value:ah}]},{type:b,value:ai},{type:a,tag:f,props:{},children:[{type:b,value:aj}]},{type:b,value:ak}]},{type:a,tag:j,props:{},children:[{type:b,value:al},{type:a,tag:f,props:{},children:[{type:b,value:am}]},{type:b,value:an},{type:a,tag:i,props:{href:u,rel:[k]},children:[{type:b,value:ao}]},{type:b,value:s}]},{type:a,tag:ap,props:{id:C},children:[{type:b,value:D}]},{type:a,tag:aq,props:{},children:[{type:a,tag:v,props:{},children:[{type:a,tag:i,props:{href:ar,rel:[k]},children:[{type:b,value:as}]}]},{type:a,tag:v,props:{},children:[{type:a,tag:i,props:{href:u,rel:[k]},children:[{type:b,value:at}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-32b0f5{color:#A5D6FF}.ct-fe1215{color:#C9D1D9}.ct-6714bd{color:#7EE787}.light .ct-6714bd{color:#268BD2}.light .ct-fe1215{color:#657B83}.light .ct-32b0f5{color:#2AA198}"}]}],toc:{title:B,searchDepth:G,depth:G,links:[{id:C,depth:G,text:D}]}},_type:"markdown",_id:"content:Docker:Github pages with drone-ci.md",_source:"content",_file:"Docker\u002FGithub pages with drone-ci.md",_extension:"md"}},prerenderedAt:1703695529919}}("element","text","span","ct-fe1215","line","code-inline","ct-6714bd","ct-32b0f5","a","p","nofollow",": ",":","gh-pages"," - ","Drone-ci","https:\u002F\u002Fyourname.github.io\u002F","https:\u002F\u002Fyourname.github.io\u002Frepo-name\u002F",".","code","https:\u002F\u002Fgithub.blog\u002F2009-12-29-bypassing-jekyll-on-github-pages\u002F","li"," ",false,"github_username","github_token","kind: pipeline\nname: build\ntype: docker\n\nplatform:\n os: linux\n arch: amd64\n\nsteps:\n - name: build\n image: node:16\n commands:\n - yarn\n - yarn generate\n - rm -rf .\u002Fdocs\n - mv .\u002F.output\u002Fpublic .\u002Fdocs\n - touch .\u002Fdocs\u002F.nojekyll\n - name: publish\n image: plugins\u002Fgh-pages\n settings:\n target_branch: gh-pages\n username:\n from_secret: github_username\n password:\n from_secret: github_token\n","","additional-reading","Additional reading","name"," ",2,"Github Pages With Drone Ci","\u002Fdocker\u002Fgithub-pages-with-drone-ci","docker","root","To deploy github pages with "," you will need ",".drone.yml"," as specified below. You also should define secrets "," and "," (get it ","https:\u002F\u002Fgithub.com\u002Fsettings\u002Ftokens","here",") in your drone's repository setup.","Github repository should be named as ","yourname.github.io"," and it could be accessed at ",". Otherwise it'll be available at ",", what you might not like.","You should create branch named "," in that repo and setup GH Pages at ","https:\u002F\u002Fgithub.com\u002F\u003Cyourusername\u003E\u002F\u003Cyourusername\u003E.github.io\u002Fsettings\u002Fpages","This config will update "," branch in your project, which will contain only generated content. I know, that's bad, but there's no better way to do that with generic drone plugins.","yaml","pre","Here we're moving ",".\u002F.output\u002Fpublic"," to ",".\u002Fdocs",", because #nuxt creates symlink for ","docs"," and git can't work with that.","Also we create ",".nojekyll"," at the root of repo, so github's internal engine won't ","ignore files that start with underscore","h2","ul","https:\u002F\u002Fplugins.drone.io\u002Fplugins\u002Fgh-pages","Drone Github Pages Documentation","Bypassing Jekyll on GitHub Pages","build"," "," - ","image"," ","from_secret"))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av,aw,ax,ay,az){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:H,_path:I},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-ZOfNnzEGMw":{_path:I,_dir:J,_draft:x,_partial:x,_locale:"en",_empty:x,title:H,description:"To deploy github pages with Drone-ci you will need .drone.yml as specified below. You also should define secrets github_username and github_token (get it here) in your drone's repository setup.",excerpt:{type:K,children:[{type:a,tag:j,props:{},children:[{type:b,value:L},{type:a,tag:i,props:{href:p},children:[{type:b,value:p}]},{type:b,value:M},{type:a,tag:f,props:{},children:[{type:b,value:N}]},{type:b,value:O},{type:a,tag:f,props:{},children:[{type:b,value:y}]},{type:b,value:P},{type:a,tag:f,props:{},children:[{type:b,value:z}]},{type:b,value:Q},{type:a,tag:i,props:{href:R,rel:[k]},children:[{type:b,value:S}]},{type:b,value:T}]},{type:a,tag:j,props:{},children:[{type:b,value:U},{type:a,tag:f,props:{},children:[{type:b,value:V}]},{type:b,value:W},{type:a,tag:i,props:{href:q,rel:[k]},children:[{type:b,value:q}]},{type:b,value:X},{type:a,tag:i,props:{href:r,rel:[k]},children:[{type:b,value:r}]},{type:b,value:Y}]},{type:a,tag:j,props:{},children:[{type:b,value:Z},{type:a,tag:f,props:{},children:[{type:b,value:n}]},{type:b,value:_},{type:a,tag:f,props:{},children:[{type:b,value:$}]},{type:b,value:s}]},{type:a,tag:j,props:{},children:[{type:b,value:aa},{type:a,tag:f,props:{},children:[{type:b,value:n}]},{type:b,value:ab}]},{type:a,tag:t,props:{code:A,language:ac},children:[{type:a,tag:ad,props:{},children:[{type:a,tag:t,props:{__ignoreMap:B},children:[{type:b,value:A}]}]}]},{type:a,tag:j,props:{},children:[{type:b,value:ae},{type:a,tag:f,props:{},children:[{type:b,value:af}]},{type:b,value:ag},{type:a,tag:f,props:{},children:[{type:b,value:ah}]},{type:b,value:ai},{type:a,tag:f,props:{},children:[{type:b,value:aj}]},{type:b,value:ak}]},{type:a,tag:j,props:{},children:[{type:b,value:al},{type:a,tag:f,props:{},children:[{type:b,value:am}]},{type:b,value:an},{type:a,tag:i,props:{href:u,rel:[k]},children:[{type:b,value:ao}]},{type:b,value:s}]},{type:a,tag:ap,props:{id:C},children:[{type:b,value:D}]},{type:a,tag:aq,props:{},children:[{type:a,tag:v,props:{},children:[{type:a,tag:i,props:{href:ar,rel:[k]},children:[{type:b,value:as}]}]},{type:a,tag:v,props:{},children:[{type:a,tag:i,props:{href:u,rel:[k]},children:[{type:b,value:at}]}]}]}]},body:{type:K,children:[{type:a,tag:j,props:{},children:[{type:b,value:L},{type:a,tag:i,props:{href:p},children:[{type:b,value:p}]},{type:b,value:M},{type:a,tag:f,props:{},children:[{type:b,value:N}]},{type:b,value:O},{type:a,tag:f,props:{},children:[{type:b,value:y}]},{type:b,value:P},{type:a,tag:f,props:{},children:[{type:b,value:z}]},{type:b,value:Q},{type:a,tag:i,props:{href:R,rel:[k]},children:[{type:b,value:S}]},{type:b,value:T}]},{type:a,tag:j,props:{},children:[{type:b,value:U},{type:a,tag:f,props:{},children:[{type:b,value:V}]},{type:b,value:W},{type:a,tag:i,props:{href:q,rel:[k]},children:[{type:b,value:q}]},{type:b,value:X},{type:a,tag:i,props:{href:r,rel:[k]},children:[{type:b,value:r}]},{type:b,value:Y}]},{type:a,tag:j,props:{},children:[{type:b,value:Z},{type:a,tag:f,props:{},children:[{type:b,value:n}]},{type:b,value:_},{type:a,tag:f,props:{},children:[{type:b,value:$}]},{type:b,value:s}]},{type:a,tag:j,props:{},children:[{type:b,value:aa},{type:a,tag:f,props:{},children:[{type:b,value:n}]},{type:b,value:ab}]},{type:a,tag:t,props:{code:A,language:ac},children:[{type:a,tag:ad,props:{},children:[{type:a,tag:t,props:{__ignoreMap:B},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:g},children:[{type:b,value:"kind"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"pipeline"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:g},children:[{type:b,value:E}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:au}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:g},children:[{type:b,value:"type"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:J}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:g},children:[{type:b,value:"platform"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:av}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"os"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"linux"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:av}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"arch"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"amd64"}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:g},children:[{type:b,value:"steps"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:aw}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:E}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:au}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:w}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:ax}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"node:16"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:w}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"commands"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"yarn"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"yarn generate"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"rm -rf .\u002Fdocs"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"mv .\u002F.output\u002Fpublic .\u002Fdocs"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"touch .\u002Fdocs\u002F.nojekyll"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:aw}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:E}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"publish"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:w}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:ax}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"plugins\u002Fgh-pages"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:w}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"settings"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:F}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"target_branch"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:n}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:F}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"username"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:ay}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:az}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:y}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:F}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"password"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:m}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:ay}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:az}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:z}]}]}]}]}]},{type:a,tag:j,props:{},children:[{type:b,value:ae},{type:a,tag:f,props:{},children:[{type:b,value:af}]},{type:b,value:ag},{type:a,tag:f,props:{},children:[{type:b,value:ah}]},{type:b,value:ai},{type:a,tag:f,props:{},children:[{type:b,value:aj}]},{type:b,value:ak}]},{type:a,tag:j,props:{},children:[{type:b,value:al},{type:a,tag:f,props:{},children:[{type:b,value:am}]},{type:b,value:an},{type:a,tag:i,props:{href:u,rel:[k]},children:[{type:b,value:ao}]},{type:b,value:s}]},{type:a,tag:ap,props:{id:C},children:[{type:b,value:D}]},{type:a,tag:aq,props:{},children:[{type:a,tag:v,props:{},children:[{type:a,tag:i,props:{href:ar,rel:[k]},children:[{type:b,value:as}]}]},{type:a,tag:v,props:{},children:[{type:a,tag:i,props:{href:u,rel:[k]},children:[{type:b,value:at}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-ec86cd{color:#A5D6FF}.ct-bf5097{color:#C9D1D9}.ct-95ec6a{color:#7EE787}.light .ct-95ec6a{color:#268BD2}.light .ct-bf5097{color:#657B83}.light .ct-ec86cd{color:#2AA198}"}]}],toc:{title:B,searchDepth:G,depth:G,links:[{id:C,depth:G,text:D}]}},_type:"markdown",_id:"content:Docker:Github pages with drone-ci.md",_source:"content",_file:"Docker\u002FGithub pages with drone-ci.md",_extension:"md"}},prerenderedAt:1703697991071}}("element","text","span","ct-bf5097","line","code-inline","ct-95ec6a","ct-ec86cd","a","p","nofollow",": ",":","gh-pages"," - ","Drone-ci","https:\u002F\u002Fyourname.github.io\u002F","https:\u002F\u002Fyourname.github.io\u002Frepo-name\u002F",".","code","https:\u002F\u002Fgithub.blog\u002F2009-12-29-bypassing-jekyll-on-github-pages\u002F","li"," ",false,"github_username","github_token","kind: pipeline\nname: build\ntype: docker\n\nplatform:\n os: linux\n arch: amd64\n\nsteps:\n - name: build\n image: node:16\n commands:\n - yarn\n - yarn generate\n - rm -rf .\u002Fdocs\n - mv .\u002F.output\u002Fpublic .\u002Fdocs\n - touch .\u002Fdocs\u002F.nojekyll\n - name: publish\n image: plugins\u002Fgh-pages\n settings:\n target_branch: gh-pages\n username:\n from_secret: github_username\n password:\n from_secret: github_token\n","","additional-reading","Additional reading","name"," ",2,"Github Pages With Drone Ci","\u002Fdocker\u002Fgithub-pages-with-drone-ci","docker","root","To deploy github pages with "," you will need ",".drone.yml"," as specified below. You also should define secrets "," and "," (get it ","https:\u002F\u002Fgithub.com\u002Fsettings\u002Ftokens","here",") in your drone's repository setup.","Github repository should be named as ","yourname.github.io"," and it could be accessed at ",". Otherwise it'll be available at ",", what you might not like.","You should create branch named "," in that repo and setup GH Pages at ","https:\u002F\u002Fgithub.com\u002F\u003Cyourusername\u003E\u002F\u003Cyourusername\u003E.github.io\u002Fsettings\u002Fpages","This config will update "," branch in your project, which will contain only generated content. I know, that's bad, but there's no better way to do that with generic drone plugins.","yaml","pre","Here we're moving ",".\u002F.output\u002Fpublic"," to ",".\u002Fdocs",", because #nuxt creates symlink for ","docs"," and git can't work with that.","Also we create ",".nojekyll"," at the root of repo, so github's internal engine won't ","ignore files that start with underscore","h2","ul","https:\u002F\u002Fplugins.drone.io\u002Fplugins\u002Fgh-pages","Drone Github Pages Documentation","Bypassing Jekyll on GitHub Pages","build"," "," - ","image"," ","from_secret"))
\ No newline at end of file
diff --git a/docs/docker/github-pages-with-drone-ci/index.html b/docs/docker/github-pages-with-drone-ci/index.html
index 4ade4b2..97b8e90 100644
--- a/docs/docker/github-pages-with-drone-ci/index.html
+++ b/docs/docker/github-pages-with-drone-ci/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Github Pages With Drone Ci • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="To deploy github pages with Drone-ci you will need .drone.yml as specified below. You also should define secrets github_username and github_token (get it here) in your drone's repository setup."><meta name="head:count" content="3"><link rel="modulepreload" href="/docker/github-pages-with-drone-ci/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseUl.b892d423.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseLi.a224f663.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseA.c52e44f8.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseH2.d950f051.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCodeInline.d9bcf614.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a aria-current="page" href="/docker/github-pages-with-drone-ci" class="router-link-active _active_192pu_81 _link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Github Pages With Drone Ci</h1><article><div><p><!--[-->To deploy github pages with <a href="/docker/drone-ci" class=""><!--[-->Drone-ci<!--]--></a> you will need <code><!--[-->.drone.yml<!--]--></code> as specified below. You also should define secrets <code><!--[-->github_username<!--]--></code> and <code><!--[-->github_token<!--]--></code> (get it <a href="https://github.com/settings/tokens" rel="nofollow" target="_blank"><!--[-->here<!--]--></a>) in your drone's repository setup.<!--]--></p><p><!--[-->Github repository should be named as <code><!--[-->yourname.github.io<!--]--></code> and it could be accessed at <a href="https://yourname.github.io/" rel="nofollow" target="_blank"><!--[-->https://yourname.github.io/<!--]--></a>. Otherwise it'll be available at <a href="https://yourname.github.io/repo-name/" rel="nofollow" target="_blank"><!--[-->https://yourname.github.io/repo-name/<!--]--></a>, what you might not like.<!--]--></p><p><!--[-->You should create branch named <code><!--[-->gh-pages<!--]--></code> in that repo and setup GH Pages at <code><!--[-->https://github.com/<yourusername>/<yourusername>.github.io/settings/pages<!--]--></code>.<!--]--></p><p><!--[-->This config will update <code><!--[-->gh-pages<!--]--></code> branch in your project, which will contain only generated content. I know, that's bad, but there's no better way to do that with generic drone plugins.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>yaml</span></button><!--[--><pre><code><span class="line"><span class="ct-6714bd">kind</span><span class="ct-fe1215">: </span><span class="ct-32b0f5">pipeline</span></span><span class="line"><span class="ct-6714bd">name</span><span class="ct-fe1215">: </span><span class="ct-32b0f5">build</span></span><span class="line"><span class="ct-6714bd">type</span><span class="ct-fe1215">: </span><span class="ct-32b0f5">docker</span></span><span class="line"></span><span class="line"><span class="ct-6714bd">platform</span><span class="ct-fe1215">:</span></span><span class="line"><span class="ct-fe1215"> </span><span class="ct-6714bd">os</span><span class="ct-fe1215">: </span><span class="ct-32b0f5">linux</span></span><span class="line"><span class="ct-fe1215"> </span><span class="ct-6714bd">arch</span><span class="ct-fe1215">: </span><span class="ct-32b0f5">amd64</span></span><span class="line"></span><span class="line"><span class="ct-6714bd">steps</span><span class="ct-fe1215">:</span></span><span class="line"><span class="ct-fe1215"> - </span><span class="ct-6714bd">name</span><span class="ct-fe1215">: </span><span class="ct-32b0f5">build</span></span><span class="line"><span class="ct-fe1215"> </span><span class="ct-6714bd">image</span><span class="ct-fe1215">: </span><span class="ct-32b0f5">node:16</span></span><span class="line"><span class="ct-fe1215"> </span><span class="ct-6714bd">commands</span><span class="ct-fe1215">:</span></span><span class="line"><span class="ct-fe1215"> - </span><span class="ct-32b0f5">yarn</span></span><span class="line"><span class="ct-fe1215"> - </span><span class="ct-32b0f5">yarn generate</span></span><span class="line"><span class="ct-fe1215"> - </span><span class="ct-32b0f5">rm -rf ./docs</span></span><span class="line"><span class="ct-fe1215"> - </span><span class="ct-32b0f5">mv ./.output/public ./docs</span></span><span class="line"><span class="ct-fe1215"> - </span><span class="ct-32b0f5">touch ./docs/.nojekyll</span></span><span class="line"><span class="ct-fe1215"> - </span><span class="ct-6714bd">name</span><span class="ct-fe1215">: </span><span class="ct-32b0f5">publish</span></span><span class="line"><span class="ct-fe1215"> </span><span class="ct-6714bd">image</span><span class="ct-fe1215">: </span><span class="ct-32b0f5">plugins/gh-pages</span></span><span class="line"><span class="ct-fe1215"> </span><span class="ct-6714bd">settings</span><span class="ct-fe1215">:</span></span><span class="line"><span class="ct-fe1215"> </span><span class="ct-6714bd">target_branch</span><span class="ct-fe1215">: </span><span class="ct-32b0f5">gh-pages</span></span><span class="line"><span class="ct-fe1215"> </span><span class="ct-6714bd">username</span><span class="ct-fe1215">:</span></span><span class="line"><span class="ct-fe1215"> </span><span class="ct-6714bd">from_secret</span><span class="ct-fe1215">: </span><span class="ct-32b0f5">github_username</span></span><span class="line"><span class="ct-fe1215"> </span><span class="ct-6714bd">password</span><span class="ct-fe1215">:</span></span><span class="line"><span class="ct-fe1215"> </span><span class="ct-6714bd">from_secret</span><span class="ct-fe1215">: </span><span class="ct-32b0f5">github_token</span></span></code></pre><!--]--></div><p><!--[-->Here we're moving <code><!--[-->./.output/public<!--]--></code> to <code><!--[-->./docs<!--]--></code>, because #nuxt creates symlink for <code><!--[-->docs<!--]--></code> and git can't work with that.<!--]--></p><p><!--[-->Also we create <code><!--[-->.nojekyll<!--]--></code> at the root of repo, so github's internal engine won't <a href="https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/" rel="nofollow" target="_blank"><!--[-->ignore files that start with underscore<!--]--></a>.<!--]--></p><h2 id="additional-reading"><a href="#additional-reading"><!--[-->Additional reading<!--]--></a></h2><ul><!--[--><li><!--[--><a href="https://plugins.drone.io/plugins/gh-pages" rel="nofollow" target="_blank"><!--[-->Drone Github Pages Documentation<!--]--></a><!--]--></li><li><!--[--><a href="https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/" rel="nofollow" target="_blank"><!--[-->Bypassing Jekyll on GitHub Pages<!--]--></a><!--]--></li><!--]--></ul><style>.ct-32b0f5{color:#A5D6FF}.ct-fe1215{color:#C9D1D9}.ct-6714bd{color:#7EE787}.light .ct-6714bd{color:#268BD2}.light .ct-fe1215{color:#657B83}.light .ct-32b0f5{color:#2AA198}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/docker/github-pages-with-drone-ci/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695529919}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseUl.b892d423.js" crossorigin></script><script type="module" src="/nuxt/ProseLi.a224f663.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a aria-current="page" href="/docker/github-pages-with-drone-ci" class="router-link-active _active_192pu_81 _link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Github Pages With Drone Ci</h1><article><div><p><!--[-->To deploy github pages with <a href="/docker/drone-ci" class=""><!--[-->Drone-ci<!--]--></a> you will need <code><!--[-->.drone.yml<!--]--></code> as specified below. You also should define secrets <code><!--[-->github_username<!--]--></code> and <code><!--[-->github_token<!--]--></code> (get it <a href="https://github.com/settings/tokens" rel="nofollow" target="_blank"><!--[-->here<!--]--></a>) in your drone's repository setup.<!--]--></p><p><!--[-->Github repository should be named as <code><!--[-->yourname.github.io<!--]--></code> and it could be accessed at <a href="https://yourname.github.io/" rel="nofollow" target="_blank"><!--[-->https://yourname.github.io/<!--]--></a>. Otherwise it'll be available at <a href="https://yourname.github.io/repo-name/" rel="nofollow" target="_blank"><!--[-->https://yourname.github.io/repo-name/<!--]--></a>, what you might not like.<!--]--></p><p><!--[-->You should create branch named <code><!--[-->gh-pages<!--]--></code> in that repo and setup GH Pages at <code><!--[-->https://github.com/<yourusername>/<yourusername>.github.io/settings/pages<!--]--></code>.<!--]--></p><p><!--[-->This config will update <code><!--[-->gh-pages<!--]--></code> branch in your project, which will contain only generated content. I know, that's bad, but there's no better way to do that with generic drone plugins.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>yaml</span></button><!--[--><pre><code><span class="line"><span class="ct-95ec6a">kind</span><span class="ct-bf5097">: </span><span class="ct-ec86cd">pipeline</span></span><span class="line"><span class="ct-95ec6a">name</span><span class="ct-bf5097">: </span><span class="ct-ec86cd">build</span></span><span class="line"><span class="ct-95ec6a">type</span><span class="ct-bf5097">: </span><span class="ct-ec86cd">docker</span></span><span class="line"></span><span class="line"><span class="ct-95ec6a">platform</span><span class="ct-bf5097">:</span></span><span class="line"><span class="ct-bf5097"> </span><span class="ct-95ec6a">os</span><span class="ct-bf5097">: </span><span class="ct-ec86cd">linux</span></span><span class="line"><span class="ct-bf5097"> </span><span class="ct-95ec6a">arch</span><span class="ct-bf5097">: </span><span class="ct-ec86cd">amd64</span></span><span class="line"></span><span class="line"><span class="ct-95ec6a">steps</span><span class="ct-bf5097">:</span></span><span class="line"><span class="ct-bf5097"> - </span><span class="ct-95ec6a">name</span><span class="ct-bf5097">: </span><span class="ct-ec86cd">build</span></span><span class="line"><span class="ct-bf5097"> </span><span class="ct-95ec6a">image</span><span class="ct-bf5097">: </span><span class="ct-ec86cd">node:16</span></span><span class="line"><span class="ct-bf5097"> </span><span class="ct-95ec6a">commands</span><span class="ct-bf5097">:</span></span><span class="line"><span class="ct-bf5097"> - </span><span class="ct-ec86cd">yarn</span></span><span class="line"><span class="ct-bf5097"> - </span><span class="ct-ec86cd">yarn generate</span></span><span class="line"><span class="ct-bf5097"> - </span><span class="ct-ec86cd">rm -rf ./docs</span></span><span class="line"><span class="ct-bf5097"> - </span><span class="ct-ec86cd">mv ./.output/public ./docs</span></span><span class="line"><span class="ct-bf5097"> - </span><span class="ct-ec86cd">touch ./docs/.nojekyll</span></span><span class="line"><span class="ct-bf5097"> - </span><span class="ct-95ec6a">name</span><span class="ct-bf5097">: </span><span class="ct-ec86cd">publish</span></span><span class="line"><span class="ct-bf5097"> </span><span class="ct-95ec6a">image</span><span class="ct-bf5097">: </span><span class="ct-ec86cd">plugins/gh-pages</span></span><span class="line"><span class="ct-bf5097"> </span><span class="ct-95ec6a">settings</span><span class="ct-bf5097">:</span></span><span class="line"><span class="ct-bf5097"> </span><span class="ct-95ec6a">target_branch</span><span class="ct-bf5097">: </span><span class="ct-ec86cd">gh-pages</span></span><span class="line"><span class="ct-bf5097"> </span><span class="ct-95ec6a">username</span><span class="ct-bf5097">:</span></span><span class="line"><span class="ct-bf5097"> </span><span class="ct-95ec6a">from_secret</span><span class="ct-bf5097">: </span><span class="ct-ec86cd">github_username</span></span><span class="line"><span class="ct-bf5097"> </span><span class="ct-95ec6a">password</span><span class="ct-bf5097">:</span></span><span class="line"><span class="ct-bf5097"> </span><span class="ct-95ec6a">from_secret</span><span class="ct-bf5097">: </span><span class="ct-ec86cd">github_token</span></span></code></pre><!--]--></div><p><!--[-->Here we're moving <code><!--[-->./.output/public<!--]--></code> to <code><!--[-->./docs<!--]--></code>, because #nuxt creates symlink for <code><!--[-->docs<!--]--></code> and git can't work with that.<!--]--></p><p><!--[-->Also we create <code><!--[-->.nojekyll<!--]--></code> at the root of repo, so github's internal engine won't <a href="https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/" rel="nofollow" target="_blank"><!--[-->ignore files that start with underscore<!--]--></a>.<!--]--></p><h2 id="additional-reading"><a href="#additional-reading"><!--[-->Additional reading<!--]--></a></h2><ul><!--[--><li><!--[--><a href="https://plugins.drone.io/plugins/gh-pages" rel="nofollow" target="_blank"><!--[-->Drone Github Pages Documentation<!--]--></a><!--]--></li><li><!--[--><a href="https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/" rel="nofollow" target="_blank"><!--[-->Bypassing Jekyll on GitHub Pages<!--]--></a><!--]--></li><!--]--></ul><style>.ct-ec86cd{color:#A5D6FF}.ct-bf5097{color:#C9D1D9}.ct-95ec6a{color:#7EE787}.light .ct-95ec6a{color:#268BD2}.light .ct-bf5097{color:#657B83}.light .ct-ec86cd{color:#2AA198}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/docker/github-pages-with-drone-ci/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697991071}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseUl.b892d423.js" crossorigin></script><script type="module" src="/nuxt/ProseLi.a224f663.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/docker/private-docker-registry/_payload.js b/docs/docker/private-docker-registry/_payload.js
index 7b368be..27e583c 100644
--- a/docs/docker/private-docker-registry/_payload.js
+++ b/docs/docker/private-docker-registry/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:B,_path:C},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-3LsByI0Qek":{_path:C,_dir:"docker",_draft:t,_partial:t,_locale:"en",_empty:t,title:B,description:"Suitable to work with Drone-ci for hosting private #docker images.",excerpt:{type:D,children:[{type:a,tag:n,props:{},children:[{type:c,value:E},{type:a,tag:F,props:{href:p},children:[{type:c,value:p}]},{type:c,value:G}]},{type:a,tag:q,props:{id:u},children:[{type:c,value:v}]},{type:a,tag:n,props:{},children:[{type:c,value:H}]},{type:a,tag:i,props:{code:w,language:r},children:[{type:a,tag:o,props:{},children:[{type:a,tag:i,props:{__ignoreMap:l},children:[{type:c,value:w}]}]}]},{type:a,tag:i,props:{code:x,language:I},children:[{type:a,tag:o,props:{},children:[{type:a,tag:i,props:{__ignoreMap:l},children:[{type:c,value:x}]}]}]},{type:a,tag:q,props:{id:y},children:[{type:c,value:z}]},{type:a,tag:n,props:{},children:[{type:c,value:J}]},{type:a,tag:K,props:{},children:[{type:a,tag:L,props:{},children:[{type:c,value:M}]}]},{type:a,tag:i,props:{code:A,language:r},children:[{type:a,tag:o,props:{},children:[{type:a,tag:i,props:{__ignoreMap:l},children:[{type:c,value:A}]}]}]}]},body:{type:D,children:[{type:a,tag:n,props:{},children:[{type:c,value:E},{type:a,tag:F,props:{href:p},children:[{type:c,value:p}]},{type:c,value:G}]},{type:a,tag:q,props:{id:u},children:[{type:c,value:v}]},{type:a,tag:n,props:{},children:[{type:c,value:H}]},{type:a,tag:i,props:{code:w,language:r},children:[{type:a,tag:o,props:{},children:[{type:a,tag:i,props:{__ignoreMap:l},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:N}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" --entrypoint htpasswd registry:2 \\"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" -Bbn user mypassword "}]},{type:a,tag:b,props:{class:"ct-438f39"},children:[{type:c,value:"\u003E"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" auth\u002Fregistry.password"}]}]}]}]}]},{type:a,tag:i,props:{code:x,language:I},children:[{type:a,tag:o,props:{},children:[{type:a,tag:i,props:{__ignoreMap:l},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:"version"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"\"3\""}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:"services"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"registry"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"docker__registry"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"registry:2"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"5000:5000"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:U}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"REGISTRY_STORAGE_FILESYSTEM_ROOTDIRECTORY=\u002Fdata"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"REGISTRY_AUTH=htpasswd"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"REGISTRY_AUTH_HTPASSWD_REALM=Registry"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"REGISTRY_AUTH_HTPASSWD_PATH=\u002Fauth\u002Fregistry.password"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"REGISTRY_HTTP_SECRET=password"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"REGISTRY_STORAGE_DELETE_ENABLED=true"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"volumes"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:".\u002Fregistry\u002Fauth:\u002Fauth"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:".\u002Fregistry\u002Fdata:\u002Fdata"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"ui"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"docker__ui"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"parabuzzle\u002Fcraneoperator:latest"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"80:80"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:U}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"REGISTRY_HOST=registry"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"REGISTRY_PORT=5000"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"REGISTRY_PROTOCOL=http"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"ALLOW_REGISTRY_LOGIN=true"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"REGISTRY_ALLOW_DELETE=true"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"USERNAME=registry"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PASSWORD=password"}]}]}]}]}]},{type:a,tag:q,props:{id:y},children:[{type:c,value:z}]},{type:a,tag:n,props:{},children:[{type:c,value:J}]},{type:a,tag:K,props:{},children:[{type:a,tag:L,props:{},children:[{type:c,value:M}]}]},{type:a,tag:i,props:{code:A,language:r},children:[{type:a,tag:o,props:{},children:[{type:a,tag:i,props:{__ignoreMap:l},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:W},children:[{type:c,value:"# Try this first"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:N}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" --rm anoxis\u002Fregistry-cli \\"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" -r https:\u002F\u002Fregistry.url \\"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" -l user:password \\"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" --delete \\"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" --num 2"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:W},children:[{type:c,value:"# Then this "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"docker run -it \\"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" -v \u002Fpath\u002Fto\u002Fregistry\u002Fdata:\u002Fregistry \\"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" -e REGISTRY_URL=https:\u002F\u002Fregistry.url \\"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" -e DRY_RUN="}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"\"false\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:X}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" -e REGISTRY_AUTH="}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"\"user:password\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:X}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" mortensrasmussen\u002Fdocker-registry-manifest-cleanup"}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-a54b1a{color:#8B949E}.ct-793975{color:#A5D6FF}.ct-9aa4ac{color:#7EE787}.ct-438f39{color:#FF7B72}.ct-d03b6c{color:#C9D1D9}.light .ct-d03b6c{color:#657B83}.light .ct-438f39{color:#859900}.light .ct-9aa4ac{color:#268BD2}.light .ct-793975{color:#2AA198}.light .ct-a54b1a{color:#93A1A1}"}]}],toc:{title:l,searchDepth:s,depth:s,links:[{id:u,depth:s,text:v},{id:y,depth:s,text:z}]}},_type:"markdown",_id:"content:Docker:Private docker registry.md",_source:"content",_file:"Docker\u002FPrivate docker registry.md",_extension:"md"}},prerenderedAt:1703695529979}}("element","span","text","ct-d03b6c","line","ct-793975","ct-9aa4ac"," - ","code"," ",":","",": ","p","pre","Drone-ci","h2","shell",2,false,"sample-docker-compose-for-custom-docker-registry","Sample docker-compose for custom docker registry","docker run \\\n --entrypoint htpasswd registry:2 \\\n -Bbn user mypassword \u003E auth\u002Fregistry.password\n","version: \"3\"\nservices:\n registry:\n container_name: docker__registry\n image: registry:2\n ports:\n - 5000:5000\n restart: always\n environment:\n - REGISTRY_STORAGE_FILESYSTEM_ROOTDIRECTORY=\u002Fdata\n - REGISTRY_AUTH=htpasswd\n - REGISTRY_AUTH_HTPASSWD_REALM=Registry\n - REGISTRY_AUTH_HTPASSWD_PATH=\u002Fauth\u002Fregistry.password\n - REGISTRY_HTTP_SECRET=password\n - REGISTRY_STORAGE_DELETE_ENABLED=true\n volumes:\n - .\u002Fregistry\u002Fauth:\u002Fauth\n - .\u002Fregistry\u002Fdata:\u002Fdata\n ui:\n container_name: docker__ui\n image: parabuzzle\u002Fcraneoperator:latest\n ports:\n - 80:80\n restart: always\n environment:\n - REGISTRY_HOST=registry\n - REGISTRY_PORT=5000\n - REGISTRY_PROTOCOL=http\n - ALLOW_REGISTRY_LOGIN=true\n - REGISTRY_ALLOW_DELETE=true\n - USERNAME=registry\n - PASSWORD=password\n","squash-layers-on-registry","Squash layers on registry","# Try this first\ndocker run \\\n --rm anoxis\u002Fregistry-cli \\\n -r https:\u002F\u002Fregistry.url \\\n -l user:password \\\n --delete \\\n --num 2\n\n# Then this \ndocker run -it \\\n -v \u002Fpath\u002Fto\u002Fregistry\u002Fdata:\u002Fregistry \\\n -e REGISTRY_URL=https:\u002F\u002Fregistry.url \\\n -e DRY_RUN=\"false\" \\\n -e REGISTRY_AUTH=\"user:password\" \\\n mortensrasmussen\u002Fdocker-registry-manifest-cleanup\n","Private Docker Registry","\u002Fdocker\u002Fprivate-docker-registry","root","Suitable to work with ","a"," for hosting private #docker images.","This one brings up private docker registry with ui. First you'll need to generate password for it:","yaml","Sometimes you need to squash all layers in docker registry to free up disk space.","ol","li","Run this command to mark oldest layers","docker run \\"," ","container_name","image","ports"," - ","restart","always","environment","ct-a54b1a"," \\"))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:B,_path:C},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-3LsByI0Qek":{_path:C,_dir:"docker",_draft:t,_partial:t,_locale:"en",_empty:t,title:B,description:"Suitable to work with Drone-ci for hosting private #docker images.",excerpt:{type:D,children:[{type:a,tag:n,props:{},children:[{type:c,value:E},{type:a,tag:F,props:{href:p},children:[{type:c,value:p}]},{type:c,value:G}]},{type:a,tag:q,props:{id:u},children:[{type:c,value:v}]},{type:a,tag:n,props:{},children:[{type:c,value:H}]},{type:a,tag:i,props:{code:w,language:r},children:[{type:a,tag:o,props:{},children:[{type:a,tag:i,props:{__ignoreMap:l},children:[{type:c,value:w}]}]}]},{type:a,tag:i,props:{code:x,language:I},children:[{type:a,tag:o,props:{},children:[{type:a,tag:i,props:{__ignoreMap:l},children:[{type:c,value:x}]}]}]},{type:a,tag:q,props:{id:y},children:[{type:c,value:z}]},{type:a,tag:n,props:{},children:[{type:c,value:J}]},{type:a,tag:K,props:{},children:[{type:a,tag:L,props:{},children:[{type:c,value:M}]}]},{type:a,tag:i,props:{code:A,language:r},children:[{type:a,tag:o,props:{},children:[{type:a,tag:i,props:{__ignoreMap:l},children:[{type:c,value:A}]}]}]}]},body:{type:D,children:[{type:a,tag:n,props:{},children:[{type:c,value:E},{type:a,tag:F,props:{href:p},children:[{type:c,value:p}]},{type:c,value:G}]},{type:a,tag:q,props:{id:u},children:[{type:c,value:v}]},{type:a,tag:n,props:{},children:[{type:c,value:H}]},{type:a,tag:i,props:{code:w,language:r},children:[{type:a,tag:o,props:{},children:[{type:a,tag:i,props:{__ignoreMap:l},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:N}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" --entrypoint htpasswd registry:2 \\"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" -Bbn user mypassword "}]},{type:a,tag:b,props:{class:"ct-5d2f73"},children:[{type:c,value:"\u003E"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" auth\u002Fregistry.password"}]}]}]}]}]},{type:a,tag:i,props:{code:x,language:I},children:[{type:a,tag:o,props:{},children:[{type:a,tag:i,props:{__ignoreMap:l},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:"version"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"\"3\""}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:"services"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"registry"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"docker__registry"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"registry:2"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"5000:5000"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:U}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"REGISTRY_STORAGE_FILESYSTEM_ROOTDIRECTORY=\u002Fdata"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"REGISTRY_AUTH=htpasswd"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"REGISTRY_AUTH_HTPASSWD_REALM=Registry"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"REGISTRY_AUTH_HTPASSWD_PATH=\u002Fauth\u002Fregistry.password"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"REGISTRY_HTTP_SECRET=password"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"REGISTRY_STORAGE_DELETE_ENABLED=true"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"volumes"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:".\u002Fregistry\u002Fauth:\u002Fauth"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:".\u002Fregistry\u002Fdata:\u002Fdata"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"ui"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"docker__ui"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"parabuzzle\u002Fcraneoperator:latest"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"80:80"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:U}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"REGISTRY_HOST=registry"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"REGISTRY_PORT=5000"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"REGISTRY_PROTOCOL=http"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"ALLOW_REGISTRY_LOGIN=true"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"REGISTRY_ALLOW_DELETE=true"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"USERNAME=registry"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PASSWORD=password"}]}]}]}]}]},{type:a,tag:q,props:{id:y},children:[{type:c,value:z}]},{type:a,tag:n,props:{},children:[{type:c,value:J}]},{type:a,tag:K,props:{},children:[{type:a,tag:L,props:{},children:[{type:c,value:M}]}]},{type:a,tag:i,props:{code:A,language:r},children:[{type:a,tag:o,props:{},children:[{type:a,tag:i,props:{__ignoreMap:l},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:W},children:[{type:c,value:"# Try this first"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:N}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" --rm anoxis\u002Fregistry-cli \\"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" -r https:\u002F\u002Fregistry.url \\"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" -l user:password \\"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" --delete \\"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" --num 2"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:W},children:[{type:c,value:"# Then this "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"docker run -it \\"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" -v \u002Fpath\u002Fto\u002Fregistry\u002Fdata:\u002Fregistry \\"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" -e REGISTRY_URL=https:\u002F\u002Fregistry.url \\"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" -e DRY_RUN="}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"\"false\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:X}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" -e REGISTRY_AUTH="}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"\"user:password\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:X}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" mortensrasmussen\u002Fdocker-registry-manifest-cleanup"}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-ce2ef3{color:#8B949E}.ct-b5cc20{color:#A5D6FF}.ct-b81191{color:#7EE787}.ct-5d2f73{color:#FF7B72}.ct-0ef0d6{color:#C9D1D9}.light .ct-0ef0d6{color:#657B83}.light .ct-5d2f73{color:#859900}.light .ct-b81191{color:#268BD2}.light .ct-b5cc20{color:#2AA198}.light .ct-ce2ef3{color:#93A1A1}"}]}],toc:{title:l,searchDepth:s,depth:s,links:[{id:u,depth:s,text:v},{id:y,depth:s,text:z}]}},_type:"markdown",_id:"content:Docker:Private docker registry.md",_source:"content",_file:"Docker\u002FPrivate docker registry.md",_extension:"md"}},prerenderedAt:1703697991134}}("element","span","text","ct-0ef0d6","line","ct-b5cc20","ct-b81191"," - ","code"," ",":","",": ","p","pre","Drone-ci","h2","shell",2,false,"sample-docker-compose-for-custom-docker-registry","Sample docker-compose for custom docker registry","docker run \\\n --entrypoint htpasswd registry:2 \\\n -Bbn user mypassword \u003E auth\u002Fregistry.password\n","version: \"3\"\nservices:\n registry:\n container_name: docker__registry\n image: registry:2\n ports:\n - 5000:5000\n restart: always\n environment:\n - REGISTRY_STORAGE_FILESYSTEM_ROOTDIRECTORY=\u002Fdata\n - REGISTRY_AUTH=htpasswd\n - REGISTRY_AUTH_HTPASSWD_REALM=Registry\n - REGISTRY_AUTH_HTPASSWD_PATH=\u002Fauth\u002Fregistry.password\n - REGISTRY_HTTP_SECRET=password\n - REGISTRY_STORAGE_DELETE_ENABLED=true\n volumes:\n - .\u002Fregistry\u002Fauth:\u002Fauth\n - .\u002Fregistry\u002Fdata:\u002Fdata\n ui:\n container_name: docker__ui\n image: parabuzzle\u002Fcraneoperator:latest\n ports:\n - 80:80\n restart: always\n environment:\n - REGISTRY_HOST=registry\n - REGISTRY_PORT=5000\n - REGISTRY_PROTOCOL=http\n - ALLOW_REGISTRY_LOGIN=true\n - REGISTRY_ALLOW_DELETE=true\n - USERNAME=registry\n - PASSWORD=password\n","squash-layers-on-registry","Squash layers on registry","# Try this first\ndocker run \\\n --rm anoxis\u002Fregistry-cli \\\n -r https:\u002F\u002Fregistry.url \\\n -l user:password \\\n --delete \\\n --num 2\n\n# Then this \ndocker run -it \\\n -v \u002Fpath\u002Fto\u002Fregistry\u002Fdata:\u002Fregistry \\\n -e REGISTRY_URL=https:\u002F\u002Fregistry.url \\\n -e DRY_RUN=\"false\" \\\n -e REGISTRY_AUTH=\"user:password\" \\\n mortensrasmussen\u002Fdocker-registry-manifest-cleanup\n","Private Docker Registry","\u002Fdocker\u002Fprivate-docker-registry","root","Suitable to work with ","a"," for hosting private #docker images.","This one brings up private docker registry with ui. First you'll need to generate password for it:","yaml","Sometimes you need to squash all layers in docker registry to free up disk space.","ol","li","Run this command to mark oldest layers","docker run \\"," ","container_name","image","ports"," - ","restart","always","environment","ct-ce2ef3"," \\"))
\ No newline at end of file
diff --git a/docs/docker/private-docker-registry/index.html b/docs/docker/private-docker-registry/index.html
index 316c6a6..d897d7d 100644
--- a/docs/docker/private-docker-registry/index.html
+++ b/docs/docker/private-docker-registry/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Private Docker Registry • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Suitable to work with Drone-ci for hosting private #docker images."><meta name="head:count" content="3"><link rel="modulepreload" href="/docker/private-docker-registry/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseA.c52e44f8.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseH2.d950f051.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseOl.a67fc8c4.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseLi.a224f663.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a aria-current="page" href="/docker/private-docker-registry" class="router-link-active _active_192pu_81 _link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Private Docker Registry</h1><article><div><p><!--[-->Suitable to work with <a href="/docker/drone-ci" class=""><!--[-->Drone-ci<!--]--></a> for hosting private #docker images.<!--]--></p><h2 id="sample-docker-compose-for-custom-docker-registry"><a href="#sample-docker-compose-for-custom-docker-registry"><!--[-->Sample docker-compose for custom docker registry<!--]--></a></h2><p><!--[-->This one brings up private docker registry with ui. First you'll need to generate password for it:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-d03b6c">docker run \</span></span><span class="line"><span class="ct-d03b6c"> --entrypoint htpasswd registry:2 \</span></span><span class="line"><span class="ct-d03b6c"> -Bbn user mypassword </span><span class="ct-438f39">></span><span class="ct-d03b6c"> auth/registry.password</span></span></code></pre><!--]--></div><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>yaml</span></button><!--[--><pre><code><span class="line"><span class="ct-9aa4ac">version</span><span class="ct-d03b6c">: </span><span class="ct-793975">"3"</span></span><span class="line"><span class="ct-9aa4ac">services</span><span class="ct-d03b6c">:</span></span><span class="line"><span class="ct-d03b6c"> </span><span class="ct-9aa4ac">registry</span><span class="ct-d03b6c">:</span></span><span class="line"><span class="ct-d03b6c"> </span><span class="ct-9aa4ac">container_name</span><span class="ct-d03b6c">: </span><span class="ct-793975">docker__registry</span></span><span class="line"><span class="ct-d03b6c"> </span><span class="ct-9aa4ac">image</span><span class="ct-d03b6c">: </span><span class="ct-793975">registry:2</span></span><span class="line"><span class="ct-d03b6c"> </span><span class="ct-9aa4ac">ports</span><span class="ct-d03b6c">:</span></span><span class="line"><span class="ct-d03b6c"> - </span><span class="ct-793975">5000:5000</span></span><span class="line"><span class="ct-d03b6c"> </span><span class="ct-9aa4ac">restart</span><span class="ct-d03b6c">: </span><span class="ct-793975">always</span></span><span class="line"><span class="ct-d03b6c"> </span><span class="ct-9aa4ac">environment</span><span class="ct-d03b6c">:</span></span><span class="line"><span class="ct-d03b6c"> - </span><span class="ct-793975">REGISTRY_STORAGE_FILESYSTEM_ROOTDIRECTORY=/data</span></span><span class="line"><span class="ct-d03b6c"> - </span><span class="ct-793975">REGISTRY_AUTH=htpasswd</span></span><span class="line"><span class="ct-d03b6c"> - </span><span class="ct-793975">REGISTRY_AUTH_HTPASSWD_REALM=Registry</span></span><span class="line"><span class="ct-d03b6c"> - </span><span class="ct-793975">REGISTRY_AUTH_HTPASSWD_PATH=/auth/registry.password</span></span><span class="line"><span class="ct-d03b6c"> - </span><span class="ct-793975">REGISTRY_HTTP_SECRET=password</span></span><span class="line"><span class="ct-d03b6c"> - </span><span class="ct-793975">REGISTRY_STORAGE_DELETE_ENABLED=true</span></span><span class="line"><span class="ct-d03b6c"> </span><span class="ct-9aa4ac">volumes</span><span class="ct-d03b6c">:</span></span><span class="line"><span class="ct-d03b6c"> - </span><span class="ct-793975">./registry/auth:/auth</span></span><span class="line"><span class="ct-d03b6c"> - </span><span class="ct-793975">./registry/data:/data</span></span><span class="line"><span class="ct-d03b6c"> </span><span class="ct-9aa4ac">ui</span><span class="ct-d03b6c">:</span></span><span class="line"><span class="ct-d03b6c"> </span><span class="ct-9aa4ac">container_name</span><span class="ct-d03b6c">: </span><span class="ct-793975">docker__ui</span></span><span class="line"><span class="ct-d03b6c"> </span><span class="ct-9aa4ac">image</span><span class="ct-d03b6c">: </span><span class="ct-793975">parabuzzle/craneoperator:latest</span></span><span class="line"><span class="ct-d03b6c"> </span><span class="ct-9aa4ac">ports</span><span class="ct-d03b6c">:</span></span><span class="line"><span class="ct-d03b6c"> - </span><span class="ct-793975">80:80</span></span><span class="line"><span class="ct-d03b6c"> </span><span class="ct-9aa4ac">restart</span><span class="ct-d03b6c">: </span><span class="ct-793975">always</span></span><span class="line"><span class="ct-d03b6c"> </span><span class="ct-9aa4ac">environment</span><span class="ct-d03b6c">:</span></span><span class="line"><span class="ct-d03b6c"> - </span><span class="ct-793975">REGISTRY_HOST=registry</span></span><span class="line"><span class="ct-d03b6c"> - </span><span class="ct-793975">REGISTRY_PORT=5000</span></span><span class="line"><span class="ct-d03b6c"> - </span><span class="ct-793975">REGISTRY_PROTOCOL=http</span></span><span class="line"><span class="ct-d03b6c"> - </span><span class="ct-793975">ALLOW_REGISTRY_LOGIN=true</span></span><span class="line"><span class="ct-d03b6c"> - </span><span class="ct-793975">REGISTRY_ALLOW_DELETE=true</span></span><span class="line"><span class="ct-d03b6c"> - </span><span class="ct-793975">USERNAME=registry</span></span><span class="line"><span class="ct-d03b6c"> - </span><span class="ct-793975">PASSWORD=password</span></span></code></pre><!--]--></div><h2 id="squash-layers-on-registry"><a href="#squash-layers-on-registry"><!--[-->Squash layers on registry<!--]--></a></h2><p><!--[-->Sometimes you need to squash all layers in docker registry to free up disk space.<!--]--></p><ol><!--[--><li><!--[-->Run this command to mark oldest layers<!--]--></li><!--]--></ol><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-a54b1a"># Try this first</span></span><span class="line"><span class="ct-d03b6c">docker run \</span></span><span class="line"><span class="ct-d03b6c"> --rm anoxis/registry-cli \</span></span><span class="line"><span class="ct-d03b6c"> -r https://registry.url \</span></span><span class="line"><span class="ct-d03b6c"> -l user:password \</span></span><span class="line"><span class="ct-d03b6c"> --delete \</span></span><span class="line"><span class="ct-d03b6c"> --num 2</span></span><span class="line"></span><span class="line"><span class="ct-a54b1a"># Then this </span></span><span class="line"><span class="ct-d03b6c">docker run -it \</span></span><span class="line"><span class="ct-d03b6c"> -v /path/to/registry/data:/registry \</span></span><span class="line"><span class="ct-d03b6c"> -e REGISTRY_URL=https://registry.url \</span></span><span class="line"><span class="ct-d03b6c"> -e DRY_RUN=</span><span class="ct-793975">"false"</span><span class="ct-d03b6c"> \</span></span><span class="line"><span class="ct-d03b6c"> -e REGISTRY_AUTH=</span><span class="ct-793975">"user:password"</span><span class="ct-d03b6c"> \</span></span><span class="line"><span class="ct-d03b6c"> mortensrasmussen/docker-registry-manifest-cleanup</span></span></code></pre><!--]--></div><style>.ct-a54b1a{color:#8B949E}.ct-793975{color:#A5D6FF}.ct-9aa4ac{color:#7EE787}.ct-438f39{color:#FF7B72}.ct-d03b6c{color:#C9D1D9}.light .ct-d03b6c{color:#657B83}.light .ct-438f39{color:#859900}.light .ct-9aa4ac{color:#268BD2}.light .ct-793975{color:#2AA198}.light .ct-a54b1a{color:#93A1A1}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/docker/private-docker-registry/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695529979}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script><script type="module" src="/nuxt/ProseOl.a67fc8c4.js" crossorigin></script><script type="module" src="/nuxt/ProseLi.a224f663.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a aria-current="page" href="/docker/private-docker-registry" class="router-link-active _active_192pu_81 _link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Private Docker Registry</h1><article><div><p><!--[-->Suitable to work with <a href="/docker/drone-ci" class=""><!--[-->Drone-ci<!--]--></a> for hosting private #docker images.<!--]--></p><h2 id="sample-docker-compose-for-custom-docker-registry"><a href="#sample-docker-compose-for-custom-docker-registry"><!--[-->Sample docker-compose for custom docker registry<!--]--></a></h2><p><!--[-->This one brings up private docker registry with ui. First you'll need to generate password for it:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-0ef0d6">docker run \</span></span><span class="line"><span class="ct-0ef0d6"> --entrypoint htpasswd registry:2 \</span></span><span class="line"><span class="ct-0ef0d6"> -Bbn user mypassword </span><span class="ct-5d2f73">></span><span class="ct-0ef0d6"> auth/registry.password</span></span></code></pre><!--]--></div><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>yaml</span></button><!--[--><pre><code><span class="line"><span class="ct-b81191">version</span><span class="ct-0ef0d6">: </span><span class="ct-b5cc20">"3"</span></span><span class="line"><span class="ct-b81191">services</span><span class="ct-0ef0d6">:</span></span><span class="line"><span class="ct-0ef0d6"> </span><span class="ct-b81191">registry</span><span class="ct-0ef0d6">:</span></span><span class="line"><span class="ct-0ef0d6"> </span><span class="ct-b81191">container_name</span><span class="ct-0ef0d6">: </span><span class="ct-b5cc20">docker__registry</span></span><span class="line"><span class="ct-0ef0d6"> </span><span class="ct-b81191">image</span><span class="ct-0ef0d6">: </span><span class="ct-b5cc20">registry:2</span></span><span class="line"><span class="ct-0ef0d6"> </span><span class="ct-b81191">ports</span><span class="ct-0ef0d6">:</span></span><span class="line"><span class="ct-0ef0d6"> - </span><span class="ct-b5cc20">5000:5000</span></span><span class="line"><span class="ct-0ef0d6"> </span><span class="ct-b81191">restart</span><span class="ct-0ef0d6">: </span><span class="ct-b5cc20">always</span></span><span class="line"><span class="ct-0ef0d6"> </span><span class="ct-b81191">environment</span><span class="ct-0ef0d6">:</span></span><span class="line"><span class="ct-0ef0d6"> - </span><span class="ct-b5cc20">REGISTRY_STORAGE_FILESYSTEM_ROOTDIRECTORY=/data</span></span><span class="line"><span class="ct-0ef0d6"> - </span><span class="ct-b5cc20">REGISTRY_AUTH=htpasswd</span></span><span class="line"><span class="ct-0ef0d6"> - </span><span class="ct-b5cc20">REGISTRY_AUTH_HTPASSWD_REALM=Registry</span></span><span class="line"><span class="ct-0ef0d6"> - </span><span class="ct-b5cc20">REGISTRY_AUTH_HTPASSWD_PATH=/auth/registry.password</span></span><span class="line"><span class="ct-0ef0d6"> - </span><span class="ct-b5cc20">REGISTRY_HTTP_SECRET=password</span></span><span class="line"><span class="ct-0ef0d6"> - </span><span class="ct-b5cc20">REGISTRY_STORAGE_DELETE_ENABLED=true</span></span><span class="line"><span class="ct-0ef0d6"> </span><span class="ct-b81191">volumes</span><span class="ct-0ef0d6">:</span></span><span class="line"><span class="ct-0ef0d6"> - </span><span class="ct-b5cc20">./registry/auth:/auth</span></span><span class="line"><span class="ct-0ef0d6"> - </span><span class="ct-b5cc20">./registry/data:/data</span></span><span class="line"><span class="ct-0ef0d6"> </span><span class="ct-b81191">ui</span><span class="ct-0ef0d6">:</span></span><span class="line"><span class="ct-0ef0d6"> </span><span class="ct-b81191">container_name</span><span class="ct-0ef0d6">: </span><span class="ct-b5cc20">docker__ui</span></span><span class="line"><span class="ct-0ef0d6"> </span><span class="ct-b81191">image</span><span class="ct-0ef0d6">: </span><span class="ct-b5cc20">parabuzzle/craneoperator:latest</span></span><span class="line"><span class="ct-0ef0d6"> </span><span class="ct-b81191">ports</span><span class="ct-0ef0d6">:</span></span><span class="line"><span class="ct-0ef0d6"> - </span><span class="ct-b5cc20">80:80</span></span><span class="line"><span class="ct-0ef0d6"> </span><span class="ct-b81191">restart</span><span class="ct-0ef0d6">: </span><span class="ct-b5cc20">always</span></span><span class="line"><span class="ct-0ef0d6"> </span><span class="ct-b81191">environment</span><span class="ct-0ef0d6">:</span></span><span class="line"><span class="ct-0ef0d6"> - </span><span class="ct-b5cc20">REGISTRY_HOST=registry</span></span><span class="line"><span class="ct-0ef0d6"> - </span><span class="ct-b5cc20">REGISTRY_PORT=5000</span></span><span class="line"><span class="ct-0ef0d6"> - </span><span class="ct-b5cc20">REGISTRY_PROTOCOL=http</span></span><span class="line"><span class="ct-0ef0d6"> - </span><span class="ct-b5cc20">ALLOW_REGISTRY_LOGIN=true</span></span><span class="line"><span class="ct-0ef0d6"> - </span><span class="ct-b5cc20">REGISTRY_ALLOW_DELETE=true</span></span><span class="line"><span class="ct-0ef0d6"> - </span><span class="ct-b5cc20">USERNAME=registry</span></span><span class="line"><span class="ct-0ef0d6"> - </span><span class="ct-b5cc20">PASSWORD=password</span></span></code></pre><!--]--></div><h2 id="squash-layers-on-registry"><a href="#squash-layers-on-registry"><!--[-->Squash layers on registry<!--]--></a></h2><p><!--[-->Sometimes you need to squash all layers in docker registry to free up disk space.<!--]--></p><ol><!--[--><li><!--[-->Run this command to mark oldest layers<!--]--></li><!--]--></ol><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-ce2ef3"># Try this first</span></span><span class="line"><span class="ct-0ef0d6">docker run \</span></span><span class="line"><span class="ct-0ef0d6"> --rm anoxis/registry-cli \</span></span><span class="line"><span class="ct-0ef0d6"> -r https://registry.url \</span></span><span class="line"><span class="ct-0ef0d6"> -l user:password \</span></span><span class="line"><span class="ct-0ef0d6"> --delete \</span></span><span class="line"><span class="ct-0ef0d6"> --num 2</span></span><span class="line"></span><span class="line"><span class="ct-ce2ef3"># Then this </span></span><span class="line"><span class="ct-0ef0d6">docker run -it \</span></span><span class="line"><span class="ct-0ef0d6"> -v /path/to/registry/data:/registry \</span></span><span class="line"><span class="ct-0ef0d6"> -e REGISTRY_URL=https://registry.url \</span></span><span class="line"><span class="ct-0ef0d6"> -e DRY_RUN=</span><span class="ct-b5cc20">"false"</span><span class="ct-0ef0d6"> \</span></span><span class="line"><span class="ct-0ef0d6"> -e REGISTRY_AUTH=</span><span class="ct-b5cc20">"user:password"</span><span class="ct-0ef0d6"> \</span></span><span class="line"><span class="ct-0ef0d6"> mortensrasmussen/docker-registry-manifest-cleanup</span></span></code></pre><!--]--></div><style>.ct-ce2ef3{color:#8B949E}.ct-b5cc20{color:#A5D6FF}.ct-b81191{color:#7EE787}.ct-5d2f73{color:#FF7B72}.ct-0ef0d6{color:#C9D1D9}.light .ct-0ef0d6{color:#657B83}.light .ct-5d2f73{color:#859900}.light .ct-b81191{color:#268BD2}.light .ct-b5cc20{color:#2AA198}.light .ct-ce2ef3{color:#93A1A1}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/docker/private-docker-registry/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697991134}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script><script type="module" src="/nuxt/ProseOl.a67fc8c4.js" crossorigin></script><script type="module" src="/nuxt/ProseLi.a224f663.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/docker/refresh-containers-on-pull/_payload.js b/docs/docker/refresh-containers-on-pull/_payload.js
index 3c10755..7da23cb 100644
--- a/docs/docker/refresh-containers-on-pull/_payload.js
+++ b/docs/docker/refresh-containers-on-pull/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:t,_path:u},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-8eno4meLw0":{_path:u,_dir:"docker",_draft:n,_partial:n,_locale:"en",_empty:n,title:t,description:k,excerpt:{type:v,children:[{type:a,tag:w,props:{id:o},children:[{type:b,value:p}]},{type:a,tag:x,props:{},children:[{type:a,tag:h,props:{href:y,rel:[z]},children:[{type:b,value:A}]},{type:b,value:B},{type:a,tag:h,props:{href:C},children:[{type:b,value:D}]},{type:b,value:E},{type:a,tag:h,props:{href:l},children:[{type:b,value:l}]},{type:b,value:F}]},{type:a,tag:m,props:{code:q,language:G},children:[{type:a,tag:H,props:{},children:[{type:a,tag:m,props:{__ignoreMap:k},children:[{type:b,value:q}]}]}]}]},body:{type:v,children:[{type:a,tag:w,props:{id:o},children:[{type:b,value:p}]},{type:a,tag:x,props:{},children:[{type:a,tag:h,props:{href:y,rel:[z]},children:[{type:b,value:A}]},{type:b,value:B},{type:a,tag:h,props:{href:C},children:[{type:b,value:D}]},{type:b,value:E},{type:a,tag:h,props:{href:l},children:[{type:b,value:l}]},{type:b,value:F}]},{type:a,tag:m,props:{code:q,language:G},children:[{type:a,tag:H,props:{},children:[{type:a,tag:m,props:{__ignoreMap:k},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:f},children:[{type:b,value:"version"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\"3\""}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:f},children:[{type:b,value:"services"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" "}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"watchtower"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"container_name"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"docker__watchtower"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"image"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"v2tec\u002Fwatchtower"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"restart"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"always"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"volumes"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:I}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\u002Fvar\u002Frun\u002Fdocker.sock:\u002Fvar\u002Frun\u002Fdocker.sock"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:I}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\u002Fhome\u002Fuser\u002F.docker\u002Fconfig.json:\u002Fconfig.json"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"command"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"--interval 60 image_1 image_2"}]}]}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-1aa90a{color:#A5D6FF}.ct-1873fc{color:#C9D1D9}.ct-31f911{color:#7EE787}.light .ct-31f911{color:#268BD2}.light .ct-1873fc{color:#657B83}.light .ct-1aa90a{color:#2AA198}"}]}],toc:{title:k,searchDepth:s,depth:s,links:[{id:o,depth:s,text:p}]}},_type:"markdown",_id:"content:Docker:Refresh containers on pull.md",_source:"content",_file:"Docker\u002FRefresh containers on pull.md",_extension:"md"}},prerenderedAt:1703695530030}}("element","text","span","ct-1873fc","line","ct-31f911","ct-1aa90a","a",": "," ","","Drone-ci","code",false,"setting-up-watchtower","Setting up watchtower","version: \"3\"\n\nservices:\n watchtower:\n container_name: docker__watchtower\n image: v2tec\u002Fwatchtower\n restart: always\n volumes:\n - \u002Fvar\u002Frun\u002Fdocker.sock:\u002Fvar\u002Frun\u002Fdocker.sock\n - \u002Fhome\u002Fuser\u002F.docker\u002Fconfig.json:\u002Fconfig.json\n command: --interval 60 image_1 image_2\n",":",2,"Refresh Containers On Pull","\u002Fdocker\u002Frefresh-containers-on-pull","root","h2","p","https:\u002F\u002Fcontainrrr.dev\u002Fwatchtower\u002F","nofollow","Watchtower"," will automatically pull updated #docker containers. Can be used with ","Private%20docker%20registry","Private docker registry"," and ",".","yaml","pre"," - "))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:t,_path:u},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-8eno4meLw0":{_path:u,_dir:"docker",_draft:n,_partial:n,_locale:"en",_empty:n,title:t,description:k,excerpt:{type:v,children:[{type:a,tag:w,props:{id:o},children:[{type:b,value:p}]},{type:a,tag:x,props:{},children:[{type:a,tag:h,props:{href:y,rel:[z]},children:[{type:b,value:A}]},{type:b,value:B},{type:a,tag:h,props:{href:C},children:[{type:b,value:D}]},{type:b,value:E},{type:a,tag:h,props:{href:l},children:[{type:b,value:l}]},{type:b,value:F}]},{type:a,tag:m,props:{code:q,language:G},children:[{type:a,tag:H,props:{},children:[{type:a,tag:m,props:{__ignoreMap:k},children:[{type:b,value:q}]}]}]}]},body:{type:v,children:[{type:a,tag:w,props:{id:o},children:[{type:b,value:p}]},{type:a,tag:x,props:{},children:[{type:a,tag:h,props:{href:y,rel:[z]},children:[{type:b,value:A}]},{type:b,value:B},{type:a,tag:h,props:{href:C},children:[{type:b,value:D}]},{type:b,value:E},{type:a,tag:h,props:{href:l},children:[{type:b,value:l}]},{type:b,value:F}]},{type:a,tag:m,props:{code:q,language:G},children:[{type:a,tag:H,props:{},children:[{type:a,tag:m,props:{__ignoreMap:k},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:f},children:[{type:b,value:"version"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\"3\""}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:f},children:[{type:b,value:"services"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" "}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"watchtower"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"container_name"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"docker__watchtower"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"image"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"v2tec\u002Fwatchtower"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"restart"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"always"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"volumes"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:I}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\u002Fvar\u002Frun\u002Fdocker.sock:\u002Fvar\u002Frun\u002Fdocker.sock"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:I}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\u002Fhome\u002Fuser\u002F.docker\u002Fconfig.json:\u002Fconfig.json"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"command"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"--interval 60 image_1 image_2"}]}]}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-b05832{color:#A5D6FF}.ct-2fce29{color:#C9D1D9}.ct-fcd641{color:#7EE787}.light .ct-fcd641{color:#268BD2}.light .ct-2fce29{color:#657B83}.light .ct-b05832{color:#2AA198}"}]}],toc:{title:k,searchDepth:s,depth:s,links:[{id:o,depth:s,text:p}]}},_type:"markdown",_id:"content:Docker:Refresh containers on pull.md",_source:"content",_file:"Docker\u002FRefresh containers on pull.md",_extension:"md"}},prerenderedAt:1703697991215}}("element","text","span","ct-2fce29","line","ct-fcd641","ct-b05832","a",": "," ","","Drone-ci","code",false,"setting-up-watchtower","Setting up watchtower","version: \"3\"\n\nservices:\n watchtower:\n container_name: docker__watchtower\n image: v2tec\u002Fwatchtower\n restart: always\n volumes:\n - \u002Fvar\u002Frun\u002Fdocker.sock:\u002Fvar\u002Frun\u002Fdocker.sock\n - \u002Fhome\u002Fuser\u002F.docker\u002Fconfig.json:\u002Fconfig.json\n command: --interval 60 image_1 image_2\n",":",2,"Refresh Containers On Pull","\u002Fdocker\u002Frefresh-containers-on-pull","root","h2","p","https:\u002F\u002Fcontainrrr.dev\u002Fwatchtower\u002F","nofollow","Watchtower"," will automatically pull updated #docker containers. Can be used with ","Private%20docker%20registry","Private docker registry"," and ",".","yaml","pre"," - "))
\ No newline at end of file
diff --git a/docs/docker/refresh-containers-on-pull/index.html b/docs/docker/refresh-containers-on-pull/index.html
index 5c4d016..873a4b8 100644
--- a/docs/docker/refresh-containers-on-pull/index.html
+++ b/docs/docker/refresh-containers-on-pull/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Refresh Containers On Pull • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="head:count" content="2"><link rel="modulepreload" href="/docker/refresh-containers-on-pull/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseH2.d950f051.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseA.c52e44f8.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a aria-current="page" href="/docker/refresh-containers-on-pull" class="router-link-active _active_192pu_81 _link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Refresh Containers On Pull</h1><article><div><h2 id="setting-up-watchtower"><a href="#setting-up-watchtower"><!--[-->Setting up watchtower<!--]--></a></h2><p><!--[--><a href="https://containrrr.dev/watchtower/" rel="nofollow" target="_blank"><!--[-->Watchtower<!--]--></a> will automatically pull updated #docker containers. Can be used with <a href="/docker/private-docker-registry" class=""><!--[-->Private docker registry<!--]--></a> and <a href="/docker/drone-ci" class=""><!--[-->Drone-ci<!--]--></a>.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>yaml</span></button><!--[--><pre><code><span class="line"><span class="ct-31f911">version</span><span class="ct-1873fc">: </span><span class="ct-1aa90a">"3"</span></span><span class="line"></span><span class="line"><span class="ct-31f911">services</span><span class="ct-1873fc">:</span></span><span class="line"><span class="ct-1873fc"> </span><span class="ct-31f911">watchtower</span><span class="ct-1873fc">:</span></span><span class="line"><span class="ct-1873fc"> </span><span class="ct-31f911">container_name</span><span class="ct-1873fc">: </span><span class="ct-1aa90a">docker__watchtower</span></span><span class="line"><span class="ct-1873fc"> </span><span class="ct-31f911">image</span><span class="ct-1873fc">: </span><span class="ct-1aa90a">v2tec/watchtower</span></span><span class="line"><span class="ct-1873fc"> </span><span class="ct-31f911">restart</span><span class="ct-1873fc">: </span><span class="ct-1aa90a">always</span></span><span class="line"><span class="ct-1873fc"> </span><span class="ct-31f911">volumes</span><span class="ct-1873fc">:</span></span><span class="line"><span class="ct-1873fc"> - </span><span class="ct-1aa90a">/var/run/docker.sock:/var/run/docker.sock</span></span><span class="line"><span class="ct-1873fc"> - </span><span class="ct-1aa90a">/home/user/.docker/config.json:/config.json</span></span><span class="line"><span class="ct-1873fc"> </span><span class="ct-31f911">command</span><span class="ct-1873fc">: </span><span class="ct-1aa90a">--interval 60 image_1 image_2</span></span></code></pre><!--]--></div><style>.ct-1aa90a{color:#A5D6FF}.ct-1873fc{color:#C9D1D9}.ct-31f911{color:#7EE787}.light .ct-31f911{color:#268BD2}.light .ct-1873fc{color:#657B83}.light .ct-1aa90a{color:#2AA198}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/docker/refresh-containers-on-pull/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695530030}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a aria-current="page" href="/docker/refresh-containers-on-pull" class="router-link-active _active_192pu_81 _link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Refresh Containers On Pull</h1><article><div><h2 id="setting-up-watchtower"><a href="#setting-up-watchtower"><!--[-->Setting up watchtower<!--]--></a></h2><p><!--[--><a href="https://containrrr.dev/watchtower/" rel="nofollow" target="_blank"><!--[-->Watchtower<!--]--></a> will automatically pull updated #docker containers. Can be used with <a href="/docker/private-docker-registry" class=""><!--[-->Private docker registry<!--]--></a> and <a href="/docker/drone-ci" class=""><!--[-->Drone-ci<!--]--></a>.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>yaml</span></button><!--[--><pre><code><span class="line"><span class="ct-fcd641">version</span><span class="ct-2fce29">: </span><span class="ct-b05832">"3"</span></span><span class="line"></span><span class="line"><span class="ct-fcd641">services</span><span class="ct-2fce29">:</span></span><span class="line"><span class="ct-2fce29"> </span><span class="ct-fcd641">watchtower</span><span class="ct-2fce29">:</span></span><span class="line"><span class="ct-2fce29"> </span><span class="ct-fcd641">container_name</span><span class="ct-2fce29">: </span><span class="ct-b05832">docker__watchtower</span></span><span class="line"><span class="ct-2fce29"> </span><span class="ct-fcd641">image</span><span class="ct-2fce29">: </span><span class="ct-b05832">v2tec/watchtower</span></span><span class="line"><span class="ct-2fce29"> </span><span class="ct-fcd641">restart</span><span class="ct-2fce29">: </span><span class="ct-b05832">always</span></span><span class="line"><span class="ct-2fce29"> </span><span class="ct-fcd641">volumes</span><span class="ct-2fce29">:</span></span><span class="line"><span class="ct-2fce29"> - </span><span class="ct-b05832">/var/run/docker.sock:/var/run/docker.sock</span></span><span class="line"><span class="ct-2fce29"> - </span><span class="ct-b05832">/home/user/.docker/config.json:/config.json</span></span><span class="line"><span class="ct-2fce29"> </span><span class="ct-fcd641">command</span><span class="ct-2fce29">: </span><span class="ct-b05832">--interval 60 image_1 image_2</span></span></code></pre><!--]--></div><style>.ct-b05832{color:#A5D6FF}.ct-2fce29{color:#C9D1D9}.ct-fcd641{color:#7EE787}.light .ct-fcd641{color:#268BD2}.light .ct-2fce29{color:#657B83}.light .ct-b05832{color:#2AA198}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/docker/refresh-containers-on-pull/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697991215}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/docker/seed-dump-inside-docker/_payload.js b/docs/docker/seed-dump-inside-docker/_payload.js
index d004771..ce8cfaa 100644
--- a/docs/docker/seed-dump-inside-docker/_payload.js
+++ b/docs/docker/seed-dump-inside-docker/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:o,_path:p},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-TQfPEagSjQ":{_path:p,_dir:"docker",_draft:j,_partial:j,_locale:"en",_empty:j,title:o,description:"If you need to seed .sql dump in #docker container, just run this command. Also you can try to rsync file with SSH to get it from remote host.",excerpt:{type:q,children:[{type:a,tag:r,props:{},children:[{type:b,value:s},{type:a,tag:t,props:{},children:[{type:b,value:u}]},{type:b,value:v},{type:a,tag:w,props:{href:x},children:[{type:b,value:y}]},{type:b,value:z}]},{type:a,tag:i,props:{code:k,language:A},children:[{type:a,tag:B,props:{},children:[{type:a,tag:i,props:{__ignoreMap:l},children:[{type:b,value:k}]}]}]}]},body:{type:q,children:[{type:a,tag:r,props:{},children:[{type:b,value:s},{type:a,tag:t,props:{},children:[{type:b,value:u}]},{type:b,value:v},{type:a,tag:w,props:{href:x},children:[{type:b,value:y}]},{type:b,value:z}]},{type:a,tag:i,props:{code:k,language:A},children:[{type:a,tag:B,props:{},children:[{type:a,tag:i,props:{__ignoreMap:l},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:m},children:[{type:b,value:C}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:m},children:[{type:b,value:"# usage: .\u002Fscript.sh \"\u002Fpath\u002Fto\u002Fdump.sql\""}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:m},children:[{type:b,value:C}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"DUMP_PATH="}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"1"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"CONTAINER="}]},{type:a,tag:c,props:{class:n},children:[{type:b,value:"\"db\""}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"USER=root"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"PASSWORD=password"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"DB=database"}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"cat "}]},{type:a,tag:c,props:{class:n},children:[{type:b,value:D}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"DUMP_PATH"}]},{type:a,tag:c,props:{class:n},children:[{type:b,value:D}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:E}]},{type:a,tag:c,props:{class:"ct-05f29a"},children:[{type:b,value:"|"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" docker "}]},{type:a,tag:c,props:{class:"ct-6472e8"},children:[{type:b,value:"exec"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" -i "}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"CONTAINER"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" mysql -u"}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"USER"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" -p"}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"PASSWORD"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:E}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"DB"}]}]}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-6472e8{color:#79C0FF}.ct-05f29a{color:#FF7B72}.ct-273241{color:#A5D6FF}.ct-0873da{color:#C9D1D9}.ct-d1eb62{color:#C9D1D9}.ct-9df562{color:#C9D1D9}.ct-773aeb{color:#8B949E}.light .ct-773aeb{color:#93A1A1}.light .ct-9df562{color:#657B83}.light .ct-d1eb62{color:#859900}.light .ct-0873da{color:#268BD2}.light .ct-273241{color:#2AA198}.light .ct-05f29a{color:#859900}.light .ct-6472e8{color:#268BD2}"}]}],toc:{title:l,searchDepth:F,depth:F,links:[]}},_type:"markdown",_id:"content:Docker:Seed dump inside docker.md",_source:"content",_file:"Docker\u002FSeed dump inside docker.md",_extension:"md"}},prerenderedAt:1703695530061}}("element","text","span","ct-9df562","line","ct-d1eb62","$","ct-0873da","code",false,"#####\n# usage: .\u002Fscript.sh \"\u002Fpath\u002Fto\u002Fdump.sql\"\n#####\n\nDUMP_PATH=$1\nCONTAINER=\"db\"\nUSER=root\nPASSWORD=password\nDB=database\n\ncat \"$DUMP_PATH\" | docker exec -i $CONTAINER mysql -u$USER -p$PASSWORD $DB\n","","ct-773aeb","ct-273241","Seed Dump Inside Docker","\u002Fdocker\u002Fseed-dump-inside-docker","root","p","If you need to seed ","code-inline",".sql"," dump in #docker container, just run this command. Also you can try to ","a","\u002Flinux\u002FRsync%20file%20with%20SSH","rsync file with SSH"," to get it from remote host.","shell","pre","#####","\""," ",2))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:o,_path:p},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-TQfPEagSjQ":{_path:p,_dir:"docker",_draft:j,_partial:j,_locale:"en",_empty:j,title:o,description:"If you need to seed .sql dump in #docker container, just run this command. Also you can try to rsync file with SSH to get it from remote host.",excerpt:{type:q,children:[{type:a,tag:r,props:{},children:[{type:b,value:s},{type:a,tag:t,props:{},children:[{type:b,value:u}]},{type:b,value:v},{type:a,tag:w,props:{href:x},children:[{type:b,value:y}]},{type:b,value:z}]},{type:a,tag:i,props:{code:k,language:A},children:[{type:a,tag:B,props:{},children:[{type:a,tag:i,props:{__ignoreMap:l},children:[{type:b,value:k}]}]}]}]},body:{type:q,children:[{type:a,tag:r,props:{},children:[{type:b,value:s},{type:a,tag:t,props:{},children:[{type:b,value:u}]},{type:b,value:v},{type:a,tag:w,props:{href:x},children:[{type:b,value:y}]},{type:b,value:z}]},{type:a,tag:i,props:{code:k,language:A},children:[{type:a,tag:B,props:{},children:[{type:a,tag:i,props:{__ignoreMap:l},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:m},children:[{type:b,value:C}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:m},children:[{type:b,value:"# usage: .\u002Fscript.sh \"\u002Fpath\u002Fto\u002Fdump.sql\""}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:m},children:[{type:b,value:C}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"DUMP_PATH="}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"1"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"CONTAINER="}]},{type:a,tag:c,props:{class:n},children:[{type:b,value:"\"db\""}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"USER=root"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"PASSWORD=password"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"DB=database"}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"cat "}]},{type:a,tag:c,props:{class:n},children:[{type:b,value:D}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"DUMP_PATH"}]},{type:a,tag:c,props:{class:n},children:[{type:b,value:D}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:E}]},{type:a,tag:c,props:{class:"ct-d9cdb7"},children:[{type:b,value:"|"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" docker "}]},{type:a,tag:c,props:{class:"ct-695b92"},children:[{type:b,value:"exec"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" -i "}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"CONTAINER"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" mysql -u"}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"USER"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" -p"}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"PASSWORD"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:E}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"DB"}]}]}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-695b92{color:#79C0FF}.ct-d9cdb7{color:#FF7B72}.ct-ee805d{color:#A5D6FF}.ct-a8c357{color:#C9D1D9}.ct-942add{color:#C9D1D9}.ct-82f16d{color:#C9D1D9}.ct-ebdffd{color:#8B949E}.light .ct-ebdffd{color:#93A1A1}.light .ct-82f16d{color:#657B83}.light .ct-942add{color:#859900}.light .ct-a8c357{color:#268BD2}.light .ct-ee805d{color:#2AA198}.light .ct-d9cdb7{color:#859900}.light .ct-695b92{color:#268BD2}"}]}],toc:{title:l,searchDepth:F,depth:F,links:[]}},_type:"markdown",_id:"content:Docker:Seed dump inside docker.md",_source:"content",_file:"Docker\u002FSeed dump inside docker.md",_extension:"md"}},prerenderedAt:1703697991260}}("element","text","span","ct-82f16d","line","ct-942add","$","ct-a8c357","code",false,"#####\n# usage: .\u002Fscript.sh \"\u002Fpath\u002Fto\u002Fdump.sql\"\n#####\n\nDUMP_PATH=$1\nCONTAINER=\"db\"\nUSER=root\nPASSWORD=password\nDB=database\n\ncat \"$DUMP_PATH\" | docker exec -i $CONTAINER mysql -u$USER -p$PASSWORD $DB\n","","ct-ebdffd","ct-ee805d","Seed Dump Inside Docker","\u002Fdocker\u002Fseed-dump-inside-docker","root","p","If you need to seed ","code-inline",".sql"," dump in #docker container, just run this command. Also you can try to ","a","\u002Flinux\u002FRsync%20file%20with%20SSH","rsync file with SSH"," to get it from remote host.","shell","pre","#####","\""," ",2))
\ No newline at end of file
diff --git a/docs/docker/seed-dump-inside-docker/index.html b/docs/docker/seed-dump-inside-docker/index.html
index b5b2231..0012ebf 100644
--- a/docs/docker/seed-dump-inside-docker/index.html
+++ b/docs/docker/seed-dump-inside-docker/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Seed Dump Inside Docker • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="If you need to seed .sql dump in #docker container, just run this command. Also you can try to rsync file with SSH to get it from remote host."><meta name="head:count" content="3"><link rel="modulepreload" href="/docker/seed-dump-inside-docker/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCodeInline.d9bcf614.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseA.c52e44f8.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a aria-current="page" href="/docker/seed-dump-inside-docker" class="router-link-active _active_192pu_81 _link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Seed Dump Inside Docker</h1><article><div><p><!--[-->If you need to seed <code><!--[-->.sql<!--]--></code> dump in #docker container, just run this command. Also you can try to <a href="/linux/rsync-file-with-ssh" class=""><!--[-->rsync file with SSH<!--]--></a> to get it from remote host.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-773aeb">#####</span></span><span class="line"><span class="ct-773aeb"># usage: ./script.sh "/path/to/dump.sql"</span></span><span class="line"><span class="ct-773aeb">#####</span></span><span class="line"></span><span class="line"><span class="ct-9df562">DUMP_PATH=</span><span class="ct-d1eb62">$</span><span class="ct-0873da">1</span></span><span class="line"><span class="ct-9df562">CONTAINER=</span><span class="ct-273241">"db"</span></span><span class="line"><span class="ct-9df562">USER=root</span></span><span class="line"><span class="ct-9df562">PASSWORD=password</span></span><span class="line"><span class="ct-9df562">DB=database</span></span><span class="line"></span><span class="line"><span class="ct-9df562">cat </span><span class="ct-273241">"</span><span class="ct-d1eb62">$</span><span class="ct-0873da">DUMP_PATH</span><span class="ct-273241">"</span><span class="ct-9df562"> </span><span class="ct-05f29a">|</span><span class="ct-9df562"> docker </span><span class="ct-6472e8">exec</span><span class="ct-9df562"> -i </span><span class="ct-d1eb62">$</span><span class="ct-0873da">CONTAINER</span><span class="ct-9df562"> mysql -u</span><span class="ct-d1eb62">$</span><span class="ct-0873da">USER</span><span class="ct-9df562"> -p</span><span class="ct-d1eb62">$</span><span class="ct-0873da">PASSWORD</span><span class="ct-9df562"> </span><span class="ct-d1eb62">$</span><span class="ct-0873da">DB</span></span></code></pre><!--]--></div><style>.ct-6472e8{color:#79C0FF}.ct-05f29a{color:#FF7B72}.ct-273241{color:#A5D6FF}.ct-0873da{color:#C9D1D9}.ct-d1eb62{color:#C9D1D9}.ct-9df562{color:#C9D1D9}.ct-773aeb{color:#8B949E}.light .ct-773aeb{color:#93A1A1}.light .ct-9df562{color:#657B83}.light .ct-d1eb62{color:#859900}.light .ct-0873da{color:#268BD2}.light .ct-273241{color:#2AA198}.light .ct-05f29a{color:#859900}.light .ct-6472e8{color:#268BD2}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/docker/seed-dump-inside-docker/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695530061}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a aria-current="page" href="/docker/seed-dump-inside-docker" class="router-link-active _active_192pu_81 _link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Seed Dump Inside Docker</h1><article><div><p><!--[-->If you need to seed <code><!--[-->.sql<!--]--></code> dump in #docker container, just run this command. Also you can try to <a href="/linux/rsync-file-with-ssh" class=""><!--[-->rsync file with SSH<!--]--></a> to get it from remote host.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-ebdffd">#####</span></span><span class="line"><span class="ct-ebdffd"># usage: ./script.sh "/path/to/dump.sql"</span></span><span class="line"><span class="ct-ebdffd">#####</span></span><span class="line"></span><span class="line"><span class="ct-82f16d">DUMP_PATH=</span><span class="ct-942add">$</span><span class="ct-a8c357">1</span></span><span class="line"><span class="ct-82f16d">CONTAINER=</span><span class="ct-ee805d">"db"</span></span><span class="line"><span class="ct-82f16d">USER=root</span></span><span class="line"><span class="ct-82f16d">PASSWORD=password</span></span><span class="line"><span class="ct-82f16d">DB=database</span></span><span class="line"></span><span class="line"><span class="ct-82f16d">cat </span><span class="ct-ee805d">"</span><span class="ct-942add">$</span><span class="ct-a8c357">DUMP_PATH</span><span class="ct-ee805d">"</span><span class="ct-82f16d"> </span><span class="ct-d9cdb7">|</span><span class="ct-82f16d"> docker </span><span class="ct-695b92">exec</span><span class="ct-82f16d"> -i </span><span class="ct-942add">$</span><span class="ct-a8c357">CONTAINER</span><span class="ct-82f16d"> mysql -u</span><span class="ct-942add">$</span><span class="ct-a8c357">USER</span><span class="ct-82f16d"> -p</span><span class="ct-942add">$</span><span class="ct-a8c357">PASSWORD</span><span class="ct-82f16d"> </span><span class="ct-942add">$</span><span class="ct-a8c357">DB</span></span></code></pre><!--]--></div><style>.ct-695b92{color:#79C0FF}.ct-d9cdb7{color:#FF7B72}.ct-ee805d{color:#A5D6FF}.ct-a8c357{color:#C9D1D9}.ct-942add{color:#C9D1D9}.ct-82f16d{color:#C9D1D9}.ct-ebdffd{color:#8B949E}.light .ct-ebdffd{color:#93A1A1}.light .ct-82f16d{color:#657B83}.light .ct-942add{color:#859900}.light .ct-a8c357{color:#268BD2}.light .ct-ee805d{color:#2AA198}.light .ct-d9cdb7{color:#859900}.light .ct-695b92{color:#268BD2}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/docker/seed-dump-inside-docker/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697991260}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/docker/wait-for-mysql/_payload.js b/docs/docker/wait-for-mysql/_payload.js
index ac98147..df7931a 100644
--- a/docs/docker/wait-for-mysql/_payload.js
+++ b/docs/docker/wait-for-mysql/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:z,_path:A},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-LRHpXC9dvS":{_path:A,_dir:"docker",_draft:r,_partial:r,_locale:"en",_empty:r,title:z,description:"wait-for-it.sh doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before #mysql is ready to accept connections",excerpt:{type:B,children:[{type:a,tag:i,props:{},children:[{type:a,tag:m,props:{href:C,rel:[D]},children:[{type:c,value:E}]},{type:c,value:F}]},{type:a,tag:i,props:{},children:[{type:c,value:G}]},{type:a,tag:i,props:{},children:[{type:c,value:H},{type:a,tag:I,props:{},children:[{type:c,value:J}]},{type:c,value:K}]},{type:a,tag:n,props:{code:s,language:L},children:[{type:a,tag:M,props:{},children:[{type:a,tag:n,props:{__ignoreMap:t},children:[{type:c,value:s}]}]}]},{type:a,tag:i,props:{},children:[{type:a,tag:m,props:{href:N},children:[{type:c,value:O}]}]}]},body:{type:B,children:[{type:a,tag:i,props:{},children:[{type:a,tag:m,props:{href:C,rel:[D]},children:[{type:c,value:E}]},{type:c,value:F}]},{type:a,tag:i,props:{},children:[{type:c,value:G}]},{type:a,tag:i,props:{},children:[{type:c,value:H},{type:a,tag:I,props:{},children:[{type:c,value:J}]},{type:c,value:K}]},{type:a,tag:n,props:{code:s,language:L},children:[{type:a,tag:M,props:{},children:[{type:a,tag:n,props:{__ignoreMap:t},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:u},children:[{type:c,value:"# Waits for mysql to become actually available"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:"ct-e5eecc"},children:[{type:c,value:"wait_for_mysql"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"() {"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" query="}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"\"SELECT count(*) FROM users\""}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" timeout=180 "}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"# 3 minutes limit"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" i=0"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"while"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"!"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" docker "}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:"exec"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" -it "}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" mysql --user="}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"2"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" -e "}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"query"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"do"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" sleep 1"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" i="}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"$(("}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"+"}]},{type:a,tag:b,props:{class:"ct-4500fd"},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"))"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"if"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" [[ "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"-ge"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"timeout"}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" ]]"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"then"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:"echo"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"\"[Error] can't properly query MySQL after "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:" secs\""}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:"exit"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" 1"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"fi"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"done"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:u},children:[{type:c,value:"# usage: wait_for_mysql miin-mysql-dev root password database"}]}]}]}]}]},{type:a,tag:i,props:{},children:[{type:a,tag:m,props:{href:N},children:[{type:c,value:O}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-4500fd{color:#79C0FF}.ct-b31d54{color:#C9D1D9}.ct-57393f{color:#C9D1D9}.ct-bce09d{color:#79C0FF}.ct-34dae7{color:#FF7B72}.ct-222dd0{color:#A5D6FF}.ct-f1b587{color:#C9D1D9}.ct-e5eecc{color:#D2A8FF}.ct-a8e5eb{color:#8B949E}.light .ct-a8e5eb{color:#93A1A1}.light .ct-e5eecc{color:#268BD2}.light .ct-f1b587{color:#657B83}.light .ct-222dd0{color:#2AA198}.light .ct-34dae7{color:#859900}.light .ct-bce09d{color:#268BD2}.light .ct-57393f{color:#859900}.light .ct-b31d54{color:#268BD2}.light .ct-4500fd{color:#D33682}"}]}],toc:{title:t,searchDepth:S,depth:S,links:[]}},_type:"markdown",_id:"content:Docker:Wait for mysql.md",_source:"content",_file:"Docker\u002FWait for mysql.md",_extension:"md"}},prerenderedAt:1703695530089}}("element","span","text","ct-f1b587","line","ct-222dd0","ct-34dae7","ct-57393f","p","\"","ct-b31d54"," ","a","code"," ","$","}",false,"# Waits for mysql to become actually available\nwait_for_mysql() {\n query=\"SELECT count(*) FROM users\"\n \n timeout=180 # 3 minutes limit\n i=0\n \n while ! docker exec -it \"$1\" mysql --user=\"$2\" --password=\"$3\" -e \"$query\" $4 \u003E\u002Fdev\u002Fnull 2\u003E&1; do\n sleep 1;\n\n i=$(($i+1))\n if [[ ${i} -ge ${timeout} ]]; then\n echo \"[Error] can't properly query MySQL after ${i} secs\"\n exit 1;\n fi\n done\n}\n\n# usage: wait_for_mysql miin-mysql-dev root password database\n","","ct-a8e5eb","ct-bce09d",";","i","${","Wait For Mysql","\u002Fdocker\u002Fwait-for-mysql","root","https:\u002F\u002Fgithub.com\u002Fvishnubob\u002Fwait-for-it","nofollow","wait-for-it.sh"," doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before #mysql is ready to accept connections","This script waits for first successful query from database or exits with non-zero status after timeout.","Don't forget to change ","code-inline","$query"," for the actually working one.","shell","pre","Wait%20for%20redis","Wait for redis","1"," "," ",2))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:z,_path:A},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-LRHpXC9dvS":{_path:A,_dir:"docker",_draft:r,_partial:r,_locale:"en",_empty:r,title:z,description:"wait-for-it.sh doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before #mysql is ready to accept connections",excerpt:{type:B,children:[{type:a,tag:i,props:{},children:[{type:a,tag:m,props:{href:C,rel:[D]},children:[{type:c,value:E}]},{type:c,value:F}]},{type:a,tag:i,props:{},children:[{type:c,value:G}]},{type:a,tag:i,props:{},children:[{type:c,value:H},{type:a,tag:I,props:{},children:[{type:c,value:J}]},{type:c,value:K}]},{type:a,tag:n,props:{code:s,language:L},children:[{type:a,tag:M,props:{},children:[{type:a,tag:n,props:{__ignoreMap:t},children:[{type:c,value:s}]}]}]},{type:a,tag:i,props:{},children:[{type:a,tag:m,props:{href:N},children:[{type:c,value:O}]}]}]},body:{type:B,children:[{type:a,tag:i,props:{},children:[{type:a,tag:m,props:{href:C,rel:[D]},children:[{type:c,value:E}]},{type:c,value:F}]},{type:a,tag:i,props:{},children:[{type:c,value:G}]},{type:a,tag:i,props:{},children:[{type:c,value:H},{type:a,tag:I,props:{},children:[{type:c,value:J}]},{type:c,value:K}]},{type:a,tag:n,props:{code:s,language:L},children:[{type:a,tag:M,props:{},children:[{type:a,tag:n,props:{__ignoreMap:t},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:u},children:[{type:c,value:"# Waits for mysql to become actually available"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:"ct-3f942f"},children:[{type:c,value:"wait_for_mysql"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"() {"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" query="}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"\"SELECT count(*) FROM users\""}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" timeout=180 "}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"# 3 minutes limit"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" i=0"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"while"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"!"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" docker "}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:"exec"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" -it "}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" mysql --user="}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"2"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" -e "}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"query"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"do"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" sleep 1"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" i="}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"$(("}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"+"}]},{type:a,tag:b,props:{class:"ct-0c9ed4"},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"))"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"if"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" [[ "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"-ge"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"timeout"}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" ]]"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"then"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:"echo"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"\"[Error] can't properly query MySQL after "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:" secs\""}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:"exit"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" 1"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"fi"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"done"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:u},children:[{type:c,value:"# usage: wait_for_mysql miin-mysql-dev root password database"}]}]}]}]}]},{type:a,tag:i,props:{},children:[{type:a,tag:m,props:{href:N},children:[{type:c,value:O}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-0c9ed4{color:#79C0FF}.ct-6a8f91{color:#C9D1D9}.ct-1b10dc{color:#C9D1D9}.ct-ac7bf2{color:#79C0FF}.ct-94f68f{color:#FF7B72}.ct-1c7c94{color:#A5D6FF}.ct-753636{color:#C9D1D9}.ct-3f942f{color:#D2A8FF}.ct-0146c3{color:#8B949E}.light .ct-0146c3{color:#93A1A1}.light .ct-3f942f{color:#268BD2}.light .ct-753636{color:#657B83}.light .ct-1c7c94{color:#2AA198}.light .ct-94f68f{color:#859900}.light .ct-ac7bf2{color:#268BD2}.light .ct-1b10dc{color:#859900}.light .ct-6a8f91{color:#268BD2}.light .ct-0c9ed4{color:#D33682}"}]}],toc:{title:t,searchDepth:S,depth:S,links:[]}},_type:"markdown",_id:"content:Docker:Wait for mysql.md",_source:"content",_file:"Docker\u002FWait for mysql.md",_extension:"md"}},prerenderedAt:1703697991312}}("element","span","text","ct-753636","line","ct-1c7c94","ct-94f68f","ct-1b10dc","p","\"","ct-6a8f91"," ","a","code"," ","$","}",false,"# Waits for mysql to become actually available\nwait_for_mysql() {\n query=\"SELECT count(*) FROM users\"\n \n timeout=180 # 3 minutes limit\n i=0\n \n while ! docker exec -it \"$1\" mysql --user=\"$2\" --password=\"$3\" -e \"$query\" $4 \u003E\u002Fdev\u002Fnull 2\u003E&1; do\n sleep 1;\n\n i=$(($i+1))\n if [[ ${i} -ge ${timeout} ]]; then\n echo \"[Error] can't properly query MySQL after ${i} secs\"\n exit 1;\n fi\n done\n}\n\n# usage: wait_for_mysql miin-mysql-dev root password database\n","","ct-0146c3","ct-ac7bf2",";","i","${","Wait For Mysql","\u002Fdocker\u002Fwait-for-mysql","root","https:\u002F\u002Fgithub.com\u002Fvishnubob\u002Fwait-for-it","nofollow","wait-for-it.sh"," doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before #mysql is ready to accept connections","This script waits for first successful query from database or exits with non-zero status after timeout.","Don't forget to change ","code-inline","$query"," for the actually working one.","shell","pre","Wait%20for%20redis","Wait for redis","1"," "," ",2))
\ No newline at end of file
diff --git a/docs/docker/wait-for-mysql/index.html b/docs/docker/wait-for-mysql/index.html
index cd1c3dd..6eba427 100644
--- a/docs/docker/wait-for-mysql/index.html
+++ b/docs/docker/wait-for-mysql/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Wait For Mysql • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="wait-for-it.sh doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before #mysql is ready to accept connections"><meta name="head:count" content="3"><link rel="modulepreload" href="/docker/wait-for-mysql/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCodeInline.d9bcf614.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseA.c52e44f8.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a aria-current="page" href="/docker/wait-for-mysql" class="router-link-active _active_192pu_81 _link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Wait For Mysql</h1><article><div><p><!--[--><a href="https://github.com/vishnubob/wait-for-it" rel="nofollow" target="_blank"><!--[-->wait-for-it.sh<!--]--></a> doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before #mysql is ready to accept connections<!--]--></p><p><!--[-->This script waits for first successful query from database or exits with non-zero status after timeout.<!--]--></p><p><!--[-->Don't forget to change <code><!--[-->$query<!--]--></code> for the actually working one.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-a8e5eb"># Waits for mysql to become actually available</span></span><span class="line"><span class="ct-e5eecc">wait_for_mysql</span><span class="ct-f1b587">() {</span></span><span class="line"><span class="ct-f1b587"> query=</span><span class="ct-222dd0">"SELECT count(*) FROM users"</span></span><span class="line"><span class="ct-f1b587"> </span></span><span class="line"><span class="ct-f1b587"> timeout=180 </span><span class="ct-a8e5eb"># 3 minutes limit</span></span><span class="line"><span class="ct-f1b587"> i=0</span></span><span class="line"><span class="ct-f1b587"> </span></span><span class="line"><span class="ct-f1b587"> </span><span class="ct-34dae7">while</span><span class="ct-f1b587"> </span><span class="ct-34dae7">!</span><span class="ct-f1b587"> docker </span><span class="ct-bce09d">exec</span><span class="ct-f1b587"> -it </span><span class="ct-222dd0">"</span><span class="ct-57393f">$</span><span class="ct-b31d54">1</span><span class="ct-222dd0">"</span><span class="ct-f1b587"> mysql --user=</span><span class="ct-222dd0">"</span><span class="ct-57393f">$</span><span class="ct-b31d54">2</span><span class="ct-222dd0">"</span><span class="ct-222dd0">"</span><span class="ct-f1b587"> -e </span><span class="ct-222dd0">"</span><span class="ct-57393f">$</span><span class="ct-b31d54">query</span><span class="ct-222dd0">"</span><span class="ct-f1b587"> </span><span class="ct-34dae7">do</span></span><span class="line"><span class="ct-f1b587"> sleep 1</span><span class="ct-34dae7">;</span></span><span class="line"></span><span class="line"><span class="ct-f1b587"> i=</span><span class="ct-222dd0">$((</span><span class="ct-57393f">$</span><span class="ct-b31d54">i</span><span class="ct-34dae7">+</span><span class="ct-4500fd">1</span><span class="ct-222dd0">))</span></span><span class="line"><span class="ct-f1b587"> </span><span class="ct-34dae7">if</span><span class="ct-f1b587"> [[ </span><span class="ct-57393f">${</span><span class="ct-b31d54">i</span><span class="ct-57393f">}</span><span class="ct-f1b587"> </span><span class="ct-34dae7">-ge</span><span class="ct-f1b587"> </span><span class="ct-57393f">${</span><span class="ct-b31d54">timeout</span><span class="ct-57393f">}</span><span class="ct-f1b587"> ]]</span><span class="ct-34dae7">;</span><span class="ct-f1b587"> </span><span class="ct-34dae7">then</span></span><span class="line"><span class="ct-f1b587"> </span><span class="ct-bce09d">echo</span><span class="ct-f1b587"> </span><span class="ct-222dd0">"[Error] can't properly query MySQL after </span><span class="ct-57393f">${</span><span class="ct-b31d54">i</span><span class="ct-57393f">}</span><span class="ct-222dd0"> secs"</span></span><span class="line"><span class="ct-f1b587"> </span><span class="ct-bce09d">exit</span><span class="ct-f1b587"> 1</span><span class="ct-34dae7">;</span></span><span class="line"><span class="ct-f1b587"> </span><span class="ct-34dae7">fi</span></span><span class="line"><span class="ct-f1b587"> </span><span class="ct-34dae7">done</span></span><span class="line"><span class="ct-f1b587">}</span></span><span class="line"></span><span class="line"><span class="ct-a8e5eb"># usage: wait_for_mysql miin-mysql-dev root password database</span></span></code></pre><!--]--></div><p><!--[--><a href="/docker/wait-for-redis" class=""><!--[-->Wait for redis<!--]--></a><!--]--></p><style>.ct-4500fd{color:#79C0FF}.ct-b31d54{color:#C9D1D9}.ct-57393f{color:#C9D1D9}.ct-bce09d{color:#79C0FF}.ct-34dae7{color:#FF7B72}.ct-222dd0{color:#A5D6FF}.ct-f1b587{color:#C9D1D9}.ct-e5eecc{color:#D2A8FF}.ct-a8e5eb{color:#8B949E}.light .ct-a8e5eb{color:#93A1A1}.light .ct-e5eecc{color:#268BD2}.light .ct-f1b587{color:#657B83}.light .ct-222dd0{color:#2AA198}.light .ct-34dae7{color:#859900}.light .ct-bce09d{color:#268BD2}.light .ct-57393f{color:#859900}.light .ct-b31d54{color:#268BD2}.light .ct-4500fd{color:#D33682}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/docker/wait-for-mysql/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695530089}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a aria-current="page" href="/docker/wait-for-mysql" class="router-link-active _active_192pu_81 _link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Wait For Mysql</h1><article><div><p><!--[--><a href="https://github.com/vishnubob/wait-for-it" rel="nofollow" target="_blank"><!--[-->wait-for-it.sh<!--]--></a> doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before #mysql is ready to accept connections<!--]--></p><p><!--[-->This script waits for first successful query from database or exits with non-zero status after timeout.<!--]--></p><p><!--[-->Don't forget to change <code><!--[-->$query<!--]--></code> for the actually working one.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-0146c3"># Waits for mysql to become actually available</span></span><span class="line"><span class="ct-3f942f">wait_for_mysql</span><span class="ct-753636">() {</span></span><span class="line"><span class="ct-753636"> query=</span><span class="ct-1c7c94">"SELECT count(*) FROM users"</span></span><span class="line"><span class="ct-753636"> </span></span><span class="line"><span class="ct-753636"> timeout=180 </span><span class="ct-0146c3"># 3 minutes limit</span></span><span class="line"><span class="ct-753636"> i=0</span></span><span class="line"><span class="ct-753636"> </span></span><span class="line"><span class="ct-753636"> </span><span class="ct-94f68f">while</span><span class="ct-753636"> </span><span class="ct-94f68f">!</span><span class="ct-753636"> docker </span><span class="ct-ac7bf2">exec</span><span class="ct-753636"> -it </span><span class="ct-1c7c94">"</span><span class="ct-1b10dc">$</span><span class="ct-6a8f91">1</span><span class="ct-1c7c94">"</span><span class="ct-753636"> mysql --user=</span><span class="ct-1c7c94">"</span><span class="ct-1b10dc">$</span><span class="ct-6a8f91">2</span><span class="ct-1c7c94">"</span><span class="ct-1c7c94">"</span><span class="ct-753636"> -e </span><span class="ct-1c7c94">"</span><span class="ct-1b10dc">$</span><span class="ct-6a8f91">query</span><span class="ct-1c7c94">"</span><span class="ct-753636"> </span><span class="ct-94f68f">do</span></span><span class="line"><span class="ct-753636"> sleep 1</span><span class="ct-94f68f">;</span></span><span class="line"></span><span class="line"><span class="ct-753636"> i=</span><span class="ct-1c7c94">$((</span><span class="ct-1b10dc">$</span><span class="ct-6a8f91">i</span><span class="ct-94f68f">+</span><span class="ct-0c9ed4">1</span><span class="ct-1c7c94">))</span></span><span class="line"><span class="ct-753636"> </span><span class="ct-94f68f">if</span><span class="ct-753636"> [[ </span><span class="ct-1b10dc">${</span><span class="ct-6a8f91">i</span><span class="ct-1b10dc">}</span><span class="ct-753636"> </span><span class="ct-94f68f">-ge</span><span class="ct-753636"> </span><span class="ct-1b10dc">${</span><span class="ct-6a8f91">timeout</span><span class="ct-1b10dc">}</span><span class="ct-753636"> ]]</span><span class="ct-94f68f">;</span><span class="ct-753636"> </span><span class="ct-94f68f">then</span></span><span class="line"><span class="ct-753636"> </span><span class="ct-ac7bf2">echo</span><span class="ct-753636"> </span><span class="ct-1c7c94">"[Error] can't properly query MySQL after </span><span class="ct-1b10dc">${</span><span class="ct-6a8f91">i</span><span class="ct-1b10dc">}</span><span class="ct-1c7c94"> secs"</span></span><span class="line"><span class="ct-753636"> </span><span class="ct-ac7bf2">exit</span><span class="ct-753636"> 1</span><span class="ct-94f68f">;</span></span><span class="line"><span class="ct-753636"> </span><span class="ct-94f68f">fi</span></span><span class="line"><span class="ct-753636"> </span><span class="ct-94f68f">done</span></span><span class="line"><span class="ct-753636">}</span></span><span class="line"></span><span class="line"><span class="ct-0146c3"># usage: wait_for_mysql miin-mysql-dev root password database</span></span></code></pre><!--]--></div><p><!--[--><a href="/docker/wait-for-redis" class=""><!--[-->Wait for redis<!--]--></a><!--]--></p><style>.ct-0c9ed4{color:#79C0FF}.ct-6a8f91{color:#C9D1D9}.ct-1b10dc{color:#C9D1D9}.ct-ac7bf2{color:#79C0FF}.ct-94f68f{color:#FF7B72}.ct-1c7c94{color:#A5D6FF}.ct-753636{color:#C9D1D9}.ct-3f942f{color:#D2A8FF}.ct-0146c3{color:#8B949E}.light .ct-0146c3{color:#93A1A1}.light .ct-3f942f{color:#268BD2}.light .ct-753636{color:#657B83}.light .ct-1c7c94{color:#2AA198}.light .ct-94f68f{color:#859900}.light .ct-ac7bf2{color:#268BD2}.light .ct-1b10dc{color:#859900}.light .ct-6a8f91{color:#268BD2}.light .ct-0c9ed4{color:#D33682}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/docker/wait-for-mysql/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697991312}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/docker/wait-for-redis/_payload.js b/docs/docker/wait-for-redis/_payload.js
index d59f016..8f92689 100644
--- a/docs/docker/wait-for-redis/_payload.js
+++ b/docs/docker/wait-for-redis/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:y,_path:z}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-Wzyty7vOmU":{_path:z,_dir:"docker",_draft:p,_partial:p,_locale:"en",_empty:p,title:y,description:"wait-for-it.sh doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before redis is ready to accept connections",excerpt:{type:A,children:[{type:a,tag:j,props:{},children:[{type:a,tag:l,props:{href:B,rel:[C]},children:[{type:c,value:D}]},{type:c,value:E}]},{type:a,tag:j,props:{},children:[{type:c,value:F}]},{type:a,tag:m,props:{code:q,language:G},children:[{type:a,tag:H,props:{},children:[{type:a,tag:m,props:{__ignoreMap:r},children:[{type:c,value:q}]}]}]},{type:a,tag:j,props:{},children:[{type:a,tag:l,props:{href:I},children:[{type:c,value:J}]}]}]},body:{type:A,children:[{type:a,tag:j,props:{},children:[{type:a,tag:l,props:{href:B,rel:[C]},children:[{type:c,value:D}]},{type:c,value:E}]},{type:a,tag:j,props:{},children:[{type:c,value:F}]},{type:a,tag:m,props:{code:q,language:G},children:[{type:a,tag:H,props:{},children:[{type:a,tag:m,props:{__ignoreMap:r},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:s},children:[{type:c,value:"# Waits for redis to become actually available"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:"ct-765ec8"},children:[{type:c,value:"wait_for_redis"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"() {"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" timeout=180 "}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"# 3 minutes"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" i=0"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"while"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"!"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" docker "}]},{type:a,tag:b,props:{class:t},children:[{type:c,value:"exec"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" -it "}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" redis-cli -h localhost -p 6379 -a "}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"2"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" ping "}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"|"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" grep "}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\"PONG\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"\u003E"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"\u002Fdev\u002Fnull "}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"2\u003E&1;"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"do"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" sleep 1"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:v}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" i="}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"$(("}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"+"}]},{type:a,tag:b,props:{class:"ct-060abb"},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"))"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"if"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" [[ "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"-ge"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"timeout"}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" ]]"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"then"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:t},children:[{type:c,value:"echo"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\"[Error] can't properly ping Redis container after "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:" secs\""}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:t},children:[{type:c,value:"exit"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" 1"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:v}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"fi"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"done"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:s},children:[{type:c,value:"# usage: wait_for_redis miin-redis-dev password"}]}]}]}]}]},{type:a,tag:j,props:{},children:[{type:a,tag:l,props:{href:I},children:[{type:c,value:J}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-060abb{color:#79C0FF}.ct-ffdc0d{color:#C9D1D9}.ct-705dc7{color:#C9D1D9}.ct-333e9d{color:#A5D6FF}.ct-fe4a82{color:#79C0FF}.ct-3e06c3{color:#FF7B72}.ct-d2c0fb{color:#C9D1D9}.ct-765ec8{color:#D2A8FF}.ct-15417a{color:#8B949E}.light .ct-15417a{color:#93A1A1}.light .ct-765ec8{color:#268BD2}.light .ct-d2c0fb{color:#657B83}.light .ct-3e06c3{color:#859900}.light .ct-fe4a82{color:#268BD2}.light .ct-333e9d{color:#2AA198}.light .ct-705dc7{color:#859900}.light .ct-ffdc0d{color:#268BD2}.light .ct-060abb{color:#D33682}"}]}],toc:{title:r,searchDepth:O,depth:O,links:[]}},_type:"markdown",_id:"content:Docker:Wait for redis.md",_source:"content",_file:"Docker\u002FWait for redis.md",_extension:"md"}},prerenderedAt:1703695530135}}("element","span","text","ct-d2c0fb","line","ct-3e06c3","ct-333e9d","ct-705dc7"," ","p","ct-ffdc0d","a","code","\"","}",false,"# Waits for redis to become actually available\nwait_for_redis() {\n timeout=180 # 3 minutes\n i=0\n while ! docker exec -it \"$1\" redis-cli -h localhost -p 6379 -a \"$2\" ping | grep \"PONG\" \u003E\u002Fdev\u002Fnull 2\u003E&1; do\n sleep 1;\n\n i=$(($i+1))\n if [[ ${i} -ge ${timeout} ]]; then\n echo \"[Error] can't properly ping Redis container after ${i} secs\"\n exit 1;\n fi\n done\n}\n\n# usage: wait_for_redis miin-redis-dev password\n","","ct-15417a","ct-fe4a82","$",";","i","${","Wait For Redis","\u002Fdocker\u002Fwait-for-redis","root","https:\u002F\u002Fgithub.com\u002Fvishnubob\u002Fwait-for-it","nofollow","wait-for-it.sh"," doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before redis is ready to accept connections","This script waits for first successful ping or exits with non-zero status after 3 minutes.","shell","pre","Wait%20for%20mysql","Wait for mysql"," ","1"," "," ",2))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:y,_path:z}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-Wzyty7vOmU":{_path:z,_dir:"docker",_draft:p,_partial:p,_locale:"en",_empty:p,title:y,description:"wait-for-it.sh doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before redis is ready to accept connections",excerpt:{type:A,children:[{type:a,tag:j,props:{},children:[{type:a,tag:l,props:{href:B,rel:[C]},children:[{type:c,value:D}]},{type:c,value:E}]},{type:a,tag:j,props:{},children:[{type:c,value:F}]},{type:a,tag:m,props:{code:q,language:G},children:[{type:a,tag:H,props:{},children:[{type:a,tag:m,props:{__ignoreMap:r},children:[{type:c,value:q}]}]}]},{type:a,tag:j,props:{},children:[{type:a,tag:l,props:{href:I},children:[{type:c,value:J}]}]}]},body:{type:A,children:[{type:a,tag:j,props:{},children:[{type:a,tag:l,props:{href:B,rel:[C]},children:[{type:c,value:D}]},{type:c,value:E}]},{type:a,tag:j,props:{},children:[{type:c,value:F}]},{type:a,tag:m,props:{code:q,language:G},children:[{type:a,tag:H,props:{},children:[{type:a,tag:m,props:{__ignoreMap:r},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:s},children:[{type:c,value:"# Waits for redis to become actually available"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:"ct-9ecbf6"},children:[{type:c,value:"wait_for_redis"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"() {"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" timeout=180 "}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"# 3 minutes"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" i=0"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"while"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"!"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" docker "}]},{type:a,tag:b,props:{class:t},children:[{type:c,value:"exec"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" -it "}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" redis-cli -h localhost -p 6379 -a "}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"2"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" ping "}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"|"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" grep "}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\"PONG\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"\u003E"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"\u002Fdev\u002Fnull "}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"2\u003E&1;"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"do"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" sleep 1"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:v}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" i="}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"$(("}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"+"}]},{type:a,tag:b,props:{class:"ct-aeabae"},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"))"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"if"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" [[ "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"-ge"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"timeout"}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" ]]"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"then"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:t},children:[{type:c,value:"echo"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\"[Error] can't properly ping Redis container after "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:" secs\""}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:t},children:[{type:c,value:"exit"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" 1"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:v}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"fi"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"done"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:s},children:[{type:c,value:"# usage: wait_for_redis miin-redis-dev password"}]}]}]}]}]},{type:a,tag:j,props:{},children:[{type:a,tag:l,props:{href:I},children:[{type:c,value:J}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-aeabae{color:#79C0FF}.ct-1335e9{color:#C9D1D9}.ct-914ee4{color:#C9D1D9}.ct-46d226{color:#A5D6FF}.ct-92bbf9{color:#79C0FF}.ct-d8c1e9{color:#FF7B72}.ct-8ef110{color:#C9D1D9}.ct-9ecbf6{color:#D2A8FF}.ct-5c461f{color:#8B949E}.light .ct-5c461f{color:#93A1A1}.light .ct-9ecbf6{color:#268BD2}.light .ct-8ef110{color:#657B83}.light .ct-d8c1e9{color:#859900}.light .ct-92bbf9{color:#268BD2}.light .ct-46d226{color:#2AA198}.light .ct-914ee4{color:#859900}.light .ct-1335e9{color:#268BD2}.light .ct-aeabae{color:#D33682}"}]}],toc:{title:r,searchDepth:O,depth:O,links:[]}},_type:"markdown",_id:"content:Docker:Wait for redis.md",_source:"content",_file:"Docker\u002FWait for redis.md",_extension:"md"}},prerenderedAt:1703697991374}}("element","span","text","ct-8ef110","line","ct-d8c1e9","ct-46d226","ct-914ee4"," ","p","ct-1335e9","a","code","\"","}",false,"# Waits for redis to become actually available\nwait_for_redis() {\n timeout=180 # 3 minutes\n i=0\n while ! docker exec -it \"$1\" redis-cli -h localhost -p 6379 -a \"$2\" ping | grep \"PONG\" \u003E\u002Fdev\u002Fnull 2\u003E&1; do\n sleep 1;\n\n i=$(($i+1))\n if [[ ${i} -ge ${timeout} ]]; then\n echo \"[Error] can't properly ping Redis container after ${i} secs\"\n exit 1;\n fi\n done\n}\n\n# usage: wait_for_redis miin-redis-dev password\n","","ct-5c461f","ct-92bbf9","$",";","i","${","Wait For Redis","\u002Fdocker\u002Fwait-for-redis","root","https:\u002F\u002Fgithub.com\u002Fvishnubob\u002Fwait-for-it","nofollow","wait-for-it.sh"," doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before redis is ready to accept connections","This script waits for first successful ping or exits with non-zero status after 3 minutes.","shell","pre","Wait%20for%20mysql","Wait for mysql"," ","1"," "," ",2))
\ No newline at end of file
diff --git a/docs/docker/wait-for-redis/index.html b/docs/docker/wait-for-redis/index.html
index 1152e89..7ef4f98 100644
--- a/docs/docker/wait-for-redis/index.html
+++ b/docs/docker/wait-for-redis/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Wait For Redis • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="wait-for-it.sh doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before redis is ready to accept connections"><meta name="head:count" content="3"><link rel="modulepreload" href="/docker/wait-for-redis/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseA.c52e44f8.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a aria-current="page" href="/docker/wait-for-redis" class="router-link-active _active_192pu_81 _link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Wait For Redis</h1><article><div><p><!--[--><a href="https://github.com/vishnubob/wait-for-it" rel="nofollow" target="_blank"><!--[-->wait-for-it.sh<!--]--></a> doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before redis is ready to accept connections<!--]--></p><p><!--[-->This script waits for first successful ping or exits with non-zero status after 3 minutes.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-15417a"># Waits for redis to become actually available</span></span><span class="line"><span class="ct-765ec8">wait_for_redis</span><span class="ct-d2c0fb">() {</span></span><span class="line"><span class="ct-d2c0fb"> timeout=180 </span><span class="ct-15417a"># 3 minutes</span></span><span class="line"><span class="ct-d2c0fb"> i=0</span></span><span class="line"><span class="ct-d2c0fb"> </span><span class="ct-3e06c3">while</span><span class="ct-d2c0fb"> </span><span class="ct-3e06c3">!</span><span class="ct-d2c0fb"> docker </span><span class="ct-fe4a82">exec</span><span class="ct-d2c0fb"> -it </span><span class="ct-333e9d">"</span><span class="ct-705dc7">$</span><span class="ct-ffdc0d">1</span><span class="ct-333e9d">"</span><span class="ct-d2c0fb"> redis-cli -h localhost -p 6379 -a </span><span class="ct-333e9d">"</span><span class="ct-705dc7">$</span><span class="ct-ffdc0d">2</span><span class="ct-333e9d">"</span><span class="ct-d2c0fb"> ping </span><span class="ct-3e06c3">|</span><span class="ct-d2c0fb"> grep </span><span class="ct-333e9d">"PONG"</span><span class="ct-d2c0fb"> </span><span class="ct-3e06c3">></span><span class="ct-d2c0fb">/dev/null </span><span class="ct-3e06c3">2>&1;</span><span class="ct-d2c0fb"> </span><span class="ct-3e06c3">do</span></span><span class="line"><span class="ct-d2c0fb"> sleep 1</span><span class="ct-3e06c3">;</span></span><span class="line"></span><span class="line"><span class="ct-d2c0fb"> i=</span><span class="ct-333e9d">$((</span><span class="ct-705dc7">$</span><span class="ct-ffdc0d">i</span><span class="ct-3e06c3">+</span><span class="ct-060abb">1</span><span class="ct-333e9d">))</span></span><span class="line"><span class="ct-d2c0fb"> </span><span class="ct-3e06c3">if</span><span class="ct-d2c0fb"> [[ </span><span class="ct-705dc7">${</span><span class="ct-ffdc0d">i</span><span class="ct-705dc7">}</span><span class="ct-d2c0fb"> </span><span class="ct-3e06c3">-ge</span><span class="ct-d2c0fb"> </span><span class="ct-705dc7">${</span><span class="ct-ffdc0d">timeout</span><span class="ct-705dc7">}</span><span class="ct-d2c0fb"> ]]</span><span class="ct-3e06c3">;</span><span class="ct-d2c0fb"> </span><span class="ct-3e06c3">then</span></span><span class="line"><span class="ct-d2c0fb"> </span><span class="ct-fe4a82">echo</span><span class="ct-d2c0fb"> </span><span class="ct-333e9d">"[Error] can't properly ping Redis container after </span><span class="ct-705dc7">${</span><span class="ct-ffdc0d">i</span><span class="ct-705dc7">}</span><span class="ct-333e9d"> secs"</span></span><span class="line"><span class="ct-d2c0fb"> </span><span class="ct-fe4a82">exit</span><span class="ct-d2c0fb"> 1</span><span class="ct-3e06c3">;</span></span><span class="line"><span class="ct-d2c0fb"> </span><span class="ct-3e06c3">fi</span></span><span class="line"><span class="ct-d2c0fb"> </span><span class="ct-3e06c3">done</span></span><span class="line"><span class="ct-d2c0fb">}</span></span><span class="line"></span><span class="line"><span class="ct-15417a"># usage: wait_for_redis miin-redis-dev password</span></span></code></pre><!--]--></div><p><!--[--><a href="/docker/wait-for-mysql" class=""><!--[-->Wait for mysql<!--]--></a><!--]--></p><style>.ct-060abb{color:#79C0FF}.ct-ffdc0d{color:#C9D1D9}.ct-705dc7{color:#C9D1D9}.ct-333e9d{color:#A5D6FF}.ct-fe4a82{color:#79C0FF}.ct-3e06c3{color:#FF7B72}.ct-d2c0fb{color:#C9D1D9}.ct-765ec8{color:#D2A8FF}.ct-15417a{color:#8B949E}.light .ct-15417a{color:#93A1A1}.light .ct-765ec8{color:#268BD2}.light .ct-d2c0fb{color:#657B83}.light .ct-3e06c3{color:#859900}.light .ct-fe4a82{color:#268BD2}.light .ct-333e9d{color:#2AA198}.light .ct-705dc7{color:#859900}.light .ct-ffdc0d{color:#268BD2}.light .ct-060abb{color:#D33682}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/docker/wait-for-redis/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695530135}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a aria-current="page" href="/docker/wait-for-redis" class="router-link-active _active_192pu_81 _link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Wait For Redis</h1><article><div><p><!--[--><a href="https://github.com/vishnubob/wait-for-it" rel="nofollow" target="_blank"><!--[-->wait-for-it.sh<!--]--></a> doing a great job of waiting for different services to become alive, but on #MacOs #docker is binding port on container start, seconds before redis is ready to accept connections<!--]--></p><p><!--[-->This script waits for first successful ping or exits with non-zero status after 3 minutes.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-5c461f"># Waits for redis to become actually available</span></span><span class="line"><span class="ct-9ecbf6">wait_for_redis</span><span class="ct-8ef110">() {</span></span><span class="line"><span class="ct-8ef110"> timeout=180 </span><span class="ct-5c461f"># 3 minutes</span></span><span class="line"><span class="ct-8ef110"> i=0</span></span><span class="line"><span class="ct-8ef110"> </span><span class="ct-d8c1e9">while</span><span class="ct-8ef110"> </span><span class="ct-d8c1e9">!</span><span class="ct-8ef110"> docker </span><span class="ct-92bbf9">exec</span><span class="ct-8ef110"> -it </span><span class="ct-46d226">"</span><span class="ct-914ee4">$</span><span class="ct-1335e9">1</span><span class="ct-46d226">"</span><span class="ct-8ef110"> redis-cli -h localhost -p 6379 -a </span><span class="ct-46d226">"</span><span class="ct-914ee4">$</span><span class="ct-1335e9">2</span><span class="ct-46d226">"</span><span class="ct-8ef110"> ping </span><span class="ct-d8c1e9">|</span><span class="ct-8ef110"> grep </span><span class="ct-46d226">"PONG"</span><span class="ct-8ef110"> </span><span class="ct-d8c1e9">></span><span class="ct-8ef110">/dev/null </span><span class="ct-d8c1e9">2>&1;</span><span class="ct-8ef110"> </span><span class="ct-d8c1e9">do</span></span><span class="line"><span class="ct-8ef110"> sleep 1</span><span class="ct-d8c1e9">;</span></span><span class="line"></span><span class="line"><span class="ct-8ef110"> i=</span><span class="ct-46d226">$((</span><span class="ct-914ee4">$</span><span class="ct-1335e9">i</span><span class="ct-d8c1e9">+</span><span class="ct-aeabae">1</span><span class="ct-46d226">))</span></span><span class="line"><span class="ct-8ef110"> </span><span class="ct-d8c1e9">if</span><span class="ct-8ef110"> [[ </span><span class="ct-914ee4">${</span><span class="ct-1335e9">i</span><span class="ct-914ee4">}</span><span class="ct-8ef110"> </span><span class="ct-d8c1e9">-ge</span><span class="ct-8ef110"> </span><span class="ct-914ee4">${</span><span class="ct-1335e9">timeout</span><span class="ct-914ee4">}</span><span class="ct-8ef110"> ]]</span><span class="ct-d8c1e9">;</span><span class="ct-8ef110"> </span><span class="ct-d8c1e9">then</span></span><span class="line"><span class="ct-8ef110"> </span><span class="ct-92bbf9">echo</span><span class="ct-8ef110"> </span><span class="ct-46d226">"[Error] can't properly ping Redis container after </span><span class="ct-914ee4">${</span><span class="ct-1335e9">i</span><span class="ct-914ee4">}</span><span class="ct-46d226"> secs"</span></span><span class="line"><span class="ct-8ef110"> </span><span class="ct-92bbf9">exit</span><span class="ct-8ef110"> 1</span><span class="ct-d8c1e9">;</span></span><span class="line"><span class="ct-8ef110"> </span><span class="ct-d8c1e9">fi</span></span><span class="line"><span class="ct-8ef110"> </span><span class="ct-d8c1e9">done</span></span><span class="line"><span class="ct-8ef110">}</span></span><span class="line"></span><span class="line"><span class="ct-5c461f"># usage: wait_for_redis miin-redis-dev password</span></span></code></pre><!--]--></div><p><!--[--><a href="/docker/wait-for-mysql" class=""><!--[-->Wait for mysql<!--]--></a><!--]--></p><style>.ct-aeabae{color:#79C0FF}.ct-1335e9{color:#C9D1D9}.ct-914ee4{color:#C9D1D9}.ct-46d226{color:#A5D6FF}.ct-92bbf9{color:#79C0FF}.ct-d8c1e9{color:#FF7B72}.ct-8ef110{color:#C9D1D9}.ct-9ecbf6{color:#D2A8FF}.ct-5c461f{color:#8B949E}.light .ct-5c461f{color:#93A1A1}.light .ct-9ecbf6{color:#268BD2}.light .ct-8ef110{color:#657B83}.light .ct-d8c1e9{color:#859900}.light .ct-92bbf9{color:#268BD2}.light .ct-46d226{color:#2AA198}.light .ct-914ee4{color:#859900}.light .ct-1335e9{color:#268BD2}.light .ct-aeabae{color:#D33682}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/docker/wait-for-redis/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697991374}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/frontend/react-native/oauth2-login/_payload.js b/docs/frontend/react-native/oauth2-login/_payload.js
index f9bf8eb..9595263 100644
--- a/docs/frontend/react-native/oauth2-login/_payload.js
+++ b/docs/frontend/react-native/oauth2-login/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:U,_path:V},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-zuvbG5OO4q":{_path:V,_dir:"react-native",_draft:A,_partial:A,_locale:"en",_empty:A,title:U,description:B,excerpt:{type:W,children:[{type:a,tag:l,props:{},children:[{type:b,value:B}]},{type:a,tag:r,props:{id:C},children:[{type:b,value:D}]},{type:a,tag:l,props:{},children:[{type:b,value:X},{type:a,tag:m,props:{href:s},children:[{type:b,value:s}]},{type:b,value:Y},{type:a,tag:Z,props:{},children:[{type:b,value:_}]},{type:b,value:E}]},{type:a,tag:t,props:{id:F},children:[{type:b,value:G}]},{type:a,tag:k,props:{code:H,language:u},children:[{type:a,tag:v,props:{},children:[{type:a,tag:k,props:{__ignoreMap:q},children:[{type:b,value:H}]}]}]},{type:a,tag:t,props:{id:I},children:[{type:b,value:J}]},{type:a,tag:k,props:{code:K,language:u},children:[{type:a,tag:v,props:{},children:[{type:a,tag:k,props:{__ignoreMap:q},children:[{type:b,value:K}]}]}]},{type:a,tag:r,props:{id:L},children:[{type:b,value:M}]},{type:a,tag:l,props:{},children:[{type:a,tag:m,props:{href:$,rel:[w]},children:[{type:b,value:aa}]},{type:b,value:ab},{type:a,tag:m,props:{href:ac,rel:[w]},children:[{type:b,value:ad}]},{type:b,value:ae}]}]},body:{type:W,children:[{type:a,tag:l,props:{},children:[{type:b,value:B}]},{type:a,tag:r,props:{id:C},children:[{type:b,value:D}]},{type:a,tag:l,props:{},children:[{type:b,value:X},{type:a,tag:m,props:{href:s},children:[{type:b,value:s}]},{type:b,value:Y},{type:a,tag:Z,props:{},children:[{type:b,value:_}]},{type:b,value:E}]},{type:a,tag:t,props:{id:F},children:[{type:b,value:G}]},{type:a,tag:k,props:{code:H,language:u},children:[{type:a,tag:v,props:{},children:[{type:a,tag:k,props:{__ignoreMap:q},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:i},children:[{type:b,value:"import"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" { "}]},{type:a,tag:c,props:{class:N},children:[{type:b,value:O}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" } "}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:"from"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"'react-native-app-auth'"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:x}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:n},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:af}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:P}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:x}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:Q},children:[{type:b,value:"\u002F\u002F ..."}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:n},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:R}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:ag}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:S},children:[{type:b,value:O}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:ah}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" issuer: "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"'https:\u002F\u002Faccounts.google.com'"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:ai}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:aj}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:af}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"}.apps.googleusercontent.com`"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:ak}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"`com.yourapp:\u002Foauth2redirect\u002Fgoogle`"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:al}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"'openid'"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:am}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"'profile'"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:an}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:ao}]},{type:a,tag:c,props:{class:ap},children:[{type:b,value:aq}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:ar}]}]}]}]}]},{type:a,tag:t,props:{id:I},children:[{type:b,value:J}]},{type:a,tag:k,props:{code:K,language:u},children:[{type:a,tag:v,props:{},children:[{type:a,tag:k,props:{__ignoreMap:q},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:n},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:y}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:P}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:x}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:n},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:as}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:P}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"; "}]},{type:a,tag:c,props:{class:Q},children:[{type:b,value:"\u002F\u002F better hide it somehow"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:n},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:T}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"'com.yourapp'"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:x}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:n},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:R}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:ag}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:S},children:[{type:b,value:O}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:ah}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" serviceConfiguration: {"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" authorizationEndpoint: "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"`https:\u002F\u002Foauth.yandex.ru\u002Fauthorize?response_type=code&client_id=${"}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:y}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"}&redirect_uri=${"}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:T}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:at}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" "}]},{type:a,tag:c,props:{class:Q},children:[{type:b,value:"\u002F\u002F TODO: replace it with your own backend to secure client_secret:"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" tokenEndpoint: "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"`https:\u002F\u002Foauth.yandex.ru\u002Ftoken?grant_type=authorization_code&client_id=${"}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:y}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"}&client_secret=${"}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:as}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"}`"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" },"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:ai}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:y}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:ak}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:aj}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:T}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:at}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:al}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"'login:info'"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:am}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"'login:avatar'"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:an}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:ao}]},{type:a,tag:c,props:{class:ap},children:[{type:b,value:aq}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:ar}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:S},children:[{type:b,value:"callback"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"("}]},{type:a,tag:c,props:{class:N},children:[{type:b,value:R}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:E}]},{type:a,tag:c,props:{class:N},children:[{type:b,value:"accessToken"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:");"}]}]}]}]}]},{type:a,tag:r,props:{id:L},children:[{type:b,value:M}]},{type:a,tag:l,props:{},children:[{type:a,tag:m,props:{href:$,rel:[w]},children:[{type:b,value:aa}]},{type:b,value:ab},{type:a,tag:m,props:{href:ac,rel:[w]},children:[{type:b,value:ad}]},{type:b,value:ae}]},{type:a,tag:"style",children:[{type:b,value:".ct-0e6b1b{color:#79C0FF}.ct-c658e4{color:#D2A8FF}.ct-69c1e5{color:#8B949E}.ct-9bf1e2{color:#79C0FF}.ct-069a1d{color:#FF7B72}.ct-bfb93a{color:#A5D6FF}.ct-beebff{color:#C9D1D9}.ct-62c49c{color:#C9D1D9}.ct-4522d3{color:#FF7B72}.light .ct-4522d3{color:#859900}.light .ct-62c49c{color:#657B83}.light .ct-beebff{color:#268BD2}.light .ct-bfb93a{color:#2AA198}.light .ct-069a1d{color:#073642}.light .ct-9bf1e2{color:#268BD2}.light .ct-69c1e5{color:#93A1A1}.light .ct-c658e4{color:#268BD2}.light .ct-0e6b1b{color:#B58900}"}]}],toc:{title:q,searchDepth:z,depth:z,links:[{id:C,depth:z,text:D,children:[{id:F,depth:au,text:G},{id:I,depth:au,text:J}]},{id:L,depth:z,text:M}]}},_type:"markdown",_id:"content:Frontend:React Native:OAuth2 login.md",_source:"content",_file:"Frontend\u002FReact Native\u002FOAuth2 login.md",_extension:"md"}},prerenderedAt:1703695530174}}("element","text","span","ct-62c49c","line"," ","ct-bfb93a","ct-9bf1e2","ct-4522d3",",","code","p","a","ct-069a1d","const","=","","h2","react-native-app-auth","h3","typescript","pre","nofollow",";","YANDEX_OAUTH_CLIENT",2,false,"Use #oauth2 login with React-Native","common-oauth2-providers","Common OAuth2 providers",".","example-for-google","Example for #Google","import { authorize } from 'react-native-app-auth';\n\nconst GOOGLE_OAUTH_CLIENT = '...';\n\n\u002F\u002F ...\nconst authState = await authorize({\n issuer: 'https:\u002F\u002Faccounts.google.com',\n clientId: `${GOOGLE_OAUTH_CLIENT}.apps.googleusercontent.com`,\n redirectUrl: `com.yourapp:\u002Foauth2redirect\u002Fgoogle`,\n scopes: ['openid', 'profile'],\n dangerouslyAllowInsecureHttpRequests: true,\n});\n","example-for-yandex","Example for #Yandex","const YANDEX_OAUTH_CLIENT = '...';\nconst YANDEX_OAUTH_SECRET = '...'; \u002F\u002F better hide it somehow\nconst APP_ID = 'com.yourapp';\n\nconst authState = await authorize({\n serviceConfiguration: {\n authorizationEndpoint: `https:\u002F\u002Foauth.yandex.ru\u002Fauthorize?response_type=code&client_id=${YANDEX_OAUTH_CLIENT}&redirect_uri=${APP_ID}:\u002Foauth2redirect`,\n \u002F\u002F TODO: replace it with your own backend to secure client_secret:\n tokenEndpoint: `https:\u002F\u002Foauth.yandex.ru\u002Ftoken?grant_type=authorization_code&client_id=${YANDEX_OAUTH_CLIENT}&client_secret=${YANDEX_OAUTH_SECRET}`,\n },\n clientId: YANDEX_OAUTH_CLIENT,\n redirectUrl: `${APP_ID}:\u002Foauth2redirect`,\n scopes: ['login:info', 'login:avatar'],\n dangerouslyAllowInsecureHttpRequests: true,\n});\n\ncallback(authState.accessToken);\n","apple-id-login","Apple ID login","ct-beebff","authorize","'...'","ct-69c1e5","authState","ct-c658e4","APP_ID","OAuth2 Login","\u002Ffrontend\u002Freact-native\u002Foauth2-login","root","Can be handled by "," by redirecting to url ","code-inline","com.yourapp:\u002F\u002Foauth2provider","https:\u002F\u002Fgithub.com\u002Finvertase\u002Freact-native-apple-authentication","react-native-apple-authentication"," has its own ","https:\u002F\u002Fgithub.com\u002Finvertase\u002Freact-native-apple-authentication\u002Ftree\u002Fmain\u002Fdocs","documentation"," on setting up OAuth using Apple ID.","GOOGLE_OAUTH_CLIENT","await","({"," clientId: ","`${"," redirectUrl: "," scopes: [",", ","],"," dangerouslyAllowInsecureHttpRequests: ","ct-0e6b1b","true","});","YANDEX_OAUTH_SECRET","}:\u002Foauth2redirect`",3))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:U,_path:V},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-zuvbG5OO4q":{_path:V,_dir:"react-native",_draft:A,_partial:A,_locale:"en",_empty:A,title:U,description:B,excerpt:{type:W,children:[{type:a,tag:l,props:{},children:[{type:b,value:B}]},{type:a,tag:r,props:{id:C},children:[{type:b,value:D}]},{type:a,tag:l,props:{},children:[{type:b,value:X},{type:a,tag:m,props:{href:s},children:[{type:b,value:s}]},{type:b,value:Y},{type:a,tag:Z,props:{},children:[{type:b,value:_}]},{type:b,value:E}]},{type:a,tag:t,props:{id:F},children:[{type:b,value:G}]},{type:a,tag:k,props:{code:H,language:u},children:[{type:a,tag:v,props:{},children:[{type:a,tag:k,props:{__ignoreMap:q},children:[{type:b,value:H}]}]}]},{type:a,tag:t,props:{id:I},children:[{type:b,value:J}]},{type:a,tag:k,props:{code:K,language:u},children:[{type:a,tag:v,props:{},children:[{type:a,tag:k,props:{__ignoreMap:q},children:[{type:b,value:K}]}]}]},{type:a,tag:r,props:{id:L},children:[{type:b,value:M}]},{type:a,tag:l,props:{},children:[{type:a,tag:m,props:{href:$,rel:[w]},children:[{type:b,value:aa}]},{type:b,value:ab},{type:a,tag:m,props:{href:ac,rel:[w]},children:[{type:b,value:ad}]},{type:b,value:ae}]}]},body:{type:W,children:[{type:a,tag:l,props:{},children:[{type:b,value:B}]},{type:a,tag:r,props:{id:C},children:[{type:b,value:D}]},{type:a,tag:l,props:{},children:[{type:b,value:X},{type:a,tag:m,props:{href:s},children:[{type:b,value:s}]},{type:b,value:Y},{type:a,tag:Z,props:{},children:[{type:b,value:_}]},{type:b,value:E}]},{type:a,tag:t,props:{id:F},children:[{type:b,value:G}]},{type:a,tag:k,props:{code:H,language:u},children:[{type:a,tag:v,props:{},children:[{type:a,tag:k,props:{__ignoreMap:q},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:i},children:[{type:b,value:"import"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" { "}]},{type:a,tag:c,props:{class:N},children:[{type:b,value:O}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" } "}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:"from"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"'react-native-app-auth'"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:x}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:n},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:af}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:P}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:x}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:Q},children:[{type:b,value:"\u002F\u002F ..."}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:n},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:R}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:ag}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:S},children:[{type:b,value:O}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:ah}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" issuer: "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"'https:\u002F\u002Faccounts.google.com'"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:ai}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:aj}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:af}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"}.apps.googleusercontent.com`"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:ak}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"`com.yourapp:\u002Foauth2redirect\u002Fgoogle`"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:al}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"'openid'"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:am}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"'profile'"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:an}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:ao}]},{type:a,tag:c,props:{class:ap},children:[{type:b,value:aq}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:ar}]}]}]}]}]},{type:a,tag:t,props:{id:I},children:[{type:b,value:J}]},{type:a,tag:k,props:{code:K,language:u},children:[{type:a,tag:v,props:{},children:[{type:a,tag:k,props:{__ignoreMap:q},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:n},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:y}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:P}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:x}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:n},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:as}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:P}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"; "}]},{type:a,tag:c,props:{class:Q},children:[{type:b,value:"\u002F\u002F better hide it somehow"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:n},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:T}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"'com.yourapp'"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:x}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:n},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:R}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:ag}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:S},children:[{type:b,value:O}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:ah}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" serviceConfiguration: {"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" authorizationEndpoint: "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"`https:\u002F\u002Foauth.yandex.ru\u002Fauthorize?response_type=code&client_id=${"}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:y}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"}&redirect_uri=${"}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:T}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:at}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" "}]},{type:a,tag:c,props:{class:Q},children:[{type:b,value:"\u002F\u002F TODO: replace it with your own backend to secure client_secret:"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" tokenEndpoint: "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"`https:\u002F\u002Foauth.yandex.ru\u002Ftoken?grant_type=authorization_code&client_id=${"}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:y}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"}&client_secret=${"}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:as}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"}`"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" },"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:ai}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:y}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:ak}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:aj}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:T}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:at}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:al}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"'login:info'"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:am}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"'login:avatar'"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:an}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:ao}]},{type:a,tag:c,props:{class:ap},children:[{type:b,value:aq}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:ar}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:S},children:[{type:b,value:"callback"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"("}]},{type:a,tag:c,props:{class:N},children:[{type:b,value:R}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:E}]},{type:a,tag:c,props:{class:N},children:[{type:b,value:"accessToken"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:");"}]}]}]}]}]},{type:a,tag:r,props:{id:L},children:[{type:b,value:M}]},{type:a,tag:l,props:{},children:[{type:a,tag:m,props:{href:$,rel:[w]},children:[{type:b,value:aa}]},{type:b,value:ab},{type:a,tag:m,props:{href:ac,rel:[w]},children:[{type:b,value:ad}]},{type:b,value:ae}]},{type:a,tag:"style",children:[{type:b,value:".ct-8f934a{color:#79C0FF}.ct-0bd357{color:#D2A8FF}.ct-f3a5ee{color:#8B949E}.ct-20d3ba{color:#79C0FF}.ct-bd73c0{color:#FF7B72}.ct-d3e5b1{color:#A5D6FF}.ct-25a6af{color:#C9D1D9}.ct-7e4aea{color:#C9D1D9}.ct-db1a1c{color:#FF7B72}.light .ct-db1a1c{color:#859900}.light .ct-7e4aea{color:#657B83}.light .ct-25a6af{color:#268BD2}.light .ct-d3e5b1{color:#2AA198}.light .ct-bd73c0{color:#073642}.light .ct-20d3ba{color:#268BD2}.light .ct-f3a5ee{color:#93A1A1}.light .ct-0bd357{color:#268BD2}.light .ct-8f934a{color:#B58900}"}]}],toc:{title:q,searchDepth:z,depth:z,links:[{id:C,depth:z,text:D,children:[{id:F,depth:au,text:G},{id:I,depth:au,text:J}]},{id:L,depth:z,text:M}]}},_type:"markdown",_id:"content:Frontend:React Native:OAuth2 login.md",_source:"content",_file:"Frontend\u002FReact Native\u002FOAuth2 login.md",_extension:"md"}},prerenderedAt:1703697991437}}("element","text","span","ct-7e4aea","line"," ","ct-d3e5b1","ct-20d3ba","ct-db1a1c",",","code","p","a","ct-bd73c0","const","=","","h2","react-native-app-auth","h3","typescript","pre","nofollow",";","YANDEX_OAUTH_CLIENT",2,false,"Use #oauth2 login with React-Native","common-oauth2-providers","Common OAuth2 providers",".","example-for-google","Example for #Google","import { authorize } from 'react-native-app-auth';\n\nconst GOOGLE_OAUTH_CLIENT = '...';\n\n\u002F\u002F ...\nconst authState = await authorize({\n issuer: 'https:\u002F\u002Faccounts.google.com',\n clientId: `${GOOGLE_OAUTH_CLIENT}.apps.googleusercontent.com`,\n redirectUrl: `com.yourapp:\u002Foauth2redirect\u002Fgoogle`,\n scopes: ['openid', 'profile'],\n dangerouslyAllowInsecureHttpRequests: true,\n});\n","example-for-yandex","Example for #Yandex","const YANDEX_OAUTH_CLIENT = '...';\nconst YANDEX_OAUTH_SECRET = '...'; \u002F\u002F better hide it somehow\nconst APP_ID = 'com.yourapp';\n\nconst authState = await authorize({\n serviceConfiguration: {\n authorizationEndpoint: `https:\u002F\u002Foauth.yandex.ru\u002Fauthorize?response_type=code&client_id=${YANDEX_OAUTH_CLIENT}&redirect_uri=${APP_ID}:\u002Foauth2redirect`,\n \u002F\u002F TODO: replace it with your own backend to secure client_secret:\n tokenEndpoint: `https:\u002F\u002Foauth.yandex.ru\u002Ftoken?grant_type=authorization_code&client_id=${YANDEX_OAUTH_CLIENT}&client_secret=${YANDEX_OAUTH_SECRET}`,\n },\n clientId: YANDEX_OAUTH_CLIENT,\n redirectUrl: `${APP_ID}:\u002Foauth2redirect`,\n scopes: ['login:info', 'login:avatar'],\n dangerouslyAllowInsecureHttpRequests: true,\n});\n\ncallback(authState.accessToken);\n","apple-id-login","Apple ID login","ct-25a6af","authorize","'...'","ct-f3a5ee","authState","ct-0bd357","APP_ID","OAuth2 Login","\u002Ffrontend\u002Freact-native\u002Foauth2-login","root","Can be handled by "," by redirecting to url ","code-inline","com.yourapp:\u002F\u002Foauth2provider","https:\u002F\u002Fgithub.com\u002Finvertase\u002Freact-native-apple-authentication","react-native-apple-authentication"," has its own ","https:\u002F\u002Fgithub.com\u002Finvertase\u002Freact-native-apple-authentication\u002Ftree\u002Fmain\u002Fdocs","documentation"," on setting up OAuth using Apple ID.","GOOGLE_OAUTH_CLIENT","await","({"," clientId: ","`${"," redirectUrl: "," scopes: [",", ","],"," dangerouslyAllowInsecureHttpRequests: ","ct-8f934a","true","});","YANDEX_OAUTH_SECRET","}:\u002Foauth2redirect`",3))
\ No newline at end of file
diff --git a/docs/frontend/react-native/oauth2-login/index.html b/docs/frontend/react-native/oauth2-login/index.html
index f57bafa..902d3bc 100644
--- a/docs/frontend/react-native/oauth2-login/index.html
+++ b/docs/frontend/react-native/oauth2-login/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>OAuth2 Login • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Use #oauth2 login with React-Native"><meta name="head:count" content="3"><link rel="modulepreload" href="/frontend/react-native/oauth2-login/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseH2.d950f051.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseA.c52e44f8.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCodeInline.d9bcf614.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseH3.462e5228.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a aria-current="page" href="/frontend/react-native/oauth2-login" class="router-link-active _active_192pu_81 _link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>OAuth2 Login</h1><article><div><p><!--[-->Use #oauth2 login with React-Native<!--]--></p><h2 id="common-oauth2-providers"><a href="#common-oauth2-providers"><!--[-->Common OAuth2 providers<!--]--></a></h2><p><!--[-->Can be handled by <a href="/frontend/react-native/react-native-app-auth" class=""><!--[-->react-native-app-auth<!--]--></a> by redirecting to url <code><!--[-->com.yourapp://oauth2provider<!--]--></code>.<!--]--></p><h3 id="example-for-google"><a href="#example-for-google"><!--[-->Example for #Google<!--]--></a></h3><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-4522d3">import</span><span class="ct-62c49c"> { </span><span class="ct-beebff">authorize</span><span class="ct-62c49c"> } </span><span class="ct-4522d3">from</span><span class="ct-62c49c"> </span><span class="ct-bfb93a">'react-native-app-auth'</span><span class="ct-62c49c">;</span></span><span class="line"></span><span class="line"><span class="ct-069a1d">const</span><span class="ct-62c49c"> </span><span class="ct-9bf1e2">GOOGLE_OAUTH_CLIENT</span><span class="ct-62c49c"> </span><span class="ct-4522d3">=</span><span class="ct-62c49c"> </span><span class="ct-bfb93a">'...'</span><span class="ct-62c49c">;</span></span><span class="line"></span><span class="line"><span class="ct-69c1e5">// ...</span></span><span class="line"><span class="ct-069a1d">const</span><span class="ct-62c49c"> </span><span class="ct-9bf1e2">authState</span><span class="ct-62c49c"> </span><span class="ct-4522d3">=</span><span class="ct-62c49c"> </span><span class="ct-4522d3">await</span><span class="ct-62c49c"> </span><span class="ct-c658e4">authorize</span><span class="ct-62c49c">({</span></span><span class="line"><span class="ct-62c49c"> issuer: </span><span class="ct-bfb93a">'https://accounts.google.com'</span><span class="ct-62c49c">,</span></span><span class="line"><span class="ct-62c49c"> clientId: </span><span class="ct-bfb93a">`${</span><span class="ct-9bf1e2">GOOGLE_OAUTH_CLIENT</span><span class="ct-bfb93a">}.apps.googleusercontent.com`</span><span class="ct-62c49c">,</span></span><span class="line"><span class="ct-62c49c"> redirectUrl: </span><span class="ct-bfb93a">`com.yourapp:/oauth2redirect/google`</span><span class="ct-62c49c">,</span></span><span class="line"><span class="ct-62c49c"> scopes: [</span><span class="ct-bfb93a">'openid'</span><span class="ct-62c49c">, </span><span class="ct-bfb93a">'profile'</span><span class="ct-62c49c">],</span></span><span class="line"><span class="ct-62c49c"> dangerouslyAllowInsecureHttpRequests: </span><span class="ct-0e6b1b">true</span><span class="ct-62c49c">,</span></span><span class="line"><span class="ct-62c49c">});</span></span></code></pre><!--]--></div><h3 id="example-for-yandex"><a href="#example-for-yandex"><!--[-->Example for #Yandex<!--]--></a></h3><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-069a1d">const</span><span class="ct-62c49c"> </span><span class="ct-9bf1e2">YANDEX_OAUTH_CLIENT</span><span class="ct-62c49c"> </span><span class="ct-4522d3">=</span><span class="ct-62c49c"> </span><span class="ct-bfb93a">'...'</span><span class="ct-62c49c">;</span></span><span class="line"><span class="ct-069a1d">const</span><span class="ct-62c49c"> </span><span class="ct-9bf1e2">YANDEX_OAUTH_SECRET</span><span class="ct-62c49c"> </span><span class="ct-4522d3">=</span><span class="ct-62c49c"> </span><span class="ct-bfb93a">'...'</span><span class="ct-62c49c">; </span><span class="ct-69c1e5">// better hide it somehow</span></span><span class="line"><span class="ct-069a1d">const</span><span class="ct-62c49c"> </span><span class="ct-9bf1e2">APP_ID</span><span class="ct-62c49c"> </span><span class="ct-4522d3">=</span><span class="ct-62c49c"> </span><span class="ct-bfb93a">'com.yourapp'</span><span class="ct-62c49c">;</span></span><span class="line"></span><span class="line"><span class="ct-069a1d">const</span><span class="ct-62c49c"> </span><span class="ct-9bf1e2">authState</span><span class="ct-62c49c"> </span><span class="ct-4522d3">=</span><span class="ct-62c49c"> </span><span class="ct-4522d3">await</span><span class="ct-62c49c"> </span><span class="ct-c658e4">authorize</span><span class="ct-62c49c">({</span></span><span class="line"><span class="ct-62c49c"> serviceConfiguration: {</span></span><span class="line"><span class="ct-62c49c"> authorizationEndpoint: </span><span class="ct-bfb93a">`https://oauth.yandex.ru/authorize?response_type=code&client_id=${</span><span class="ct-9bf1e2">YANDEX_OAUTH_CLIENT</span><span class="ct-bfb93a">}&redirect_uri=${</span><span class="ct-9bf1e2">APP_ID</span><span class="ct-bfb93a">}:/oauth2redirect`</span><span class="ct-62c49c">,</span></span><span class="line"><span class="ct-62c49c"> </span><span class="ct-69c1e5">// TODO: replace it with your own backend to secure client_secret:</span></span><span class="line"><span class="ct-62c49c"> tokenEndpoint: </span><span class="ct-bfb93a">`https://oauth.yandex.ru/token?grant_type=authorization_code&client_id=${</span><span class="ct-9bf1e2">YANDEX_OAUTH_CLIENT</span><span class="ct-bfb93a">}&client_secret=${</span><span class="ct-9bf1e2">YANDEX_OAUTH_SECRET</span><span class="ct-bfb93a">}`</span><span class="ct-62c49c">,</span></span><span class="line"><span class="ct-62c49c"> },</span></span><span class="line"><span class="ct-62c49c"> clientId: </span><span class="ct-9bf1e2">YANDEX_OAUTH_CLIENT</span><span class="ct-62c49c">,</span></span><span class="line"><span class="ct-62c49c"> redirectUrl: </span><span class="ct-bfb93a">`${</span><span class="ct-9bf1e2">APP_ID</span><span class="ct-bfb93a">}:/oauth2redirect`</span><span class="ct-62c49c">,</span></span><span class="line"><span class="ct-62c49c"> scopes: [</span><span class="ct-bfb93a">'login:info'</span><span class="ct-62c49c">, </span><span class="ct-bfb93a">'login:avatar'</span><span class="ct-62c49c">],</span></span><span class="line"><span class="ct-62c49c"> dangerouslyAllowInsecureHttpRequests: </span><span class="ct-0e6b1b">true</span><span class="ct-62c49c">,</span></span><span class="line"><span class="ct-62c49c">});</span></span><span class="line"></span><span class="line"><span class="ct-c658e4">callback</span><span class="ct-62c49c">(</span><span class="ct-beebff">authState</span><span class="ct-62c49c">.</span><span class="ct-beebff">accessToken</span><span class="ct-62c49c">);</span></span></code></pre><!--]--></div><h2 id="apple-id-login"><a href="#apple-id-login"><!--[-->Apple ID login<!--]--></a></h2><p><!--[--><a href="https://github.com/invertase/react-native-apple-authentication" rel="nofollow" target="_blank"><!--[-->react-native-apple-authentication<!--]--></a> has its own <a href="https://github.com/invertase/react-native-apple-authentication/tree/main/docs" rel="nofollow" target="_blank"><!--[-->documentation<!--]--></a> on setting up OAuth using Apple ID.<!--]--></p><style>.ct-0e6b1b{color:#79C0FF}.ct-c658e4{color:#D2A8FF}.ct-69c1e5{color:#8B949E}.ct-9bf1e2{color:#79C0FF}.ct-069a1d{color:#FF7B72}.ct-bfb93a{color:#A5D6FF}.ct-beebff{color:#C9D1D9}.ct-62c49c{color:#C9D1D9}.ct-4522d3{color:#FF7B72}.light .ct-4522d3{color:#859900}.light .ct-62c49c{color:#657B83}.light .ct-beebff{color:#268BD2}.light .ct-bfb93a{color:#2AA198}.light .ct-069a1d{color:#073642}.light .ct-9bf1e2{color:#268BD2}.light .ct-69c1e5{color:#93A1A1}.light .ct-c658e4{color:#268BD2}.light .ct-0e6b1b{color:#B58900}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/frontend/react-native/oauth2-login/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695530174}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseH3.462e5228.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a aria-current="page" href="/frontend/react-native/oauth2-login" class="router-link-active _active_192pu_81 _link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>OAuth2 Login</h1><article><div><p><!--[-->Use #oauth2 login with React-Native<!--]--></p><h2 id="common-oauth2-providers"><a href="#common-oauth2-providers"><!--[-->Common OAuth2 providers<!--]--></a></h2><p><!--[-->Can be handled by <a href="/frontend/react-native/react-native-app-auth" class=""><!--[-->react-native-app-auth<!--]--></a> by redirecting to url <code><!--[-->com.yourapp://oauth2provider<!--]--></code>.<!--]--></p><h3 id="example-for-google"><a href="#example-for-google"><!--[-->Example for #Google<!--]--></a></h3><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-db1a1c">import</span><span class="ct-7e4aea"> { </span><span class="ct-25a6af">authorize</span><span class="ct-7e4aea"> } </span><span class="ct-db1a1c">from</span><span class="ct-7e4aea"> </span><span class="ct-d3e5b1">'react-native-app-auth'</span><span class="ct-7e4aea">;</span></span><span class="line"></span><span class="line"><span class="ct-bd73c0">const</span><span class="ct-7e4aea"> </span><span class="ct-20d3ba">GOOGLE_OAUTH_CLIENT</span><span class="ct-7e4aea"> </span><span class="ct-db1a1c">=</span><span class="ct-7e4aea"> </span><span class="ct-d3e5b1">'...'</span><span class="ct-7e4aea">;</span></span><span class="line"></span><span class="line"><span class="ct-f3a5ee">// ...</span></span><span class="line"><span class="ct-bd73c0">const</span><span class="ct-7e4aea"> </span><span class="ct-20d3ba">authState</span><span class="ct-7e4aea"> </span><span class="ct-db1a1c">=</span><span class="ct-7e4aea"> </span><span class="ct-db1a1c">await</span><span class="ct-7e4aea"> </span><span class="ct-0bd357">authorize</span><span class="ct-7e4aea">({</span></span><span class="line"><span class="ct-7e4aea"> issuer: </span><span class="ct-d3e5b1">'https://accounts.google.com'</span><span class="ct-7e4aea">,</span></span><span class="line"><span class="ct-7e4aea"> clientId: </span><span class="ct-d3e5b1">`${</span><span class="ct-20d3ba">GOOGLE_OAUTH_CLIENT</span><span class="ct-d3e5b1">}.apps.googleusercontent.com`</span><span class="ct-7e4aea">,</span></span><span class="line"><span class="ct-7e4aea"> redirectUrl: </span><span class="ct-d3e5b1">`com.yourapp:/oauth2redirect/google`</span><span class="ct-7e4aea">,</span></span><span class="line"><span class="ct-7e4aea"> scopes: [</span><span class="ct-d3e5b1">'openid'</span><span class="ct-7e4aea">, </span><span class="ct-d3e5b1">'profile'</span><span class="ct-7e4aea">],</span></span><span class="line"><span class="ct-7e4aea"> dangerouslyAllowInsecureHttpRequests: </span><span class="ct-8f934a">true</span><span class="ct-7e4aea">,</span></span><span class="line"><span class="ct-7e4aea">});</span></span></code></pre><!--]--></div><h3 id="example-for-yandex"><a href="#example-for-yandex"><!--[-->Example for #Yandex<!--]--></a></h3><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-bd73c0">const</span><span class="ct-7e4aea"> </span><span class="ct-20d3ba">YANDEX_OAUTH_CLIENT</span><span class="ct-7e4aea"> </span><span class="ct-db1a1c">=</span><span class="ct-7e4aea"> </span><span class="ct-d3e5b1">'...'</span><span class="ct-7e4aea">;</span></span><span class="line"><span class="ct-bd73c0">const</span><span class="ct-7e4aea"> </span><span class="ct-20d3ba">YANDEX_OAUTH_SECRET</span><span class="ct-7e4aea"> </span><span class="ct-db1a1c">=</span><span class="ct-7e4aea"> </span><span class="ct-d3e5b1">'...'</span><span class="ct-7e4aea">; </span><span class="ct-f3a5ee">// better hide it somehow</span></span><span class="line"><span class="ct-bd73c0">const</span><span class="ct-7e4aea"> </span><span class="ct-20d3ba">APP_ID</span><span class="ct-7e4aea"> </span><span class="ct-db1a1c">=</span><span class="ct-7e4aea"> </span><span class="ct-d3e5b1">'com.yourapp'</span><span class="ct-7e4aea">;</span></span><span class="line"></span><span class="line"><span class="ct-bd73c0">const</span><span class="ct-7e4aea"> </span><span class="ct-20d3ba">authState</span><span class="ct-7e4aea"> </span><span class="ct-db1a1c">=</span><span class="ct-7e4aea"> </span><span class="ct-db1a1c">await</span><span class="ct-7e4aea"> </span><span class="ct-0bd357">authorize</span><span class="ct-7e4aea">({</span></span><span class="line"><span class="ct-7e4aea"> serviceConfiguration: {</span></span><span class="line"><span class="ct-7e4aea"> authorizationEndpoint: </span><span class="ct-d3e5b1">`https://oauth.yandex.ru/authorize?response_type=code&client_id=${</span><span class="ct-20d3ba">YANDEX_OAUTH_CLIENT</span><span class="ct-d3e5b1">}&redirect_uri=${</span><span class="ct-20d3ba">APP_ID</span><span class="ct-d3e5b1">}:/oauth2redirect`</span><span class="ct-7e4aea">,</span></span><span class="line"><span class="ct-7e4aea"> </span><span class="ct-f3a5ee">// TODO: replace it with your own backend to secure client_secret:</span></span><span class="line"><span class="ct-7e4aea"> tokenEndpoint: </span><span class="ct-d3e5b1">`https://oauth.yandex.ru/token?grant_type=authorization_code&client_id=${</span><span class="ct-20d3ba">YANDEX_OAUTH_CLIENT</span><span class="ct-d3e5b1">}&client_secret=${</span><span class="ct-20d3ba">YANDEX_OAUTH_SECRET</span><span class="ct-d3e5b1">}`</span><span class="ct-7e4aea">,</span></span><span class="line"><span class="ct-7e4aea"> },</span></span><span class="line"><span class="ct-7e4aea"> clientId: </span><span class="ct-20d3ba">YANDEX_OAUTH_CLIENT</span><span class="ct-7e4aea">,</span></span><span class="line"><span class="ct-7e4aea"> redirectUrl: </span><span class="ct-d3e5b1">`${</span><span class="ct-20d3ba">APP_ID</span><span class="ct-d3e5b1">}:/oauth2redirect`</span><span class="ct-7e4aea">,</span></span><span class="line"><span class="ct-7e4aea"> scopes: [</span><span class="ct-d3e5b1">'login:info'</span><span class="ct-7e4aea">, </span><span class="ct-d3e5b1">'login:avatar'</span><span class="ct-7e4aea">],</span></span><span class="line"><span class="ct-7e4aea"> dangerouslyAllowInsecureHttpRequests: </span><span class="ct-8f934a">true</span><span class="ct-7e4aea">,</span></span><span class="line"><span class="ct-7e4aea">});</span></span><span class="line"></span><span class="line"><span class="ct-0bd357">callback</span><span class="ct-7e4aea">(</span><span class="ct-25a6af">authState</span><span class="ct-7e4aea">.</span><span class="ct-25a6af">accessToken</span><span class="ct-7e4aea">);</span></span></code></pre><!--]--></div><h2 id="apple-id-login"><a href="#apple-id-login"><!--[-->Apple ID login<!--]--></a></h2><p><!--[--><a href="https://github.com/invertase/react-native-apple-authentication" rel="nofollow" target="_blank"><!--[-->react-native-apple-authentication<!--]--></a> has its own <a href="https://github.com/invertase/react-native-apple-authentication/tree/main/docs" rel="nofollow" target="_blank"><!--[-->documentation<!--]--></a> on setting up OAuth using Apple ID.<!--]--></p><style>.ct-8f934a{color:#79C0FF}.ct-0bd357{color:#D2A8FF}.ct-f3a5ee{color:#8B949E}.ct-20d3ba{color:#79C0FF}.ct-bd73c0{color:#FF7B72}.ct-d3e5b1{color:#A5D6FF}.ct-25a6af{color:#C9D1D9}.ct-7e4aea{color:#C9D1D9}.ct-db1a1c{color:#FF7B72}.light .ct-db1a1c{color:#859900}.light .ct-7e4aea{color:#657B83}.light .ct-25a6af{color:#268BD2}.light .ct-d3e5b1{color:#2AA198}.light .ct-bd73c0{color:#073642}.light .ct-20d3ba{color:#268BD2}.light .ct-f3a5ee{color:#93A1A1}.light .ct-0bd357{color:#268BD2}.light .ct-8f934a{color:#B58900}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/frontend/react-native/oauth2-login/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697991437}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseH3.462e5228.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/frontend/react-native/preserve-flatlist-scroll-position-in-react-native/_payload.js b/docs/frontend/react-native/preserve-flatlist-scroll-position-in-react-native/_payload.js
index 2e48b70..ea479c0 100644
--- a/docs/frontend/react-native/preserve-flatlist-scroll-position-in-react-native/_payload.js
+++ b/docs/frontend/react-native/preserve-flatlist-scroll-position-in-react-native/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:$,_path:aa},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-Rv2z2spCBs":{_path:aa,_dir:"react-native",_draft:M,_partial:M,_locale:"en",_empty:M,title:$,description:"Sometimes you need to keep scroll position of FlatList in React Native after some user interactions.",excerpt:{type:ab,children:[{type:a,tag:ac,props:{},children:[{type:c,value:ad},{type:a,tag:ae,props:{},children:[{type:c,value:N}]},{type:c,value:af}]},{type:a,tag:C,props:{code:O,language:ag},children:[{type:a,tag:ah,props:{},children:[{type:a,tag:C,props:{__ignoreMap:P},children:[{type:c,value:O}]}]}]}]},body:{type:ab,children:[{type:a,tag:ac,props:{},children:[{type:c,value:ad},{type:a,tag:ae,props:{},children:[{type:c,value:N}]},{type:c,value:af}]},{type:a,tag:C,props:{code:O,language:ag},children:[{type:a,tag:ah,props:{},children:[{type:a,tag:C,props:{__ignoreMap:P},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:D},children:[{type:c,value:"\u002F\u002F interact() is doing some stuff, that changes FlatList scroll size"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:n},children:[{type:c,value:"type"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:"ct-43b17f"},children:[{type:c,value:ai}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" { "}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" () "}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:"ct-f0e2c2"},children:[{type:c,value:"void"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"; }"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:x},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:aj},children:[{type:c,value:"SomeList"}]},{type:a,tag:b,props:{class:t},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:E},children:[{type:c,value:"FC"}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:E},children:[{type:c,value:ai}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"\u003E "}]},{type:a,tag:b,props:{class:t},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:" ({ "}]},{type:a,tag:b,props:{class:F},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:" }) "}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:u}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:G},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:G},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:D},children:[{type:c,value:"\u002F\u002F set it to `true` before interaction and back to `false` right after"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:J},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:i},children:[{type:c,value:" ("}]},{type:a,tag:b,props:{class:F},children:[{type:c,value:ak}]},{type:a,tag:b,props:{class:t},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:E},children:[{type:c,value:"NativeSyntheticEvent"}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:E},children:[{type:c,value:"NativeScrollEvent"}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"\u003E) "}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:u}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ak}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"nativeEvent"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"contentOffset"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"y"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:al}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" [],"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:am}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:i},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:"ct-95ec99"},children:[{type:c,value:Y}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:t},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:aj},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"(("}]},{type:a,tag:b,props:{class:F},children:[{type:c,value:"_"}]},{type:a,tag:b,props:{class:t},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:an},children:[{type:c,value:ao}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:", "}]},{type:a,tag:b,props:{class:F},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:t},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:an},children:[{type:c,value:ao}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:") "}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:u}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"if"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Z}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"!"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:") {"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ap}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"?."}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"scrollToOffset"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"({"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" offset: "}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"+"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Z}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"-"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"),"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" animated: "}]},{type:a,tag:b,props:{class:J},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:","}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" });"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }, []);"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:D},children:[{type:c,value:"\u002F\u002F onInteraction wraps interaction to preserve scroll position"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"onInteraction"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" () "}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:J},children:[{type:c,value:"true"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:as}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"();"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:at}]},{type:a,tag:b,props:{class:G},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:as}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:J},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:at}]},{type:a,tag:b,props:{class:G},children:[{type:c,value:"500"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:al}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" ["}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"setSelectedSubThemes"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"],"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:am}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ap}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:"ct-f7ed9c"},children:[{type:c,value:N}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:D},children:[{type:c,value:"\u002F\u002F ...required FlatList options"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:Y}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:Y}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:au}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:au}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"\u002F\u003E"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" )"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-f7ed9c{color:#FFA657}.ct-754b01{color:#79C0FF}.ct-95ec99{color:#79C0FF}.ct-7a1986{color:#C9D1D9}.ct-7f0ff6{color:#79C0FF}.ct-6a4963{color:#79C0FF}.ct-4637ba{color:#79C0FF}.ct-a064f4{color:#FFA657}.ct-f23ae9{color:#FFA657}.ct-40962e{color:#FF7B72}.ct-6b0b8c{color:#D2A8FF}.ct-173ddd{color:#C9D1D9}.ct-119c57{color:#FF7B72}.ct-f0e2c2{color:#79C0FF}.ct-6ab075{color:#D2A8FF}.ct-ae113b{color:#FF7B72}.ct-43b17f{color:#FFA657}.ct-2d0265{color:#C9D1D9}.ct-eacfd3{color:#FF7B72}.ct-347b63{color:#8B949E}.light .ct-347b63{color:#93A1A1}.light .ct-eacfd3{color:#073642}.light .ct-2d0265{color:#657B83}.light .ct-43b17f{color:#268BD2}.light .ct-ae113b{color:#859900}.light .ct-6ab075{color:#268BD2}.light .ct-f0e2c2{color:#859900}.light .ct-119c57{color:#073642}.light .ct-173ddd{color:#657B83}.light .ct-6b0b8c{color:#268BD2}.light .ct-40962e{color:#859900}.light .ct-f23ae9{color:#268BD2}.light .ct-a064f4{color:#657B83}.light .ct-4637ba{color:#268BD2}.light .ct-6a4963{color:#D33682}.light .ct-7f0ff6{color:#B58900}.light .ct-7a1986{color:#268BD2}.light .ct-95ec99{color:#268BD2}.light .ct-754b01{color:#859900}.light .ct-f7ed9c{color:#657B83}"}]}],toc:{title:P,searchDepth:av,depth:av,links:[]}},_type:"markdown",_id:"content:Frontend:React Native:Preserve FlatList scroll position in React Native.md",_source:"content",_file:"Frontend\u002FReact Native\u002FPreserve FlatList scroll position in React Native.md",_extension:"md"}},prerenderedAt:1703695530220}}("element","span","text","ct-2d0265","line"," ","ct-7a1986","ct-ae113b","ct-173ddd","=","."," "," ","ct-eacfd3","current","ct-6ab075","=\u003E","const","ct-4637ba","ct-40962e"," {",";",":","ct-119c57","(",");"," ","}","code","ct-347b63","ct-f23ae9","ct-a064f4","ct-6a4963","scrollHeight","shouldKeepScrollPosition","ct-7f0ff6","h","{",false,"FlatList","\u002F\u002F interact() is doing some stuff, that changes FlatList scroll size\ntype Props = { interact: () =\u003E void; }\n\nconst SomeList: FC\u003CProps\u003E = ({ interact }) =\u003E {\n const scrollPosition = useRef(0);\n const scrollHeight = useRef(0);\n \n \u002F\u002F set it to `true` before interaction and back to `false` right after\n const shouldKeepScrollPosition = useRef(false);\n\n const onScroll = useCallback(\n (event: NativeSyntheticEvent\u003CNativeScrollEvent\u003E) =\u003E {\n scrollPosition.current = event.nativeEvent.contentOffset.y;\n },\n [],\n );\n\n const onContentSizeChange = useCallback((_: number, h: number) =\u003E {\n if (!shouldKeepScrollPosition.current) {\n scrollHeight.current = h;\n return;\n }\n\n ref.current?.scrollToOffset({\n offset: scrollPosition.current + (h - scrollHeight.current),\n animated: false,\n });\n\n scrollHeight.current = h;\n }, []);\n\n \u002F\u002F onInteraction wraps interaction to preserve scroll position\n const onInteraction = useCallback(\n () =\u003E {\n shouldKeepScrollPosition.current = true;\n\n setTimeout(() =\u003E {\n interact();\n }, 0);\n\n setTimeout(() =\u003E {\n shouldKeepScrollPosition.current = false;\n }, 500);\n },\n [setSelectedSubThemes],\n );\n \n return (\n \u003CFlatList\n \u002F\u002F ...required FlatList options\n ref={ref}\n onContentSizeChange={onContentSizeChange}\n onRefresh={onRefresh}\n onScroll={onScroll}\n \u002F\u003E\n )\n}\n","","interact","\u003C","scrollPosition","useRef","0","false","onScroll","useCallback","onContentSizeChange"," (","ref","Preserve FlatList Scroll Position In React Native","\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native","root","p","Sometimes you need to keep scroll position of ","code-inline"," in React Native after some user interactions.","typescript","pre","Props","ct-6b0b8c","event"," },"," );","ct-754b01","number","return","setTimeout","(() "," "," }, ","onRefresh",2))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:$,_path:aa},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-Rv2z2spCBs":{_path:aa,_dir:"react-native",_draft:M,_partial:M,_locale:"en",_empty:M,title:$,description:"Sometimes you need to keep scroll position of FlatList in React Native after some user interactions.",excerpt:{type:ab,children:[{type:a,tag:ac,props:{},children:[{type:c,value:ad},{type:a,tag:ae,props:{},children:[{type:c,value:N}]},{type:c,value:af}]},{type:a,tag:C,props:{code:O,language:ag},children:[{type:a,tag:ah,props:{},children:[{type:a,tag:C,props:{__ignoreMap:P},children:[{type:c,value:O}]}]}]}]},body:{type:ab,children:[{type:a,tag:ac,props:{},children:[{type:c,value:ad},{type:a,tag:ae,props:{},children:[{type:c,value:N}]},{type:c,value:af}]},{type:a,tag:C,props:{code:O,language:ag},children:[{type:a,tag:ah,props:{},children:[{type:a,tag:C,props:{__ignoreMap:P},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:D},children:[{type:c,value:"\u002F\u002F interact() is doing some stuff, that changes FlatList scroll size"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:n},children:[{type:c,value:"type"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:"ct-fe8812"},children:[{type:c,value:ai}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" { "}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" () "}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:"ct-16fddf"},children:[{type:c,value:"void"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"; }"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:x},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:aj},children:[{type:c,value:"SomeList"}]},{type:a,tag:b,props:{class:t},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:E},children:[{type:c,value:"FC"}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:E},children:[{type:c,value:ai}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"\u003E "}]},{type:a,tag:b,props:{class:t},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:" ({ "}]},{type:a,tag:b,props:{class:F},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:" }) "}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:u}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:G},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:G},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:D},children:[{type:c,value:"\u002F\u002F set it to `true` before interaction and back to `false` right after"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:J},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:i},children:[{type:c,value:" ("}]},{type:a,tag:b,props:{class:F},children:[{type:c,value:ak}]},{type:a,tag:b,props:{class:t},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:E},children:[{type:c,value:"NativeSyntheticEvent"}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:E},children:[{type:c,value:"NativeScrollEvent"}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"\u003E) "}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:u}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ak}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"nativeEvent"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"contentOffset"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"y"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:al}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" [],"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:am}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:i},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:"ct-447d8e"},children:[{type:c,value:Y}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:t},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:aj},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"(("}]},{type:a,tag:b,props:{class:F},children:[{type:c,value:"_"}]},{type:a,tag:b,props:{class:t},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:an},children:[{type:c,value:ao}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:", "}]},{type:a,tag:b,props:{class:F},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:t},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:an},children:[{type:c,value:ao}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:") "}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:u}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"if"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Z}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"!"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:") {"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ap}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"?."}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"scrollToOffset"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"({"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" offset: "}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"+"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Z}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"-"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"),"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" animated: "}]},{type:a,tag:b,props:{class:J},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:","}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" });"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }, []);"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:D},children:[{type:c,value:"\u002F\u002F onInteraction wraps interaction to preserve scroll position"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"onInteraction"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" () "}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:J},children:[{type:c,value:"true"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:as}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"();"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:at}]},{type:a,tag:b,props:{class:G},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:as}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:J},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:at}]},{type:a,tag:b,props:{class:G},children:[{type:c,value:"500"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:al}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" ["}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"setSelectedSubThemes"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"],"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:am}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ap}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:"ct-deddc5"},children:[{type:c,value:N}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:D},children:[{type:c,value:"\u002F\u002F ...required FlatList options"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:Y}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:Y}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:au}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:au}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"\u002F\u003E"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" )"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-deddc5{color:#FFA657}.ct-5ac3c8{color:#79C0FF}.ct-447d8e{color:#79C0FF}.ct-458d97{color:#C9D1D9}.ct-1a8020{color:#79C0FF}.ct-824354{color:#79C0FF}.ct-f151f9{color:#79C0FF}.ct-37159e{color:#FFA657}.ct-214e59{color:#FFA657}.ct-6883f2{color:#FF7B72}.ct-bc0f5b{color:#D2A8FF}.ct-a4861c{color:#C9D1D9}.ct-ee2cab{color:#FF7B72}.ct-16fddf{color:#79C0FF}.ct-53862c{color:#D2A8FF}.ct-bdec02{color:#FF7B72}.ct-fe8812{color:#FFA657}.ct-2651d0{color:#C9D1D9}.ct-899c19{color:#FF7B72}.ct-cbdfc4{color:#8B949E}.light .ct-cbdfc4{color:#93A1A1}.light .ct-899c19{color:#073642}.light .ct-2651d0{color:#657B83}.light .ct-fe8812{color:#268BD2}.light .ct-bdec02{color:#859900}.light .ct-53862c{color:#268BD2}.light .ct-16fddf{color:#859900}.light .ct-ee2cab{color:#073642}.light .ct-a4861c{color:#657B83}.light .ct-bc0f5b{color:#268BD2}.light .ct-6883f2{color:#859900}.light .ct-214e59{color:#268BD2}.light .ct-37159e{color:#657B83}.light .ct-f151f9{color:#268BD2}.light .ct-824354{color:#D33682}.light .ct-1a8020{color:#B58900}.light .ct-458d97{color:#268BD2}.light .ct-447d8e{color:#268BD2}.light .ct-5ac3c8{color:#859900}.light .ct-deddc5{color:#657B83}"}]}],toc:{title:P,searchDepth:av,depth:av,links:[]}},_type:"markdown",_id:"content:Frontend:React Native:Preserve FlatList scroll position in React Native.md",_source:"content",_file:"Frontend\u002FReact Native\u002FPreserve FlatList scroll position in React Native.md",_extension:"md"}},prerenderedAt:1703697991497}}("element","span","text","ct-2651d0","line"," ","ct-458d97","ct-bdec02","ct-a4861c","=","."," "," ","ct-899c19","current","ct-53862c","=\u003E","const","ct-f151f9","ct-6883f2"," {",";",":","ct-ee2cab","(",");"," ","}","code","ct-cbdfc4","ct-214e59","ct-37159e","ct-824354","scrollHeight","shouldKeepScrollPosition","ct-1a8020","h","{",false,"FlatList","\u002F\u002F interact() is doing some stuff, that changes FlatList scroll size\ntype Props = { interact: () =\u003E void; }\n\nconst SomeList: FC\u003CProps\u003E = ({ interact }) =\u003E {\n const scrollPosition = useRef(0);\n const scrollHeight = useRef(0);\n \n \u002F\u002F set it to `true` before interaction and back to `false` right after\n const shouldKeepScrollPosition = useRef(false);\n\n const onScroll = useCallback(\n (event: NativeSyntheticEvent\u003CNativeScrollEvent\u003E) =\u003E {\n scrollPosition.current = event.nativeEvent.contentOffset.y;\n },\n [],\n );\n\n const onContentSizeChange = useCallback((_: number, h: number) =\u003E {\n if (!shouldKeepScrollPosition.current) {\n scrollHeight.current = h;\n return;\n }\n\n ref.current?.scrollToOffset({\n offset: scrollPosition.current + (h - scrollHeight.current),\n animated: false,\n });\n\n scrollHeight.current = h;\n }, []);\n\n \u002F\u002F onInteraction wraps interaction to preserve scroll position\n const onInteraction = useCallback(\n () =\u003E {\n shouldKeepScrollPosition.current = true;\n\n setTimeout(() =\u003E {\n interact();\n }, 0);\n\n setTimeout(() =\u003E {\n shouldKeepScrollPosition.current = false;\n }, 500);\n },\n [setSelectedSubThemes],\n );\n \n return (\n \u003CFlatList\n \u002F\u002F ...required FlatList options\n ref={ref}\n onContentSizeChange={onContentSizeChange}\n onRefresh={onRefresh}\n onScroll={onScroll}\n \u002F\u003E\n )\n}\n","","interact","\u003C","scrollPosition","useRef","0","false","onScroll","useCallback","onContentSizeChange"," (","ref","Preserve FlatList Scroll Position In React Native","\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native","root","p","Sometimes you need to keep scroll position of ","code-inline"," in React Native after some user interactions.","typescript","pre","Props","ct-bc0f5b","event"," },"," );","ct-5ac3c8","number","return","setTimeout","(() "," "," }, ","onRefresh",2))
\ No newline at end of file
diff --git a/docs/frontend/react-native/preserve-flatlist-scroll-position-in-react-native/index.html b/docs/frontend/react-native/preserve-flatlist-scroll-position-in-react-native/index.html
index 6d38d59..e00fc3a 100644
--- a/docs/frontend/react-native/preserve-flatlist-scroll-position-in-react-native/index.html
+++ b/docs/frontend/react-native/preserve-flatlist-scroll-position-in-react-native/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Preserve FlatList Scroll Position In React Native • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Sometimes you need to keep scroll position of FlatList in React Native after some user interactions."><meta name="head:count" content="3"><link rel="modulepreload" href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCodeInline.d9bcf614.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a aria-current="page" href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="router-link-active _active_192pu_81 _link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Preserve FlatList Scroll Position In React Native</h1><article><div><p><!--[-->Sometimes you need to keep scroll position of <code><!--[-->FlatList<!--]--></code> in React Native after some user interactions.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-347b63">// interact() is doing some stuff, that changes FlatList scroll size</span></span><span class="line"><span class="ct-eacfd3">type</span><span class="ct-2d0265"> </span><span class="ct-43b17f">Props</span><span class="ct-2d0265"> </span><span class="ct-ae113b">=</span><span class="ct-2d0265"> { </span><span class="ct-6ab075">interact</span><span class="ct-ae113b">:</span><span class="ct-2d0265"> () </span><span class="ct-eacfd3">=></span><span class="ct-2d0265"> </span><span class="ct-f0e2c2">void</span><span class="ct-2d0265">; }</span></span><span class="line"></span><span class="line"><span class="ct-119c57">const</span><span class="ct-173ddd"> </span><span class="ct-6b0b8c">SomeList</span><span class="ct-40962e">:</span><span class="ct-173ddd"> </span><span class="ct-f23ae9">FC</span><span class="ct-173ddd"><</span><span class="ct-f23ae9">Props</span><span class="ct-173ddd">> </span><span class="ct-40962e">=</span><span class="ct-173ddd"> ({ </span><span class="ct-a064f4">interact</span><span class="ct-173ddd"> }) </span><span class="ct-119c57">=></span><span class="ct-173ddd"> {</span></span><span class="line"><span class="ct-2d0265"> </span><span class="ct-eacfd3">const</span><span class="ct-2d0265"> </span><span class="ct-4637ba">scrollPosition</span><span class="ct-2d0265"> </span><span class="ct-ae113b">=</span><span class="ct-2d0265"> </span><span class="ct-6ab075">useRef</span><span class="ct-2d0265">(</span><span class="ct-6a4963">0</span><span class="ct-2d0265">);</span></span><span class="line"><span class="ct-2d0265"> </span><span class="ct-eacfd3">const</span><span class="ct-2d0265"> </span><span class="ct-4637ba">scrollHeight</span><span class="ct-2d0265"> </span><span class="ct-ae113b">=</span><span class="ct-2d0265"> </span><span class="ct-6ab075">useRef</span><span class="ct-2d0265">(</span><span class="ct-6a4963">0</span><span class="ct-2d0265">);</span></span><span class="line"><span class="ct-2d0265"> </span></span><span class="line"><span class="ct-2d0265"> </span><span class="ct-347b63">// set it to `true` before interaction and back to `false` right after</span></span><span class="line"><span class="ct-2d0265"> </span><span class="ct-eacfd3">const</span><span class="ct-2d0265"> </span><span class="ct-4637ba">shouldKeepScrollPosition</span><span class="ct-2d0265"> </span><span class="ct-ae113b">=</span><span class="ct-2d0265"> </span><span class="ct-6ab075">useRef</span><span class="ct-2d0265">(</span><span class="ct-7f0ff6">false</span><span class="ct-2d0265">);</span></span><span class="line"></span><span class="line"><span class="ct-2d0265"> </span><span class="ct-eacfd3">const</span><span class="ct-2d0265"> </span><span class="ct-4637ba">onScroll</span><span class="ct-2d0265"> </span><span class="ct-ae113b">=</span><span class="ct-2d0265"> </span><span class="ct-6ab075">useCallback</span><span class="ct-2d0265">(</span></span><span class="line"><span class="ct-173ddd"> (</span><span class="ct-a064f4">event</span><span class="ct-40962e">:</span><span class="ct-173ddd"> </span><span class="ct-f23ae9">NativeSyntheticEvent</span><span class="ct-173ddd"><</span><span class="ct-f23ae9">NativeScrollEvent</span><span class="ct-173ddd">>) </span><span class="ct-119c57">=></span><span class="ct-173ddd"> {</span></span><span class="line"><span class="ct-2d0265"> </span><span class="ct-7a1986">scrollPosition</span><span class="ct-2d0265">.</span><span class="ct-7a1986">current</span><span class="ct-2d0265"> </span><span class="ct-ae113b">=</span><span class="ct-2d0265"> </span><span class="ct-7a1986">event</span><span class="ct-2d0265">.</span><span class="ct-7a1986">nativeEvent</span><span class="ct-2d0265">.</span><span class="ct-7a1986">contentOffset</span><span class="ct-2d0265">.</span><span class="ct-7a1986">y</span><span class="ct-2d0265">;</span></span><span class="line"><span class="ct-2d0265"> },</span></span><span class="line"><span class="ct-2d0265"> [],</span></span><span class="line"><span class="ct-2d0265"> );</span></span><span class="line"></span><span class="line"><span class="ct-173ddd"> </span><span class="ct-119c57">const</span><span class="ct-173ddd"> </span><span class="ct-95ec99">onContentSizeChange</span><span class="ct-173ddd"> </span><span class="ct-40962e">=</span><span class="ct-173ddd"> </span><span class="ct-6b0b8c">useCallback</span><span class="ct-173ddd">((</span><span class="ct-a064f4">_</span><span class="ct-40962e">:</span><span class="ct-173ddd"> </span><span class="ct-754b01">number</span><span class="ct-173ddd">, </span><span class="ct-a064f4">h</span><span class="ct-40962e">:</span><span class="ct-173ddd"> </span><span class="ct-754b01">number</span><span class="ct-173ddd">) </span><span class="ct-119c57">=></span><span class="ct-173ddd"> {</span></span><span class="line"><span class="ct-2d0265"> </span><span class="ct-ae113b">if</span><span class="ct-2d0265"> (</span><span class="ct-ae113b">!</span><span class="ct-7a1986">shouldKeepScrollPosition</span><span class="ct-2d0265">.</span><span class="ct-7a1986">current</span><span class="ct-2d0265">) {</span></span><span class="line"><span class="ct-2d0265"> </span><span class="ct-7a1986">scrollHeight</span><span class="ct-2d0265">.</span><span class="ct-7a1986">current</span><span class="ct-2d0265"> </span><span class="ct-ae113b">=</span><span class="ct-2d0265"> </span><span class="ct-7a1986">h</span><span class="ct-2d0265">;</span></span><span class="line"><span class="ct-2d0265"> </span><span class="ct-ae113b">return</span><span class="ct-2d0265">;</span></span><span class="line"><span class="ct-2d0265"> }</span></span><span class="line"></span><span class="line"><span class="ct-2d0265"> </span><span class="ct-7a1986">ref</span><span class="ct-2d0265">.</span><span class="ct-7a1986">current</span><span class="ct-2d0265">?.</span><span class="ct-6ab075">scrollToOffset</span><span class="ct-2d0265">({</span></span><span class="line"><span class="ct-2d0265"> offset: </span><span class="ct-7a1986">scrollPosition</span><span class="ct-2d0265">.</span><span class="ct-7a1986">current</span><span class="ct-2d0265"> </span><span class="ct-ae113b">+</span><span class="ct-2d0265"> (</span><span class="ct-7a1986">h</span><span class="ct-2d0265"> </span><span class="ct-ae113b">-</span><span class="ct-2d0265"> </span><span class="ct-7a1986">scrollHeight</span><span class="ct-2d0265">.</span><span class="ct-7a1986">current</span><span class="ct-2d0265">),</span></span><span class="line"><span class="ct-2d0265"> animated: </span><span class="ct-7f0ff6">false</span><span class="ct-2d0265">,</span></span><span class="line"><span class="ct-2d0265"> });</span></span><span class="line"></span><span class="line"><span class="ct-2d0265"> </span><span class="ct-7a1986">scrollHeight</span><span class="ct-2d0265">.</span><span class="ct-7a1986">current</span><span class="ct-2d0265"> </span><span class="ct-ae113b">=</span><span class="ct-2d0265"> </span><span class="ct-7a1986">h</span><span class="ct-2d0265">;</span></span><span class="line"><span class="ct-2d0265"> }, []);</span></span><span class="line"></span><span class="line"><span class="ct-2d0265"> </span><span class="ct-347b63">// onInteraction wraps interaction to preserve scroll position</span></span><span class="line"><span class="ct-2d0265"> </span><span class="ct-eacfd3">const</span><span class="ct-2d0265"> </span><span class="ct-4637ba">onInteraction</span><span class="ct-2d0265"> </span><span class="ct-ae113b">=</span><span class="ct-2d0265"> </span><span class="ct-6ab075">useCallback</span><span class="ct-2d0265">(</span></span><span class="line"><span class="ct-2d0265"> () </span><span class="ct-eacfd3">=></span><span class="ct-2d0265"> {</span></span><span class="line"><span class="ct-2d0265"> </span><span class="ct-7a1986">shouldKeepScrollPosition</span><span class="ct-2d0265">.</span><span class="ct-7a1986">current</span><span class="ct-2d0265"> </span><span class="ct-ae113b">=</span><span class="ct-2d0265"> </span><span class="ct-7f0ff6">true</span><span class="ct-2d0265">;</span></span><span class="line"></span><span class="line"><span class="ct-2d0265"> </span><span class="ct-4637ba">setTimeout</span><span class="ct-2d0265">(() </span><span class="ct-eacfd3">=></span><span class="ct-2d0265"> {</span></span><span class="line"><span class="ct-2d0265"> </span><span class="ct-6ab075">interact</span><span class="ct-2d0265">();</span></span><span class="line"><span class="ct-2d0265"> }, </span><span class="ct-6a4963">0</span><span class="ct-2d0265">);</span></span><span class="line"></span><span class="line"><span class="ct-2d0265"> </span><span class="ct-4637ba">setTimeout</span><span class="ct-2d0265">(() </span><span class="ct-eacfd3">=></span><span class="ct-2d0265"> {</span></span><span class="line"><span class="ct-2d0265"> </span><span class="ct-7a1986">shouldKeepScrollPosition</span><span class="ct-2d0265">.</span><span class="ct-7a1986">current</span><span class="ct-2d0265"> </span><span class="ct-ae113b">=</span><span class="ct-2d0265"> </span><span class="ct-7f0ff6">false</span><span class="ct-2d0265">;</span></span><span class="line"><span class="ct-2d0265"> }, </span><span class="ct-6a4963">500</span><span class="ct-2d0265">);</span></span><span class="line"><span class="ct-2d0265"> },</span></span><span class="line"><span class="ct-2d0265"> [</span><span class="ct-7a1986">setSelectedSubThemes</span><span class="ct-2d0265">],</span></span><span class="line"><span class="ct-2d0265"> );</span></span><span class="line"><span class="ct-2d0265"> </span></span><span class="line"><span class="ct-2d0265"> </span><span class="ct-ae113b">return</span><span class="ct-2d0265"> (</span></span><span class="line"><span class="ct-2d0265"> </span><span class="ct-ae113b"><</span><span class="ct-f7ed9c">FlatList</span></span><span class="line"><span class="ct-2d0265"> </span><span class="ct-347b63">// ...required FlatList options</span></span><span class="line"><span class="ct-2d0265"> </span><span class="ct-7a1986">ref</span><span class="ct-ae113b">=</span><span class="ct-2d0265">{</span><span class="ct-7a1986">ref</span><span class="ct-2d0265">}</span></span><span class="line"><span class="ct-2d0265"> </span><span class="ct-7a1986">onContentSizeChange</span><span class="ct-ae113b">=</span><span class="ct-2d0265">{</span><span class="ct-7a1986">onContentSizeChange</span><span class="ct-2d0265">}</span></span><span class="line"><span class="ct-2d0265"> </span><span class="ct-7a1986">onRefresh</span><span class="ct-ae113b">=</span><span class="ct-2d0265">{</span><span class="ct-7a1986">onRefresh</span><span class="ct-2d0265">}</span></span><span class="line"><span class="ct-2d0265"> </span><span class="ct-7a1986">onScroll</span><span class="ct-ae113b">=</span><span class="ct-2d0265">{</span><span class="ct-7a1986">onScroll</span><span class="ct-2d0265">}</span></span><span class="line"><span class="ct-2d0265"> </span><span class="ct-ae113b">/></span></span><span class="line"><span class="ct-2d0265"> )</span></span><span class="line"><span class="ct-2d0265">}</span></span></code></pre><!--]--></div><style>.ct-f7ed9c{color:#FFA657}.ct-754b01{color:#79C0FF}.ct-95ec99{color:#79C0FF}.ct-7a1986{color:#C9D1D9}.ct-7f0ff6{color:#79C0FF}.ct-6a4963{color:#79C0FF}.ct-4637ba{color:#79C0FF}.ct-a064f4{color:#FFA657}.ct-f23ae9{color:#FFA657}.ct-40962e{color:#FF7B72}.ct-6b0b8c{color:#D2A8FF}.ct-173ddd{color:#C9D1D9}.ct-119c57{color:#FF7B72}.ct-f0e2c2{color:#79C0FF}.ct-6ab075{color:#D2A8FF}.ct-ae113b{color:#FF7B72}.ct-43b17f{color:#FFA657}.ct-2d0265{color:#C9D1D9}.ct-eacfd3{color:#FF7B72}.ct-347b63{color:#8B949E}.light .ct-347b63{color:#93A1A1}.light .ct-eacfd3{color:#073642}.light .ct-2d0265{color:#657B83}.light .ct-43b17f{color:#268BD2}.light .ct-ae113b{color:#859900}.light .ct-6ab075{color:#268BD2}.light .ct-f0e2c2{color:#859900}.light .ct-119c57{color:#073642}.light .ct-173ddd{color:#657B83}.light .ct-6b0b8c{color:#268BD2}.light .ct-40962e{color:#859900}.light .ct-f23ae9{color:#268BD2}.light .ct-a064f4{color:#657B83}.light .ct-4637ba{color:#268BD2}.light .ct-6a4963{color:#D33682}.light .ct-7f0ff6{color:#B58900}.light .ct-7a1986{color:#268BD2}.light .ct-95ec99{color:#268BD2}.light .ct-754b01{color:#859900}.light .ct-f7ed9c{color:#657B83}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/frontend/react-native/preserve-flatlist-scroll-position-in-react-native/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695530220}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a aria-current="page" href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="router-link-active _active_192pu_81 _link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Preserve FlatList Scroll Position In React Native</h1><article><div><p><!--[-->Sometimes you need to keep scroll position of <code><!--[-->FlatList<!--]--></code> in React Native after some user interactions.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-cbdfc4">// interact() is doing some stuff, that changes FlatList scroll size</span></span><span class="line"><span class="ct-899c19">type</span><span class="ct-2651d0"> </span><span class="ct-fe8812">Props</span><span class="ct-2651d0"> </span><span class="ct-bdec02">=</span><span class="ct-2651d0"> { </span><span class="ct-53862c">interact</span><span class="ct-bdec02">:</span><span class="ct-2651d0"> () </span><span class="ct-899c19">=></span><span class="ct-2651d0"> </span><span class="ct-16fddf">void</span><span class="ct-2651d0">; }</span></span><span class="line"></span><span class="line"><span class="ct-ee2cab">const</span><span class="ct-a4861c"> </span><span class="ct-bc0f5b">SomeList</span><span class="ct-6883f2">:</span><span class="ct-a4861c"> </span><span class="ct-214e59">FC</span><span class="ct-a4861c"><</span><span class="ct-214e59">Props</span><span class="ct-a4861c">> </span><span class="ct-6883f2">=</span><span class="ct-a4861c"> ({ </span><span class="ct-37159e">interact</span><span class="ct-a4861c"> }) </span><span class="ct-ee2cab">=></span><span class="ct-a4861c"> {</span></span><span class="line"><span class="ct-2651d0"> </span><span class="ct-899c19">const</span><span class="ct-2651d0"> </span><span class="ct-f151f9">scrollPosition</span><span class="ct-2651d0"> </span><span class="ct-bdec02">=</span><span class="ct-2651d0"> </span><span class="ct-53862c">useRef</span><span class="ct-2651d0">(</span><span class="ct-824354">0</span><span class="ct-2651d0">);</span></span><span class="line"><span class="ct-2651d0"> </span><span class="ct-899c19">const</span><span class="ct-2651d0"> </span><span class="ct-f151f9">scrollHeight</span><span class="ct-2651d0"> </span><span class="ct-bdec02">=</span><span class="ct-2651d0"> </span><span class="ct-53862c">useRef</span><span class="ct-2651d0">(</span><span class="ct-824354">0</span><span class="ct-2651d0">);</span></span><span class="line"><span class="ct-2651d0"> </span></span><span class="line"><span class="ct-2651d0"> </span><span class="ct-cbdfc4">// set it to `true` before interaction and back to `false` right after</span></span><span class="line"><span class="ct-2651d0"> </span><span class="ct-899c19">const</span><span class="ct-2651d0"> </span><span class="ct-f151f9">shouldKeepScrollPosition</span><span class="ct-2651d0"> </span><span class="ct-bdec02">=</span><span class="ct-2651d0"> </span><span class="ct-53862c">useRef</span><span class="ct-2651d0">(</span><span class="ct-1a8020">false</span><span class="ct-2651d0">);</span></span><span class="line"></span><span class="line"><span class="ct-2651d0"> </span><span class="ct-899c19">const</span><span class="ct-2651d0"> </span><span class="ct-f151f9">onScroll</span><span class="ct-2651d0"> </span><span class="ct-bdec02">=</span><span class="ct-2651d0"> </span><span class="ct-53862c">useCallback</span><span class="ct-2651d0">(</span></span><span class="line"><span class="ct-a4861c"> (</span><span class="ct-37159e">event</span><span class="ct-6883f2">:</span><span class="ct-a4861c"> </span><span class="ct-214e59">NativeSyntheticEvent</span><span class="ct-a4861c"><</span><span class="ct-214e59">NativeScrollEvent</span><span class="ct-a4861c">>) </span><span class="ct-ee2cab">=></span><span class="ct-a4861c"> {</span></span><span class="line"><span class="ct-2651d0"> </span><span class="ct-458d97">scrollPosition</span><span class="ct-2651d0">.</span><span class="ct-458d97">current</span><span class="ct-2651d0"> </span><span class="ct-bdec02">=</span><span class="ct-2651d0"> </span><span class="ct-458d97">event</span><span class="ct-2651d0">.</span><span class="ct-458d97">nativeEvent</span><span class="ct-2651d0">.</span><span class="ct-458d97">contentOffset</span><span class="ct-2651d0">.</span><span class="ct-458d97">y</span><span class="ct-2651d0">;</span></span><span class="line"><span class="ct-2651d0"> },</span></span><span class="line"><span class="ct-2651d0"> [],</span></span><span class="line"><span class="ct-2651d0"> );</span></span><span class="line"></span><span class="line"><span class="ct-a4861c"> </span><span class="ct-ee2cab">const</span><span class="ct-a4861c"> </span><span class="ct-447d8e">onContentSizeChange</span><span class="ct-a4861c"> </span><span class="ct-6883f2">=</span><span class="ct-a4861c"> </span><span class="ct-bc0f5b">useCallback</span><span class="ct-a4861c">((</span><span class="ct-37159e">_</span><span class="ct-6883f2">:</span><span class="ct-a4861c"> </span><span class="ct-5ac3c8">number</span><span class="ct-a4861c">, </span><span class="ct-37159e">h</span><span class="ct-6883f2">:</span><span class="ct-a4861c"> </span><span class="ct-5ac3c8">number</span><span class="ct-a4861c">) </span><span class="ct-ee2cab">=></span><span class="ct-a4861c"> {</span></span><span class="line"><span class="ct-2651d0"> </span><span class="ct-bdec02">if</span><span class="ct-2651d0"> (</span><span class="ct-bdec02">!</span><span class="ct-458d97">shouldKeepScrollPosition</span><span class="ct-2651d0">.</span><span class="ct-458d97">current</span><span class="ct-2651d0">) {</span></span><span class="line"><span class="ct-2651d0"> </span><span class="ct-458d97">scrollHeight</span><span class="ct-2651d0">.</span><span class="ct-458d97">current</span><span class="ct-2651d0"> </span><span class="ct-bdec02">=</span><span class="ct-2651d0"> </span><span class="ct-458d97">h</span><span class="ct-2651d0">;</span></span><span class="line"><span class="ct-2651d0"> </span><span class="ct-bdec02">return</span><span class="ct-2651d0">;</span></span><span class="line"><span class="ct-2651d0"> }</span></span><span class="line"></span><span class="line"><span class="ct-2651d0"> </span><span class="ct-458d97">ref</span><span class="ct-2651d0">.</span><span class="ct-458d97">current</span><span class="ct-2651d0">?.</span><span class="ct-53862c">scrollToOffset</span><span class="ct-2651d0">({</span></span><span class="line"><span class="ct-2651d0"> offset: </span><span class="ct-458d97">scrollPosition</span><span class="ct-2651d0">.</span><span class="ct-458d97">current</span><span class="ct-2651d0"> </span><span class="ct-bdec02">+</span><span class="ct-2651d0"> (</span><span class="ct-458d97">h</span><span class="ct-2651d0"> </span><span class="ct-bdec02">-</span><span class="ct-2651d0"> </span><span class="ct-458d97">scrollHeight</span><span class="ct-2651d0">.</span><span class="ct-458d97">current</span><span class="ct-2651d0">),</span></span><span class="line"><span class="ct-2651d0"> animated: </span><span class="ct-1a8020">false</span><span class="ct-2651d0">,</span></span><span class="line"><span class="ct-2651d0"> });</span></span><span class="line"></span><span class="line"><span class="ct-2651d0"> </span><span class="ct-458d97">scrollHeight</span><span class="ct-2651d0">.</span><span class="ct-458d97">current</span><span class="ct-2651d0"> </span><span class="ct-bdec02">=</span><span class="ct-2651d0"> </span><span class="ct-458d97">h</span><span class="ct-2651d0">;</span></span><span class="line"><span class="ct-2651d0"> }, []);</span></span><span class="line"></span><span class="line"><span class="ct-2651d0"> </span><span class="ct-cbdfc4">// onInteraction wraps interaction to preserve scroll position</span></span><span class="line"><span class="ct-2651d0"> </span><span class="ct-899c19">const</span><span class="ct-2651d0"> </span><span class="ct-f151f9">onInteraction</span><span class="ct-2651d0"> </span><span class="ct-bdec02">=</span><span class="ct-2651d0"> </span><span class="ct-53862c">useCallback</span><span class="ct-2651d0">(</span></span><span class="line"><span class="ct-2651d0"> () </span><span class="ct-899c19">=></span><span class="ct-2651d0"> {</span></span><span class="line"><span class="ct-2651d0"> </span><span class="ct-458d97">shouldKeepScrollPosition</span><span class="ct-2651d0">.</span><span class="ct-458d97">current</span><span class="ct-2651d0"> </span><span class="ct-bdec02">=</span><span class="ct-2651d0"> </span><span class="ct-1a8020">true</span><span class="ct-2651d0">;</span></span><span class="line"></span><span class="line"><span class="ct-2651d0"> </span><span class="ct-f151f9">setTimeout</span><span class="ct-2651d0">(() </span><span class="ct-899c19">=></span><span class="ct-2651d0"> {</span></span><span class="line"><span class="ct-2651d0"> </span><span class="ct-53862c">interact</span><span class="ct-2651d0">();</span></span><span class="line"><span class="ct-2651d0"> }, </span><span class="ct-824354">0</span><span class="ct-2651d0">);</span></span><span class="line"></span><span class="line"><span class="ct-2651d0"> </span><span class="ct-f151f9">setTimeout</span><span class="ct-2651d0">(() </span><span class="ct-899c19">=></span><span class="ct-2651d0"> {</span></span><span class="line"><span class="ct-2651d0"> </span><span class="ct-458d97">shouldKeepScrollPosition</span><span class="ct-2651d0">.</span><span class="ct-458d97">current</span><span class="ct-2651d0"> </span><span class="ct-bdec02">=</span><span class="ct-2651d0"> </span><span class="ct-1a8020">false</span><span class="ct-2651d0">;</span></span><span class="line"><span class="ct-2651d0"> }, </span><span class="ct-824354">500</span><span class="ct-2651d0">);</span></span><span class="line"><span class="ct-2651d0"> },</span></span><span class="line"><span class="ct-2651d0"> [</span><span class="ct-458d97">setSelectedSubThemes</span><span class="ct-2651d0">],</span></span><span class="line"><span class="ct-2651d0"> );</span></span><span class="line"><span class="ct-2651d0"> </span></span><span class="line"><span class="ct-2651d0"> </span><span class="ct-bdec02">return</span><span class="ct-2651d0"> (</span></span><span class="line"><span class="ct-2651d0"> </span><span class="ct-bdec02"><</span><span class="ct-deddc5">FlatList</span></span><span class="line"><span class="ct-2651d0"> </span><span class="ct-cbdfc4">// ...required FlatList options</span></span><span class="line"><span class="ct-2651d0"> </span><span class="ct-458d97">ref</span><span class="ct-bdec02">=</span><span class="ct-2651d0">{</span><span class="ct-458d97">ref</span><span class="ct-2651d0">}</span></span><span class="line"><span class="ct-2651d0"> </span><span class="ct-458d97">onContentSizeChange</span><span class="ct-bdec02">=</span><span class="ct-2651d0">{</span><span class="ct-458d97">onContentSizeChange</span><span class="ct-2651d0">}</span></span><span class="line"><span class="ct-2651d0"> </span><span class="ct-458d97">onRefresh</span><span class="ct-bdec02">=</span><span class="ct-2651d0">{</span><span class="ct-458d97">onRefresh</span><span class="ct-2651d0">}</span></span><span class="line"><span class="ct-2651d0"> </span><span class="ct-458d97">onScroll</span><span class="ct-bdec02">=</span><span class="ct-2651d0">{</span><span class="ct-458d97">onScroll</span><span class="ct-2651d0">}</span></span><span class="line"><span class="ct-2651d0"> </span><span class="ct-bdec02">/></span></span><span class="line"><span class="ct-2651d0"> )</span></span><span class="line"><span class="ct-2651d0">}</span></span></code></pre><!--]--></div><style>.ct-deddc5{color:#FFA657}.ct-5ac3c8{color:#79C0FF}.ct-447d8e{color:#79C0FF}.ct-458d97{color:#C9D1D9}.ct-1a8020{color:#79C0FF}.ct-824354{color:#79C0FF}.ct-f151f9{color:#79C0FF}.ct-37159e{color:#FFA657}.ct-214e59{color:#FFA657}.ct-6883f2{color:#FF7B72}.ct-bc0f5b{color:#D2A8FF}.ct-a4861c{color:#C9D1D9}.ct-ee2cab{color:#FF7B72}.ct-16fddf{color:#79C0FF}.ct-53862c{color:#D2A8FF}.ct-bdec02{color:#FF7B72}.ct-fe8812{color:#FFA657}.ct-2651d0{color:#C9D1D9}.ct-899c19{color:#FF7B72}.ct-cbdfc4{color:#8B949E}.light .ct-cbdfc4{color:#93A1A1}.light .ct-899c19{color:#073642}.light .ct-2651d0{color:#657B83}.light .ct-fe8812{color:#268BD2}.light .ct-bdec02{color:#859900}.light .ct-53862c{color:#268BD2}.light .ct-16fddf{color:#859900}.light .ct-ee2cab{color:#073642}.light .ct-a4861c{color:#657B83}.light .ct-bc0f5b{color:#268BD2}.light .ct-6883f2{color:#859900}.light .ct-214e59{color:#268BD2}.light .ct-37159e{color:#657B83}.light .ct-f151f9{color:#268BD2}.light .ct-824354{color:#D33682}.light .ct-1a8020{color:#B58900}.light .ct-458d97{color:#268BD2}.light .ct-447d8e{color:#268BD2}.light .ct-5ac3c8{color:#859900}.light .ct-deddc5{color:#657B83}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/frontend/react-native/preserve-flatlist-scroll-position-in-react-native/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697991497}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/frontend/react-native/react-native-app-auth/_payload.js b/docs/frontend/react-native/react-native-app-auth/_payload.js
index ae06636..5b11b31 100644
--- a/docs/frontend/react-native/react-native-app-auth/_payload.js
+++ b/docs/frontend/react-native/react-native-app-auth/_payload.js
@@ -1 +1 @@
-export default {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-Ul5QREg0An":null},prerenderedAt:1703695531899}
\ No newline at end of file
+export default {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-Ul5QREg0An":null},prerenderedAt:1703697993534}
\ No newline at end of file
diff --git a/docs/frontend/react-native/react-native-app-auth/index.html b/docs/frontend/react-native/react-native-app-auth/index.html
index 86f6419..6179778 100644
--- a/docs/frontend/react-native/react-native-app-auth/index.html
+++ b/docs/frontend/react-native/react-native-app-auth/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="head:count" content="2"><link rel="modulepreload" href="/frontend/react-native/react-native-app-auth/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><style>._list_1w161_1{margin:0;padding:0 20px}._list_1w161_1 li a{text-decoration:none}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><article><h1></h1><!----></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/frontend/react-native/react-native-app-auth/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:c,value:c,unknown:a,forced:b}},_errors:{"content-query-Ul5QREg0An":a},serverRendered:a,config:{public:{content:{clientDB:{isSPA:b,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:b,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695531899}}(true,false,"dark","shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/HomeReference.de9617ff.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><article><h1></h1><!----></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/frontend/react-native/react-native-app-auth/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:c,value:c,unknown:a,forced:b}},_errors:{"content-query-Ul5QREg0An":a},serverRendered:a,config:{public:{content:{clientDB:{isSPA:b,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:b,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697993534}}(true,false,"dark","shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/HomeReference.de9617ff.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/frontend/react-native/useful-comands/_payload.js b/docs/frontend/react-native/useful-comands/_payload.js
index 3fa54dd..c625baf 100644
--- a/docs/frontend/react-native/useful-comands/_payload.js
+++ b/docs/frontend/react-native/useful-comands/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:X,_path:Y}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-90RMToCghI":{_path:Y,_dir:"react-native",_draft:y,_partial:y,_locale:"en",_empty:y,title:X,description:g,excerpt:{type:Z,children:[{type:a,tag:i,props:{id:z},children:[{type:b,value:A}]},{type:a,tag:f,props:{code:B,language:j},children:[{type:a,tag:h,props:{},children:[{type:a,tag:f,props:{__ignoreMap:g},children:[{type:b,value:B}]}]}]},{type:a,tag:i,props:{id:C},children:[{type:b,value:D}]},{type:a,tag:f,props:{code:E,language:_},children:[{type:a,tag:h,props:{},children:[{type:a,tag:f,props:{__ignoreMap:g},children:[{type:b,value:E}]}]}]},{type:a,tag:i,props:{id:F},children:[{type:b,value:G}]},{type:a,tag:$,props:{},children:[{type:b,value:aa}]},{type:a,tag:f,props:{code:H,language:j},children:[{type:a,tag:h,props:{},children:[{type:a,tag:f,props:{__ignoreMap:g},children:[{type:b,value:H}]}]}]},{type:a,tag:i,props:{id:I},children:[{type:b,value:J}]},{type:a,tag:f,props:{code:K,language:j},children:[{type:a,tag:h,props:{},children:[{type:a,tag:f,props:{__ignoreMap:g},children:[{type:b,value:K}]}]}]},{type:a,tag:i,props:{id:L},children:[{type:b,value:M}]},{type:a,tag:ab,props:{},children:[{type:a,tag:l,props:{},children:[{type:a,tag:m,props:{href:r,rel:[n]},children:[{type:b,value:r}]}]},{type:a,tag:l,props:{},children:[{type:a,tag:m,props:{href:s,rel:[n]},children:[{type:b,value:s}]}]},{type:a,tag:l,props:{},children:[{type:a,tag:m,props:{href:t,rel:[n]},children:[{type:b,value:t}]}]}]},{type:a,tag:u,props:{id:N},children:[{type:b,value:O}]},{type:a,tag:f,props:{code:P,language:j},children:[{type:a,tag:h,props:{},children:[{type:a,tag:f,props:{__ignoreMap:g},children:[{type:b,value:P}]}]}]},{type:a,tag:u,props:{id:Q},children:[{type:b,value:R}]},{type:a,tag:f,props:{code:S,language:j},children:[{type:a,tag:h,props:{},children:[{type:a,tag:f,props:{__ignoreMap:g},children:[{type:b,value:S}]}]}]}]},body:{type:Z,children:[{type:a,tag:i,props:{id:z},children:[{type:b,value:A}]},{type:a,tag:f,props:{code:B,language:j},children:[{type:a,tag:h,props:{},children:[{type:a,tag:f,props:{__ignoreMap:g},children:[{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:"adb logcat com.application:I "}]},{type:a,tag:c,props:{class:v},children:[{type:b,value:"\"*:S\""}]}]}]}]}]},{type:a,tag:i,props:{id:C},children:[{type:b,value:D}]},{type:a,tag:f,props:{code:E,language:_},children:[{type:a,tag:h,props:{},children:[{type:a,tag:f,props:{__ignoreMap:g},children:[{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:"keytool -printcert -jarfile "}]},{type:a,tag:c,props:{class:v},children:[{type:b,value:ac}]},{type:a,tag:c,props:{class:o},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:q},children:[{type:b,value:T}]},{type:a,tag:c,props:{class:v},children:[{type:b,value:ac}]}]}]}]}]},{type:a,tag:i,props:{id:F},children:[{type:b,value:G}]},{type:a,tag:$,props:{},children:[{type:b,value:aa}]},{type:a,tag:f,props:{code:H,language:j},children:[{type:a,tag:h,props:{},children:[{type:a,tag:f,props:{__ignoreMap:g},children:[{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:"npx react-native bundle \\"}]}]},{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:" --platform android \\"}]}]},{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:" --dev "}]},{type:a,tag:c,props:{class:U},children:[{type:b,value:"false"}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:V}]}]},{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:" --entry-file index.js \\"}]}]},{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:" --bundle-output android\u002Fapp\u002Fsrc\u002Fmain\u002Fassets\u002Findex.android.bundle \\"}]}]},{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:" --assets-dest android\u002Fapp\u002Fsrc\u002Fmain\u002Fres\u002F"}]}]},{type:a,tag:c,props:{class:d},children:[]},{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:U},children:[{type:b,value:ad}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:" android "}]},{type:a,tag:c,props:{class:w},children:[{type:b,value:x}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:" .\u002Fgradlew assembleDebug"}]}]},{type:a,tag:c,props:{class:d},children:[]},{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:W},children:[{type:b,value:"# do your stuff"}]}]},{type:a,tag:c,props:{class:d},children:[]},{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:".\u002Fgradlew clean"}]}]}]}]}]},{type:a,tag:i,props:{id:I},children:[{type:b,value:J}]},{type:a,tag:f,props:{code:K,language:j},children:[{type:a,tag:h,props:{},children:[{type:a,tag:f,props:{__ignoreMap:g},children:[{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:U},children:[{type:b,value:ad}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:" .\u002Fandroid \\"}]}]},{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:ae}]},{type:a,tag:c,props:{class:w},children:[{type:b,value:x}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:" .\u002Fgradlew assembleRelease \\"}]}]},{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:ae}]},{type:a,tag:c,props:{class:w},children:[{type:b,value:x}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:" adb install .\u002Fapp\u002Fbuild\u002Foutputs\u002Fapk\u002Frelease\u002Fapp-release.apk"}]}]}]}]}]},{type:a,tag:i,props:{id:L},children:[{type:b,value:M}]},{type:a,tag:ab,props:{},children:[{type:a,tag:l,props:{},children:[{type:a,tag:m,props:{href:r,rel:[n]},children:[{type:b,value:r}]}]},{type:a,tag:l,props:{},children:[{type:a,tag:m,props:{href:s,rel:[n]},children:[{type:b,value:s}]}]},{type:a,tag:l,props:{},children:[{type:a,tag:m,props:{href:t,rel:[n]},children:[{type:b,value:t}]}]}]},{type:a,tag:u,props:{id:N},children:[{type:b,value:O}]},{type:a,tag:f,props:{code:P,language:j},children:[{type:a,tag:h,props:{},children:[{type:a,tag:f,props:{__ignoreMap:g},children:[{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:W},children:[{type:b,value:"# ios "}]}]},{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:"xcrun simctl openurl booted "}]},{type:a,tag:c,props:{class:o},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:q},children:[{type:b,value:T}]}]},{type:a,tag:c,props:{class:d},children:[]},{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:W},children:[{type:b,value:"# android"}]}]},{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:"adb shell am start -W -a android.intent.action.VIEW -d "}]},{type:a,tag:c,props:{class:o},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:q},children:[{type:b,value:T}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:V}]}]},{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:"com.application"}]}]}]}]}]},{type:a,tag:u,props:{id:Q},children:[{type:b,value:R}]},{type:a,tag:f,props:{code:S,language:j},children:[{type:a,tag:h,props:{},children:[{type:a,tag:f,props:{__ignoreMap:g},children:[{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:"PACKAGE="}]},{type:a,tag:c,props:{class:v},children:[{type:b,value:"\"com.application\""}]}]},{type:a,tag:c,props:{class:d},children:[]},{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:"adb shell pm set-app-links --package "}]},{type:a,tag:c,props:{class:o},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:q},children:[{type:b,value:af}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:" 0 all "}]},{type:a,tag:c,props:{class:w},children:[{type:b,value:x}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:V}]}]},{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:" adb shell pm verify-app-links --re-verify "}]},{type:a,tag:c,props:{class:o},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:q},children:[{type:b,value:af}]}]}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-b1fb94{color:#8B949E}.ct-ea093a{color:#FF7B72}.ct-46f2e1{color:#79C0FF}.ct-b7705e{color:#C9D1D9}.ct-251e83{color:#C9D1D9}.ct-c1ff0c{color:#A5D6FF}.ct-65fc6f{color:#C9D1D9}.light .ct-65fc6f{color:#657B83}.light .ct-c1ff0c{color:#2AA198}.light .ct-251e83{color:#859900}.light .ct-b7705e{color:#268BD2}.light .ct-46f2e1{color:#268BD2}.light .ct-ea093a{color:#859900}.light .ct-b1fb94{color:#93A1A1}"}]}],toc:{title:g,searchDepth:k,depth:k,links:[{id:z,depth:k,text:A},{id:C,depth:k,text:D},{id:F,depth:k,text:G},{id:I,depth:k,text:J},{id:L,depth:k,text:M,children:[{id:N,depth:ag,text:O},{id:Q,depth:ag,text:R}]}]}},_type:"markdown",_id:"content:Frontend:React Native:Useful comands.md",_source:"content",_file:"Frontend\u002FReact Native\u002FUseful comands.md",_extension:"md"}},prerenderedAt:1703695530272}}("element","text","span","line","ct-65fc6f","code","","pre","h2","shell",2,"li","a","nofollow","ct-251e83","$","ct-b7705e","https:\u002F\u002Fzarah.dev\u002F2022\u002F02\u002F08\u002Fandroid12-deeplinks.html","https:\u002F\u002Fdeveloper.android.com\u002Ftraining\u002Fapp-links\u002Fverify-site-associations#invoke-domain-verification","https:\u002F\u002Fdigitalassetlinks.googleapis.com\u002Fv1\u002Fstatements:list?source.web.site=https:\u002F\u002Fmiin.ru&relation=delegate_permission\u002Fcommon.handle_all_urls","h3","ct-c1ff0c","ct-ea093a","&&",false,"show-android-logcat","Show android logcat","adb logcat com.application:I \"*:S\"\n","get-apks-sha-256","Get .apk's SHA-256","keytool -printcert -jarfile \"$1\"\n","assemble-debug-release-on-android","Assemble debug release on Android","npx react-native bundle \\\n --platform android \\\n --dev false \\\n --entry-file index.js \\\n --bundle-output android\u002Fapp\u002Fsrc\u002Fmain\u002Fassets\u002Findex.android.bundle \\\n --assets-dest android\u002Fapp\u002Fsrc\u002Fmain\u002Fres\u002F\n\ncd android && .\u002Fgradlew assembleDebug\n\n# do your stuff\n\n.\u002Fgradlew clean\n","send-release-to-android-device","Send release to Android device","cd .\u002Fandroid \\\n && .\u002Fgradlew assembleRelease \\\n && adb install .\u002Fapp\u002Fbuild\u002Foutputs\u002Fapk\u002Frelease\u002Fapp-release.apk\n","deep-links","Deep links","open-deep-links","Open deep links","# ios \nxcrun simctl openurl booted $1\n\n# android\nadb shell am start -W -a android.intent.action.VIEW -d $1 \\\ncom.application\n","reverify-links-on-android","Reverify links on Android","PACKAGE=\"com.application\"\n\nadb shell pm set-app-links --package $PACKAGE 0 all && \\\n adb shell pm verify-app-links --re-verify $PACKAGE\n","1","ct-46f2e1"," \\","ct-b1fb94","Useful Comands","\u002Ffrontend\u002Freact-native\u002Fuseful-comands","root","bash","p","Packages release with bundled resources.","ul","\"","cd"," ","PACKAGE",3))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:X,_path:Y}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-90RMToCghI":{_path:Y,_dir:"react-native",_draft:y,_partial:y,_locale:"en",_empty:y,title:X,description:g,excerpt:{type:Z,children:[{type:a,tag:i,props:{id:z},children:[{type:b,value:A}]},{type:a,tag:f,props:{code:B,language:j},children:[{type:a,tag:h,props:{},children:[{type:a,tag:f,props:{__ignoreMap:g},children:[{type:b,value:B}]}]}]},{type:a,tag:i,props:{id:C},children:[{type:b,value:D}]},{type:a,tag:f,props:{code:E,language:_},children:[{type:a,tag:h,props:{},children:[{type:a,tag:f,props:{__ignoreMap:g},children:[{type:b,value:E}]}]}]},{type:a,tag:i,props:{id:F},children:[{type:b,value:G}]},{type:a,tag:$,props:{},children:[{type:b,value:aa}]},{type:a,tag:f,props:{code:H,language:j},children:[{type:a,tag:h,props:{},children:[{type:a,tag:f,props:{__ignoreMap:g},children:[{type:b,value:H}]}]}]},{type:a,tag:i,props:{id:I},children:[{type:b,value:J}]},{type:a,tag:f,props:{code:K,language:j},children:[{type:a,tag:h,props:{},children:[{type:a,tag:f,props:{__ignoreMap:g},children:[{type:b,value:K}]}]}]},{type:a,tag:i,props:{id:L},children:[{type:b,value:M}]},{type:a,tag:ab,props:{},children:[{type:a,tag:l,props:{},children:[{type:a,tag:m,props:{href:r,rel:[n]},children:[{type:b,value:r}]}]},{type:a,tag:l,props:{},children:[{type:a,tag:m,props:{href:s,rel:[n]},children:[{type:b,value:s}]}]},{type:a,tag:l,props:{},children:[{type:a,tag:m,props:{href:t,rel:[n]},children:[{type:b,value:t}]}]}]},{type:a,tag:u,props:{id:N},children:[{type:b,value:O}]},{type:a,tag:f,props:{code:P,language:j},children:[{type:a,tag:h,props:{},children:[{type:a,tag:f,props:{__ignoreMap:g},children:[{type:b,value:P}]}]}]},{type:a,tag:u,props:{id:Q},children:[{type:b,value:R}]},{type:a,tag:f,props:{code:S,language:j},children:[{type:a,tag:h,props:{},children:[{type:a,tag:f,props:{__ignoreMap:g},children:[{type:b,value:S}]}]}]}]},body:{type:Z,children:[{type:a,tag:i,props:{id:z},children:[{type:b,value:A}]},{type:a,tag:f,props:{code:B,language:j},children:[{type:a,tag:h,props:{},children:[{type:a,tag:f,props:{__ignoreMap:g},children:[{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:"adb logcat com.application:I "}]},{type:a,tag:c,props:{class:v},children:[{type:b,value:"\"*:S\""}]}]}]}]}]},{type:a,tag:i,props:{id:C},children:[{type:b,value:D}]},{type:a,tag:f,props:{code:E,language:_},children:[{type:a,tag:h,props:{},children:[{type:a,tag:f,props:{__ignoreMap:g},children:[{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:"keytool -printcert -jarfile "}]},{type:a,tag:c,props:{class:v},children:[{type:b,value:ac}]},{type:a,tag:c,props:{class:o},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:q},children:[{type:b,value:T}]},{type:a,tag:c,props:{class:v},children:[{type:b,value:ac}]}]}]}]}]},{type:a,tag:i,props:{id:F},children:[{type:b,value:G}]},{type:a,tag:$,props:{},children:[{type:b,value:aa}]},{type:a,tag:f,props:{code:H,language:j},children:[{type:a,tag:h,props:{},children:[{type:a,tag:f,props:{__ignoreMap:g},children:[{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:"npx react-native bundle \\"}]}]},{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:" --platform android \\"}]}]},{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:" --dev "}]},{type:a,tag:c,props:{class:U},children:[{type:b,value:"false"}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:V}]}]},{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:" --entry-file index.js \\"}]}]},{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:" --bundle-output android\u002Fapp\u002Fsrc\u002Fmain\u002Fassets\u002Findex.android.bundle \\"}]}]},{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:" --assets-dest android\u002Fapp\u002Fsrc\u002Fmain\u002Fres\u002F"}]}]},{type:a,tag:c,props:{class:d},children:[]},{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:U},children:[{type:b,value:ad}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:" android "}]},{type:a,tag:c,props:{class:w},children:[{type:b,value:x}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:" .\u002Fgradlew assembleDebug"}]}]},{type:a,tag:c,props:{class:d},children:[]},{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:W},children:[{type:b,value:"# do your stuff"}]}]},{type:a,tag:c,props:{class:d},children:[]},{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:".\u002Fgradlew clean"}]}]}]}]}]},{type:a,tag:i,props:{id:I},children:[{type:b,value:J}]},{type:a,tag:f,props:{code:K,language:j},children:[{type:a,tag:h,props:{},children:[{type:a,tag:f,props:{__ignoreMap:g},children:[{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:U},children:[{type:b,value:ad}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:" .\u002Fandroid \\"}]}]},{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:ae}]},{type:a,tag:c,props:{class:w},children:[{type:b,value:x}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:" .\u002Fgradlew assembleRelease \\"}]}]},{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:ae}]},{type:a,tag:c,props:{class:w},children:[{type:b,value:x}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:" adb install .\u002Fapp\u002Fbuild\u002Foutputs\u002Fapk\u002Frelease\u002Fapp-release.apk"}]}]}]}]}]},{type:a,tag:i,props:{id:L},children:[{type:b,value:M}]},{type:a,tag:ab,props:{},children:[{type:a,tag:l,props:{},children:[{type:a,tag:m,props:{href:r,rel:[n]},children:[{type:b,value:r}]}]},{type:a,tag:l,props:{},children:[{type:a,tag:m,props:{href:s,rel:[n]},children:[{type:b,value:s}]}]},{type:a,tag:l,props:{},children:[{type:a,tag:m,props:{href:t,rel:[n]},children:[{type:b,value:t}]}]}]},{type:a,tag:u,props:{id:N},children:[{type:b,value:O}]},{type:a,tag:f,props:{code:P,language:j},children:[{type:a,tag:h,props:{},children:[{type:a,tag:f,props:{__ignoreMap:g},children:[{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:W},children:[{type:b,value:"# ios "}]}]},{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:"xcrun simctl openurl booted "}]},{type:a,tag:c,props:{class:o},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:q},children:[{type:b,value:T}]}]},{type:a,tag:c,props:{class:d},children:[]},{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:W},children:[{type:b,value:"# android"}]}]},{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:"adb shell am start -W -a android.intent.action.VIEW -d "}]},{type:a,tag:c,props:{class:o},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:q},children:[{type:b,value:T}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:V}]}]},{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:"com.application"}]}]}]}]}]},{type:a,tag:u,props:{id:Q},children:[{type:b,value:R}]},{type:a,tag:f,props:{code:S,language:j},children:[{type:a,tag:h,props:{},children:[{type:a,tag:f,props:{__ignoreMap:g},children:[{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:"PACKAGE="}]},{type:a,tag:c,props:{class:v},children:[{type:b,value:"\"com.application\""}]}]},{type:a,tag:c,props:{class:d},children:[]},{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:"adb shell pm set-app-links --package "}]},{type:a,tag:c,props:{class:o},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:q},children:[{type:b,value:af}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:" 0 all "}]},{type:a,tag:c,props:{class:w},children:[{type:b,value:x}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:V}]}]},{type:a,tag:c,props:{class:d},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:" adb shell pm verify-app-links --re-verify "}]},{type:a,tag:c,props:{class:o},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:q},children:[{type:b,value:af}]}]}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-22d421{color:#8B949E}.ct-de0bb9{color:#FF7B72}.ct-3ff336{color:#79C0FF}.ct-0b6eba{color:#C9D1D9}.ct-29bf92{color:#C9D1D9}.ct-586fb5{color:#A5D6FF}.ct-506d69{color:#C9D1D9}.light .ct-506d69{color:#657B83}.light .ct-586fb5{color:#2AA198}.light .ct-29bf92{color:#859900}.light .ct-0b6eba{color:#268BD2}.light .ct-3ff336{color:#268BD2}.light .ct-de0bb9{color:#859900}.light .ct-22d421{color:#93A1A1}"}]}],toc:{title:g,searchDepth:k,depth:k,links:[{id:z,depth:k,text:A},{id:C,depth:k,text:D},{id:F,depth:k,text:G},{id:I,depth:k,text:J},{id:L,depth:k,text:M,children:[{id:N,depth:ag,text:O},{id:Q,depth:ag,text:R}]}]}},_type:"markdown",_id:"content:Frontend:React Native:Useful comands.md",_source:"content",_file:"Frontend\u002FReact Native\u002FUseful comands.md",_extension:"md"}},prerenderedAt:1703697991583}}("element","text","span","line","ct-506d69","code","","pre","h2","shell",2,"li","a","nofollow","ct-29bf92","$","ct-0b6eba","https:\u002F\u002Fzarah.dev\u002F2022\u002F02\u002F08\u002Fandroid12-deeplinks.html","https:\u002F\u002Fdeveloper.android.com\u002Ftraining\u002Fapp-links\u002Fverify-site-associations#invoke-domain-verification","https:\u002F\u002Fdigitalassetlinks.googleapis.com\u002Fv1\u002Fstatements:list?source.web.site=https:\u002F\u002Fmiin.ru&relation=delegate_permission\u002Fcommon.handle_all_urls","h3","ct-586fb5","ct-de0bb9","&&",false,"show-android-logcat","Show android logcat","adb logcat com.application:I \"*:S\"\n","get-apks-sha-256","Get .apk's SHA-256","keytool -printcert -jarfile \"$1\"\n","assemble-debug-release-on-android","Assemble debug release on Android","npx react-native bundle \\\n --platform android \\\n --dev false \\\n --entry-file index.js \\\n --bundle-output android\u002Fapp\u002Fsrc\u002Fmain\u002Fassets\u002Findex.android.bundle \\\n --assets-dest android\u002Fapp\u002Fsrc\u002Fmain\u002Fres\u002F\n\ncd android && .\u002Fgradlew assembleDebug\n\n# do your stuff\n\n.\u002Fgradlew clean\n","send-release-to-android-device","Send release to Android device","cd .\u002Fandroid \\\n && .\u002Fgradlew assembleRelease \\\n && adb install .\u002Fapp\u002Fbuild\u002Foutputs\u002Fapk\u002Frelease\u002Fapp-release.apk\n","deep-links","Deep links","open-deep-links","Open deep links","# ios \nxcrun simctl openurl booted $1\n\n# android\nadb shell am start -W -a android.intent.action.VIEW -d $1 \\\ncom.application\n","reverify-links-on-android","Reverify links on Android","PACKAGE=\"com.application\"\n\nadb shell pm set-app-links --package $PACKAGE 0 all && \\\n adb shell pm verify-app-links --re-verify $PACKAGE\n","1","ct-3ff336"," \\","ct-22d421","Useful Comands","\u002Ffrontend\u002Freact-native\u002Fuseful-comands","root","bash","p","Packages release with bundled resources.","ul","\"","cd"," ","PACKAGE",3))
\ No newline at end of file
diff --git a/docs/frontend/react-native/useful-comands/index.html b/docs/frontend/react-native/useful-comands/index.html
index f9a98e1..6d5758c 100644
--- a/docs/frontend/react-native/useful-comands/index.html
+++ b/docs/frontend/react-native/useful-comands/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Useful Comands • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="head:count" content="2"><link rel="modulepreload" href="/frontend/react-native/useful-comands/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseH2.d950f051.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseUl.b892d423.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseLi.a224f663.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseA.c52e44f8.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseH3.462e5228.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a aria-current="page" href="/frontend/react-native/useful-comands" class="router-link-active _active_192pu_81 _link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Useful Comands</h1><article><div><h2 id="show-android-logcat"><a href="#show-android-logcat"><!--[-->Show android logcat<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-65fc6f">adb logcat com.application:I </span><span class="ct-c1ff0c">"*:S"</span></span></code></pre><!--]--></div><h2 id="get-apks-sha-256"><a href="#get-apks-sha-256"><!--[-->Get .apk's SHA-256<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>bash</span></button><!--[--><pre><code><span class="line"><span class="ct-65fc6f">keytool -printcert -jarfile </span><span class="ct-c1ff0c">"</span><span class="ct-251e83">$</span><span class="ct-b7705e">1</span><span class="ct-c1ff0c">"</span></span></code></pre><!--]--></div><h2 id="assemble-debug-release-on-android"><a href="#assemble-debug-release-on-android"><!--[-->Assemble debug release on Android<!--]--></a></h2><p><!--[-->Packages release with bundled resources.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-65fc6f">npx react-native bundle \</span></span><span class="line"><span class="ct-65fc6f"> --platform android \</span></span><span class="line"><span class="ct-65fc6f"> --dev </span><span class="ct-46f2e1">false</span><span class="ct-65fc6f"> \</span></span><span class="line"><span class="ct-65fc6f"> --entry-file index.js \</span></span><span class="line"><span class="ct-65fc6f"> --bundle-output android/app/src/main/assets/index.android.bundle \</span></span><span class="line"><span class="ct-65fc6f"> --assets-dest android/app/src/main/res/</span></span><span class="line"></span><span class="line"><span class="ct-46f2e1">cd</span><span class="ct-65fc6f"> android </span><span class="ct-ea093a">&&</span><span class="ct-65fc6f"> ./gradlew assembleDebug</span></span><span class="line"></span><span class="line"><span class="ct-b1fb94"># do your stuff</span></span><span class="line"></span><span class="line"><span class="ct-65fc6f">./gradlew clean</span></span></code></pre><!--]--></div><h2 id="send-release-to-android-device"><a href="#send-release-to-android-device"><!--[-->Send release to Android device<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-46f2e1">cd</span><span class="ct-65fc6f"> ./android \</span></span><span class="line"><span class="ct-65fc6f"> </span><span class="ct-ea093a">&&</span><span class="ct-65fc6f"> ./gradlew assembleRelease \</span></span><span class="line"><span class="ct-65fc6f"> </span><span class="ct-ea093a">&&</span><span class="ct-65fc6f"> adb install ./app/build/outputs/apk/release/app-release.apk</span></span></code></pre><!--]--></div><h2 id="deep-links"><a href="#deep-links"><!--[-->Deep links<!--]--></a></h2><ul><!--[--><li><!--[--><a href="https://zarah.dev/2022/02/08/android12-deeplinks.html" rel="nofollow" target="_blank"><!--[-->https://zarah.dev/2022/02/08/android12-deeplinks.html<!--]--></a><!--]--></li><li><!--[--><a href="https://developer.android.com/training/app-links/verify-site-associations#invoke-domain-verification" rel="nofollow" target="_blank"><!--[-->https://developer.android.com/training/app-links/verify-site-associations#invoke-domain-verification<!--]--></a><!--]--></li><li><!--[--><a href="https://digitalassetlinks.googleapis.com/v1/statements:list?source.web.site=https://miin.ru&relation=delegate_permission/common.handle_all_urls" rel="nofollow" target="_blank"><!--[-->https://digitalassetlinks.googleapis.com/v1/statements:list?source.web.site=https://miin.ru&relation=delegate_permission/common.handle_all_urls<!--]--></a><!--]--></li><!--]--></ul><h3 id="open-deep-links"><a href="#open-deep-links"><!--[-->Open deep links<!--]--></a></h3><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-b1fb94"># ios </span></span><span class="line"><span class="ct-65fc6f">xcrun simctl openurl booted </span><span class="ct-251e83">$</span><span class="ct-b7705e">1</span></span><span class="line"></span><span class="line"><span class="ct-b1fb94"># android</span></span><span class="line"><span class="ct-65fc6f">adb shell am start -W -a android.intent.action.VIEW -d </span><span class="ct-251e83">$</span><span class="ct-b7705e">1</span><span class="ct-65fc6f"> \</span></span><span class="line"><span class="ct-65fc6f">com.application</span></span></code></pre><!--]--></div><h3 id="reverify-links-on-android"><a href="#reverify-links-on-android"><!--[-->Reverify links on Android<!--]--></a></h3><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-65fc6f">PACKAGE=</span><span class="ct-c1ff0c">"com.application"</span></span><span class="line"></span><span class="line"><span class="ct-65fc6f">adb shell pm set-app-links --package </span><span class="ct-251e83">$</span><span class="ct-b7705e">PACKAGE</span><span class="ct-65fc6f"> 0 all </span><span class="ct-ea093a">&&</span><span class="ct-65fc6f"> \</span></span><span class="line"><span class="ct-65fc6f"> adb shell pm verify-app-links --re-verify </span><span class="ct-251e83">$</span><span class="ct-b7705e">PACKAGE</span></span></code></pre><!--]--></div><style>.ct-b1fb94{color:#8B949E}.ct-ea093a{color:#FF7B72}.ct-46f2e1{color:#79C0FF}.ct-b7705e{color:#C9D1D9}.ct-251e83{color:#C9D1D9}.ct-c1ff0c{color:#A5D6FF}.ct-65fc6f{color:#C9D1D9}.light .ct-65fc6f{color:#657B83}.light .ct-c1ff0c{color:#2AA198}.light .ct-251e83{color:#859900}.light .ct-b7705e{color:#268BD2}.light .ct-46f2e1{color:#268BD2}.light .ct-ea093a{color:#859900}.light .ct-b1fb94{color:#93A1A1}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/frontend/react-native/useful-comands/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695530272}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseUl.b892d423.js" crossorigin></script><script type="module" src="/nuxt/ProseLi.a224f663.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseH3.462e5228.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a aria-current="page" href="/frontend/react-native/useful-comands" class="router-link-active _active_192pu_81 _link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Useful Comands</h1><article><div><h2 id="show-android-logcat"><a href="#show-android-logcat"><!--[-->Show android logcat<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-506d69">adb logcat com.application:I </span><span class="ct-586fb5">"*:S"</span></span></code></pre><!--]--></div><h2 id="get-apks-sha-256"><a href="#get-apks-sha-256"><!--[-->Get .apk's SHA-256<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>bash</span></button><!--[--><pre><code><span class="line"><span class="ct-506d69">keytool -printcert -jarfile </span><span class="ct-586fb5">"</span><span class="ct-29bf92">$</span><span class="ct-0b6eba">1</span><span class="ct-586fb5">"</span></span></code></pre><!--]--></div><h2 id="assemble-debug-release-on-android"><a href="#assemble-debug-release-on-android"><!--[-->Assemble debug release on Android<!--]--></a></h2><p><!--[-->Packages release with bundled resources.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-506d69">npx react-native bundle \</span></span><span class="line"><span class="ct-506d69"> --platform android \</span></span><span class="line"><span class="ct-506d69"> --dev </span><span class="ct-3ff336">false</span><span class="ct-506d69"> \</span></span><span class="line"><span class="ct-506d69"> --entry-file index.js \</span></span><span class="line"><span class="ct-506d69"> --bundle-output android/app/src/main/assets/index.android.bundle \</span></span><span class="line"><span class="ct-506d69"> --assets-dest android/app/src/main/res/</span></span><span class="line"></span><span class="line"><span class="ct-3ff336">cd</span><span class="ct-506d69"> android </span><span class="ct-de0bb9">&&</span><span class="ct-506d69"> ./gradlew assembleDebug</span></span><span class="line"></span><span class="line"><span class="ct-22d421"># do your stuff</span></span><span class="line"></span><span class="line"><span class="ct-506d69">./gradlew clean</span></span></code></pre><!--]--></div><h2 id="send-release-to-android-device"><a href="#send-release-to-android-device"><!--[-->Send release to Android device<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-3ff336">cd</span><span class="ct-506d69"> ./android \</span></span><span class="line"><span class="ct-506d69"> </span><span class="ct-de0bb9">&&</span><span class="ct-506d69"> ./gradlew assembleRelease \</span></span><span class="line"><span class="ct-506d69"> </span><span class="ct-de0bb9">&&</span><span class="ct-506d69"> adb install ./app/build/outputs/apk/release/app-release.apk</span></span></code></pre><!--]--></div><h2 id="deep-links"><a href="#deep-links"><!--[-->Deep links<!--]--></a></h2><ul><!--[--><li><!--[--><a href="https://zarah.dev/2022/02/08/android12-deeplinks.html" rel="nofollow" target="_blank"><!--[-->https://zarah.dev/2022/02/08/android12-deeplinks.html<!--]--></a><!--]--></li><li><!--[--><a href="https://developer.android.com/training/app-links/verify-site-associations#invoke-domain-verification" rel="nofollow" target="_blank"><!--[-->https://developer.android.com/training/app-links/verify-site-associations#invoke-domain-verification<!--]--></a><!--]--></li><li><!--[--><a href="https://digitalassetlinks.googleapis.com/v1/statements:list?source.web.site=https://miin.ru&relation=delegate_permission/common.handle_all_urls" rel="nofollow" target="_blank"><!--[-->https://digitalassetlinks.googleapis.com/v1/statements:list?source.web.site=https://miin.ru&relation=delegate_permission/common.handle_all_urls<!--]--></a><!--]--></li><!--]--></ul><h3 id="open-deep-links"><a href="#open-deep-links"><!--[-->Open deep links<!--]--></a></h3><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-22d421"># ios </span></span><span class="line"><span class="ct-506d69">xcrun simctl openurl booted </span><span class="ct-29bf92">$</span><span class="ct-0b6eba">1</span></span><span class="line"></span><span class="line"><span class="ct-22d421"># android</span></span><span class="line"><span class="ct-506d69">adb shell am start -W -a android.intent.action.VIEW -d </span><span class="ct-29bf92">$</span><span class="ct-0b6eba">1</span><span class="ct-506d69"> \</span></span><span class="line"><span class="ct-506d69">com.application</span></span></code></pre><!--]--></div><h3 id="reverify-links-on-android"><a href="#reverify-links-on-android"><!--[-->Reverify links on Android<!--]--></a></h3><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-506d69">PACKAGE=</span><span class="ct-586fb5">"com.application"</span></span><span class="line"></span><span class="line"><span class="ct-506d69">adb shell pm set-app-links --package </span><span class="ct-29bf92">$</span><span class="ct-0b6eba">PACKAGE</span><span class="ct-506d69"> 0 all </span><span class="ct-de0bb9">&&</span><span class="ct-506d69"> \</span></span><span class="line"><span class="ct-506d69"> adb shell pm verify-app-links --re-verify </span><span class="ct-29bf92">$</span><span class="ct-0b6eba">PACKAGE</span></span></code></pre><!--]--></div><style>.ct-22d421{color:#8B949E}.ct-de0bb9{color:#FF7B72}.ct-3ff336{color:#79C0FF}.ct-0b6eba{color:#C9D1D9}.ct-29bf92{color:#C9D1D9}.ct-586fb5{color:#A5D6FF}.ct-506d69{color:#C9D1D9}.light .ct-506d69{color:#657B83}.light .ct-586fb5{color:#2AA198}.light .ct-29bf92{color:#859900}.light .ct-0b6eba{color:#268BD2}.light .ct-3ff336{color:#268BD2}.light .ct-de0bb9{color:#859900}.light .ct-22d421{color:#93A1A1}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/frontend/react-native/useful-comands/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697991583}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseUl.b892d423.js" crossorigin></script><script type="module" src="/nuxt/ProseLi.a224f663.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseH3.462e5228.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/frontend/react/axios-refresh-token-on-react/_payload.js b/docs/frontend/react/axios-refresh-token-on-react/_payload.js
index 081da31..bda3986 100644
--- a/docs/frontend/react/axios-refresh-token-on-react/_payload.js
+++ b/docs/frontend/react/axios-refresh-token-on-react/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av,aw,ax,ay,az,aA,aB,aC,aD,aE,aF,aG,aH,aI,aJ,aK,aL,aM,aN,aO,aP,aQ,aR,aS,aT,aU,aV,aW,aX,aY,aZ,a_,a$,ba,bb){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:ae,_path:"\u002Ffrontend\u002Freact",children:[{title:af,_path:ag},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-lzTEE4EzmV":{_path:ag,_dir:"react",_draft:U,_partial:U,_locale:"en",_empty:U,title:af,description:"\u003CApiProvider \u002F\u003E component, that will handle token refresh if needed. Refresh function should, probably, be passed through component props.",excerpt:{type:ah,children:[{type:a,tag:ai,props:{},children:[{type:a,tag:aj,props:{},children:[{type:c,value:ak}]},{type:c,value:al}]},{type:a,tag:M,props:{code:V,language:am},children:[{type:a,tag:an,props:{},children:[{type:a,tag:M,props:{__ignoreMap:W},children:[{type:c,value:V}]}]}]}]},body:{type:ah,children:[{type:a,tag:ai,props:{},children:[{type:a,tag:aj,props:{},children:[{type:c,value:ak}]},{type:c,value:al}]},{type:a,tag:M,props:{code:V,language:am},children:[{type:a,tag:an,props:{},children:[{type:a,tag:M,props:{__ignoreMap:W},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:ao}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ap}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:B},children:[{type:c,value:"\"axios\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:ao}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ae}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:", {"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:as}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:at}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:au}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:av}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"} "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ap}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:B},children:[{type:c,value:"\"react\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:w},children:[{type:c,value:"interface"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:"ct-c38e35"},children:[{type:c,value:ax}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:w},children:[{type:c,value:"extends"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:"ct-1c2886"},children:[{type:c,value:as}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:X},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:X},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:ay},children:[{type:c,value:Y}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:az}]},{type:a,tag:b,props:{class:X},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:ay},children:[{type:c,value:Y}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" };"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Z}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:H},children:[{type:c,value:"void"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aA}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:m},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Q}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" client: "}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:aB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Q}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" baseURL: "}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aC}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aD}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:aE}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }),"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"});"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:m},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:aF}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:aG},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aH}]},{type:a,tag:b,props:{class:aG},children:[{type:c,value:ax}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"\u003E "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" ({ "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:D}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:D}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aI}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"}) "}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:aw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:aB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Q}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" baseURL: "}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aC}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aD}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:aE}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" })"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" )."}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"current"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:at}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"\u003C() "}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:H},children:[{type:c,value:Y}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"\u003E(() "}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:$},children:[{type:c,value:"\u002F\u002F TODO: implement me"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"throw"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"new"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:H},children:[{type:c,value:"Error"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:B},children:[{type:c,value:"\"not implemented\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:I}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }, []);"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:av}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"(() "}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:aJ}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:aK}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aa}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:$},children:[{type:c,value:"\u002F\u002F append `access` token to all requests"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:aL}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:aM}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:w},children:[{type:c,value:aN}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:w},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aO}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" Authorization: "}]},{type:a,tag:b,props:{class:B},children:[{type:c,value:"`Bearer ${"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:"ct-57838d"},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:B},children:[{type:c,value:"}`"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" };"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aP}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:aQ}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:w},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:H},children:[{type:c,value:aR}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:aS}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:I}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aT}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aU}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:$},children:[{type:c,value:"\u002F\u002F refreshing interceptor"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:aV}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:aM}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:aQ}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:w},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aP}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:w},children:[{type:c,value:aN}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:w},children:[{type:c,value:"function"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aa}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:aJ}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"status"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"==="}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:"ct-68b8e3"},children:[{type:c,value:"401"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"&&"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:aK}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aW}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aa}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aW}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:"ct-01fcd4"},children:[{type:c,value:"true"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:aX}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Q}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:aY}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" headers: {"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:aY}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aO}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" Authorization: "}]},{type:a,tag:b,props:{class:B},children:[{type:c,value:"\"Bearer \""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"+"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aX}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" },"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" });"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"();"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:H},children:[{type:c,value:aR}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:aS}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:I}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aT}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aU}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Z}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:aZ}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aL}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:I}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:aZ}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aV}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:I}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" };"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }, ["}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:az}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"]);"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:aH}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:a_}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"value"}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"{{ "}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" }}"}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:a$}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:" {"}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:aI}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aA}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"\u003C\u002F"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:a_}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:a$}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" );"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"};"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:ba}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"useAPI"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Z}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:au}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:")."}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:ba}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" { "}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aF}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" };"}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-01fcd4{color:#79C0FF}.ct-68b8e3{color:#79C0FF}.ct-57838d{color:#A5D6FF}.ct-b6b8f5{color:#8B949E}.ct-255c64{color:#FFA657}.ct-646245{color:#79C0FF}.ct-694fc0{color:#79C0FF}.ct-bfa659{color:#FF7B72}.ct-82accf{color:#D2A8FF}.ct-f2f6ff{color:#79C0FF}.ct-b7492e{color:#FF7B72}.ct-ed897c{color:#FFA657}.ct-1c2886{color:#79C0FF}.ct-c38e35{color:#FFA657}.ct-d6d1bd{color:#C9D1D9}.ct-d2feec{color:#FF7B72}.ct-ffccda{color:#A5D6FF}.ct-3427e6{color:#C9D1D9}.ct-9d2291{color:#C9D1D9}.ct-f402a3{color:#FF7B72}.light .ct-f402a3{color:#859900}.light .ct-9d2291{color:#657B83}.light .ct-3427e6{color:#268BD2}.light .ct-ffccda{color:#2AA198}.light .ct-d2feec{color:#073642}.light .ct-d6d1bd{color:#657B83}.light .ct-c38e35{color:#268BD2}.light .ct-1c2886{color:#657B83}.light .ct-ed897c{color:#657B83}.light .ct-b7492e{color:#859900}.light .ct-f2f6ff{color:#859900}.light .ct-82accf{color:#268BD2}.light .ct-bfa659{color:#073642}.light .ct-694fc0{color:#859900}.light .ct-646245{color:#268BD2}.light .ct-255c64{color:#268BD2}.light .ct-b6b8f5{color:#93A1A1}.light .ct-57838d{color:#657B83}.light .ct-68b8e3{color:#D33682}.light .ct-01fcd4{color:#B58900}"}]}],toc:{title:W,searchDepth:bb,depth:bb,links:[]}},_type:"markdown",_id:"content:Frontend:React:Axios refresh token on React.md",_source:"content",_file:"Frontend\u002FReact\u002FAxios refresh token on React.md",_extension:"md"}},prerenderedAt:1703695530318}}("element","span","text","ct-9d2291","line","ct-3427e6"," ","ct-f402a3",".","ct-d6d1bd","ct-82accf"," ","ct-bfa659",",",";"," ","="," {","=\u003E","const","ct-646245","(","ct-d2feec","ct-ed897c"," ","return","axios","ct-ffccda","tokens",", ","client","error",":","ct-694fc0",");"," ("," ","originalRequest","code","access","logout","APIContext","({","interceptors","config","response",false,"import axios from \"axios\";\nimport React, {\n createContext,\n FC,\n PropsWithChildren,\n useCallback,\n useContext,\n useEffect,\n useRef,\n} from \"react\";\n\ninterface APIProviderProps extends PropsWithChildren {\n tokens: {\n access: string;\n refresh: string;\n };\n logout: () =\u003E void;\n}\n\nconst APIContext = createContext({\n client: axios.create({\n baseURL: process.env.NEXT_PUBLIC_API_ENDPOINT,\n }),\n});\n\nconst APIProvider: FC\u003CAPIProviderProps\u003E = ({ \n tokens, \n logout, \n children,\n}) =\u003E {\n const client = useRef(\n axios.create({\n baseURL: process.env.NEXT_PUBLIC_API_ENDPOINT,\n })\n ).current;\n\n const refreshTokens = useCallback\u003C() =\u003E string\u003E(() =\u003E {\n \u002F\u002F TODO: implement me\n throw new Error(\"not implemented\");\n }, []);\n\n useEffect(() =\u003E {\n if (!tokens.access) {\n return;\n }\n\n \u002F\u002F append `access` token to all requests\n const req = client.interceptors.request.use(\n async (config) =\u003E {\n config.headers = {\n Authorization: `Bearer ${tokens.access}`,\n };\n return config;\n },\n (error) =\u003E {\n Promise.reject(error);\n }\n );\n\n \u002F\u002F refreshing interceptor\n const resp = client.interceptors.response.use(\n (response) =\u003E {\n return response;\n },\n async function (error) {\n const originalRequest = error.config;\n\n if (error.response.status === 401 && !originalRequest._retry) {\n originalRequest._retry = true;\n\n const newToken = refreshTokens;\n\n return axios({\n ...originalRequest,\n headers: {\n ...originalRequest.headers,\n Authorization: \"Bearer \" + newToken,\n },\n });\n }\n\n logout();\n return Promise.reject(error);\n }\n );\n\n return () =\u003E {\n axios.interceptors.request.eject(req);\n axios.interceptors.request.eject(resp);\n };\n }, [client, tokens.access, tokens.refresh, refreshTokens, logout]);\n\n return (\n \u003CAPIContext.Provider value={{ client }}\u003E\n {children}\n \u003C\u002FAPIContext.Provider\u003E\n );\n};\n\nexport const useAPI = () =\u003E useContext(APIContext).client;\n\nexport { APIProvider };\n","","ct-b7492e","string"," () ","refreshTokens","ct-b6b8f5",") {","request",") "," ","React","Axios Refresh Token On React","\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react","root","p","code-inline","\u003CApiProvider \u002F\u003E"," component, that will handle token refresh if needed. Refresh function should, probably, be passed through component props.","typescript","pre","import","from","createContext","FC","PropsWithChildren","useCallback","useContext","useEffect","useRef","APIProviderProps","ct-f2f6ff","refresh","}","create","process","env","NEXT_PUBLIC_API_ENDPOINT","APIProvider","ct-255c64","\u003C","children","if","!","req","use","async","headers"," },"," (","Promise","reject"," }"," );","resp","_retry","newToken","...","eject","Provider","\u003E","export",2))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av,aw,ax,ay,az,aA,aB,aC,aD,aE,aF,aG,aH,aI,aJ,aK,aL,aM,aN,aO,aP,aQ,aR,aS,aT,aU,aV,aW,aX,aY,aZ,a_,a$,ba,bb){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:ae,_path:"\u002Ffrontend\u002Freact",children:[{title:af,_path:ag},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-lzTEE4EzmV":{_path:ag,_dir:"react",_draft:U,_partial:U,_locale:"en",_empty:U,title:af,description:"\u003CApiProvider \u002F\u003E component, that will handle token refresh if needed. Refresh function should, probably, be passed through component props.",excerpt:{type:ah,children:[{type:a,tag:ai,props:{},children:[{type:a,tag:aj,props:{},children:[{type:c,value:ak}]},{type:c,value:al}]},{type:a,tag:M,props:{code:V,language:am},children:[{type:a,tag:an,props:{},children:[{type:a,tag:M,props:{__ignoreMap:W},children:[{type:c,value:V}]}]}]}]},body:{type:ah,children:[{type:a,tag:ai,props:{},children:[{type:a,tag:aj,props:{},children:[{type:c,value:ak}]},{type:c,value:al}]},{type:a,tag:M,props:{code:V,language:am},children:[{type:a,tag:an,props:{},children:[{type:a,tag:M,props:{__ignoreMap:W},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:ao}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ap}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:B},children:[{type:c,value:"\"axios\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:ao}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ae}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:", {"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:as}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:at}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:au}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:av}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"} "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ap}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:B},children:[{type:c,value:"\"react\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:w},children:[{type:c,value:"interface"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:"ct-46134e"},children:[{type:c,value:ax}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:w},children:[{type:c,value:"extends"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:"ct-08c798"},children:[{type:c,value:as}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:X},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:X},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:ay},children:[{type:c,value:Y}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:az}]},{type:a,tag:b,props:{class:X},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:ay},children:[{type:c,value:Y}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" };"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Z}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:H},children:[{type:c,value:"void"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aA}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:m},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Q}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" client: "}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:aB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Q}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" baseURL: "}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aC}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aD}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:aE}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }),"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"});"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:m},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:aF}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:aG},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aH}]},{type:a,tag:b,props:{class:aG},children:[{type:c,value:ax}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"\u003E "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" ({ "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:D}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:D}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aI}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"}) "}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:aw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:aB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Q}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" baseURL: "}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aC}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aD}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:aE}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" })"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" )."}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"current"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:at}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"\u003C() "}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:H},children:[{type:c,value:Y}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"\u003E(() "}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:$},children:[{type:c,value:"\u002F\u002F TODO: implement me"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"throw"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"new"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:H},children:[{type:c,value:"Error"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:B},children:[{type:c,value:"\"not implemented\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:I}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }, []);"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:av}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"(() "}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:aJ}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:aK}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aa}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:$},children:[{type:c,value:"\u002F\u002F append `access` token to all requests"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:aL}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:aM}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:w},children:[{type:c,value:aN}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:w},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aO}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" Authorization: "}]},{type:a,tag:b,props:{class:B},children:[{type:c,value:"`Bearer ${"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:"ct-7758a7"},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:B},children:[{type:c,value:"}`"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" };"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aP}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:aQ}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:w},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:H},children:[{type:c,value:aR}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:aS}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:I}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aT}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aU}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:$},children:[{type:c,value:"\u002F\u002F refreshing interceptor"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:aV}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:aM}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:aQ}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:w},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aP}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:w},children:[{type:c,value:aN}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:w},children:[{type:c,value:"function"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aa}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:aJ}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"status"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"==="}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:"ct-51d764"},children:[{type:c,value:"401"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"&&"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:aK}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aW}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aa}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aW}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:"ct-7edaa2"},children:[{type:c,value:"true"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:aX}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Q}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:aY}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" headers: {"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:aY}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aO}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" Authorization: "}]},{type:a,tag:b,props:{class:B},children:[{type:c,value:"\"Bearer \""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"+"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aX}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" },"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" });"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"();"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:H},children:[{type:c,value:aR}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:aS}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:I}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aT}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aU}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Z}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:aZ}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aL}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:I}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:aZ}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aV}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:I}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" };"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }, ["}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:az}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"]);"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:aH}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:a_}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"value"}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"{{ "}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" }}"}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:a$}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:" {"}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:aI}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aA}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"\u003C\u002F"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:a_}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:a$}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" );"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"};"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:ba}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"useAPI"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Z}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:au}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:")."}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:ba}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" { "}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aF}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" };"}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-7edaa2{color:#79C0FF}.ct-51d764{color:#79C0FF}.ct-7758a7{color:#A5D6FF}.ct-211469{color:#8B949E}.ct-a8703d{color:#FFA657}.ct-20ed17{color:#79C0FF}.ct-1d4139{color:#79C0FF}.ct-872860{color:#FF7B72}.ct-3837d1{color:#D2A8FF}.ct-f9619c{color:#79C0FF}.ct-52b50f{color:#FF7B72}.ct-ac7baf{color:#FFA657}.ct-08c798{color:#79C0FF}.ct-46134e{color:#FFA657}.ct-6c447f{color:#C9D1D9}.ct-571508{color:#FF7B72}.ct-aa5e40{color:#A5D6FF}.ct-eb8e65{color:#C9D1D9}.ct-509eb2{color:#C9D1D9}.ct-441895{color:#FF7B72}.light .ct-441895{color:#859900}.light .ct-509eb2{color:#657B83}.light .ct-eb8e65{color:#268BD2}.light .ct-aa5e40{color:#2AA198}.light .ct-571508{color:#073642}.light .ct-6c447f{color:#657B83}.light .ct-46134e{color:#268BD2}.light .ct-08c798{color:#657B83}.light .ct-ac7baf{color:#657B83}.light .ct-52b50f{color:#859900}.light .ct-f9619c{color:#859900}.light .ct-3837d1{color:#268BD2}.light .ct-872860{color:#073642}.light .ct-1d4139{color:#859900}.light .ct-20ed17{color:#268BD2}.light .ct-a8703d{color:#268BD2}.light .ct-211469{color:#93A1A1}.light .ct-7758a7{color:#657B83}.light .ct-51d764{color:#D33682}.light .ct-7edaa2{color:#B58900}"}]}],toc:{title:W,searchDepth:bb,depth:bb,links:[]}},_type:"markdown",_id:"content:Frontend:React:Axios refresh token on React.md",_source:"content",_file:"Frontend\u002FReact\u002FAxios refresh token on React.md",_extension:"md"}},prerenderedAt:1703697991640}}("element","span","text","ct-509eb2","line","ct-eb8e65"," ","ct-441895",".","ct-6c447f","ct-3837d1"," ","ct-872860",",",";"," ","="," {","=\u003E","const","ct-20ed17","(","ct-571508","ct-ac7baf"," ","return","axios","ct-aa5e40","tokens",", ","client","error",":","ct-1d4139",");"," ("," ","originalRequest","code","access","logout","APIContext","({","interceptors","config","response",false,"import axios from \"axios\";\nimport React, {\n createContext,\n FC,\n PropsWithChildren,\n useCallback,\n useContext,\n useEffect,\n useRef,\n} from \"react\";\n\ninterface APIProviderProps extends PropsWithChildren {\n tokens: {\n access: string;\n refresh: string;\n };\n logout: () =\u003E void;\n}\n\nconst APIContext = createContext({\n client: axios.create({\n baseURL: process.env.NEXT_PUBLIC_API_ENDPOINT,\n }),\n});\n\nconst APIProvider: FC\u003CAPIProviderProps\u003E = ({ \n tokens, \n logout, \n children,\n}) =\u003E {\n const client = useRef(\n axios.create({\n baseURL: process.env.NEXT_PUBLIC_API_ENDPOINT,\n })\n ).current;\n\n const refreshTokens = useCallback\u003C() =\u003E string\u003E(() =\u003E {\n \u002F\u002F TODO: implement me\n throw new Error(\"not implemented\");\n }, []);\n\n useEffect(() =\u003E {\n if (!tokens.access) {\n return;\n }\n\n \u002F\u002F append `access` token to all requests\n const req = client.interceptors.request.use(\n async (config) =\u003E {\n config.headers = {\n Authorization: `Bearer ${tokens.access}`,\n };\n return config;\n },\n (error) =\u003E {\n Promise.reject(error);\n }\n );\n\n \u002F\u002F refreshing interceptor\n const resp = client.interceptors.response.use(\n (response) =\u003E {\n return response;\n },\n async function (error) {\n const originalRequest = error.config;\n\n if (error.response.status === 401 && !originalRequest._retry) {\n originalRequest._retry = true;\n\n const newToken = refreshTokens;\n\n return axios({\n ...originalRequest,\n headers: {\n ...originalRequest.headers,\n Authorization: \"Bearer \" + newToken,\n },\n });\n }\n\n logout();\n return Promise.reject(error);\n }\n );\n\n return () =\u003E {\n axios.interceptors.request.eject(req);\n axios.interceptors.request.eject(resp);\n };\n }, [client, tokens.access, tokens.refresh, refreshTokens, logout]);\n\n return (\n \u003CAPIContext.Provider value={{ client }}\u003E\n {children}\n \u003C\u002FAPIContext.Provider\u003E\n );\n};\n\nexport const useAPI = () =\u003E useContext(APIContext).client;\n\nexport { APIProvider };\n","","ct-52b50f","string"," () ","refreshTokens","ct-211469",") {","request",") "," ","React","Axios Refresh Token On React","\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react","root","p","code-inline","\u003CApiProvider \u002F\u003E"," component, that will handle token refresh if needed. Refresh function should, probably, be passed through component props.","typescript","pre","import","from","createContext","FC","PropsWithChildren","useCallback","useContext","useEffect","useRef","APIProviderProps","ct-f9619c","refresh","}","create","process","env","NEXT_PUBLIC_API_ENDPOINT","APIProvider","ct-a8703d","\u003C","children","if","!","req","use","async","headers"," },"," (","Promise","reject"," }"," );","resp","_retry","newToken","...","eject","Provider","\u003E","export",2))
\ No newline at end of file
diff --git a/docs/frontend/react/axios-refresh-token-on-react/index.html b/docs/frontend/react/axios-refresh-token-on-react/index.html
index 58b00f2..7ffc2ee 100644
--- a/docs/frontend/react/axios-refresh-token-on-react/index.html
+++ b/docs/frontend/react/axios-refresh-token-on-react/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Axios Refresh Token On React • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="<ApiProvider /> component, that will handle token refresh if needed. Refresh function should, probably, be passed through component props."><meta name="head:count" content="3"><link rel="modulepreload" href="/frontend/react/axios-refresh-token-on-react/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCodeInline.d9bcf614.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a aria-current="page" href="/frontend/react/axios-refresh-token-on-react" class="router-link-active _active_192pu_81 _link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Axios Refresh Token On React</h1><article><div><p><!--[--><code><!--[--><ApiProvider /><!--]--></code> component, that will handle token refresh if needed. Refresh function should, probably, be passed through component props.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-f402a3">import</span><span class="ct-9d2291"> </span><span class="ct-3427e6">axios</span><span class="ct-9d2291"> </span><span class="ct-f402a3">from</span><span class="ct-9d2291"> </span><span class="ct-ffccda">"axios"</span><span class="ct-9d2291">;</span></span><span class="line"><span class="ct-f402a3">import</span><span class="ct-9d2291"> </span><span class="ct-3427e6">React</span><span class="ct-9d2291">, {</span></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-3427e6">createContext</span><span class="ct-9d2291">,</span></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-3427e6">FC</span><span class="ct-9d2291">,</span></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-3427e6">PropsWithChildren</span><span class="ct-9d2291">,</span></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-3427e6">useCallback</span><span class="ct-9d2291">,</span></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-3427e6">useContext</span><span class="ct-9d2291">,</span></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-3427e6">useEffect</span><span class="ct-9d2291">,</span></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-3427e6">useRef</span><span class="ct-9d2291">,</span></span><span class="line"><span class="ct-9d2291">} </span><span class="ct-f402a3">from</span><span class="ct-9d2291"> </span><span class="ct-ffccda">"react"</span><span class="ct-9d2291">;</span></span><span class="line"></span><span class="line"><span class="ct-d2feec">interface</span><span class="ct-d6d1bd"> </span><span class="ct-c38e35">APIProviderProps</span><span class="ct-d6d1bd"> </span><span class="ct-d2feec">extends</span><span class="ct-d6d1bd"> </span><span class="ct-1c2886">PropsWithChildren</span><span class="ct-d6d1bd"> {</span></span><span class="line"><span class="ct-d6d1bd"> </span><span class="ct-ed897c">tokens</span><span class="ct-b7492e">:</span><span class="ct-d6d1bd"> {</span></span><span class="line"><span class="ct-d6d1bd"> </span><span class="ct-ed897c">access</span><span class="ct-b7492e">:</span><span class="ct-d6d1bd"> </span><span class="ct-f2f6ff">string</span><span class="ct-d6d1bd">;</span></span><span class="line"><span class="ct-d6d1bd"> </span><span class="ct-ed897c">refresh</span><span class="ct-b7492e">:</span><span class="ct-d6d1bd"> </span><span class="ct-f2f6ff">string</span><span class="ct-d6d1bd">;</span></span><span class="line"><span class="ct-9d2291"> };</span></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-82accf">logout</span><span class="ct-f402a3">:</span><span class="ct-9d2291"> () </span><span class="ct-bfa659">=></span><span class="ct-9d2291"> </span><span class="ct-694fc0">void</span><span class="ct-9d2291">;</span></span><span class="line"><span class="ct-9d2291">}</span></span><span class="line"></span><span class="line"><span class="ct-bfa659">const</span><span class="ct-9d2291"> </span><span class="ct-646245">APIContext</span><span class="ct-9d2291"> </span><span class="ct-f402a3">=</span><span class="ct-9d2291"> </span><span class="ct-82accf">createContext</span><span class="ct-9d2291">({</span></span><span class="line"><span class="ct-9d2291"> client: </span><span class="ct-3427e6">axios</span><span class="ct-9d2291">.</span><span class="ct-82accf">create</span><span class="ct-9d2291">({</span></span><span class="line"><span class="ct-9d2291"> baseURL: </span><span class="ct-3427e6">process</span><span class="ct-9d2291">.</span><span class="ct-3427e6">env</span><span class="ct-9d2291">.</span><span class="ct-646245">NEXT_PUBLIC_API_ENDPOINT</span><span class="ct-9d2291">,</span></span><span class="line"><span class="ct-9d2291"> }),</span></span><span class="line"><span class="ct-9d2291">});</span></span><span class="line"></span><span class="line"><span class="ct-bfa659">const</span><span class="ct-9d2291"> </span><span class="ct-82accf">APIProvider</span><span class="ct-f402a3">:</span><span class="ct-9d2291"> </span><span class="ct-255c64">FC</span><span class="ct-9d2291"><</span><span class="ct-255c64">APIProviderProps</span><span class="ct-9d2291">> </span><span class="ct-f402a3">=</span><span class="ct-9d2291"> ({ </span></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-3427e6">tokens</span><span class="ct-9d2291">, </span></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-3427e6">logout</span><span class="ct-9d2291">, </span></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-3427e6">children</span><span class="ct-9d2291">,</span></span><span class="line"><span class="ct-9d2291">}) </span><span class="ct-bfa659">=></span><span class="ct-9d2291"> {</span></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-bfa659">const</span><span class="ct-9d2291"> </span><span class="ct-646245">client</span><span class="ct-9d2291"> </span><span class="ct-f402a3">=</span><span class="ct-9d2291"> </span><span class="ct-82accf">useRef</span><span class="ct-9d2291">(</span></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-3427e6">axios</span><span class="ct-9d2291">.</span><span class="ct-82accf">create</span><span class="ct-9d2291">({</span></span><span class="line"><span class="ct-9d2291"> baseURL: </span><span class="ct-3427e6">process</span><span class="ct-9d2291">.</span><span class="ct-3427e6">env</span><span class="ct-9d2291">.</span><span class="ct-646245">NEXT_PUBLIC_API_ENDPOINT</span><span class="ct-9d2291">,</span></span><span class="line"><span class="ct-9d2291"> })</span></span><span class="line"><span class="ct-9d2291"> ).</span><span class="ct-3427e6">current</span><span class="ct-9d2291">;</span></span><span class="line"></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-bfa659">const</span><span class="ct-9d2291"> </span><span class="ct-646245">refreshTokens</span><span class="ct-9d2291"> </span><span class="ct-f402a3">=</span><span class="ct-9d2291"> </span><span class="ct-82accf">useCallback</span><span class="ct-9d2291"><() </span><span class="ct-bfa659">=></span><span class="ct-9d2291"> </span><span class="ct-694fc0">string</span><span class="ct-9d2291">>(() </span><span class="ct-bfa659">=></span><span class="ct-9d2291"> {</span></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-b6b8f5">// TODO: implement me</span></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-f402a3">throw</span><span class="ct-9d2291"> </span><span class="ct-f402a3">new</span><span class="ct-9d2291"> </span><span class="ct-694fc0">Error</span><span class="ct-9d2291">(</span><span class="ct-ffccda">"not implemented"</span><span class="ct-9d2291">);</span></span><span class="line"><span class="ct-9d2291"> }, []);</span></span><span class="line"></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-82accf">useEffect</span><span class="ct-9d2291">(() </span><span class="ct-bfa659">=></span><span class="ct-9d2291"> {</span></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-f402a3">if</span><span class="ct-9d2291"> (</span><span class="ct-f402a3">!</span><span class="ct-3427e6">tokens</span><span class="ct-9d2291">.</span><span class="ct-3427e6">access</span><span class="ct-9d2291">) {</span></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-f402a3">return</span><span class="ct-9d2291">;</span></span><span class="line"><span class="ct-9d2291"> }</span></span><span class="line"></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-b6b8f5">// append `access` token to all requests</span></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-bfa659">const</span><span class="ct-9d2291"> </span><span class="ct-646245">req</span><span class="ct-9d2291"> </span><span class="ct-f402a3">=</span><span class="ct-9d2291"> </span><span class="ct-3427e6">client</span><span class="ct-9d2291">.</span><span class="ct-3427e6">interceptors</span><span class="ct-9d2291">.</span><span class="ct-3427e6">request</span><span class="ct-9d2291">.</span><span class="ct-82accf">use</span><span class="ct-9d2291">(</span></span><span class="line"><span class="ct-d6d1bd"> </span><span class="ct-d2feec">async</span><span class="ct-d6d1bd"> (</span><span class="ct-ed897c">config</span><span class="ct-d6d1bd">) </span><span class="ct-d2feec">=></span><span class="ct-d6d1bd"> {</span></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-3427e6">config</span><span class="ct-9d2291">.</span><span class="ct-3427e6">headers</span><span class="ct-9d2291"> </span><span class="ct-f402a3">=</span><span class="ct-9d2291"> {</span></span><span class="line"><span class="ct-9d2291"> Authorization: </span><span class="ct-ffccda">`Bearer ${</span><span class="ct-3427e6">tokens</span><span class="ct-57838d">.</span><span class="ct-3427e6">access</span><span class="ct-ffccda">}`</span><span class="ct-9d2291">,</span></span><span class="line"><span class="ct-9d2291"> };</span></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-f402a3">return</span><span class="ct-9d2291"> </span><span class="ct-3427e6">config</span><span class="ct-9d2291">;</span></span><span class="line"><span class="ct-9d2291"> },</span></span><span class="line"><span class="ct-d6d1bd"> (</span><span class="ct-ed897c">error</span><span class="ct-d6d1bd">) </span><span class="ct-d2feec">=></span><span class="ct-d6d1bd"> {</span></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-694fc0">Promise</span><span class="ct-9d2291">.</span><span class="ct-82accf">reject</span><span class="ct-9d2291">(</span><span class="ct-3427e6">error</span><span class="ct-9d2291">);</span></span><span class="line"><span class="ct-9d2291"> }</span></span><span class="line"><span class="ct-9d2291"> );</span></span><span class="line"></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-b6b8f5">// refreshing interceptor</span></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-bfa659">const</span><span class="ct-9d2291"> </span><span class="ct-646245">resp</span><span class="ct-9d2291"> </span><span class="ct-f402a3">=</span><span class="ct-9d2291"> </span><span class="ct-3427e6">client</span><span class="ct-9d2291">.</span><span class="ct-3427e6">interceptors</span><span class="ct-9d2291">.</span><span class="ct-3427e6">response</span><span class="ct-9d2291">.</span><span class="ct-82accf">use</span><span class="ct-9d2291">(</span></span><span class="line"><span class="ct-d6d1bd"> (</span><span class="ct-ed897c">response</span><span class="ct-d6d1bd">) </span><span class="ct-d2feec">=></span><span class="ct-d6d1bd"> {</span></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-f402a3">return</span><span class="ct-9d2291"> </span><span class="ct-3427e6">response</span><span class="ct-9d2291">;</span></span><span class="line"><span class="ct-9d2291"> },</span></span><span class="line"><span class="ct-d6d1bd"> </span><span class="ct-d2feec">async</span><span class="ct-d6d1bd"> </span><span class="ct-d2feec">function</span><span class="ct-d6d1bd"> (</span><span class="ct-ed897c">error</span><span class="ct-d6d1bd">) {</span></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-bfa659">const</span><span class="ct-9d2291"> </span><span class="ct-646245">originalRequest</span><span class="ct-9d2291"> </span><span class="ct-f402a3">=</span><span class="ct-9d2291"> </span><span class="ct-3427e6">error</span><span class="ct-9d2291">.</span><span class="ct-3427e6">config</span><span class="ct-9d2291">;</span></span><span class="line"></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-f402a3">if</span><span class="ct-9d2291"> (</span><span class="ct-3427e6">error</span><span class="ct-9d2291">.</span><span class="ct-3427e6">response</span><span class="ct-9d2291">.</span><span class="ct-3427e6">status</span><span class="ct-9d2291"> </span><span class="ct-f402a3">===</span><span class="ct-9d2291"> </span><span class="ct-68b8e3">401</span><span class="ct-9d2291"> </span><span class="ct-f402a3">&&</span><span class="ct-9d2291"> </span><span class="ct-f402a3">!</span><span class="ct-3427e6">originalRequest</span><span class="ct-9d2291">.</span><span class="ct-3427e6">_retry</span><span class="ct-9d2291">) {</span></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-3427e6">originalRequest</span><span class="ct-9d2291">.</span><span class="ct-3427e6">_retry</span><span class="ct-9d2291"> </span><span class="ct-f402a3">=</span><span class="ct-9d2291"> </span><span class="ct-01fcd4">true</span><span class="ct-9d2291">;</span></span><span class="line"></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-bfa659">const</span><span class="ct-9d2291"> </span><span class="ct-646245">newToken</span><span class="ct-9d2291"> </span><span class="ct-f402a3">=</span><span class="ct-9d2291"> </span><span class="ct-3427e6">refreshTokens</span><span class="ct-9d2291">;</span></span><span class="line"></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-f402a3">return</span><span class="ct-9d2291"> </span><span class="ct-82accf">axios</span><span class="ct-9d2291">({</span></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-f402a3">...</span><span class="ct-3427e6">originalRequest</span><span class="ct-9d2291">,</span></span><span class="line"><span class="ct-9d2291"> headers: {</span></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-f402a3">...</span><span class="ct-3427e6">originalRequest</span><span class="ct-9d2291">.</span><span class="ct-3427e6">headers</span><span class="ct-9d2291">,</span></span><span class="line"><span class="ct-9d2291"> Authorization: </span><span class="ct-ffccda">"Bearer "</span><span class="ct-9d2291"> </span><span class="ct-f402a3">+</span><span class="ct-9d2291"> </span><span class="ct-3427e6">newToken</span><span class="ct-9d2291">,</span></span><span class="line"><span class="ct-9d2291"> },</span></span><span class="line"><span class="ct-9d2291"> });</span></span><span class="line"><span class="ct-9d2291"> }</span></span><span class="line"></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-82accf">logout</span><span class="ct-9d2291">();</span></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-f402a3">return</span><span class="ct-9d2291"> </span><span class="ct-694fc0">Promise</span><span class="ct-9d2291">.</span><span class="ct-82accf">reject</span><span class="ct-9d2291">(</span><span class="ct-3427e6">error</span><span class="ct-9d2291">);</span></span><span class="line"><span class="ct-9d2291"> }</span></span><span class="line"><span class="ct-9d2291"> );</span></span><span class="line"></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-f402a3">return</span><span class="ct-9d2291"> () </span><span class="ct-bfa659">=></span><span class="ct-9d2291"> {</span></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-3427e6">axios</span><span class="ct-9d2291">.</span><span class="ct-3427e6">interceptors</span><span class="ct-9d2291">.</span><span class="ct-3427e6">request</span><span class="ct-9d2291">.</span><span class="ct-82accf">eject</span><span class="ct-9d2291">(</span><span class="ct-3427e6">req</span><span class="ct-9d2291">);</span></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-3427e6">axios</span><span class="ct-9d2291">.</span><span class="ct-3427e6">interceptors</span><span class="ct-9d2291">.</span><span class="ct-3427e6">request</span><span class="ct-9d2291">.</span><span class="ct-82accf">eject</span><span class="ct-9d2291">(</span><span class="ct-3427e6">resp</span><span class="ct-9d2291">);</span></span><span class="line"><span class="ct-9d2291"> };</span></span><span class="line"><span class="ct-9d2291"> }, [</span><span class="ct-3427e6">client</span><span class="ct-9d2291">, </span><span class="ct-3427e6">tokens</span><span class="ct-9d2291">.</span><span class="ct-3427e6">access</span><span class="ct-9d2291">, </span><span class="ct-3427e6">tokens</span><span class="ct-9d2291">.</span><span class="ct-3427e6">refresh</span><span class="ct-9d2291">, </span><span class="ct-3427e6">refreshTokens</span><span class="ct-9d2291">, </span><span class="ct-3427e6">logout</span><span class="ct-9d2291">]);</span></span><span class="line"></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-f402a3">return</span><span class="ct-9d2291"> (</span></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-f402a3"><</span><span class="ct-3427e6">APIContext</span><span class="ct-9d2291">.</span><span class="ct-3427e6">Provider</span><span class="ct-9d2291"> </span><span class="ct-3427e6">value</span><span class="ct-f402a3">=</span><span class="ct-9d2291">{{ </span><span class="ct-3427e6">client</span><span class="ct-9d2291"> }}</span><span class="ct-f402a3">></span></span><span class="line"><span class="ct-d6d1bd"> {</span><span class="ct-ed897c">children</span><span class="ct-d6d1bd">}</span></span><span class="line"><span class="ct-9d2291"> </span><span class="ct-f402a3"></</span><span class="ct-3427e6">APIContext</span><span class="ct-9d2291">.</span><span class="ct-3427e6">Provider</span><span class="ct-f402a3">></span></span><span class="line"><span class="ct-9d2291"> );</span></span><span class="line"><span class="ct-9d2291">};</span></span><span class="line"></span><span class="line"><span class="ct-f402a3">export</span><span class="ct-9d2291"> </span><span class="ct-bfa659">const</span><span class="ct-9d2291"> </span><span class="ct-82accf">useAPI</span><span class="ct-9d2291"> </span><span class="ct-f402a3">=</span><span class="ct-9d2291"> () </span><span class="ct-bfa659">=></span><span class="ct-9d2291"> </span><span class="ct-82accf">useContext</span><span class="ct-9d2291">(</span><span class="ct-3427e6">APIContext</span><span class="ct-9d2291">).</span><span class="ct-3427e6">client</span><span class="ct-9d2291">;</span></span><span class="line"></span><span class="line"><span class="ct-f402a3">export</span><span class="ct-9d2291"> { </span><span class="ct-3427e6">APIProvider</span><span class="ct-9d2291"> };</span></span></code></pre><!--]--></div><style>.ct-01fcd4{color:#79C0FF}.ct-68b8e3{color:#79C0FF}.ct-57838d{color:#A5D6FF}.ct-b6b8f5{color:#8B949E}.ct-255c64{color:#FFA657}.ct-646245{color:#79C0FF}.ct-694fc0{color:#79C0FF}.ct-bfa659{color:#FF7B72}.ct-82accf{color:#D2A8FF}.ct-f2f6ff{color:#79C0FF}.ct-b7492e{color:#FF7B72}.ct-ed897c{color:#FFA657}.ct-1c2886{color:#79C0FF}.ct-c38e35{color:#FFA657}.ct-d6d1bd{color:#C9D1D9}.ct-d2feec{color:#FF7B72}.ct-ffccda{color:#A5D6FF}.ct-3427e6{color:#C9D1D9}.ct-9d2291{color:#C9D1D9}.ct-f402a3{color:#FF7B72}.light .ct-f402a3{color:#859900}.light .ct-9d2291{color:#657B83}.light .ct-3427e6{color:#268BD2}.light .ct-ffccda{color:#2AA198}.light .ct-d2feec{color:#073642}.light .ct-d6d1bd{color:#657B83}.light .ct-c38e35{color:#268BD2}.light .ct-1c2886{color:#657B83}.light .ct-ed897c{color:#657B83}.light .ct-b7492e{color:#859900}.light .ct-f2f6ff{color:#859900}.light .ct-82accf{color:#268BD2}.light .ct-bfa659{color:#073642}.light .ct-694fc0{color:#859900}.light .ct-646245{color:#268BD2}.light .ct-255c64{color:#268BD2}.light .ct-b6b8f5{color:#93A1A1}.light .ct-57838d{color:#657B83}.light .ct-68b8e3{color:#D33682}.light .ct-01fcd4{color:#B58900}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/frontend/react/axios-refresh-token-on-react/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695530318}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a aria-current="page" href="/frontend/react/axios-refresh-token-on-react" class="router-link-active _active_192pu_81 _link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Axios Refresh Token On React</h1><article><div><p><!--[--><code><!--[--><ApiProvider /><!--]--></code> component, that will handle token refresh if needed. Refresh function should, probably, be passed through component props.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-441895">import</span><span class="ct-509eb2"> </span><span class="ct-eb8e65">axios</span><span class="ct-509eb2"> </span><span class="ct-441895">from</span><span class="ct-509eb2"> </span><span class="ct-aa5e40">"axios"</span><span class="ct-509eb2">;</span></span><span class="line"><span class="ct-441895">import</span><span class="ct-509eb2"> </span><span class="ct-eb8e65">React</span><span class="ct-509eb2">, {</span></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-eb8e65">createContext</span><span class="ct-509eb2">,</span></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-eb8e65">FC</span><span class="ct-509eb2">,</span></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-eb8e65">PropsWithChildren</span><span class="ct-509eb2">,</span></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-eb8e65">useCallback</span><span class="ct-509eb2">,</span></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-eb8e65">useContext</span><span class="ct-509eb2">,</span></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-eb8e65">useEffect</span><span class="ct-509eb2">,</span></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-eb8e65">useRef</span><span class="ct-509eb2">,</span></span><span class="line"><span class="ct-509eb2">} </span><span class="ct-441895">from</span><span class="ct-509eb2"> </span><span class="ct-aa5e40">"react"</span><span class="ct-509eb2">;</span></span><span class="line"></span><span class="line"><span class="ct-571508">interface</span><span class="ct-6c447f"> </span><span class="ct-46134e">APIProviderProps</span><span class="ct-6c447f"> </span><span class="ct-571508">extends</span><span class="ct-6c447f"> </span><span class="ct-08c798">PropsWithChildren</span><span class="ct-6c447f"> {</span></span><span class="line"><span class="ct-6c447f"> </span><span class="ct-ac7baf">tokens</span><span class="ct-52b50f">:</span><span class="ct-6c447f"> {</span></span><span class="line"><span class="ct-6c447f"> </span><span class="ct-ac7baf">access</span><span class="ct-52b50f">:</span><span class="ct-6c447f"> </span><span class="ct-f9619c">string</span><span class="ct-6c447f">;</span></span><span class="line"><span class="ct-6c447f"> </span><span class="ct-ac7baf">refresh</span><span class="ct-52b50f">:</span><span class="ct-6c447f"> </span><span class="ct-f9619c">string</span><span class="ct-6c447f">;</span></span><span class="line"><span class="ct-509eb2"> };</span></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-3837d1">logout</span><span class="ct-441895">:</span><span class="ct-509eb2"> () </span><span class="ct-872860">=></span><span class="ct-509eb2"> </span><span class="ct-1d4139">void</span><span class="ct-509eb2">;</span></span><span class="line"><span class="ct-509eb2">}</span></span><span class="line"></span><span class="line"><span class="ct-872860">const</span><span class="ct-509eb2"> </span><span class="ct-20ed17">APIContext</span><span class="ct-509eb2"> </span><span class="ct-441895">=</span><span class="ct-509eb2"> </span><span class="ct-3837d1">createContext</span><span class="ct-509eb2">({</span></span><span class="line"><span class="ct-509eb2"> client: </span><span class="ct-eb8e65">axios</span><span class="ct-509eb2">.</span><span class="ct-3837d1">create</span><span class="ct-509eb2">({</span></span><span class="line"><span class="ct-509eb2"> baseURL: </span><span class="ct-eb8e65">process</span><span class="ct-509eb2">.</span><span class="ct-eb8e65">env</span><span class="ct-509eb2">.</span><span class="ct-20ed17">NEXT_PUBLIC_API_ENDPOINT</span><span class="ct-509eb2">,</span></span><span class="line"><span class="ct-509eb2"> }),</span></span><span class="line"><span class="ct-509eb2">});</span></span><span class="line"></span><span class="line"><span class="ct-872860">const</span><span class="ct-509eb2"> </span><span class="ct-3837d1">APIProvider</span><span class="ct-441895">:</span><span class="ct-509eb2"> </span><span class="ct-a8703d">FC</span><span class="ct-509eb2"><</span><span class="ct-a8703d">APIProviderProps</span><span class="ct-509eb2">> </span><span class="ct-441895">=</span><span class="ct-509eb2"> ({ </span></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-eb8e65">tokens</span><span class="ct-509eb2">, </span></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-eb8e65">logout</span><span class="ct-509eb2">, </span></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-eb8e65">children</span><span class="ct-509eb2">,</span></span><span class="line"><span class="ct-509eb2">}) </span><span class="ct-872860">=></span><span class="ct-509eb2"> {</span></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-872860">const</span><span class="ct-509eb2"> </span><span class="ct-20ed17">client</span><span class="ct-509eb2"> </span><span class="ct-441895">=</span><span class="ct-509eb2"> </span><span class="ct-3837d1">useRef</span><span class="ct-509eb2">(</span></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-eb8e65">axios</span><span class="ct-509eb2">.</span><span class="ct-3837d1">create</span><span class="ct-509eb2">({</span></span><span class="line"><span class="ct-509eb2"> baseURL: </span><span class="ct-eb8e65">process</span><span class="ct-509eb2">.</span><span class="ct-eb8e65">env</span><span class="ct-509eb2">.</span><span class="ct-20ed17">NEXT_PUBLIC_API_ENDPOINT</span><span class="ct-509eb2">,</span></span><span class="line"><span class="ct-509eb2"> })</span></span><span class="line"><span class="ct-509eb2"> ).</span><span class="ct-eb8e65">current</span><span class="ct-509eb2">;</span></span><span class="line"></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-872860">const</span><span class="ct-509eb2"> </span><span class="ct-20ed17">refreshTokens</span><span class="ct-509eb2"> </span><span class="ct-441895">=</span><span class="ct-509eb2"> </span><span class="ct-3837d1">useCallback</span><span class="ct-509eb2"><() </span><span class="ct-872860">=></span><span class="ct-509eb2"> </span><span class="ct-1d4139">string</span><span class="ct-509eb2">>(() </span><span class="ct-872860">=></span><span class="ct-509eb2"> {</span></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-211469">// TODO: implement me</span></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-441895">throw</span><span class="ct-509eb2"> </span><span class="ct-441895">new</span><span class="ct-509eb2"> </span><span class="ct-1d4139">Error</span><span class="ct-509eb2">(</span><span class="ct-aa5e40">"not implemented"</span><span class="ct-509eb2">);</span></span><span class="line"><span class="ct-509eb2"> }, []);</span></span><span class="line"></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-3837d1">useEffect</span><span class="ct-509eb2">(() </span><span class="ct-872860">=></span><span class="ct-509eb2"> {</span></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-441895">if</span><span class="ct-509eb2"> (</span><span class="ct-441895">!</span><span class="ct-eb8e65">tokens</span><span class="ct-509eb2">.</span><span class="ct-eb8e65">access</span><span class="ct-509eb2">) {</span></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-441895">return</span><span class="ct-509eb2">;</span></span><span class="line"><span class="ct-509eb2"> }</span></span><span class="line"></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-211469">// append `access` token to all requests</span></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-872860">const</span><span class="ct-509eb2"> </span><span class="ct-20ed17">req</span><span class="ct-509eb2"> </span><span class="ct-441895">=</span><span class="ct-509eb2"> </span><span class="ct-eb8e65">client</span><span class="ct-509eb2">.</span><span class="ct-eb8e65">interceptors</span><span class="ct-509eb2">.</span><span class="ct-eb8e65">request</span><span class="ct-509eb2">.</span><span class="ct-3837d1">use</span><span class="ct-509eb2">(</span></span><span class="line"><span class="ct-6c447f"> </span><span class="ct-571508">async</span><span class="ct-6c447f"> (</span><span class="ct-ac7baf">config</span><span class="ct-6c447f">) </span><span class="ct-571508">=></span><span class="ct-6c447f"> {</span></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-eb8e65">config</span><span class="ct-509eb2">.</span><span class="ct-eb8e65">headers</span><span class="ct-509eb2"> </span><span class="ct-441895">=</span><span class="ct-509eb2"> {</span></span><span class="line"><span class="ct-509eb2"> Authorization: </span><span class="ct-aa5e40">`Bearer ${</span><span class="ct-eb8e65">tokens</span><span class="ct-7758a7">.</span><span class="ct-eb8e65">access</span><span class="ct-aa5e40">}`</span><span class="ct-509eb2">,</span></span><span class="line"><span class="ct-509eb2"> };</span></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-441895">return</span><span class="ct-509eb2"> </span><span class="ct-eb8e65">config</span><span class="ct-509eb2">;</span></span><span class="line"><span class="ct-509eb2"> },</span></span><span class="line"><span class="ct-6c447f"> (</span><span class="ct-ac7baf">error</span><span class="ct-6c447f">) </span><span class="ct-571508">=></span><span class="ct-6c447f"> {</span></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-1d4139">Promise</span><span class="ct-509eb2">.</span><span class="ct-3837d1">reject</span><span class="ct-509eb2">(</span><span class="ct-eb8e65">error</span><span class="ct-509eb2">);</span></span><span class="line"><span class="ct-509eb2"> }</span></span><span class="line"><span class="ct-509eb2"> );</span></span><span class="line"></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-211469">// refreshing interceptor</span></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-872860">const</span><span class="ct-509eb2"> </span><span class="ct-20ed17">resp</span><span class="ct-509eb2"> </span><span class="ct-441895">=</span><span class="ct-509eb2"> </span><span class="ct-eb8e65">client</span><span class="ct-509eb2">.</span><span class="ct-eb8e65">interceptors</span><span class="ct-509eb2">.</span><span class="ct-eb8e65">response</span><span class="ct-509eb2">.</span><span class="ct-3837d1">use</span><span class="ct-509eb2">(</span></span><span class="line"><span class="ct-6c447f"> (</span><span class="ct-ac7baf">response</span><span class="ct-6c447f">) </span><span class="ct-571508">=></span><span class="ct-6c447f"> {</span></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-441895">return</span><span class="ct-509eb2"> </span><span class="ct-eb8e65">response</span><span class="ct-509eb2">;</span></span><span class="line"><span class="ct-509eb2"> },</span></span><span class="line"><span class="ct-6c447f"> </span><span class="ct-571508">async</span><span class="ct-6c447f"> </span><span class="ct-571508">function</span><span class="ct-6c447f"> (</span><span class="ct-ac7baf">error</span><span class="ct-6c447f">) {</span></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-872860">const</span><span class="ct-509eb2"> </span><span class="ct-20ed17">originalRequest</span><span class="ct-509eb2"> </span><span class="ct-441895">=</span><span class="ct-509eb2"> </span><span class="ct-eb8e65">error</span><span class="ct-509eb2">.</span><span class="ct-eb8e65">config</span><span class="ct-509eb2">;</span></span><span class="line"></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-441895">if</span><span class="ct-509eb2"> (</span><span class="ct-eb8e65">error</span><span class="ct-509eb2">.</span><span class="ct-eb8e65">response</span><span class="ct-509eb2">.</span><span class="ct-eb8e65">status</span><span class="ct-509eb2"> </span><span class="ct-441895">===</span><span class="ct-509eb2"> </span><span class="ct-51d764">401</span><span class="ct-509eb2"> </span><span class="ct-441895">&&</span><span class="ct-509eb2"> </span><span class="ct-441895">!</span><span class="ct-eb8e65">originalRequest</span><span class="ct-509eb2">.</span><span class="ct-eb8e65">_retry</span><span class="ct-509eb2">) {</span></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-eb8e65">originalRequest</span><span class="ct-509eb2">.</span><span class="ct-eb8e65">_retry</span><span class="ct-509eb2"> </span><span class="ct-441895">=</span><span class="ct-509eb2"> </span><span class="ct-7edaa2">true</span><span class="ct-509eb2">;</span></span><span class="line"></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-872860">const</span><span class="ct-509eb2"> </span><span class="ct-20ed17">newToken</span><span class="ct-509eb2"> </span><span class="ct-441895">=</span><span class="ct-509eb2"> </span><span class="ct-eb8e65">refreshTokens</span><span class="ct-509eb2">;</span></span><span class="line"></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-441895">return</span><span class="ct-509eb2"> </span><span class="ct-3837d1">axios</span><span class="ct-509eb2">({</span></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-441895">...</span><span class="ct-eb8e65">originalRequest</span><span class="ct-509eb2">,</span></span><span class="line"><span class="ct-509eb2"> headers: {</span></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-441895">...</span><span class="ct-eb8e65">originalRequest</span><span class="ct-509eb2">.</span><span class="ct-eb8e65">headers</span><span class="ct-509eb2">,</span></span><span class="line"><span class="ct-509eb2"> Authorization: </span><span class="ct-aa5e40">"Bearer "</span><span class="ct-509eb2"> </span><span class="ct-441895">+</span><span class="ct-509eb2"> </span><span class="ct-eb8e65">newToken</span><span class="ct-509eb2">,</span></span><span class="line"><span class="ct-509eb2"> },</span></span><span class="line"><span class="ct-509eb2"> });</span></span><span class="line"><span class="ct-509eb2"> }</span></span><span class="line"></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-3837d1">logout</span><span class="ct-509eb2">();</span></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-441895">return</span><span class="ct-509eb2"> </span><span class="ct-1d4139">Promise</span><span class="ct-509eb2">.</span><span class="ct-3837d1">reject</span><span class="ct-509eb2">(</span><span class="ct-eb8e65">error</span><span class="ct-509eb2">);</span></span><span class="line"><span class="ct-509eb2"> }</span></span><span class="line"><span class="ct-509eb2"> );</span></span><span class="line"></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-441895">return</span><span class="ct-509eb2"> () </span><span class="ct-872860">=></span><span class="ct-509eb2"> {</span></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-eb8e65">axios</span><span class="ct-509eb2">.</span><span class="ct-eb8e65">interceptors</span><span class="ct-509eb2">.</span><span class="ct-eb8e65">request</span><span class="ct-509eb2">.</span><span class="ct-3837d1">eject</span><span class="ct-509eb2">(</span><span class="ct-eb8e65">req</span><span class="ct-509eb2">);</span></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-eb8e65">axios</span><span class="ct-509eb2">.</span><span class="ct-eb8e65">interceptors</span><span class="ct-509eb2">.</span><span class="ct-eb8e65">request</span><span class="ct-509eb2">.</span><span class="ct-3837d1">eject</span><span class="ct-509eb2">(</span><span class="ct-eb8e65">resp</span><span class="ct-509eb2">);</span></span><span class="line"><span class="ct-509eb2"> };</span></span><span class="line"><span class="ct-509eb2"> }, [</span><span class="ct-eb8e65">client</span><span class="ct-509eb2">, </span><span class="ct-eb8e65">tokens</span><span class="ct-509eb2">.</span><span class="ct-eb8e65">access</span><span class="ct-509eb2">, </span><span class="ct-eb8e65">tokens</span><span class="ct-509eb2">.</span><span class="ct-eb8e65">refresh</span><span class="ct-509eb2">, </span><span class="ct-eb8e65">refreshTokens</span><span class="ct-509eb2">, </span><span class="ct-eb8e65">logout</span><span class="ct-509eb2">]);</span></span><span class="line"></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-441895">return</span><span class="ct-509eb2"> (</span></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-441895"><</span><span class="ct-eb8e65">APIContext</span><span class="ct-509eb2">.</span><span class="ct-eb8e65">Provider</span><span class="ct-509eb2"> </span><span class="ct-eb8e65">value</span><span class="ct-441895">=</span><span class="ct-509eb2">{{ </span><span class="ct-eb8e65">client</span><span class="ct-509eb2"> }}</span><span class="ct-441895">></span></span><span class="line"><span class="ct-6c447f"> {</span><span class="ct-ac7baf">children</span><span class="ct-6c447f">}</span></span><span class="line"><span class="ct-509eb2"> </span><span class="ct-441895"></</span><span class="ct-eb8e65">APIContext</span><span class="ct-509eb2">.</span><span class="ct-eb8e65">Provider</span><span class="ct-441895">></span></span><span class="line"><span class="ct-509eb2"> );</span></span><span class="line"><span class="ct-509eb2">};</span></span><span class="line"></span><span class="line"><span class="ct-441895">export</span><span class="ct-509eb2"> </span><span class="ct-872860">const</span><span class="ct-509eb2"> </span><span class="ct-3837d1">useAPI</span><span class="ct-509eb2"> </span><span class="ct-441895">=</span><span class="ct-509eb2"> () </span><span class="ct-872860">=></span><span class="ct-509eb2"> </span><span class="ct-3837d1">useContext</span><span class="ct-509eb2">(</span><span class="ct-eb8e65">APIContext</span><span class="ct-509eb2">).</span><span class="ct-eb8e65">client</span><span class="ct-509eb2">;</span></span><span class="line"></span><span class="line"><span class="ct-441895">export</span><span class="ct-509eb2"> { </span><span class="ct-eb8e65">APIProvider</span><span class="ct-509eb2"> };</span></span></code></pre><!--]--></div><style>.ct-7edaa2{color:#79C0FF}.ct-51d764{color:#79C0FF}.ct-7758a7{color:#A5D6FF}.ct-211469{color:#8B949E}.ct-a8703d{color:#FFA657}.ct-20ed17{color:#79C0FF}.ct-1d4139{color:#79C0FF}.ct-872860{color:#FF7B72}.ct-3837d1{color:#D2A8FF}.ct-f9619c{color:#79C0FF}.ct-52b50f{color:#FF7B72}.ct-ac7baf{color:#FFA657}.ct-08c798{color:#79C0FF}.ct-46134e{color:#FFA657}.ct-6c447f{color:#C9D1D9}.ct-571508{color:#FF7B72}.ct-aa5e40{color:#A5D6FF}.ct-eb8e65{color:#C9D1D9}.ct-509eb2{color:#C9D1D9}.ct-441895{color:#FF7B72}.light .ct-441895{color:#859900}.light .ct-509eb2{color:#657B83}.light .ct-eb8e65{color:#268BD2}.light .ct-aa5e40{color:#2AA198}.light .ct-571508{color:#073642}.light .ct-6c447f{color:#657B83}.light .ct-46134e{color:#268BD2}.light .ct-08c798{color:#657B83}.light .ct-ac7baf{color:#657B83}.light .ct-52b50f{color:#859900}.light .ct-f9619c{color:#859900}.light .ct-3837d1{color:#268BD2}.light .ct-872860{color:#073642}.light .ct-1d4139{color:#859900}.light .ct-20ed17{color:#268BD2}.light .ct-a8703d{color:#268BD2}.light .ct-211469{color:#93A1A1}.light .ct-7758a7{color:#657B83}.light .ct-51d764{color:#D33682}.light .ct-7edaa2{color:#B58900}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/frontend/react/axios-refresh-token-on-react/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697991640}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/frontend/react/axios-with-abortcontroller/_payload.js b/docs/frontend/react/axios-with-abortcontroller/_payload.js
index 3cc268a..21bdcc3 100644
--- a/docs/frontend/react/axios-with-abortcontroller/_payload.js
+++ b/docs/frontend/react/axios-with-abortcontroller/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:G,_path:H},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-9RFKZoeNNl":{_path:H,_dir:"react",_draft:u,_partial:u,_locale:"en",_empty:u,title:G,description:"If you need to cancel some request, use axios with AbortController. Previously axios used cancellation token, but now it's deprecated.",excerpt:{type:I,children:[{type:a,tag:r,props:{},children:[{type:c,value:J},{type:a,tag:K,props:{href:L,rel:[M]},children:[{type:c,value:N}]},{type:c,value:O}]},{type:a,tag:r,props:{},children:[{type:a,tag:P,props:{},children:[{type:c,value:s}]},{type:c,value:Q}]},{type:a,tag:t,props:{code:v,language:R},children:[{type:a,tag:S,props:{},children:[{type:a,tag:t,props:{__ignoreMap:w},children:[{type:c,value:v}]}]}]}]},body:{type:I,children:[{type:a,tag:r,props:{},children:[{type:c,value:J},{type:a,tag:K,props:{href:L,rel:[M]},children:[{type:c,value:N}]},{type:c,value:O}]},{type:a,tag:r,props:{},children:[{type:a,tag:P,props:{},children:[{type:c,value:s}]},{type:c,value:Q}]},{type:a,tag:t,props:{code:v,language:R},children:[{type:a,tag:S,props:{},children:[{type:a,tag:t,props:{__ignoreMap:w},children:[{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" } "}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:"\"react\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:Y}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:"'axios'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:f},children:[]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:i},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:Z}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:Y}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"create"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]}]},{type:a,tag:b,props:{class:f},children:[]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:"export"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"useGetUsers"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:C}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"());"}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"async"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:C}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"await"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:Z}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:"\"\u002F\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:", {"}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" "}]},{type:a,tag:b,props:{class:ab},children:[{type:c,value:"\u002F\u002F params and props here"}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" signal: "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"signal"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:","}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" });"}]}]},{type:a,tag:b,props:{class:f},children:[]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"data"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }, []);"}]}]},{type:a,tag:b,props:{class:f},children:[]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"(() "}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:C}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"abort"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:ab},children:[{type:c,value:"\u002F\u002F controller should be rewritten or all requests will fail"}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }, ["}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"]);"}]}]},{type:a,tag:b,props:{class:f},children:[]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" };"}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"};"}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-39834c{color:#8B949E}.ct-63c11c{color:#D2A8FF}.ct-348230{color:#79C0FF}.ct-5a571a{color:#FF7B72}.ct-76a571{color:#A5D6FF}.ct-22d699{color:#C9D1D9}.ct-ccb8b9{color:#C9D1D9}.ct-189664{color:#FF7B72}.light .ct-189664{color:#859900}.light .ct-ccb8b9{color:#657B83}.light .ct-22d699{color:#268BD2}.light .ct-76a571{color:#2AA198}.light .ct-5a571a{color:#073642}.light .ct-348230{color:#268BD2}.light .ct-63c11c{color:#268BD2}.light .ct-39834c{color:#93A1A1}"}]}],toc:{title:w,searchDepth:ae,depth:ae,links:[]}},_type:"markdown",_id:"content:Frontend:React:Axios with AbortController.md",_source:"content",_file:"Frontend\u002FReact\u002FAxios with AbortController.md",_extension:"md"}},prerenderedAt:1703695530413}}("element","span","text","ct-ccb8b9"," ","line","ct-189664","ct-22d699","ct-5a571a","ct-63c11c",".","=","const"," ","ct-348230"," ","controller","p","AbortController","code",false,"import { useCallback, useRef } from \"react\";\nimport axios from 'axios';\n\nconst client = axios.create();\n\nexport const useGetUsers = () =\u003E {\n const controller = useRef(new AbortController());\n \n const get = useCallback(async () =\u003E {\n const result = await client.get(\"\u002F\", {\n \u002F\u002F params and props here\n signal: controller.current.signal,\n });\n\n return result.data;\n }, []);\n\n const cancel = useCallback(() =\u003E {\n controller.current.abort();\n \n \u002F\u002F controller should be rewritten or all requests will fail\n controller.current = new AbortController();\n }, [controller]);\n\n return { get, cancel };\n};\n","","useCallback","ct-76a571",";","();","=\u003E"," {","(","get","current","Axios With AbortController","\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller","root","If you need to cancel some request, use ","a","https:\u002F\u002Faxios-http.com\u002Fdocs\u002Fcancellation","nofollow","axios with AbortController",". Previously axios used cancellation token, but now it's deprecated.","code-inline"," can be used with a multiple requests to cancel them at once.","typescript","pre","import"," { ",", ","useRef","from","axios","client"," () ","new","result","ct-39834c","return","cancel",2))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:G,_path:H},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-9RFKZoeNNl":{_path:H,_dir:"react",_draft:u,_partial:u,_locale:"en",_empty:u,title:G,description:"If you need to cancel some request, use axios with AbortController. Previously axios used cancellation token, but now it's deprecated.",excerpt:{type:I,children:[{type:a,tag:r,props:{},children:[{type:c,value:J},{type:a,tag:K,props:{href:L,rel:[M]},children:[{type:c,value:N}]},{type:c,value:O}]},{type:a,tag:r,props:{},children:[{type:a,tag:P,props:{},children:[{type:c,value:s}]},{type:c,value:Q}]},{type:a,tag:t,props:{code:v,language:R},children:[{type:a,tag:S,props:{},children:[{type:a,tag:t,props:{__ignoreMap:w},children:[{type:c,value:v}]}]}]}]},body:{type:I,children:[{type:a,tag:r,props:{},children:[{type:c,value:J},{type:a,tag:K,props:{href:L,rel:[M]},children:[{type:c,value:N}]},{type:c,value:O}]},{type:a,tag:r,props:{},children:[{type:a,tag:P,props:{},children:[{type:c,value:s}]},{type:c,value:Q}]},{type:a,tag:t,props:{code:v,language:R},children:[{type:a,tag:S,props:{},children:[{type:a,tag:t,props:{__ignoreMap:w},children:[{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" } "}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:"\"react\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:Y}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:"'axios'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:f},children:[]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:i},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:Z}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:Y}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"create"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]}]},{type:a,tag:b,props:{class:f},children:[]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:"export"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"useGetUsers"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:C}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"());"}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"async"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:C}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"await"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:Z}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:"\"\u002F\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:", {"}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" "}]},{type:a,tag:b,props:{class:ab},children:[{type:c,value:"\u002F\u002F params and props here"}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" signal: "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"signal"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:","}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" });"}]}]},{type:a,tag:b,props:{class:f},children:[]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"data"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }, []);"}]}]},{type:a,tag:b,props:{class:f},children:[]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"(() "}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:C}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"abort"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:ab},children:[{type:c,value:"\u002F\u002F controller should be rewritten or all requests will fail"}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }, ["}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"]);"}]}]},{type:a,tag:b,props:{class:f},children:[]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" };"}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"};"}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-baf212{color:#8B949E}.ct-690655{color:#D2A8FF}.ct-a2042d{color:#79C0FF}.ct-5cff5b{color:#FF7B72}.ct-577293{color:#A5D6FF}.ct-842a9e{color:#C9D1D9}.ct-96e232{color:#C9D1D9}.ct-8addff{color:#FF7B72}.light .ct-8addff{color:#859900}.light .ct-96e232{color:#657B83}.light .ct-842a9e{color:#268BD2}.light .ct-577293{color:#2AA198}.light .ct-5cff5b{color:#073642}.light .ct-a2042d{color:#268BD2}.light .ct-690655{color:#268BD2}.light .ct-baf212{color:#93A1A1}"}]}],toc:{title:w,searchDepth:ae,depth:ae,links:[]}},_type:"markdown",_id:"content:Frontend:React:Axios with AbortController.md",_source:"content",_file:"Frontend\u002FReact\u002FAxios with AbortController.md",_extension:"md"}},prerenderedAt:1703697991752}}("element","span","text","ct-96e232"," ","line","ct-8addff","ct-842a9e","ct-5cff5b","ct-690655",".","=","const"," ","ct-a2042d"," ","controller","p","AbortController","code",false,"import { useCallback, useRef } from \"react\";\nimport axios from 'axios';\n\nconst client = axios.create();\n\nexport const useGetUsers = () =\u003E {\n const controller = useRef(new AbortController());\n \n const get = useCallback(async () =\u003E {\n const result = await client.get(\"\u002F\", {\n \u002F\u002F params and props here\n signal: controller.current.signal,\n });\n\n return result.data;\n }, []);\n\n const cancel = useCallback(() =\u003E {\n controller.current.abort();\n \n \u002F\u002F controller should be rewritten or all requests will fail\n controller.current = new AbortController();\n }, [controller]);\n\n return { get, cancel };\n};\n","","useCallback","ct-577293",";","();","=\u003E"," {","(","get","current","Axios With AbortController","\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller","root","If you need to cancel some request, use ","a","https:\u002F\u002Faxios-http.com\u002Fdocs\u002Fcancellation","nofollow","axios with AbortController",". Previously axios used cancellation token, but now it's deprecated.","code-inline"," can be used with a multiple requests to cancel them at once.","typescript","pre","import"," { ",", ","useRef","from","axios","client"," () ","new","result","ct-baf212","return","cancel",2))
\ No newline at end of file
diff --git a/docs/frontend/react/axios-with-abortcontroller/index.html b/docs/frontend/react/axios-with-abortcontroller/index.html
index 0442a6a..495aded 100644
--- a/docs/frontend/react/axios-with-abortcontroller/index.html
+++ b/docs/frontend/react/axios-with-abortcontroller/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Axios With AbortController • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="If you need to cancel some request, use axios with AbortController. Previously axios used cancellation token, but now it's deprecated."><meta name="head:count" content="3"><link rel="modulepreload" href="/frontend/react/axios-with-abortcontroller/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCodeInline.d9bcf614.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseA.c52e44f8.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a aria-current="page" href="/frontend/react/axios-with-abortcontroller" class="router-link-active _active_192pu_81 _link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Axios With AbortController</h1><article><div><p><!--[-->If you need to cancel some request, use <a href="https://axios-http.com/docs/cancellation" rel="nofollow" target="_blank"><!--[-->axios with AbortController<!--]--></a>. Previously axios used cancellation token, but now it's deprecated.<!--]--></p><p><!--[--><code><!--[-->AbortController<!--]--></code> can be used with a multiple requests to cancel them at once.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-189664">import</span><span class="ct-ccb8b9"> { </span><span class="ct-22d699">useCallback</span><span class="ct-ccb8b9">, </span><span class="ct-22d699">useRef</span><span class="ct-ccb8b9"> } </span><span class="ct-189664">from</span><span class="ct-ccb8b9"> </span><span class="ct-76a571">"react"</span><span class="ct-ccb8b9">;</span></span><span class="line"><span class="ct-189664">import</span><span class="ct-ccb8b9"> </span><span class="ct-22d699">axios</span><span class="ct-ccb8b9"> </span><span class="ct-189664">from</span><span class="ct-ccb8b9"> </span><span class="ct-76a571">'axios'</span><span class="ct-ccb8b9">;</span></span><span class="line"></span><span class="line"><span class="ct-5a571a">const</span><span class="ct-ccb8b9"> </span><span class="ct-348230">client</span><span class="ct-ccb8b9"> </span><span class="ct-189664">=</span><span class="ct-ccb8b9"> </span><span class="ct-22d699">axios</span><span class="ct-ccb8b9">.</span><span class="ct-63c11c">create</span><span class="ct-ccb8b9">();</span></span><span class="line"></span><span class="line"><span class="ct-189664">export</span><span class="ct-ccb8b9"> </span><span class="ct-5a571a">const</span><span class="ct-ccb8b9"> </span><span class="ct-63c11c">useGetUsers</span><span class="ct-ccb8b9"> </span><span class="ct-189664">=</span><span class="ct-ccb8b9"> () </span><span class="ct-5a571a">=></span><span class="ct-ccb8b9"> {</span></span><span class="line"><span class="ct-ccb8b9"> </span><span class="ct-5a571a">const</span><span class="ct-ccb8b9"> </span><span class="ct-348230">controller</span><span class="ct-ccb8b9"> </span><span class="ct-189664">=</span><span class="ct-ccb8b9"> </span><span class="ct-63c11c">useRef</span><span class="ct-ccb8b9">(</span><span class="ct-189664">new</span><span class="ct-ccb8b9"> </span><span class="ct-63c11c">AbortController</span><span class="ct-ccb8b9">());</span></span><span class="line"><span class="ct-ccb8b9"> </span></span><span class="line"><span class="ct-ccb8b9"> </span><span class="ct-5a571a">const</span><span class="ct-ccb8b9"> </span><span class="ct-348230">get</span><span class="ct-ccb8b9"> </span><span class="ct-189664">=</span><span class="ct-ccb8b9"> </span><span class="ct-63c11c">useCallback</span><span class="ct-ccb8b9">(</span><span class="ct-5a571a">async</span><span class="ct-ccb8b9"> () </span><span class="ct-5a571a">=></span><span class="ct-ccb8b9"> {</span></span><span class="line"><span class="ct-ccb8b9"> </span><span class="ct-5a571a">const</span><span class="ct-ccb8b9"> </span><span class="ct-348230">result</span><span class="ct-ccb8b9"> </span><span class="ct-189664">=</span><span class="ct-ccb8b9"> </span><span class="ct-189664">await</span><span class="ct-ccb8b9"> </span><span class="ct-22d699">client</span><span class="ct-ccb8b9">.</span><span class="ct-63c11c">get</span><span class="ct-ccb8b9">(</span><span class="ct-76a571">"/"</span><span class="ct-ccb8b9">, {</span></span><span class="line"><span class="ct-ccb8b9"> </span><span class="ct-39834c">// params and props here</span></span><span class="line"><span class="ct-ccb8b9"> signal: </span><span class="ct-22d699">controller</span><span class="ct-ccb8b9">.</span><span class="ct-22d699">current</span><span class="ct-ccb8b9">.</span><span class="ct-22d699">signal</span><span class="ct-ccb8b9">,</span></span><span class="line"><span class="ct-ccb8b9"> });</span></span><span class="line"></span><span class="line"><span class="ct-ccb8b9"> </span><span class="ct-189664">return</span><span class="ct-ccb8b9"> </span><span class="ct-22d699">result</span><span class="ct-ccb8b9">.</span><span class="ct-22d699">data</span><span class="ct-ccb8b9">;</span></span><span class="line"><span class="ct-ccb8b9"> }, []);</span></span><span class="line"></span><span class="line"><span class="ct-ccb8b9"> </span><span class="ct-5a571a">const</span><span class="ct-ccb8b9"> </span><span class="ct-348230">cancel</span><span class="ct-ccb8b9"> </span><span class="ct-189664">=</span><span class="ct-ccb8b9"> </span><span class="ct-63c11c">useCallback</span><span class="ct-ccb8b9">(() </span><span class="ct-5a571a">=></span><span class="ct-ccb8b9"> {</span></span><span class="line"><span class="ct-ccb8b9"> </span><span class="ct-22d699">controller</span><span class="ct-ccb8b9">.</span><span class="ct-22d699">current</span><span class="ct-ccb8b9">.</span><span class="ct-63c11c">abort</span><span class="ct-ccb8b9">();</span></span><span class="line"><span class="ct-ccb8b9"> </span></span><span class="line"><span class="ct-ccb8b9"> </span><span class="ct-39834c">// controller should be rewritten or all requests will fail</span></span><span class="line"><span class="ct-ccb8b9"> </span><span class="ct-22d699">controller</span><span class="ct-ccb8b9">.</span><span class="ct-22d699">current</span><span class="ct-ccb8b9"> </span><span class="ct-189664">=</span><span class="ct-ccb8b9"> </span><span class="ct-189664">new</span><span class="ct-ccb8b9"> </span><span class="ct-63c11c">AbortController</span><span class="ct-ccb8b9">();</span></span><span class="line"><span class="ct-ccb8b9"> }, [</span><span class="ct-22d699">controller</span><span class="ct-ccb8b9">]);</span></span><span class="line"></span><span class="line"><span class="ct-ccb8b9"> </span><span class="ct-189664">return</span><span class="ct-ccb8b9"> { </span><span class="ct-22d699">get</span><span class="ct-ccb8b9">, </span><span class="ct-22d699">cancel</span><span class="ct-ccb8b9"> };</span></span><span class="line"><span class="ct-ccb8b9">};</span></span></code></pre><!--]--></div><style>.ct-39834c{color:#8B949E}.ct-63c11c{color:#D2A8FF}.ct-348230{color:#79C0FF}.ct-5a571a{color:#FF7B72}.ct-76a571{color:#A5D6FF}.ct-22d699{color:#C9D1D9}.ct-ccb8b9{color:#C9D1D9}.ct-189664{color:#FF7B72}.light .ct-189664{color:#859900}.light .ct-ccb8b9{color:#657B83}.light .ct-22d699{color:#268BD2}.light .ct-76a571{color:#2AA198}.light .ct-5a571a{color:#073642}.light .ct-348230{color:#268BD2}.light .ct-63c11c{color:#268BD2}.light .ct-39834c{color:#93A1A1}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/frontend/react/axios-with-abortcontroller/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695530413}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a aria-current="page" href="/frontend/react/axios-with-abortcontroller" class="router-link-active _active_192pu_81 _link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Axios With AbortController</h1><article><div><p><!--[-->If you need to cancel some request, use <a href="https://axios-http.com/docs/cancellation" rel="nofollow" target="_blank"><!--[-->axios with AbortController<!--]--></a>. Previously axios used cancellation token, but now it's deprecated.<!--]--></p><p><!--[--><code><!--[-->AbortController<!--]--></code> can be used with a multiple requests to cancel them at once.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-8addff">import</span><span class="ct-96e232"> { </span><span class="ct-842a9e">useCallback</span><span class="ct-96e232">, </span><span class="ct-842a9e">useRef</span><span class="ct-96e232"> } </span><span class="ct-8addff">from</span><span class="ct-96e232"> </span><span class="ct-577293">"react"</span><span class="ct-96e232">;</span></span><span class="line"><span class="ct-8addff">import</span><span class="ct-96e232"> </span><span class="ct-842a9e">axios</span><span class="ct-96e232"> </span><span class="ct-8addff">from</span><span class="ct-96e232"> </span><span class="ct-577293">'axios'</span><span class="ct-96e232">;</span></span><span class="line"></span><span class="line"><span class="ct-5cff5b">const</span><span class="ct-96e232"> </span><span class="ct-a2042d">client</span><span class="ct-96e232"> </span><span class="ct-8addff">=</span><span class="ct-96e232"> </span><span class="ct-842a9e">axios</span><span class="ct-96e232">.</span><span class="ct-690655">create</span><span class="ct-96e232">();</span></span><span class="line"></span><span class="line"><span class="ct-8addff">export</span><span class="ct-96e232"> </span><span class="ct-5cff5b">const</span><span class="ct-96e232"> </span><span class="ct-690655">useGetUsers</span><span class="ct-96e232"> </span><span class="ct-8addff">=</span><span class="ct-96e232"> () </span><span class="ct-5cff5b">=></span><span class="ct-96e232"> {</span></span><span class="line"><span class="ct-96e232"> </span><span class="ct-5cff5b">const</span><span class="ct-96e232"> </span><span class="ct-a2042d">controller</span><span class="ct-96e232"> </span><span class="ct-8addff">=</span><span class="ct-96e232"> </span><span class="ct-690655">useRef</span><span class="ct-96e232">(</span><span class="ct-8addff">new</span><span class="ct-96e232"> </span><span class="ct-690655">AbortController</span><span class="ct-96e232">());</span></span><span class="line"><span class="ct-96e232"> </span></span><span class="line"><span class="ct-96e232"> </span><span class="ct-5cff5b">const</span><span class="ct-96e232"> </span><span class="ct-a2042d">get</span><span class="ct-96e232"> </span><span class="ct-8addff">=</span><span class="ct-96e232"> </span><span class="ct-690655">useCallback</span><span class="ct-96e232">(</span><span class="ct-5cff5b">async</span><span class="ct-96e232"> () </span><span class="ct-5cff5b">=></span><span class="ct-96e232"> {</span></span><span class="line"><span class="ct-96e232"> </span><span class="ct-5cff5b">const</span><span class="ct-96e232"> </span><span class="ct-a2042d">result</span><span class="ct-96e232"> </span><span class="ct-8addff">=</span><span class="ct-96e232"> </span><span class="ct-8addff">await</span><span class="ct-96e232"> </span><span class="ct-842a9e">client</span><span class="ct-96e232">.</span><span class="ct-690655">get</span><span class="ct-96e232">(</span><span class="ct-577293">"/"</span><span class="ct-96e232">, {</span></span><span class="line"><span class="ct-96e232"> </span><span class="ct-baf212">// params and props here</span></span><span class="line"><span class="ct-96e232"> signal: </span><span class="ct-842a9e">controller</span><span class="ct-96e232">.</span><span class="ct-842a9e">current</span><span class="ct-96e232">.</span><span class="ct-842a9e">signal</span><span class="ct-96e232">,</span></span><span class="line"><span class="ct-96e232"> });</span></span><span class="line"></span><span class="line"><span class="ct-96e232"> </span><span class="ct-8addff">return</span><span class="ct-96e232"> </span><span class="ct-842a9e">result</span><span class="ct-96e232">.</span><span class="ct-842a9e">data</span><span class="ct-96e232">;</span></span><span class="line"><span class="ct-96e232"> }, []);</span></span><span class="line"></span><span class="line"><span class="ct-96e232"> </span><span class="ct-5cff5b">const</span><span class="ct-96e232"> </span><span class="ct-a2042d">cancel</span><span class="ct-96e232"> </span><span class="ct-8addff">=</span><span class="ct-96e232"> </span><span class="ct-690655">useCallback</span><span class="ct-96e232">(() </span><span class="ct-5cff5b">=></span><span class="ct-96e232"> {</span></span><span class="line"><span class="ct-96e232"> </span><span class="ct-842a9e">controller</span><span class="ct-96e232">.</span><span class="ct-842a9e">current</span><span class="ct-96e232">.</span><span class="ct-690655">abort</span><span class="ct-96e232">();</span></span><span class="line"><span class="ct-96e232"> </span></span><span class="line"><span class="ct-96e232"> </span><span class="ct-baf212">// controller should be rewritten or all requests will fail</span></span><span class="line"><span class="ct-96e232"> </span><span class="ct-842a9e">controller</span><span class="ct-96e232">.</span><span class="ct-842a9e">current</span><span class="ct-96e232"> </span><span class="ct-8addff">=</span><span class="ct-96e232"> </span><span class="ct-8addff">new</span><span class="ct-96e232"> </span><span class="ct-690655">AbortController</span><span class="ct-96e232">();</span></span><span class="line"><span class="ct-96e232"> }, [</span><span class="ct-842a9e">controller</span><span class="ct-96e232">]);</span></span><span class="line"></span><span class="line"><span class="ct-96e232"> </span><span class="ct-8addff">return</span><span class="ct-96e232"> { </span><span class="ct-842a9e">get</span><span class="ct-96e232">, </span><span class="ct-842a9e">cancel</span><span class="ct-96e232"> };</span></span><span class="line"><span class="ct-96e232">};</span></span></code></pre><!--]--></div><style>.ct-baf212{color:#8B949E}.ct-690655{color:#D2A8FF}.ct-a2042d{color:#79C0FF}.ct-5cff5b{color:#FF7B72}.ct-577293{color:#A5D6FF}.ct-842a9e{color:#C9D1D9}.ct-96e232{color:#C9D1D9}.ct-8addff{color:#FF7B72}.light .ct-8addff{color:#859900}.light .ct-96e232{color:#657B83}.light .ct-842a9e{color:#268BD2}.light .ct-577293{color:#2AA198}.light .ct-5cff5b{color:#073642}.light .ct-a2042d{color:#268BD2}.light .ct-690655{color:#268BD2}.light .ct-baf212{color:#93A1A1}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/frontend/react/axios-with-abortcontroller/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697991752}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/frontend/react/detect-hook-deps-changes-with-usewhatschanged/_payload.js b/docs/frontend/react/detect-hook-deps-changes-with-usewhatschanged/_payload.js
new file mode 100644
index 0000000..3cc9fb2
--- /dev/null
+++ b/docs/frontend/react/detect-hook-deps-changes-with-usewhatschanged/_payload.js
@@ -0,0 +1 @@
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:A,_path:B}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-1DsgTOuGa0":{_path:B,_dir:"react",_draft:t,_partial:t,_locale:"en",_empty:t,title:A,description:k,excerpt:{type:C,children:[{type:a,tag:l,props:{code:u,language:D},children:[{type:a,tag:E,props:{},children:[{type:a,tag:l,props:{__ignoreMap:k},children:[{type:c,value:u}]}]}]}]},body:{type:C,children:[{type:a,tag:l,props:{code:u,language:D},children:[{type:a,tag:E,props:{},children:[{type:a,tag:l,props:{__ignoreMap:k},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:"import"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" { "}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" } "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"from"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"'react'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:H}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:m},children:[{type:c,value:"\u002F** Pass dictionary of `props` as argument and it will"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:m},children:[{type:c,value:" * tell you, which one changed after rerender."}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:m},children:[{type:c,value:" * Use `prefix` to distinguish props of different components."}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:m},children:[{type:c,value:" *\u002F"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:"export"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"useWhatsChanged"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:i},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:"ct-9c555a"},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:"ct-7c9693"},children:[{type:c,value:":"}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:"ct-682427"},children:[{type:c,value:"Record"}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"\u003C"}]},{type:a,tag:b,props:{class:w},children:[{type:c,value:"string"}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:w},children:[{type:c,value:"unknown"}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"\u003E,"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"''"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:","}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:") "}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:"ct-7def83"},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:N}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"(() "}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:i},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:w},children:[{type:c,value:"Object"}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:"ct-af5044"},children:[{type:c,value:"entries"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"if"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"["}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"] "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"!=="}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"value"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" ) {"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"console"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"log"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"`${"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"} ${"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"} has changed`"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:N}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" });"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:H}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }, ["}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"]);"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"};"}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-af5044{color:#D2A8FF}.ct-7def83{color:#79C0FF}.ct-e1c665{color:#79C0FF}.ct-682427{color:#FFA657}.ct-7c9693{color:#FF7B72}.ct-9c555a{color:#FFA657}.ct-7321a2{color:#C9D1D9}.ct-fddfb0{color:#D2A8FF}.ct-e2ac3d{color:#FF7B72}.ct-7a0006{color:#8B949E}.ct-6d5d08{color:#A5D6FF}.ct-3cce2a{color:#C9D1D9}.ct-1ee419{color:#C9D1D9}.ct-7ec539{color:#FF7B72}.light .ct-7ec539{color:#859900}.light .ct-1ee419{color:#657B83}.light .ct-3cce2a{color:#268BD2}.light .ct-6d5d08{color:#2AA198}.light .ct-7a0006{color:#93A1A1}.light .ct-e2ac3d{color:#073642}.light .ct-fddfb0{color:#268BD2}.light .ct-7321a2{color:#657B83}.light .ct-9c555a{color:#657B83}.light .ct-7c9693{color:#859900}.light .ct-682427{color:#268BD2}.light .ct-e1c665{color:#859900}.light .ct-7def83{color:#268BD2}.light .ct-af5044{color:#268BD2}"}]}],toc:{title:k,searchDepth:R,depth:R,links:[]}},_type:"markdown",_id:"content:Frontend:React:Detect hook deps changes with useWhatsChanged.md",_source:"content",_file:"Frontend\u002FReact\u002FDetect hook deps changes with useWhatsChanged.md",_extension:"md"}},prerenderedAt:1703697991827}}("element","span","text","ct-1ee419","line","ct-3cce2a"," ","ct-7ec539","ct-7321a2","ct-6d5d08","","code","ct-7a0006","ct-e2ac3d","ct-fddfb0","="," ","props",".",false,"import { useEffect, useRef } from 'react';\n\n\u002F** Pass dictionary of `props` as argument and it will\n * tell you, which one changed after rerender.\n * Use `prefix` to distinguish props of different components.\n *\u002F\nexport const useWhatsChanged = (\n props: Record\u003Cstring, unknown\u003E,\n prefix = '',\n) =\u003E {\n const prevProps = useRef(props);\n\n useEffect(() =\u003E {\n Object.entries(props).forEach(([key, value]) =\u003E {\n if (\n !Object.prototype.hasOwnProperty.call(prevProps.current, key) ||\n prevProps.current[key] !== value\n ) {\n console.log(`${prefix} ${key} has changed`);\n }\n });\n\n prevProps.current = props;\n }, [props, prefix]);\n};\n\n",", ","ct-e1c665","prefix","prevProps"," ","Detect Hook Deps Changes With UseWhatsChanged","\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged","root","typescript","pre","useEffect","useRef",";","const"," (","=\u003E"," {","(",");"," ","current","key",2))
\ No newline at end of file
diff --git a/docs/frontend/react/detect-hook-deps-changes-with-usewhatschanged/index.html b/docs/frontend/react/detect-hook-deps-changes-with-usewhatschanged/index.html
new file mode 100644
index 0000000..3c6db45
--- /dev/null
+++ b/docs/frontend/react/detect-hook-deps-changes-with-usewhatschanged/index.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html data-head-attrs="">
+<head><title>Detect Hook Deps Changes With UseWhatsChanged • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="head:count" content="2"><link rel="modulepreload" href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
+</script></head>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a aria-current="page" href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="router-link-active _active_192pu_81 _link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Detect Hook Deps Changes With UseWhatsChanged</h1><article><div><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-7ec539">import</span><span class="ct-1ee419"> { </span><span class="ct-3cce2a">useEffect</span><span class="ct-1ee419">, </span><span class="ct-3cce2a">useRef</span><span class="ct-1ee419"> } </span><span class="ct-7ec539">from</span><span class="ct-1ee419"> </span><span class="ct-6d5d08">'react'</span><span class="ct-1ee419">;</span></span><span class="line"></span><span class="line"><span class="ct-7a0006">/** Pass dictionary of `props` as argument and it will</span></span><span class="line"><span class="ct-7a0006"> * tell you, which one changed after rerender.</span></span><span class="line"><span class="ct-7a0006"> * Use `prefix` to distinguish props of different components.</span></span><span class="line"><span class="ct-7a0006"> */</span></span><span class="line"><span class="ct-7ec539">export</span><span class="ct-1ee419"> </span><span class="ct-e2ac3d">const</span><span class="ct-1ee419"> </span><span class="ct-fddfb0">useWhatsChanged</span><span class="ct-1ee419"> </span><span class="ct-7ec539">=</span><span class="ct-1ee419"> (</span></span><span class="line"><span class="ct-7321a2"> </span><span class="ct-9c555a">props</span><span class="ct-7c9693">:</span><span class="ct-7321a2"> </span><span class="ct-682427">Record</span><span class="ct-7321a2"><</span><span class="ct-e1c665">string</span><span class="ct-7321a2">, </span><span class="ct-e1c665">unknown</span><span class="ct-7321a2">>,</span></span><span class="line"><span class="ct-1ee419"> </span><span class="ct-3cce2a">prefix</span><span class="ct-1ee419"> </span><span class="ct-7ec539">=</span><span class="ct-1ee419"> </span><span class="ct-6d5d08">''</span><span class="ct-1ee419">,</span></span><span class="line"><span class="ct-1ee419">) </span><span class="ct-e2ac3d">=></span><span class="ct-1ee419"> {</span></span><span class="line"><span class="ct-1ee419"> </span><span class="ct-e2ac3d">const</span><span class="ct-1ee419"> </span><span class="ct-7def83">prevProps</span><span class="ct-1ee419"> </span><span class="ct-7ec539">=</span><span class="ct-1ee419"> </span><span class="ct-fddfb0">useRef</span><span class="ct-1ee419">(</span><span class="ct-3cce2a">props</span><span class="ct-1ee419">);</span></span><span class="line"></span><span class="line"><span class="ct-1ee419"> </span><span class="ct-fddfb0">useEffect</span><span class="ct-1ee419">(() </span><span class="ct-e2ac3d">=></span><span class="ct-1ee419"> {</span></span><span class="line"><span class="ct-7321a2"> </span><span class="ct-e1c665">Object</span><span class="ct-7321a2">.</span><span class="ct-af5044">entries</span></span><span class="line"><span class="ct-1ee419"> </span><span class="ct-7ec539">if</span><span class="ct-1ee419"> (</span></span><span class="line"><span class="ct-1ee419"> </span></span><span class="line"><span class="ct-1ee419"> </span><span class="ct-3cce2a">prevProps</span><span class="ct-1ee419">.</span><span class="ct-3cce2a">current</span><span class="ct-1ee419">[</span><span class="ct-3cce2a">key</span><span class="ct-1ee419">] </span><span class="ct-7ec539">!==</span><span class="ct-1ee419"> </span><span class="ct-3cce2a">value</span></span><span class="line"><span class="ct-1ee419"> ) {</span></span><span class="line"><span class="ct-1ee419"> </span><span class="ct-3cce2a">console</span><span class="ct-1ee419">.</span><span class="ct-fddfb0">log</span><span class="ct-1ee419">(</span><span class="ct-6d5d08">`${</span><span class="ct-3cce2a">prefix</span><span class="ct-6d5d08">} ${</span><span class="ct-3cce2a">key</span><span class="ct-6d5d08">} has changed`</span><span class="ct-1ee419">);</span></span><span class="line"><span class="ct-1ee419"> }</span></span><span class="line"><span class="ct-1ee419"> });</span></span><span class="line"></span><span class="line"><span class="ct-1ee419"> </span><span class="ct-3cce2a">prevProps</span><span class="ct-1ee419">.</span><span class="ct-3cce2a">current</span><span class="ct-1ee419"> </span><span class="ct-7ec539">=</span><span class="ct-1ee419"> </span><span class="ct-3cce2a">props</span><span class="ct-1ee419">;</span></span><span class="line"><span class="ct-1ee419"> }, [</span><span class="ct-3cce2a">props</span><span class="ct-1ee419">, </span><span class="ct-3cce2a">prefix</span><span class="ct-1ee419">]);</span></span><span class="line"><span class="ct-1ee419">};</span></span></code></pre><!--]--></div><style>.ct-af5044{color:#D2A8FF}.ct-7def83{color:#79C0FF}.ct-e1c665{color:#79C0FF}.ct-682427{color:#FFA657}.ct-7c9693{color:#FF7B72}.ct-9c555a{color:#FFA657}.ct-7321a2{color:#C9D1D9}.ct-fddfb0{color:#D2A8FF}.ct-e2ac3d{color:#FF7B72}.ct-7a0006{color:#8B949E}.ct-6d5d08{color:#A5D6FF}.ct-3cce2a{color:#C9D1D9}.ct-1ee419{color:#C9D1D9}.ct-7ec539{color:#FF7B72}.light .ct-7ec539{color:#859900}.light .ct-1ee419{color:#657B83}.light .ct-3cce2a{color:#268BD2}.light .ct-6d5d08{color:#2AA198}.light .ct-7a0006{color:#93A1A1}.light .ct-e2ac3d{color:#073642}.light .ct-fddfb0{color:#268BD2}.light .ct-7321a2{color:#657B83}.light .ct-9c555a{color:#657B83}.light .ct-7c9693{color:#859900}.light .ct-682427{color:#268BD2}.light .ct-e1c665{color:#859900}.light .ct-7def83{color:#268BD2}.light .ct-af5044{color:#268BD2}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/frontend/react/detect-hook-deps-changes-with-usewhatschanged/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697991827}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
+</html>
\ No newline at end of file
diff --git a/docs/frontend/vue/add-global-variable-to-window/_payload.js b/docs/frontend/vue/add-global-variable-to-window/_payload.js
index 4fb3444..bc64869 100644
--- a/docs/frontend/vue/add-global-variable-to-window/_payload.js
+++ b/docs/frontend/vue/add-global-variable-to-window/_payload.js
@@ -1 +1 @@
-export default {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-gf0FmfUQhH":null},prerenderedAt:1703695531950}
\ No newline at end of file
+export default {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-gf0FmfUQhH":null},prerenderedAt:1703697993604}
\ No newline at end of file
diff --git a/docs/frontend/vue/add-global-variable-to-window/index.html b/docs/frontend/vue/add-global-variable-to-window/index.html
index 8c8b219..a971d59 100644
--- a/docs/frontend/vue/add-global-variable-to-window/index.html
+++ b/docs/frontend/vue/add-global-variable-to-window/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="head:count" content="2"><link rel="modulepreload" href="/frontend/vue/add-global-variable-to-window/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><style>._list_1w161_1{margin:0;padding:0 20px}._list_1w161_1 li a{text-decoration:none}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><article><h1></h1><!----></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/frontend/vue/add-global-variable-to-window/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:c,value:c,unknown:a,forced:b}},_errors:{"content-query-gf0FmfUQhH":a},serverRendered:a,config:{public:{content:{clientDB:{isSPA:b,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:b,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695531950}}(true,false,"dark","shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/HomeReference.de9617ff.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><article><h1></h1><!----></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/frontend/vue/add-global-variable-to-window/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:c,value:c,unknown:a,forced:b}},_errors:{"content-query-gf0FmfUQhH":a},serverRendered:a,config:{public:{content:{clientDB:{isSPA:b,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:b,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697993604}}(true,false,"dark","shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/HomeReference.de9617ff.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/frontend/vue/adding-global-properties-to-component/_payload.js b/docs/frontend/vue/adding-global-properties-to-component/_payload.js
index 686a6cb..8bed659 100644
--- a/docs/frontend/vue/adding-global-properties-to-component/_payload.js
+++ b/docs/frontend/vue/adding-global-properties-to-component/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:q,_path:r},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-gHURXJrO3C":{_path:r,_dir:"vue",_draft:l,_partial:l,_locale:"en",_empty:l,title:q,description:"The topic's fully covered in the official documentation and in Add global variable to window.",excerpt:{type:s,children:[{type:a,tag:h,props:{},children:[{type:b,value:t},{type:a,tag:i,props:{href:u,rel:[v]},children:[{type:b,value:w}]},{type:b,value:x},{type:a,tag:i,props:{href:y},children:[{type:b,value:z}]},{type:b,value:A}]},{type:a,tag:h,props:{},children:[{type:b,value:B},{type:a,tag:j,props:{},children:[{type:b,value:C}]},{type:b,value:D},{type:a,tag:j,props:{},children:[{type:b,value:m}]},{type:b,value:E}]},{type:a,tag:k,props:{code:n,language:F},children:[{type:a,tag:G,props:{},children:[{type:a,tag:k,props:{__ignoreMap:o},children:[{type:b,value:n}]}]}]}]},body:{type:s,children:[{type:a,tag:h,props:{},children:[{type:b,value:t},{type:a,tag:i,props:{href:u,rel:[v]},children:[{type:b,value:w}]},{type:b,value:x},{type:a,tag:i,props:{href:y},children:[{type:b,value:z}]},{type:b,value:A}]},{type:a,tag:h,props:{},children:[{type:b,value:B},{type:a,tag:j,props:{},children:[{type:b,value:C}]},{type:b,value:D},{type:a,tag:j,props:{},children:[{type:b,value:m}]},{type:b,value:E}]},{type:a,tag:k,props:{code:n,language:F},children:[{type:a,tag:G,props:{},children:[{type:a,tag:k,props:{__ignoreMap:o},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:"ct-ada566"},children:[{type:b,value:"\u002F\u002F ~\u002Findex.d.ts or ~\u002Fcustom.d.ts"}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:H},children:[{type:b,value:"import"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:"ct-406e37"},children:[{type:b,value:"axios"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:H},children:[{type:b,value:"from"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:I},children:[{type:b,value:"'axios'"}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:p},children:[{type:b,value:"declare"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:p},children:[{type:b,value:"module"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:I},children:[{type:b,value:"'vue'"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:J}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" "}]},{type:a,tag:c,props:{class:p},children:[{type:b,value:"interface"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:"ct-42e974"},children:[{type:b,value:"ComponentCustomProperties"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:J}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:g},children:[{type:b,value:" "}]},{type:a,tag:c,props:{class:"ct-d401b3"},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:K},children:[{type:b,value:L}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:" ("}]},{type:a,tag:c,props:{class:"ct-0bbf07"},children:[{type:b,value:"key"}]},{type:a,tag:c,props:{class:K},children:[{type:b,value:L}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:M},children:[{type:b,value:N}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:") "}]},{type:a,tag:c,props:{class:"ct-1c5ec4"},children:[{type:b,value:"=\u003E"}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:M},children:[{type:b,value:N}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" }"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"}"}]}]}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-1c5ec4{color:#FF7B72}.ct-49170c{color:#79C0FF}.ct-0bbf07{color:#FFA657}.ct-249487{color:#FF7B72}.ct-d401b3{color:#D2A8FF}.ct-39238e{color:#C9D1D9}.ct-42e974{color:#FFA657}.ct-50c256{color:#FF7B72}.ct-56b8cc{color:#A5D6FF}.ct-406e37{color:#C9D1D9}.ct-78ee38{color:#C9D1D9}.ct-b065a7{color:#FF7B72}.ct-ada566{color:#8B949E}.light .ct-ada566{color:#93A1A1}.light .ct-b065a7{color:#859900}.light .ct-78ee38{color:#657B83}.light .ct-406e37{color:#268BD2}.light .ct-56b8cc{color:#2AA198}.light .ct-50c256{color:#073642}.light .ct-42e974{color:#268BD2}.light .ct-39238e{color:#657B83}.light .ct-d401b3{color:#268BD2}.light .ct-249487{color:#859900}.light .ct-0bbf07{color:#657B83}.light .ct-49170c{color:#859900}.light .ct-1c5ec4{color:#073642}"}]}],toc:{title:o,searchDepth:O,depth:O,links:[]}},_type:"markdown",_id:"content:Frontend:Vue:Adding global properties to component.md",_source:"content",_file:"Frontend\u002FVue\u002FAdding global properties to component.md",_extension:"md"}},prerenderedAt:1703695530505}}("element","text","span","ct-78ee38","line"," ","ct-39238e","p","a","code-inline","code",false,"$translate","\u002F\u002F ~\u002Findex.d.ts or ~\u002Fcustom.d.ts\n\nimport axios from 'axios'\n\ndeclare module 'vue' {\n interface ComponentCustomProperties {\n $http: typeof axios\n $translate: (key: string) =\u003E string\n }\n}\n","","ct-50c256","Adding Global Properties To Component","\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component","root","The topic's fully covered in the ","https:\u002F\u002Fvuejs.org\u002Fguide\u002Ftypescript\u002Foptions-api.html#augmenting-global-properties","nofollow","official documentation"," and in ","Add%20global%20variable%20to%20window","Add global variable to window",".","For example, you want to add global ","$http"," and "," services to all of project's components:","typescript","pre","ct-b065a7","ct-56b8cc"," {","ct-249487",":","ct-49170c","string",2))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:q,_path:r},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-gHURXJrO3C":{_path:r,_dir:"vue",_draft:l,_partial:l,_locale:"en",_empty:l,title:q,description:"The topic's fully covered in the official documentation and in Add global variable to window.",excerpt:{type:s,children:[{type:a,tag:h,props:{},children:[{type:b,value:t},{type:a,tag:i,props:{href:u,rel:[v]},children:[{type:b,value:w}]},{type:b,value:x},{type:a,tag:i,props:{href:y},children:[{type:b,value:z}]},{type:b,value:A}]},{type:a,tag:h,props:{},children:[{type:b,value:B},{type:a,tag:j,props:{},children:[{type:b,value:C}]},{type:b,value:D},{type:a,tag:j,props:{},children:[{type:b,value:m}]},{type:b,value:E}]},{type:a,tag:k,props:{code:n,language:F},children:[{type:a,tag:G,props:{},children:[{type:a,tag:k,props:{__ignoreMap:o},children:[{type:b,value:n}]}]}]}]},body:{type:s,children:[{type:a,tag:h,props:{},children:[{type:b,value:t},{type:a,tag:i,props:{href:u,rel:[v]},children:[{type:b,value:w}]},{type:b,value:x},{type:a,tag:i,props:{href:y},children:[{type:b,value:z}]},{type:b,value:A}]},{type:a,tag:h,props:{},children:[{type:b,value:B},{type:a,tag:j,props:{},children:[{type:b,value:C}]},{type:b,value:D},{type:a,tag:j,props:{},children:[{type:b,value:m}]},{type:b,value:E}]},{type:a,tag:k,props:{code:n,language:F},children:[{type:a,tag:G,props:{},children:[{type:a,tag:k,props:{__ignoreMap:o},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:"ct-740ef2"},children:[{type:b,value:"\u002F\u002F ~\u002Findex.d.ts or ~\u002Fcustom.d.ts"}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:H},children:[{type:b,value:"import"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:"ct-cf3e27"},children:[{type:b,value:"axios"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:H},children:[{type:b,value:"from"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:I},children:[{type:b,value:"'axios'"}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:p},children:[{type:b,value:"declare"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:p},children:[{type:b,value:"module"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:I},children:[{type:b,value:"'vue'"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:J}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" "}]},{type:a,tag:c,props:{class:p},children:[{type:b,value:"interface"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:"ct-fe9ad3"},children:[{type:b,value:"ComponentCustomProperties"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:J}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:g},children:[{type:b,value:" "}]},{type:a,tag:c,props:{class:"ct-293188"},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:K},children:[{type:b,value:L}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:" ("}]},{type:a,tag:c,props:{class:"ct-3a318d"},children:[{type:b,value:"key"}]},{type:a,tag:c,props:{class:K},children:[{type:b,value:L}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:M},children:[{type:b,value:N}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:") "}]},{type:a,tag:c,props:{class:"ct-6d6723"},children:[{type:b,value:"=\u003E"}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:M},children:[{type:b,value:N}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" }"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"}"}]}]}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-6d6723{color:#FF7B72}.ct-d6573a{color:#79C0FF}.ct-3a318d{color:#FFA657}.ct-92e12e{color:#FF7B72}.ct-293188{color:#D2A8FF}.ct-a9f03c{color:#C9D1D9}.ct-fe9ad3{color:#FFA657}.ct-2520f9{color:#FF7B72}.ct-5caf7b{color:#A5D6FF}.ct-cf3e27{color:#C9D1D9}.ct-491344{color:#C9D1D9}.ct-326306{color:#FF7B72}.ct-740ef2{color:#8B949E}.light .ct-740ef2{color:#93A1A1}.light .ct-326306{color:#859900}.light .ct-491344{color:#657B83}.light .ct-cf3e27{color:#268BD2}.light .ct-5caf7b{color:#2AA198}.light .ct-2520f9{color:#073642}.light .ct-fe9ad3{color:#268BD2}.light .ct-a9f03c{color:#657B83}.light .ct-293188{color:#268BD2}.light .ct-92e12e{color:#859900}.light .ct-3a318d{color:#657B83}.light .ct-d6573a{color:#859900}.light .ct-6d6723{color:#073642}"}]}],toc:{title:o,searchDepth:O,depth:O,links:[]}},_type:"markdown",_id:"content:Frontend:Vue:Adding global properties to component.md",_source:"content",_file:"Frontend\u002FVue\u002FAdding global properties to component.md",_extension:"md"}},prerenderedAt:1703697991868}}("element","text","span","ct-491344","line"," ","ct-a9f03c","p","a","code-inline","code",false,"$translate","\u002F\u002F ~\u002Findex.d.ts or ~\u002Fcustom.d.ts\n\nimport axios from 'axios'\n\ndeclare module 'vue' {\n interface ComponentCustomProperties {\n $http: typeof axios\n $translate: (key: string) =\u003E string\n }\n}\n","","ct-2520f9","Adding Global Properties To Component","\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component","root","The topic's fully covered in the ","https:\u002F\u002Fvuejs.org\u002Fguide\u002Ftypescript\u002Foptions-api.html#augmenting-global-properties","nofollow","official documentation"," and in ","Add%20global%20variable%20to%20window","Add global variable to window",".","For example, you want to add global ","$http"," and "," services to all of project's components:","typescript","pre","ct-326306","ct-5caf7b"," {","ct-92e12e",":","ct-d6573a","string",2))
\ No newline at end of file
diff --git a/docs/frontend/vue/adding-global-properties-to-component/index.html b/docs/frontend/vue/adding-global-properties-to-component/index.html
index efc3c82..9e1d563 100644
--- a/docs/frontend/vue/adding-global-properties-to-component/index.html
+++ b/docs/frontend/vue/adding-global-properties-to-component/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Adding Global Properties To Component • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="The topic's fully covered in the official documentation and in Add global variable to window."><meta name="head:count" content="3"><link rel="modulepreload" href="/frontend/vue/adding-global-properties-to-component/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCodeInline.d9bcf614.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseA.c52e44f8.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a aria-current="page" href="/frontend/vue/adding-global-properties-to-component" class="router-link-active _active_192pu_81 _link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Adding Global Properties To Component</h1><article><div><p><!--[-->The topic's fully covered in the <a href="https://vuejs.org/guide/typescript/options-api.html#augmenting-global-properties" rel="nofollow" target="_blank"><!--[-->official documentation<!--]--></a> and in <a href="/frontend/vue/add-global-variable-to-window" class=""><!--[-->Add global variable to window<!--]--></a>.<!--]--></p><p><!--[-->For example, you want to add global <code><!--[-->$http<!--]--></code> and <code><!--[-->$translate<!--]--></code> services to all of project's components:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-ada566">// ~/index.d.ts or ~/custom.d.ts</span></span><span class="line"></span><span class="line"><span class="ct-b065a7">import</span><span class="ct-78ee38"> </span><span class="ct-406e37">axios</span><span class="ct-78ee38"> </span><span class="ct-b065a7">from</span><span class="ct-78ee38"> </span><span class="ct-56b8cc">'axios'</span></span><span class="line"></span><span class="line"><span class="ct-50c256">declare</span><span class="ct-78ee38"> </span><span class="ct-50c256">module</span><span class="ct-78ee38"> </span><span class="ct-56b8cc">'vue'</span><span class="ct-78ee38"> {</span></span><span class="line"><span class="ct-78ee38"> </span><span class="ct-50c256">interface</span><span class="ct-78ee38"> </span><span class="ct-42e974">ComponentCustomProperties</span><span class="ct-78ee38"> {</span></span><span class="line"><span class="ct-78ee38"> </span><span class="ct-78ee38"> </span></span><span class="line"><span class="ct-39238e"> </span><span class="ct-d401b3">$translate</span><span class="ct-249487">:</span><span class="ct-39238e"> (</span><span class="ct-0bbf07">key</span><span class="ct-249487">:</span><span class="ct-39238e"> </span><span class="ct-49170c">string</span><span class="ct-39238e">) </span><span class="ct-1c5ec4">=></span><span class="ct-39238e"> </span><span class="ct-49170c">string</span></span><span class="line"><span class="ct-78ee38"> }</span></span><span class="line"><span class="ct-78ee38">}</span></span></code></pre><!--]--></div><style>.ct-1c5ec4{color:#FF7B72}.ct-49170c{color:#79C0FF}.ct-0bbf07{color:#FFA657}.ct-249487{color:#FF7B72}.ct-d401b3{color:#D2A8FF}.ct-39238e{color:#C9D1D9}.ct-42e974{color:#FFA657}.ct-50c256{color:#FF7B72}.ct-56b8cc{color:#A5D6FF}.ct-406e37{color:#C9D1D9}.ct-78ee38{color:#C9D1D9}.ct-b065a7{color:#FF7B72}.ct-ada566{color:#8B949E}.light .ct-ada566{color:#93A1A1}.light .ct-b065a7{color:#859900}.light .ct-78ee38{color:#657B83}.light .ct-406e37{color:#268BD2}.light .ct-56b8cc{color:#2AA198}.light .ct-50c256{color:#073642}.light .ct-42e974{color:#268BD2}.light .ct-39238e{color:#657B83}.light .ct-d401b3{color:#268BD2}.light .ct-249487{color:#859900}.light .ct-0bbf07{color:#657B83}.light .ct-49170c{color:#859900}.light .ct-1c5ec4{color:#073642}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/frontend/vue/adding-global-properties-to-component/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695530505}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a aria-current="page" href="/frontend/vue/adding-global-properties-to-component" class="router-link-active _active_192pu_81 _link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Adding Global Properties To Component</h1><article><div><p><!--[-->The topic's fully covered in the <a href="https://vuejs.org/guide/typescript/options-api.html#augmenting-global-properties" rel="nofollow" target="_blank"><!--[-->official documentation<!--]--></a> and in <a href="/frontend/vue/add-global-variable-to-window" class=""><!--[-->Add global variable to window<!--]--></a>.<!--]--></p><p><!--[-->For example, you want to add global <code><!--[-->$http<!--]--></code> and <code><!--[-->$translate<!--]--></code> services to all of project's components:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-740ef2">// ~/index.d.ts or ~/custom.d.ts</span></span><span class="line"></span><span class="line"><span class="ct-326306">import</span><span class="ct-491344"> </span><span class="ct-cf3e27">axios</span><span class="ct-491344"> </span><span class="ct-326306">from</span><span class="ct-491344"> </span><span class="ct-5caf7b">'axios'</span></span><span class="line"></span><span class="line"><span class="ct-2520f9">declare</span><span class="ct-491344"> </span><span class="ct-2520f9">module</span><span class="ct-491344"> </span><span class="ct-5caf7b">'vue'</span><span class="ct-491344"> {</span></span><span class="line"><span class="ct-491344"> </span><span class="ct-2520f9">interface</span><span class="ct-491344"> </span><span class="ct-fe9ad3">ComponentCustomProperties</span><span class="ct-491344"> {</span></span><span class="line"><span class="ct-491344"> </span><span class="ct-491344"> </span></span><span class="line"><span class="ct-a9f03c"> </span><span class="ct-293188">$translate</span><span class="ct-92e12e">:</span><span class="ct-a9f03c"> (</span><span class="ct-3a318d">key</span><span class="ct-92e12e">:</span><span class="ct-a9f03c"> </span><span class="ct-d6573a">string</span><span class="ct-a9f03c">) </span><span class="ct-6d6723">=></span><span class="ct-a9f03c"> </span><span class="ct-d6573a">string</span></span><span class="line"><span class="ct-491344"> }</span></span><span class="line"><span class="ct-491344">}</span></span></code></pre><!--]--></div><style>.ct-6d6723{color:#FF7B72}.ct-d6573a{color:#79C0FF}.ct-3a318d{color:#FFA657}.ct-92e12e{color:#FF7B72}.ct-293188{color:#D2A8FF}.ct-a9f03c{color:#C9D1D9}.ct-fe9ad3{color:#FFA657}.ct-2520f9{color:#FF7B72}.ct-5caf7b{color:#A5D6FF}.ct-cf3e27{color:#C9D1D9}.ct-491344{color:#C9D1D9}.ct-326306{color:#FF7B72}.ct-740ef2{color:#8B949E}.light .ct-740ef2{color:#93A1A1}.light .ct-326306{color:#859900}.light .ct-491344{color:#657B83}.light .ct-cf3e27{color:#268BD2}.light .ct-5caf7b{color:#2AA198}.light .ct-2520f9{color:#073642}.light .ct-fe9ad3{color:#268BD2}.light .ct-a9f03c{color:#657B83}.light .ct-293188{color:#268BD2}.light .ct-92e12e{color:#859900}.light .ct-3a318d{color:#657B83}.light .ct-d6573a{color:#859900}.light .ct-6d6723{color:#073642}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/frontend/vue/adding-global-properties-to-component/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697991868}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/frontend/vue/make-nuxt-handle-obsidian-highlights/_payload.js b/docs/frontend/vue/make-nuxt-handle-obsidian-highlights/_payload.js
index 47c037f..2377a3d 100644
--- a/docs/frontend/vue/make-nuxt-handle-obsidian-highlights/_payload.js
+++ b/docs/frontend/vue/make-nuxt-handle-obsidian-highlights/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:u,_path:v}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-JZY9J7Y59r":{_path:v,_dir:"vue",_draft:m,_partial:m,_locale:"en",_empty:m,title:u,description:"By default Nuxt Content Plugin not handling \u003Cspan class=\"highlight\"\u003Ehighlight\u003C\u002Fspan\u003E links. To fix that we will create Nitro plugin:",excerpt:{type:w,children:[{type:a,tag:x,props:{},children:[{type:b,value:y},{type:a,tag:z,props:{href:A,rel:[B]},children:[{type:b,value:C}]},{type:b,value:D},{type:a,tag:k,props:{},children:[{type:b,value:E}]},{type:b,value:F},{type:a,tag:k,props:{},children:[{type:b,value:G}]},{type:b,value:H}]},{type:a,tag:l,props:{code:n,language:I},children:[{type:a,tag:J,props:{},children:[{type:a,tag:l,props:{__ignoreMap:o},children:[{type:b,value:n}]}]}]}]},body:{type:w,children:[{type:a,tag:x,props:{},children:[{type:b,value:y},{type:a,tag:z,props:{href:A,rel:[B]},children:[{type:b,value:C}]},{type:b,value:D},{type:a,tag:k,props:{},children:[{type:b,value:E}]},{type:b,value:F},{type:a,tag:k,props:{},children:[{type:b,value:G}]},{type:b,value:H}]},{type:a,tag:l,props:{code:n,language:I},children:[{type:a,tag:J,props:{},children:[{type:a,tag:l,props:{__ignoreMap:o},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:"ct-c6123b"},children:[{type:b,value:"\u002F\u002F ~\u002Fserver\u002Fplugins\u002Fhighlight.ts"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:K},children:[{type:b,value:"export"}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:i}]},{type:a,tag:c,props:{class:K},children:[{type:b,value:"default"}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:i}]},{type:a,tag:c,props:{class:"ct-7463ea"},children:[{type:b,value:"defineNitroPlugin"}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"((nitroApp) "}]},{type:a,tag:c,props:{class:"ct-6bbaf8"},children:[{type:b,value:"=\u003E"}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:i}]},{type:a,tag:c,props:{class:p},children:[{type:b,value:"{"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" "}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"nitroApp"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"hooks"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:q},children:[{type:b,value:"hook"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:s},children:[{type:b,value:"\"content:file:beforeParse\""}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" "}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:"if"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" ("}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:t}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"_id"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:q},children:[{type:b,value:"endsWith"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:s},children:[{type:b,value:"\".md\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:")) {"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" "}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:t}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:L}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:"="}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:t}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:L}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:q},children:[{type:b,value:"replace"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:M}]},{type:a,tag:c,props:{class:N},children:[{type:b,value:"\u002F==("}]},{type:a,tag:c,props:{class:O},children:[{type:b,value:"["}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:"^"}]},{type:a,tag:c,props:{class:O},children:[{type:b,value:"=]"}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:"+"}]},{type:a,tag:c,props:{class:N},children:[{type:b,value:")==\u002F"}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:"gs"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:","}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:M}]},{type:a,tag:c,props:{class:s},children:[{type:b,value:"`\u003Cspan class=\"highlight\"\u003E$1\u003C\u002Fspan\u003E`"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" );"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" }"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" });"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:p},children:[{type:b,value:"}"}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:")"}]},{type:a,tag:c,props:{class:p},children:[{type:b,value:";"}]}]}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-2d19d9{color:#79C0FF}.ct-bbef30{color:#A5D6FF}.ct-2c63bf{color:#FF7B72}.ct-b25756{color:#A5D6FF}.ct-34b2ba{color:#D2A8FF}.ct-844015{color:#C9D1D9}.ct-b3c5b8{color:#C9D1D9}.ct-d99189{color:#C9D1D9}.ct-6bbaf8{color:#FF7B72}.ct-7463ea{color:#D2A8FF}.ct-246539{color:#FFA657}.ct-263241{color:#FF7B72}.ct-c6123b{color:#8B949E}.light .ct-c6123b{color:#93A1A1}.light .ct-263241{color:#859900}.light .ct-246539{color:#657B83}.light .ct-7463ea{color:#268BD2}.light .ct-6bbaf8{color:#073642}.light .ct-d99189{color:#657B83}.light .ct-b3c5b8{color:#657B83}.light .ct-844015{color:#268BD2}.light .ct-34b2ba{color:#268BD2}.light .ct-b25756{color:#2AA198}.light .ct-2c63bf{color:#859900}.light .ct-bbef30{color:#D30102}.light .ct-2d19d9{color:#CB4B16}"}]}],toc:{title:o,searchDepth:P,depth:P,links:[]}},_type:"markdown",_id:"content:Frontend:Vue:Make Nuxt handle Obsidian highlights.md",_source:"content",_file:"Frontend\u002FVue\u002FMake Nuxt handle Obsidian highlights.md",_extension:"md"}},prerenderedAt:1703695530531}}("element","text","span","ct-b3c5b8","line","ct-844015",".","ct-246539"," ","ct-2c63bf","code-inline","code",false,"\u002F\u002F ~\u002Fserver\u002Fplugins\u002Fhighlight.ts\nexport default defineNitroPlugin((nitroApp) =\u003E {\n nitroApp.hooks.hook(\"content:file:beforeParse\", (file) =\u003E {\n if (file._id.endsWith(\".md\")) {\n file.body = file.body.replace(\n \u002F==([^=]+)==\u002Fgs,\n `\u003Cspan class=\"highlight\"\u003E$1\u003C\u002Fspan\u003E`\n );\n }\n });\n});\n","","ct-d99189","ct-34b2ba","(","ct-b25756","file","Make Nuxt Handle Obsidian Highlights","\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights","root","p","By default ","a","https:\u002F\u002Fcontent.nuxtjs.org","nofollow","Nuxt Content Plugin"," not handling ","\u003Cspan class=\"highlight\"\u003Ehighlight\u003C\u002Fspan\u003E"," links. To fix that we will create ","Nitro"," plugin:","typescript","pre","ct-263241","body"," ","ct-bbef30","ct-2d19d9",2))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:u,_path:v}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-JZY9J7Y59r":{_path:v,_dir:"vue",_draft:m,_partial:m,_locale:"en",_empty:m,title:u,description:"By default Nuxt Content Plugin not handling \u003Cspan class=\"highlight\"\u003Ehighlight\u003C\u002Fspan\u003E links. To fix that we will create Nitro plugin:",excerpt:{type:w,children:[{type:a,tag:x,props:{},children:[{type:b,value:y},{type:a,tag:z,props:{href:A,rel:[B]},children:[{type:b,value:C}]},{type:b,value:D},{type:a,tag:k,props:{},children:[{type:b,value:E}]},{type:b,value:F},{type:a,tag:k,props:{},children:[{type:b,value:G}]},{type:b,value:H}]},{type:a,tag:l,props:{code:n,language:I},children:[{type:a,tag:J,props:{},children:[{type:a,tag:l,props:{__ignoreMap:o},children:[{type:b,value:n}]}]}]}]},body:{type:w,children:[{type:a,tag:x,props:{},children:[{type:b,value:y},{type:a,tag:z,props:{href:A,rel:[B]},children:[{type:b,value:C}]},{type:b,value:D},{type:a,tag:k,props:{},children:[{type:b,value:E}]},{type:b,value:F},{type:a,tag:k,props:{},children:[{type:b,value:G}]},{type:b,value:H}]},{type:a,tag:l,props:{code:n,language:I},children:[{type:a,tag:J,props:{},children:[{type:a,tag:l,props:{__ignoreMap:o},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:"ct-98fed0"},children:[{type:b,value:"\u002F\u002F ~\u002Fserver\u002Fplugins\u002Fhighlight.ts"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:K},children:[{type:b,value:"export"}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:i}]},{type:a,tag:c,props:{class:K},children:[{type:b,value:"default"}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:i}]},{type:a,tag:c,props:{class:"ct-b646cf"},children:[{type:b,value:"defineNitroPlugin"}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:"((nitroApp) "}]},{type:a,tag:c,props:{class:"ct-7405fe"},children:[{type:b,value:"=\u003E"}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:i}]},{type:a,tag:c,props:{class:p},children:[{type:b,value:"{"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" "}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"nitroApp"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"hooks"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:q},children:[{type:b,value:"hook"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:s},children:[{type:b,value:"\"content:file:beforeParse\""}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" "}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:"if"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" ("}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:t}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"_id"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:q},children:[{type:b,value:"endsWith"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:s},children:[{type:b,value:"\".md\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:")) {"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" "}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:t}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:L}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:"="}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:i}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:t}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:L}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:q},children:[{type:b,value:"replace"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:M}]},{type:a,tag:c,props:{class:N},children:[{type:b,value:"\u002F==("}]},{type:a,tag:c,props:{class:O},children:[{type:b,value:"["}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:"^"}]},{type:a,tag:c,props:{class:O},children:[{type:b,value:"=]"}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:"+"}]},{type:a,tag:c,props:{class:N},children:[{type:b,value:")==\u002F"}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:"gs"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:","}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:M}]},{type:a,tag:c,props:{class:s},children:[{type:b,value:"`\u003Cspan class=\"highlight\"\u003E$1\u003C\u002Fspan\u003E`"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" );"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" }"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" });"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:p},children:[{type:b,value:"}"}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:")"}]},{type:a,tag:c,props:{class:p},children:[{type:b,value:";"}]}]}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-ece131{color:#79C0FF}.ct-555ec3{color:#A5D6FF}.ct-73bf2a{color:#FF7B72}.ct-9cbfc0{color:#A5D6FF}.ct-c70e5a{color:#D2A8FF}.ct-1eb4c1{color:#C9D1D9}.ct-aee277{color:#C9D1D9}.ct-7b3d71{color:#C9D1D9}.ct-7405fe{color:#FF7B72}.ct-b646cf{color:#D2A8FF}.ct-8f9ec7{color:#FFA657}.ct-aa0bce{color:#FF7B72}.ct-98fed0{color:#8B949E}.light .ct-98fed0{color:#93A1A1}.light .ct-aa0bce{color:#859900}.light .ct-8f9ec7{color:#657B83}.light .ct-b646cf{color:#268BD2}.light .ct-7405fe{color:#073642}.light .ct-7b3d71{color:#657B83}.light .ct-aee277{color:#657B83}.light .ct-1eb4c1{color:#268BD2}.light .ct-c70e5a{color:#268BD2}.light .ct-9cbfc0{color:#2AA198}.light .ct-73bf2a{color:#859900}.light .ct-555ec3{color:#D30102}.light .ct-ece131{color:#CB4B16}"}]}],toc:{title:o,searchDepth:P,depth:P,links:[]}},_type:"markdown",_id:"content:Frontend:Vue:Make Nuxt handle Obsidian highlights.md",_source:"content",_file:"Frontend\u002FVue\u002FMake Nuxt handle Obsidian highlights.md",_extension:"md"}},prerenderedAt:1703697991911}}("element","text","span","ct-aee277","line","ct-1eb4c1",".","ct-8f9ec7"," ","ct-73bf2a","code-inline","code",false,"\u002F\u002F ~\u002Fserver\u002Fplugins\u002Fhighlight.ts\nexport default defineNitroPlugin((nitroApp) =\u003E {\n nitroApp.hooks.hook(\"content:file:beforeParse\", (file) =\u003E {\n if (file._id.endsWith(\".md\")) {\n file.body = file.body.replace(\n \u002F==([^=]+)==\u002Fgs,\n `\u003Cspan class=\"highlight\"\u003E$1\u003C\u002Fspan\u003E`\n );\n }\n });\n});\n","","ct-7b3d71","ct-c70e5a","(","ct-9cbfc0","file","Make Nuxt Handle Obsidian Highlights","\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights","root","p","By default ","a","https:\u002F\u002Fcontent.nuxtjs.org","nofollow","Nuxt Content Plugin"," not handling ","\u003Cspan class=\"highlight\"\u003Ehighlight\u003C\u002Fspan\u003E"," links. To fix that we will create ","Nitro"," plugin:","typescript","pre","ct-aa0bce","body"," ","ct-555ec3","ct-ece131",2))
\ No newline at end of file
diff --git a/docs/frontend/vue/make-nuxt-handle-obsidian-highlights/index.html b/docs/frontend/vue/make-nuxt-handle-obsidian-highlights/index.html
index 4a964c2..3dc9a1b 100644
--- a/docs/frontend/vue/make-nuxt-handle-obsidian-highlights/index.html
+++ b/docs/frontend/vue/make-nuxt-handle-obsidian-highlights/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Make Nuxt Handle Obsidian Highlights • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="By default Nuxt Content Plugin not handling <span class="highlight">highlight</span> links. To fix that we will create Nitro plugin:"><meta name="head:count" content="3"><link rel="modulepreload" href="/frontend/vue/make-nuxt-handle-obsidian-highlights/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCodeInline.d9bcf614.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseA.c52e44f8.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a aria-current="page" href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="router-link-active _active_192pu_81 _link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Make Nuxt Handle Obsidian Highlights</h1><article><div><p><!--[-->By default <a href="https://content.nuxtjs.org" rel="nofollow" target="_blank"><!--[-->Nuxt Content Plugin<!--]--></a> not handling <code><!--[--><span class="highlight">highlight</span><!--]--></code> links. To fix that we will create <code><!--[-->Nitro<!--]--></code> plugin:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-c6123b">// ~/server/plugins/highlight.ts</span></span><span class="line"><span class="ct-263241">export</span><span class="ct-246539"> </span><span class="ct-263241">default</span><span class="ct-246539"> </span><span class="ct-7463ea">defineNitroPlugin</span><span class="ct-246539">((nitroApp) </span><span class="ct-6bbaf8">=></span><span class="ct-246539"> </span><span class="ct-d99189">{</span></span><span class="line"><span class="ct-b3c5b8"> </span><span class="ct-844015">nitroApp</span><span class="ct-b3c5b8">.</span><span class="ct-844015">hooks</span><span class="ct-b3c5b8">.</span><span class="ct-34b2ba">hook</span><span class="ct-b3c5b8">(</span><span class="ct-b25756">"content:file:beforeParse"</span></span><span class="line"><span class="ct-b3c5b8"> </span><span class="ct-2c63bf">if</span><span class="ct-b3c5b8"> (</span><span class="ct-844015">file</span><span class="ct-b3c5b8">.</span><span class="ct-844015">_id</span><span class="ct-b3c5b8">.</span><span class="ct-34b2ba">endsWith</span><span class="ct-b3c5b8">(</span><span class="ct-b25756">".md"</span><span class="ct-b3c5b8">)) {</span></span><span class="line"><span class="ct-b3c5b8"> </span><span class="ct-844015">file</span><span class="ct-b3c5b8">.</span><span class="ct-844015">body</span><span class="ct-b3c5b8"> </span><span class="ct-2c63bf">=</span><span class="ct-b3c5b8"> </span><span class="ct-844015">file</span><span class="ct-b3c5b8">.</span><span class="ct-844015">body</span><span class="ct-b3c5b8">.</span><span class="ct-34b2ba">replace</span><span class="ct-b3c5b8">(</span></span><span class="line"><span class="ct-b3c5b8"> </span><span class="ct-bbef30">/==(</span><span class="ct-2d19d9">[</span><span class="ct-2c63bf">^</span><span class="ct-2d19d9">=]</span><span class="ct-2c63bf">+</span><span class="ct-bbef30">)==/</span><span class="ct-2c63bf">gs</span><span class="ct-b3c5b8">,</span></span><span class="line"><span class="ct-b3c5b8"> </span><span class="ct-b25756">`<span class="highlight">$1</span>`</span></span><span class="line"><span class="ct-b3c5b8"> );</span></span><span class="line"><span class="ct-b3c5b8"> }</span></span><span class="line"><span class="ct-b3c5b8"> });</span></span><span class="line"><span class="ct-d99189">}</span><span class="ct-246539">)</span><span class="ct-d99189">;</span></span></code></pre><!--]--></div><style>.ct-2d19d9{color:#79C0FF}.ct-bbef30{color:#A5D6FF}.ct-2c63bf{color:#FF7B72}.ct-b25756{color:#A5D6FF}.ct-34b2ba{color:#D2A8FF}.ct-844015{color:#C9D1D9}.ct-b3c5b8{color:#C9D1D9}.ct-d99189{color:#C9D1D9}.ct-6bbaf8{color:#FF7B72}.ct-7463ea{color:#D2A8FF}.ct-246539{color:#FFA657}.ct-263241{color:#FF7B72}.ct-c6123b{color:#8B949E}.light .ct-c6123b{color:#93A1A1}.light .ct-263241{color:#859900}.light .ct-246539{color:#657B83}.light .ct-7463ea{color:#268BD2}.light .ct-6bbaf8{color:#073642}.light .ct-d99189{color:#657B83}.light .ct-b3c5b8{color:#657B83}.light .ct-844015{color:#268BD2}.light .ct-34b2ba{color:#268BD2}.light .ct-b25756{color:#2AA198}.light .ct-2c63bf{color:#859900}.light .ct-bbef30{color:#D30102}.light .ct-2d19d9{color:#CB4B16}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/frontend/vue/make-nuxt-handle-obsidian-highlights/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695530531}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a aria-current="page" href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="router-link-active _active_192pu_81 _link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Make Nuxt Handle Obsidian Highlights</h1><article><div><p><!--[-->By default <a href="https://content.nuxtjs.org" rel="nofollow" target="_blank"><!--[-->Nuxt Content Plugin<!--]--></a> not handling <code><!--[--><span class="highlight">highlight</span><!--]--></code> links. To fix that we will create <code><!--[-->Nitro<!--]--></code> plugin:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-98fed0">// ~/server/plugins/highlight.ts</span></span><span class="line"><span class="ct-aa0bce">export</span><span class="ct-8f9ec7"> </span><span class="ct-aa0bce">default</span><span class="ct-8f9ec7"> </span><span class="ct-b646cf">defineNitroPlugin</span><span class="ct-8f9ec7">((nitroApp) </span><span class="ct-7405fe">=></span><span class="ct-8f9ec7"> </span><span class="ct-7b3d71">{</span></span><span class="line"><span class="ct-aee277"> </span><span class="ct-1eb4c1">nitroApp</span><span class="ct-aee277">.</span><span class="ct-1eb4c1">hooks</span><span class="ct-aee277">.</span><span class="ct-c70e5a">hook</span><span class="ct-aee277">(</span><span class="ct-9cbfc0">"content:file:beforeParse"</span></span><span class="line"><span class="ct-aee277"> </span><span class="ct-73bf2a">if</span><span class="ct-aee277"> (</span><span class="ct-1eb4c1">file</span><span class="ct-aee277">.</span><span class="ct-1eb4c1">_id</span><span class="ct-aee277">.</span><span class="ct-c70e5a">endsWith</span><span class="ct-aee277">(</span><span class="ct-9cbfc0">".md"</span><span class="ct-aee277">)) {</span></span><span class="line"><span class="ct-aee277"> </span><span class="ct-1eb4c1">file</span><span class="ct-aee277">.</span><span class="ct-1eb4c1">body</span><span class="ct-aee277"> </span><span class="ct-73bf2a">=</span><span class="ct-aee277"> </span><span class="ct-1eb4c1">file</span><span class="ct-aee277">.</span><span class="ct-1eb4c1">body</span><span class="ct-aee277">.</span><span class="ct-c70e5a">replace</span><span class="ct-aee277">(</span></span><span class="line"><span class="ct-aee277"> </span><span class="ct-555ec3">/==(</span><span class="ct-ece131">[</span><span class="ct-73bf2a">^</span><span class="ct-ece131">=]</span><span class="ct-73bf2a">+</span><span class="ct-555ec3">)==/</span><span class="ct-73bf2a">gs</span><span class="ct-aee277">,</span></span><span class="line"><span class="ct-aee277"> </span><span class="ct-9cbfc0">`<span class="highlight">$1</span>`</span></span><span class="line"><span class="ct-aee277"> );</span></span><span class="line"><span class="ct-aee277"> }</span></span><span class="line"><span class="ct-aee277"> });</span></span><span class="line"><span class="ct-7b3d71">}</span><span class="ct-8f9ec7">)</span><span class="ct-7b3d71">;</span></span></code></pre><!--]--></div><style>.ct-ece131{color:#79C0FF}.ct-555ec3{color:#A5D6FF}.ct-73bf2a{color:#FF7B72}.ct-9cbfc0{color:#A5D6FF}.ct-c70e5a{color:#D2A8FF}.ct-1eb4c1{color:#C9D1D9}.ct-aee277{color:#C9D1D9}.ct-7b3d71{color:#C9D1D9}.ct-7405fe{color:#FF7B72}.ct-b646cf{color:#D2A8FF}.ct-8f9ec7{color:#FFA657}.ct-aa0bce{color:#FF7B72}.ct-98fed0{color:#8B949E}.light .ct-98fed0{color:#93A1A1}.light .ct-aa0bce{color:#859900}.light .ct-8f9ec7{color:#657B83}.light .ct-b646cf{color:#268BD2}.light .ct-7405fe{color:#073642}.light .ct-7b3d71{color:#657B83}.light .ct-aee277{color:#657B83}.light .ct-1eb4c1{color:#268BD2}.light .ct-c70e5a{color:#268BD2}.light .ct-9cbfc0{color:#2AA198}.light .ct-73bf2a{color:#859900}.light .ct-555ec3{color:#D30102}.light .ct-ece131{color:#CB4B16}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/frontend/vue/make-nuxt-handle-obsidian-highlights/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697991911}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/frontend/webgl/basics-of-webgl-(drawing-a-cube)/_payload.js b/docs/frontend/webgl/basics-of-webgl-(drawing-a-cube)/_payload.js
index b5f7d9a..1113fad 100644
--- a/docs/frontend/webgl/basics-of-webgl-(drawing-a-cube)/_payload.js
+++ b/docs/frontend/webgl/basics-of-webgl-(drawing-a-cube)/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av,aw,ax,ay,az,aA,aB,aC,aD,aE,aF,aG,aH,aI,aJ,aK,aL,aM,aN,aO,aP,aQ,aR,aS,aT,aU,aV,aW,aX,aY,aZ,a_,a$,ba,bb,bc,bd,be,bf,bg,bh,bi,bj,bk,bl,bm,bn,bo,bp,bq,br,bs,bt,bu,bv,bw,bx,by,bz,bA,bB,bC,bD,bE,bF,bG,bH,bI,bJ,bK,bL,bM,bN,bO,bP,bQ,bR,bS,bT,bU,bV,bW,bX,bY,bZ,b_,b$,ca,cb,cc,cd,ce,cf,cg,ch,ci,cj,ck,cl,cm,cn,co,cp,cq,cr,cs,ct,cu,cv,cw,cx,cy,cz,cA,cB,cC,cD,cE,cF,cG,cH,cI,cJ,cK,cL,cM,cN,cO){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:bs,_path:bt},{title:K,_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:F,_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-8rrGOHb5uL":{_path:bt,_dir:"webgl",_draft:aH,_partial:aH,_locale:"en",_empty:aH,title:bs,description:I,excerpt:{type:bu,children:[{type:a,tag:y,props:{id:aI},children:[{type:c,value:aJ}]},{type:a,tag:bv,props:{},children:[{type:a,tag:ai,props:{},children:[{type:a,tag:u,props:{href:aj,rel:[P]},children:[{type:c,value:aj}]}]},{type:a,tag:ai,props:{},children:[{type:c,value:bw},{type:a,tag:u,props:{href:bx,rel:[P]},children:[{type:c,value:by}]},{type:c,value:g},{type:a,tag:u,props:{href:bz,rel:[P]},children:[{type:c,value:bA}]},{type:c,value:g},{type:a,tag:u,props:{href:bB,rel:[P]},children:[{type:c,value:bC}]}]}]},{type:a,tag:y,props:{id:aK},children:[{type:c,value:aL}]},{type:a,tag:w,props:{},children:[{type:a,tag:D,props:{},children:[{type:c,value:ak}]},{type:c,value:bD},{type:a,tag:E,props:{},children:[{type:c,value:bE}]},{type:c,value:bF},{type:a,tag:D,props:{},children:[{type:c,value:al}]},{type:c,value:bG},{type:a,tag:D,props:{},children:[{type:c,value:T}]},{type:c,value:k}]},{type:a,tag:y,props:{id:aM},children:[{type:c,value:aN}]},{type:a,tag:w,props:{},children:[{type:c,value:bH}]},{type:a,tag:w,props:{},children:[{type:a,tag:u,props:{href:J},children:[{type:c,value:F}]},{type:c,value:bI},{type:a,tag:D,props:{},children:[{type:c,value:bJ}]},{type:c,value:bK},{type:a,tag:D,props:{},children:[{type:c,value:T}]},{type:c,value:bL}]},{type:a,tag:w,props:{},children:[{type:a,tag:u,props:{href:Q},children:[{type:c,value:K}]},{type:c,value:bM}]},{type:a,tag:w,props:{},children:[{type:c,value:bN},{type:a,tag:E,props:{},children:[{type:c,value:am}]},{type:c,value:g},{type:a,tag:E,props:{},children:[{type:c,value:W}]},{type:c,value:X},{type:a,tag:E,props:{},children:[{type:c,value:bO}]},{type:c,value:bP},{type:a,tag:u,props:{href:Q},children:[{type:c,value:K}]},{type:c,value:bQ},{type:a,tag:u,props:{href:J},children:[{type:c,value:F}]},{type:c,value:bR},{type:a,tag:E,props:{},children:[{type:c,value:W}]},{type:c,value:an}]},{type:a,tag:w,props:{},children:[{type:a,tag:bS,props:{alt:I,src:bT},children:[]}]},{type:a,tag:y,props:{id:aO},children:[{type:c,value:aP}]},{type:a,tag:w,props:{},children:[{type:c,value:bU},{type:a,tag:D,props:{},children:[{type:c,value:ak}]},{type:c,value:g},{type:a,tag:D,props:{},children:[{type:c,value:bV}]},{type:c,value:bW},{type:a,tag:u,props:{href:J},children:[{type:c,value:F}]},{type:c,value:X},{type:a,tag:u,props:{href:Q},children:[{type:c,value:K}]},{type:c,value:k}]},{type:a,tag:y,props:{id:aQ},children:[{type:c,value:aR}]},{type:a,tag:w,props:{},children:[{type:c,value:bX},{type:a,tag:u,props:{href:J},children:[{type:c,value:F}]},{type:c,value:bY},{type:a,tag:u,props:{href:Q},children:[{type:c,value:K}]},{type:c,value:bZ},{type:a,tag:E,props:{},children:[{type:c,value:am}]},{type:c,value:X},{type:a,tag:E,props:{},children:[{type:c,value:W}]},{type:c,value:an}]},{type:a,tag:w,props:{},children:[{type:c,value:b_},{type:a,tag:u,props:{href:b$,rel:[P]},children:[{type:c,value:ca}]},{type:c,value:cb},{type:a,tag:u,props:{href:J},children:[{type:c,value:F}]},{type:c,value:k}]},{type:a,tag:y,props:{id:aS},children:[{type:c,value:aT}]},{type:a,tag:A,props:{code:aU,language:ao},children:[{type:a,tag:R,props:{},children:[{type:a,tag:A,props:{__ignoreMap:I},children:[{type:c,value:aU}]}]}]},{type:a,tag:y,props:{id:aV},children:[{type:c,value:aW}]},{type:a,tag:A,props:{code:aX,language:ao},children:[{type:a,tag:R,props:{},children:[{type:a,tag:A,props:{__ignoreMap:I},children:[{type:c,value:aX}]}]}]},{type:a,tag:y,props:{id:aY},children:[{type:c,value:aZ}]},{type:a,tag:w,props:{},children:[{type:c,value:ap},{type:a,tag:u,props:{href:J},children:[{type:c,value:F}]}]},{type:a,tag:A,props:{code:a_,language:aq},children:[{type:a,tag:R,props:{},children:[{type:a,tag:A,props:{__ignoreMap:I},children:[{type:c,value:a_}]}]}]},{type:a,tag:y,props:{id:a$},children:[{type:c,value:ba}]},{type:a,tag:w,props:{},children:[{type:c,value:ap},{type:a,tag:u,props:{href:Q},children:[{type:c,value:K}]},{type:c,value:k}]},{type:a,tag:A,props:{code:bb,language:aq},children:[{type:a,tag:R,props:{},children:[{type:a,tag:A,props:{__ignoreMap:I},children:[{type:c,value:bb}]}]}]}]},body:{type:bu,children:[{type:a,tag:y,props:{id:aI},children:[{type:c,value:aJ}]},{type:a,tag:bv,props:{},children:[{type:a,tag:ai,props:{},children:[{type:a,tag:u,props:{href:aj,rel:[P]},children:[{type:c,value:aj}]}]},{type:a,tag:ai,props:{},children:[{type:c,value:bw},{type:a,tag:u,props:{href:bx,rel:[P]},children:[{type:c,value:by}]},{type:c,value:g},{type:a,tag:u,props:{href:bz,rel:[P]},children:[{type:c,value:bA}]},{type:c,value:g},{type:a,tag:u,props:{href:bB,rel:[P]},children:[{type:c,value:bC}]}]}]},{type:a,tag:y,props:{id:aK},children:[{type:c,value:aL}]},{type:a,tag:w,props:{},children:[{type:a,tag:D,props:{},children:[{type:c,value:ak}]},{type:c,value:bD},{type:a,tag:E,props:{},children:[{type:c,value:bE}]},{type:c,value:bF},{type:a,tag:D,props:{},children:[{type:c,value:al}]},{type:c,value:bG},{type:a,tag:D,props:{},children:[{type:c,value:T}]},{type:c,value:k}]},{type:a,tag:y,props:{id:aM},children:[{type:c,value:aN}]},{type:a,tag:w,props:{},children:[{type:c,value:bH}]},{type:a,tag:w,props:{},children:[{type:a,tag:u,props:{href:J},children:[{type:c,value:F}]},{type:c,value:bI},{type:a,tag:D,props:{},children:[{type:c,value:bJ}]},{type:c,value:bK},{type:a,tag:D,props:{},children:[{type:c,value:T}]},{type:c,value:bL}]},{type:a,tag:w,props:{},children:[{type:a,tag:u,props:{href:Q},children:[{type:c,value:K}]},{type:c,value:bM}]},{type:a,tag:w,props:{},children:[{type:c,value:bN},{type:a,tag:E,props:{},children:[{type:c,value:am}]},{type:c,value:g},{type:a,tag:E,props:{},children:[{type:c,value:W}]},{type:c,value:X},{type:a,tag:E,props:{},children:[{type:c,value:bO}]},{type:c,value:bP},{type:a,tag:u,props:{href:Q},children:[{type:c,value:K}]},{type:c,value:bQ},{type:a,tag:u,props:{href:J},children:[{type:c,value:F}]},{type:c,value:bR},{type:a,tag:E,props:{},children:[{type:c,value:W}]},{type:c,value:an}]},{type:a,tag:w,props:{},children:[{type:a,tag:bS,props:{alt:I,src:bT},children:[]}]},{type:a,tag:y,props:{id:aO},children:[{type:c,value:aP}]},{type:a,tag:w,props:{},children:[{type:c,value:bU},{type:a,tag:D,props:{},children:[{type:c,value:ak}]},{type:c,value:g},{type:a,tag:D,props:{},children:[{type:c,value:bV}]},{type:c,value:bW},{type:a,tag:u,props:{href:J},children:[{type:c,value:F}]},{type:c,value:X},{type:a,tag:u,props:{href:Q},children:[{type:c,value:K}]},{type:c,value:k}]},{type:a,tag:y,props:{id:aQ},children:[{type:c,value:aR}]},{type:a,tag:w,props:{},children:[{type:c,value:bX},{type:a,tag:u,props:{href:J},children:[{type:c,value:F}]},{type:c,value:bY},{type:a,tag:u,props:{href:Q},children:[{type:c,value:K}]},{type:c,value:bZ},{type:a,tag:E,props:{},children:[{type:c,value:am}]},{type:c,value:X},{type:a,tag:E,props:{},children:[{type:c,value:W}]},{type:c,value:an}]},{type:a,tag:w,props:{},children:[{type:c,value:b_},{type:a,tag:u,props:{href:b$,rel:[P]},children:[{type:c,value:ca}]},{type:c,value:cb},{type:a,tag:u,props:{href:J},children:[{type:c,value:F}]},{type:c,value:k}]},{type:a,tag:y,props:{id:aS},children:[{type:c,value:aT}]},{type:a,tag:A,props:{code:aU,language:ao},children:[{type:a,tag:R,props:{},children:[{type:a,tag:A,props:{__ignoreMap:I},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F render-a-cube.ts"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:bc}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" { "}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" } "}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:bd}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"\".\u002Fcreate-shader\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:bc}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:cc}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:bd}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"\".\u002Fvertex.glsl?raw\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:bc}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:cd}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:bd}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"\".\u002Ffragment.glsl?raw\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:v},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:ce}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"document"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"getElementyId"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"'view'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:v},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:cf}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ce}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"getRenderingContext"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"'webgl'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F should be put inside requestAnimationFrame"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:n},children:[{type:c,value:cg}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:cf}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:")(); "}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:v},children:[{type:c,value:"function"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cg}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:U}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:z},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:Y},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:Z},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:ch},children:[{type:c,value:ci}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:g}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:z},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:Y},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:Z},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:as},children:[{type:c,value:be}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:M}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:z},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:Y},children:[{type:c,value:at}]},{type:a,tag:b,props:{class:Z},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:as},children:[{type:c,value:be}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:au}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F Initializing viewport"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cj}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:at}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:ck}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cl}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:cm}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"createProgram"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bf}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:av}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:au}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:ae},children:[{type:c,value:bg}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"\"Can't init programm\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ax}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F Setting up VERTEX and FRAGMENT shaders"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:cn}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:cc}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"VERTEX_SHADER"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:co}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:cn}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:cp}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:cd}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"FRAGMENT_SHADER"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:co}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:cp}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"linkProgram"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:av}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"getProgramParameter"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"LINK_STATUS"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:cq}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:ae},children:[{type:c,value:bg}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"\"Could not initialise shaders\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ax}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F Cube's vertices Array\u003C[x,y,z]\u003E, 8 items"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:al}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:cr}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F 0"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bh}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F 1"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bi}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F 2"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bh}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F 3"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bh}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F 4"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bi}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F 5"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:", "}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F 6"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bi}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F 7"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cs}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F indices, that form triangles, that form cube sides"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:cr}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:af}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F side 0 (first triangle)"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ay}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:af}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F side 0 (second triangle)"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:az}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ag}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F side 1 (first triangle)"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ag}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ay}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F side 1 (second triangle)"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:aA}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F ..."}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:aA}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:az}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:af}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ah}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ah}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:aA}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:af}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ay}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ag}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ag}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ah}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:af}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:az}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:aA}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ah}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ah}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ag}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:az}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:M}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cs}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F createe a vertex buffer and bind vertices to it"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:bj}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:ct}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bf}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:aB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:bj}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cu}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:aB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:ae},children:[{type:c,value:"Float32Array"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:al}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aC}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:cv}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:aB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:bk},children:[{type:c,value:cw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F create a vertex buffer and bind indices to it"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:bl}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:ct}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bf}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:aD}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:bl}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cu}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:aD}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:M}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:ae},children:[{type:c,value:"Uint16Array"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"),"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:cv}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bm}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:aD}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:bk},children:[{type:c,value:cw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F initial drawing"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:ck}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:bn}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:bn}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:bn}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"enable"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"DEPTH_TEST"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cl}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:cm}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"|"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"DEPTH_BUFFER_BIT"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cj}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:at}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F bind squareVertexBuffer as vertex positions buffer"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:aB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:bj}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F send every 3 bytes from squareVertexBuffer as {x,y,z} for each verticle"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"vertexAttribPointer"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cx}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:cy}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aC}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ay}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F 3 bytes-long"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"FLOAT"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:M}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:bk},children:[{type:c,value:"false"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F don't normalize (int to float)"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bm}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F send vertice buffer as `aVertexPosition` attribute inside vertex shader"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"enableVertexAttribArray"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cx}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:cy}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:")"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bm}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:cz}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aE}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:cz}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aF}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"0.01"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F that's the main rendering callback"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:cA}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" () "}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:cB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:cC}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"useProgram"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:bo}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aE}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:bp}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"0.25"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F used for scaling inside Vertex Shader"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cD}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cE}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"\"slide\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aC}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:bo}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F GL Screen is square, so we need to fix it's aspect ration"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cD}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cE}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"\"aspect\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aC}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:at}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"\u002F"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:aD}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:bl}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cF}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"drawElements"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"TRIANGLES"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:T}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"UNSIGNED_SHORT"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:M}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cF}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aE}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"\u003E"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"||"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:au}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aF}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aF}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aE}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"+="}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aF}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" };"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cG}]}]}]}]}]},{type:a,tag:y,props:{id:aV},children:[{type:c,value:aW}]},{type:a,tag:A,props:{code:aX,language:ao},children:[{type:a,tag:R,props:{},children:[{type:a,tag:A,props:{__ignoreMap:I},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F create-shader.ts"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:"export"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:U}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:z},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:Y},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:Z},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:ch},children:[{type:c,value:ci}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:M}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:z},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:Y},children:[{type:c,value:cH}]},{type:a,tag:b,props:{class:Z},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:as},children:[{type:c,value:"string"}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:M}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:z},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:Y},children:[{type:c,value:cI}]},{type:a,tag:b,props:{class:Z},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:as},children:[{type:c,value:be}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:"ct-b23b27"},children:[{type:c,value:"\u002F\u002F gl.VERTEX_SHADER or gl.FRAGMENT_SHADER"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:") "}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:cB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:cC}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:cI}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:av}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:au}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:ae},children:[{type:c,value:bg}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"`Can't init shader`"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ax}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"shaderSource"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:cH}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"compileShader"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:av}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"getShaderParameter"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"COMPILE_STATUS"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:cq}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:cJ}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"getShaderInfoLog"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"`Could not compile WebGL program. "}]},{type:a,tag:b,props:{class:"ct-814214"},children:[{type:c,value:"\\n\\n"}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"${"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:cJ}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"}`"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ax}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:cA}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cG}]}]}]}]}]},{type:a,tag:y,props:{id:aY},children:[{type:c,value:aZ}]},{type:a,tag:w,props:{},children:[{type:c,value:ap},{type:a,tag:u,props:{href:J},children:[{type:c,value:F}]}]},{type:a,tag:A,props:{code:a_,language:aq},children:[{type:a,tag:R,props:{},children:[{type:a,tag:A,props:{__ignoreMap:I},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F current vertice position {x,y,z,w}"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"attribute vec4 aVertexPosition;"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F final vertice position with all transformations applied,"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F that will be passed to Fragment Shader"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cK}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F Parameters passed from Javascript loop"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cL}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:bq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" slide;"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cL}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:bq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" aspect;"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:v},children:[{type:c,value:br}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cM}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"(){"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F float array of 4 elements, same as [slide,slide,slide,1]"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" vec4 scale"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:aG}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cN}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"(slide),"}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F float array of 4 elements, same as [aspect,1,1,1]"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" vec4 aspectRatioFix"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:aG}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"(aspect,"}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cN}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"));"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F vertice position, multiplied with matrices of scale and aspect ratio"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" gl_Position"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"aVertexPosition"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:bp}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bo}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:bp}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"aspectRatioFix,"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F vertice offset, that will be passed to fragment shader"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" v_positionWithOffset"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"gl_Position"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"+"}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:aG}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cO}]}]}]}]}]},{type:a,tag:y,props:{id:a$},children:[{type:c,value:ba}]},{type:a,tag:w,props:{},children:[{type:c,value:ap},{type:a,tag:u,props:{href:Q},children:[{type:c,value:K}]},{type:c,value:k}]},{type:a,tag:A,props:{code:bb,language:aq},children:[{type:a,tag:R,props:{},children:[{type:a,tag:A,props:{__ignoreMap:I},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"precision highp "}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:bq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F parameter from Vertex Shader"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cK}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:v},children:[{type:c,value:br}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cM}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:br}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"){"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F color, attached to current verticle {r,g,b,alpha}"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F same a["}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F v_positionWithOffset.x,"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F v_positionWithOffset.y, "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F v_positionWithOffset.z, "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F 1"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F ]"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" gl_FragColor"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:aG}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"v_positionWithOffset"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"xyz"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cO}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-814214{color:#79C0FF}.ct-b23b27{color:#8B949E}.ct-336e7b{color:#79C0FF}.ct-65a97f{color:#79C0FF}.ct-b68eea{color:#79C0FF}.ct-08630c{color:#79C0FF}.ct-feb2dc{color:#FFA657}.ct-80e1b8{color:#FF7B72}.ct-6cdf8d{color:#FFA657}.ct-8eb92a{color:#C9D1D9}.ct-2909a9{color:#D2A8FF}.ct-b321a9{color:#79C0FF}.ct-20ed3f{color:#FF7B72}.ct-2e53f1{color:#A5D6FF}.ct-a7c351{color:#C9D1D9}.ct-6c11ea{color:#C9D1D9}.ct-0c8b20{color:#FF7B72}.ct-337041{color:#8B949E}.light .ct-337041{color:#93A1A1}.light .ct-0c8b20{color:#859900}.light .ct-6c11ea{color:#657B83}.light .ct-a7c351{color:#268BD2}.light .ct-2e53f1{color:#2AA198}.light .ct-20ed3f{color:#073642}.light .ct-b321a9{color:#268BD2}.light .ct-2909a9{color:#268BD2}.light .ct-8eb92a{color:#657B83}.light .ct-6cdf8d{color:#657B83}.light .ct-80e1b8{color:#859900}.light .ct-feb2dc{color:#268BD2}.light .ct-08630c{color:#859900}.light .ct-b68eea{color:#D33682}.light .ct-65a97f{color:#859900}.light .ct-336e7b{color:#B58900}.light .ct-b23b27{color:#93A1A1}.light .ct-814214{color:#CB4B16}"}]}],toc:{title:I,searchDepth:O,depth:O,links:[{id:aI,depth:O,text:aJ},{id:aK,depth:O,text:aL},{id:aM,depth:O,text:aN},{id:aO,depth:O,text:aP},{id:aQ,depth:O,text:aR},{id:aS,depth:O,text:aT},{id:aV,depth:O,text:aW},{id:aY,depth:O,text:aZ},{id:a$,depth:O,text:ba}]}},_type:"markdown",_id:"content:Frontend:WebGL:Basics of WebGL (Drawing a Cube).md",_source:"content",_file:"Frontend\u002FWebGL\u002FBasics of WebGL (Drawing a Cube).md",_extension:"md"}},prerenderedAt:1703695530558}}("element","span","text","ct-6c11ea","line","ct-a7c351",", "," ","ct-b68eea","ct-0c8b20","."," ","gl","ct-2909a9","(","ct-337041"," ","1","ct-b321a9",");","a","ct-20ed3f","p","=","h2","ct-8eb92a","code","0","ct-2e53f1","strong","code-inline","Vertex Shaders","const","-","","Vertex%20Shaders","Fragment Shaders",";",",","prg",2,"nofollow","Fragment%20Shaders","pre"," ","indices"," (","shader","varyings"," and ","ct-6cdf8d","ct-80e1b8",":","bindBuffer"," ","createShader","if","new","ct-65a97f","2","7","6","li","https:\u002F\u002Fopen.gl\u002F","Vertices","vertices","uniforms",").","typescript","Read more at ","c","width","ct-08630c","height",") {","!","throw"," }","3","4","5","ARRAY_BUFFER","), ","ELEMENT_ARRAY_BUFFER","i","speed","vec4",false,"helpful-documentation","Helpful documentation","vertices-and-indices","Vertices and Indices","shaders","Shaders","program","Program","applying-transformations","Applying transformations","source-code-with-explanations","Source code with explanations","\u002F\u002F render-a-cube.ts\nimport { createShader } from \".\u002Fcreate-shader\";\nimport vxShader from \".\u002Fvertex.glsl?raw\";\nimport fgShader from \".\u002Ffragment.glsl?raw\";\n\nconst canvas = document.getElementyId('view');\nconst ctx = canvas.getRenderingContext('webgl');\n\n\u002F\u002F should be put inside requestAnimationFrame\ndrawCube(ctx)(); \n\nfunction drawCube (\n gl: WebGL2RenderingContext, \n width: number,\n height: number\n) {\n \u002F\u002F Initializing viewport\n gl.viewport(0, 0, width, height);\n gl.clearColor(0, 0, 0, 0);\n gl.clear(gl.COLOR_BUFFER_BIT);\n\n const prg = gl.createProgram();\n if (!prg) {\n throw new Error(\"Can't init programm\");\n }\n\n \u002F\u002F Setting up VERTEX and FRAGMENT shaders\n const vx = createShader(gl, vxShader, gl.VERTEX_SHADER);\n gl.attachShader(prg, vx);\n const fx = createShader(gl, fgShader, gl.FRAGMENT_SHADER);\n gl.attachShader(prg, fx);\n gl.linkProgram(prg);\n if (!gl.getProgramParameter(prg, gl.LINK_STATUS)) {\n throw new Error(\"Could not initialise shaders\");\n }\n\n \u002F\u002F Cube's vertices Array\u003C[x,y,z]\u003E, 8 items\n const vertices = [\n -1, -1, -1, \u002F\u002F 0\n 1, -1, -1, \u002F\u002F 1\n 1, 1, -1, \u002F\u002F 2\n -1, 1, -1, \u002F\u002F 3\n -1, -1, 1, \u002F\u002F 4\n 1, -1, 1, \u002F\u002F 5\n 1, 1, 1, \u002F\u002F 6\n -1, 1, 1, \u002F\u002F 7\n ];\n\n \u002F\u002F indices, that form triangles, that form cube sides\n const indices = [\n 2, 1, 0, \u002F\u002F side 0 (first triangle)\n 0, 3, 2, \u002F\u002F side 0 (second triangle)\n 0, 4, 7, \u002F\u002F side 1 (first triangle)\n 7, 3, 0, \u002F\u002F side 1 (second triangle)\n 0, 1, 5, \u002F\u002F ...\n 5, 4, 0, \n 1, 2, 6, \n 6, 5, 1, \n 2, 3, 7, \n 7, 6, 2, \n 4, 5, 6, \n 6, 7, 4,\n ];\n\n \u002F\u002F createe a vertex buffer and bind vertices to it\n const squareVertexBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);\n gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);\n gl.bindBuffer(gl.ARRAY_BUFFER, null);\n\n \u002F\u002F create a vertex buffer and bind indices to it\n const squareIndexBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, squareIndexBuffer);\n gl.bufferData(\n gl.ELEMENT_ARRAY_BUFFER,\n new Uint16Array(indices),\n gl.STATIC_DRAW\n );\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);\n\n \u002F\u002F initial drawing\n gl.clearColor(0.0, 0.0, 0.0, 0.0);\n gl.enable(gl.DEPTH_TEST);\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n gl.viewport(0, 0, width, height);\n\n \u002F\u002F bind squareVertexBuffer as vertex positions buffer\n gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);\n \n \u002F\u002F send every 3 bytes from squareVertexBuffer as {x,y,z} for each verticle\n gl.vertexAttribPointer(\n gl.getAttribLocation(prg, \"aVertexPosition\"), \n 3, \u002F\u002F 3 bytes-long\n gl.FLOAT,\n false, \u002F\u002F don't normalize (int to float)\n 0, \n 0\n );\n \u002F\u002F send vertice buffer as `aVertexPosition` attribute inside vertex shader\n gl.enableVertexAttribArray(\n gl.getAttribLocation(prg, \"aVertexPosition\")\n );\n\n let i = 0;\n let speed = 0.01;\n\n \u002F\u002F that's the main rendering callback\n return () =\u003E {\n gl.useProgram(prg);\n\n const scale = i * 0.25 + 0.25;\n\n \u002F\u002F used for scaling inside Vertex Shader\n gl.uniform1f(gl.getUniformLocation(prg, \"slide\"), scale);\n \u002F\u002F GL Screen is square, so we need to fix it's aspect ration\n gl.uniform1f(gl.getUniformLocation(prg, \"aspect\"), height \u002F width);\n\n gl.bindBuffer(\n gl.ELEMENT_ARRAY_BUFFER, \n squareIndexBuffer\n );\n \n gl.drawElements(\n gl.TRIANGLES, \n indices.length, \n gl.UNSIGNED_SHORT, \n 0,\n );\n\n if (i \u003E 1 || i \u003C 0) {\n speed = -speed;\n }\n\n i += speed;\n };\n};\n","shader-compiler","Shader compiler","\u002F\u002F create-shader.ts\nexport const createShader = (\n gl: WebGL2RenderingContext,\n sourceCode: string,\n type: number, \u002F\u002F gl.VERTEX_SHADER or gl.FRAGMENT_SHADER\n) =\u003E {\n const shader = gl.createShader(type);\n if (!shader) {\n throw new Error(`Can't init shader`);\n }\n\n gl.shaderSource(shader, sourceCode);\n gl.compileShader(shader);\n\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n const info = gl.getShaderInfoLog(shader);\n throw `Could not compile WebGL program. \\n\\n${info}`;\n }\n\n return shader;\n};\n","vertex-shader-example","Vertex Shader Example","\u002F\u002F current vertice position {x,y,z,w}\nattribute vec4 aVertexPosition;\n\u002F\u002F final vertice position with all transformations applied,\n\u002F\u002F that will be passed to Fragment Shader\nvarying vec4 v_positionWithOffset;\n\u002F\u002F Parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(){\n \u002F\u002F float array of 4 elements, same as [slide,slide,slide,1]\n vec4 scale=vec4(vec3(slide),1);\n \u002F\u002F float array of 4 elements, same as [aspect,1,1,1]\n vec4 aspectRatioFix=vec4(aspect,vec3(1));\n \u002F\u002F vertice position, multiplied with matrices of scale and aspect ratio\n gl_Position=aVertexPosition*scale*aspectRatioFix,\n \u002F\u002F vertice offset, that will be passed to fragment shader\n v_positionWithOffset=gl_Position+vec4(1,1,1,1);\n}\n","fragment-shader-example","Fragment Shader Example","precision highp float;\n\n\u002F\u002F parameter from Vertex Shader\nvarying vec4 v_positionWithOffset;\n\nvoid main(void){\n \u002F\u002F color, attached to current verticle {r,g,b,alpha}\n \u002F\u002F same a[\n \u002F\u002F v_positionWithOffset.x,\n \u002F\u002F v_positionWithOffset.y, \n \u002F\u002F v_positionWithOffset.z, \n \u002F\u002F 1\n \u002F\u002F ]\n gl_FragColor=vec4(v_positionWithOffset.xyz,1);\n}\n","import","from","number","();","Error",", ",", ","squareVertexBuffer","ct-336e7b","squareIndexBuffer"," );","0.0","scale","*","float","void","Basics Of WebGL (Drawing A Cube)","\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)","root","ul","This youtube series: ","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=kB0ZVUrI4Aw","Basics","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=3yLL9ADo-ko","Making a cube, applying transformations","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=hpnd11doMgc&t=52s","Texturing"," are points with specific coordinates ","{x,y,z}"," in a 3D-space. We can build any figure by connecting "," in triangles with ","Shaders are functions, written in C, which describe how to draw and color polygons to Graphic Card."," describe ","vertice"," positions, so Graphic Card can position them by connecting with "," and project to 2D canvas."," describe the way polygons should be colored by assigning colors to Vertices or by applying textures to polygons.","Shaders can have parameters passed from Javascript code (","attributes","). "," can also access data from "," (that ones called ","img","https:\u002F\u002Fopen.gl\u002Fmedia\u002Fimg\u002Fc2_pipeline.png","Program, as far as I understand, is a scene, that's described with ","Indices",", specific ","The best way to change positions inside "," or color in "," is to pass parameters (also called ","Read about that at ","https:\u002F\u002Fopen.gl\u002Ftransformations","open.gl"," and at ","vxShader","fgShader","canvas","ctx","drawCube","ct-feb2dc","WebGL2RenderingContext","viewport","clearColor","clear","COLOR_BUFFER_BIT","vx","attachShader","fx",")) {"," ["," ];","createBuffer","bufferData","STATIC_DRAW","null","getAttribLocation","\"aVertexPosition\"","let","return","=\u003E"," {","uniform1f","getUniformLocation"," );","};","sourceCode","type","info","varying vec4 v_positionWithOffset;","uniform ","main","vec3","}"))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av,aw,ax,ay,az,aA,aB,aC,aD,aE,aF,aG,aH,aI,aJ,aK,aL,aM,aN,aO,aP,aQ,aR,aS,aT,aU,aV,aW,aX,aY,aZ,a_,a$,ba,bb,bc,bd,be,bf,bg,bh,bi,bj,bk,bl,bm,bn,bo,bp,bq,br,bs,bt,bu,bv,bw,bx,by,bz,bA,bB,bC,bD,bE,bF,bG,bH,bI,bJ,bK,bL,bM,bN,bO,bP,bQ,bR,bS,bT,bU,bV,bW,bX,bY,bZ,b_,b$,ca,cb,cc,cd,ce,cf,cg,ch,ci,cj,ck,cl,cm,cn,co,cp,cq,cr,cs,ct,cu,cv,cw,cx,cy,cz,cA,cB,cC,cD,cE,cF,cG,cH,cI,cJ,cK,cL,cM,cN,cO){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:bs,_path:bt},{title:K,_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:F,_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-8rrGOHb5uL":{_path:bt,_dir:"webgl",_draft:aH,_partial:aH,_locale:"en",_empty:aH,title:bs,description:I,excerpt:{type:bu,children:[{type:a,tag:y,props:{id:aI},children:[{type:c,value:aJ}]},{type:a,tag:bv,props:{},children:[{type:a,tag:ai,props:{},children:[{type:a,tag:u,props:{href:aj,rel:[P]},children:[{type:c,value:aj}]}]},{type:a,tag:ai,props:{},children:[{type:c,value:bw},{type:a,tag:u,props:{href:bx,rel:[P]},children:[{type:c,value:by}]},{type:c,value:g},{type:a,tag:u,props:{href:bz,rel:[P]},children:[{type:c,value:bA}]},{type:c,value:g},{type:a,tag:u,props:{href:bB,rel:[P]},children:[{type:c,value:bC}]}]}]},{type:a,tag:y,props:{id:aK},children:[{type:c,value:aL}]},{type:a,tag:w,props:{},children:[{type:a,tag:D,props:{},children:[{type:c,value:ak}]},{type:c,value:bD},{type:a,tag:E,props:{},children:[{type:c,value:bE}]},{type:c,value:bF},{type:a,tag:D,props:{},children:[{type:c,value:al}]},{type:c,value:bG},{type:a,tag:D,props:{},children:[{type:c,value:T}]},{type:c,value:k}]},{type:a,tag:y,props:{id:aM},children:[{type:c,value:aN}]},{type:a,tag:w,props:{},children:[{type:c,value:bH}]},{type:a,tag:w,props:{},children:[{type:a,tag:u,props:{href:J},children:[{type:c,value:F}]},{type:c,value:bI},{type:a,tag:D,props:{},children:[{type:c,value:bJ}]},{type:c,value:bK},{type:a,tag:D,props:{},children:[{type:c,value:T}]},{type:c,value:bL}]},{type:a,tag:w,props:{},children:[{type:a,tag:u,props:{href:Q},children:[{type:c,value:K}]},{type:c,value:bM}]},{type:a,tag:w,props:{},children:[{type:c,value:bN},{type:a,tag:E,props:{},children:[{type:c,value:am}]},{type:c,value:g},{type:a,tag:E,props:{},children:[{type:c,value:W}]},{type:c,value:X},{type:a,tag:E,props:{},children:[{type:c,value:bO}]},{type:c,value:bP},{type:a,tag:u,props:{href:Q},children:[{type:c,value:K}]},{type:c,value:bQ},{type:a,tag:u,props:{href:J},children:[{type:c,value:F}]},{type:c,value:bR},{type:a,tag:E,props:{},children:[{type:c,value:W}]},{type:c,value:an}]},{type:a,tag:w,props:{},children:[{type:a,tag:bS,props:{alt:I,src:bT},children:[]}]},{type:a,tag:y,props:{id:aO},children:[{type:c,value:aP}]},{type:a,tag:w,props:{},children:[{type:c,value:bU},{type:a,tag:D,props:{},children:[{type:c,value:ak}]},{type:c,value:g},{type:a,tag:D,props:{},children:[{type:c,value:bV}]},{type:c,value:bW},{type:a,tag:u,props:{href:J},children:[{type:c,value:F}]},{type:c,value:X},{type:a,tag:u,props:{href:Q},children:[{type:c,value:K}]},{type:c,value:k}]},{type:a,tag:y,props:{id:aQ},children:[{type:c,value:aR}]},{type:a,tag:w,props:{},children:[{type:c,value:bX},{type:a,tag:u,props:{href:J},children:[{type:c,value:F}]},{type:c,value:bY},{type:a,tag:u,props:{href:Q},children:[{type:c,value:K}]},{type:c,value:bZ},{type:a,tag:E,props:{},children:[{type:c,value:am}]},{type:c,value:X},{type:a,tag:E,props:{},children:[{type:c,value:W}]},{type:c,value:an}]},{type:a,tag:w,props:{},children:[{type:c,value:b_},{type:a,tag:u,props:{href:b$,rel:[P]},children:[{type:c,value:ca}]},{type:c,value:cb},{type:a,tag:u,props:{href:J},children:[{type:c,value:F}]},{type:c,value:k}]},{type:a,tag:y,props:{id:aS},children:[{type:c,value:aT}]},{type:a,tag:A,props:{code:aU,language:ao},children:[{type:a,tag:R,props:{},children:[{type:a,tag:A,props:{__ignoreMap:I},children:[{type:c,value:aU}]}]}]},{type:a,tag:y,props:{id:aV},children:[{type:c,value:aW}]},{type:a,tag:A,props:{code:aX,language:ao},children:[{type:a,tag:R,props:{},children:[{type:a,tag:A,props:{__ignoreMap:I},children:[{type:c,value:aX}]}]}]},{type:a,tag:y,props:{id:aY},children:[{type:c,value:aZ}]},{type:a,tag:w,props:{},children:[{type:c,value:ap},{type:a,tag:u,props:{href:J},children:[{type:c,value:F}]}]},{type:a,tag:A,props:{code:a_,language:aq},children:[{type:a,tag:R,props:{},children:[{type:a,tag:A,props:{__ignoreMap:I},children:[{type:c,value:a_}]}]}]},{type:a,tag:y,props:{id:a$},children:[{type:c,value:ba}]},{type:a,tag:w,props:{},children:[{type:c,value:ap},{type:a,tag:u,props:{href:Q},children:[{type:c,value:K}]},{type:c,value:k}]},{type:a,tag:A,props:{code:bb,language:aq},children:[{type:a,tag:R,props:{},children:[{type:a,tag:A,props:{__ignoreMap:I},children:[{type:c,value:bb}]}]}]}]},body:{type:bu,children:[{type:a,tag:y,props:{id:aI},children:[{type:c,value:aJ}]},{type:a,tag:bv,props:{},children:[{type:a,tag:ai,props:{},children:[{type:a,tag:u,props:{href:aj,rel:[P]},children:[{type:c,value:aj}]}]},{type:a,tag:ai,props:{},children:[{type:c,value:bw},{type:a,tag:u,props:{href:bx,rel:[P]},children:[{type:c,value:by}]},{type:c,value:g},{type:a,tag:u,props:{href:bz,rel:[P]},children:[{type:c,value:bA}]},{type:c,value:g},{type:a,tag:u,props:{href:bB,rel:[P]},children:[{type:c,value:bC}]}]}]},{type:a,tag:y,props:{id:aK},children:[{type:c,value:aL}]},{type:a,tag:w,props:{},children:[{type:a,tag:D,props:{},children:[{type:c,value:ak}]},{type:c,value:bD},{type:a,tag:E,props:{},children:[{type:c,value:bE}]},{type:c,value:bF},{type:a,tag:D,props:{},children:[{type:c,value:al}]},{type:c,value:bG},{type:a,tag:D,props:{},children:[{type:c,value:T}]},{type:c,value:k}]},{type:a,tag:y,props:{id:aM},children:[{type:c,value:aN}]},{type:a,tag:w,props:{},children:[{type:c,value:bH}]},{type:a,tag:w,props:{},children:[{type:a,tag:u,props:{href:J},children:[{type:c,value:F}]},{type:c,value:bI},{type:a,tag:D,props:{},children:[{type:c,value:bJ}]},{type:c,value:bK},{type:a,tag:D,props:{},children:[{type:c,value:T}]},{type:c,value:bL}]},{type:a,tag:w,props:{},children:[{type:a,tag:u,props:{href:Q},children:[{type:c,value:K}]},{type:c,value:bM}]},{type:a,tag:w,props:{},children:[{type:c,value:bN},{type:a,tag:E,props:{},children:[{type:c,value:am}]},{type:c,value:g},{type:a,tag:E,props:{},children:[{type:c,value:W}]},{type:c,value:X},{type:a,tag:E,props:{},children:[{type:c,value:bO}]},{type:c,value:bP},{type:a,tag:u,props:{href:Q},children:[{type:c,value:K}]},{type:c,value:bQ},{type:a,tag:u,props:{href:J},children:[{type:c,value:F}]},{type:c,value:bR},{type:a,tag:E,props:{},children:[{type:c,value:W}]},{type:c,value:an}]},{type:a,tag:w,props:{},children:[{type:a,tag:bS,props:{alt:I,src:bT},children:[]}]},{type:a,tag:y,props:{id:aO},children:[{type:c,value:aP}]},{type:a,tag:w,props:{},children:[{type:c,value:bU},{type:a,tag:D,props:{},children:[{type:c,value:ak}]},{type:c,value:g},{type:a,tag:D,props:{},children:[{type:c,value:bV}]},{type:c,value:bW},{type:a,tag:u,props:{href:J},children:[{type:c,value:F}]},{type:c,value:X},{type:a,tag:u,props:{href:Q},children:[{type:c,value:K}]},{type:c,value:k}]},{type:a,tag:y,props:{id:aQ},children:[{type:c,value:aR}]},{type:a,tag:w,props:{},children:[{type:c,value:bX},{type:a,tag:u,props:{href:J},children:[{type:c,value:F}]},{type:c,value:bY},{type:a,tag:u,props:{href:Q},children:[{type:c,value:K}]},{type:c,value:bZ},{type:a,tag:E,props:{},children:[{type:c,value:am}]},{type:c,value:X},{type:a,tag:E,props:{},children:[{type:c,value:W}]},{type:c,value:an}]},{type:a,tag:w,props:{},children:[{type:c,value:b_},{type:a,tag:u,props:{href:b$,rel:[P]},children:[{type:c,value:ca}]},{type:c,value:cb},{type:a,tag:u,props:{href:J},children:[{type:c,value:F}]},{type:c,value:k}]},{type:a,tag:y,props:{id:aS},children:[{type:c,value:aT}]},{type:a,tag:A,props:{code:aU,language:ao},children:[{type:a,tag:R,props:{},children:[{type:a,tag:A,props:{__ignoreMap:I},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F render-a-cube.ts"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:bc}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" { "}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" } "}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:bd}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"\".\u002Fcreate-shader\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:bc}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:cc}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:bd}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"\".\u002Fvertex.glsl?raw\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:bc}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:cd}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:bd}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"\".\u002Ffragment.glsl?raw\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:v},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:ce}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"document"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"getElementyId"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"'view'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:v},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:cf}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ce}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"getRenderingContext"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"'webgl'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F should be put inside requestAnimationFrame"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:n},children:[{type:c,value:cg}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:cf}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:")(); "}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:v},children:[{type:c,value:"function"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cg}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:U}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:z},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:Y},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:Z},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:ch},children:[{type:c,value:ci}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:g}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:z},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:Y},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:Z},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:as},children:[{type:c,value:be}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:M}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:z},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:Y},children:[{type:c,value:at}]},{type:a,tag:b,props:{class:Z},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:as},children:[{type:c,value:be}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:au}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F Initializing viewport"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cj}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:at}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:ck}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cl}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:cm}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"createProgram"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bf}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:av}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:au}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:ae},children:[{type:c,value:bg}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"\"Can't init programm\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ax}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F Setting up VERTEX and FRAGMENT shaders"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:cn}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:cc}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"VERTEX_SHADER"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:co}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:cn}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:cp}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:cd}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"FRAGMENT_SHADER"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:co}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:cp}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"linkProgram"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:av}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"getProgramParameter"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"LINK_STATUS"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:cq}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:ae},children:[{type:c,value:bg}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"\"Could not initialise shaders\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ax}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F Cube's vertices Array\u003C[x,y,z]\u003E, 8 items"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:al}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:cr}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F 0"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bh}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F 1"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bi}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F 2"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bh}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F 3"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bh}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F 4"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bi}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F 5"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:", "}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F 6"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bi}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F 7"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cs}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F indices, that form triangles, that form cube sides"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:cr}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:af}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F side 0 (first triangle)"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ay}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:af}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F side 0 (second triangle)"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:az}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ag}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F side 1 (first triangle)"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ag}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ay}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F side 1 (second triangle)"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:aA}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F ..."}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:aA}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:az}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:af}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ah}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ah}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:aA}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:af}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ay}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ag}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ag}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ah}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:af}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:az}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:aA}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ah}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ah}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ag}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:az}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:M}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cs}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F createe a vertex buffer and bind vertices to it"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:bj}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:ct}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bf}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:aB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:bj}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cu}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:aB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:ae},children:[{type:c,value:"Float32Array"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:al}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aC}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:cv}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:aB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:bk},children:[{type:c,value:cw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F create a vertex buffer and bind indices to it"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:bl}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:ct}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bf}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:aD}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:bl}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cu}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:aD}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:M}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:ae},children:[{type:c,value:"Uint16Array"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"),"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:cv}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bm}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:aD}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:bk},children:[{type:c,value:cw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F initial drawing"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:ck}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:bn}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:bn}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:bn}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"enable"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"DEPTH_TEST"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cl}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:cm}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"|"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"DEPTH_BUFFER_BIT"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cj}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:at}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F bind squareVertexBuffer as vertex positions buffer"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:aB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:bj}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F send every 3 bytes from squareVertexBuffer as {x,y,z} for each verticle"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"vertexAttribPointer"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cx}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:cy}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aC}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ay}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F 3 bytes-long"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"FLOAT"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:M}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:bk},children:[{type:c,value:"false"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F don't normalize (int to float)"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bm}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F send vertice buffer as `aVertexPosition` attribute inside vertex shader"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"enableVertexAttribArray"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cx}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:cy}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:")"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bm}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:cz}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aE}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:cz}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aF}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"0.01"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F that's the main rendering callback"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:cA}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" () "}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:cB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:cC}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"useProgram"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:bo}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aE}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:bp}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"0.25"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F used for scaling inside Vertex Shader"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cD}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cE}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"\"slide\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aC}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:bo}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F GL Screen is square, so we need to fix it's aspect ration"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cD}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cE}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"\"aspect\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aC}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:at}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"\u002F"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:aD}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:bl}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cF}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"drawElements"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"TRIANGLES"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:T}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"UNSIGNED_SHORT"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:M}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cF}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aE}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"\u003E"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"||"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:au}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aF}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aF}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aE}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"+="}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aF}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" };"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cG}]}]}]}]}]},{type:a,tag:y,props:{id:aV},children:[{type:c,value:aW}]},{type:a,tag:A,props:{code:aX,language:ao},children:[{type:a,tag:R,props:{},children:[{type:a,tag:A,props:{__ignoreMap:I},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F create-shader.ts"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:"export"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:U}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:z},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:Y},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:Z},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:ch},children:[{type:c,value:ci}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:M}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:z},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:Y},children:[{type:c,value:cH}]},{type:a,tag:b,props:{class:Z},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:as},children:[{type:c,value:"string"}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:M}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:z},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:Y},children:[{type:c,value:cI}]},{type:a,tag:b,props:{class:Z},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:as},children:[{type:c,value:be}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:"ct-aea678"},children:[{type:c,value:"\u002F\u002F gl.VERTEX_SHADER or gl.FRAGMENT_SHADER"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:") "}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:cB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:cC}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:cI}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:av}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:au}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:ae},children:[{type:c,value:bg}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"`Can't init shader`"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ax}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"shaderSource"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:cH}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"compileShader"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:av}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"getShaderParameter"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"COMPILE_STATUS"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:cq}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:cJ}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"getShaderInfoLog"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"`Could not compile WebGL program. "}]},{type:a,tag:b,props:{class:"ct-0b8227"},children:[{type:c,value:"\\n\\n"}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"${"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:cJ}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"}`"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ax}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:cA}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cG}]}]}]}]}]},{type:a,tag:y,props:{id:aY},children:[{type:c,value:aZ}]},{type:a,tag:w,props:{},children:[{type:c,value:ap},{type:a,tag:u,props:{href:J},children:[{type:c,value:F}]}]},{type:a,tag:A,props:{code:a_,language:aq},children:[{type:a,tag:R,props:{},children:[{type:a,tag:A,props:{__ignoreMap:I},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F current vertice position {x,y,z,w}"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"attribute vec4 aVertexPosition;"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F final vertice position with all transformations applied,"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F that will be passed to Fragment Shader"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cK}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F Parameters passed from Javascript loop"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cL}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:bq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" slide;"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cL}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:bq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" aspect;"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:v},children:[{type:c,value:br}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cM}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"(){"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F float array of 4 elements, same as [slide,slide,slide,1]"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" vec4 scale"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:aG}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cN}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"(slide),"}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F float array of 4 elements, same as [aspect,1,1,1]"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" vec4 aspectRatioFix"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:aG}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"(aspect,"}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cN}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"));"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F vertice position, multiplied with matrices of scale and aspect ratio"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" gl_Position"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"aVertexPosition"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:bp}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bo}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:bp}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"aspectRatioFix,"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F vertice offset, that will be passed to fragment shader"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" v_positionWithOffset"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"gl_Position"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"+"}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:aG}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cO}]}]}]}]}]},{type:a,tag:y,props:{id:a$},children:[{type:c,value:ba}]},{type:a,tag:w,props:{},children:[{type:c,value:ap},{type:a,tag:u,props:{href:Q},children:[{type:c,value:K}]},{type:c,value:k}]},{type:a,tag:A,props:{code:bb,language:aq},children:[{type:a,tag:R,props:{},children:[{type:a,tag:A,props:{__ignoreMap:I},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"precision highp "}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:bq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F parameter from Vertex Shader"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cK}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:v},children:[{type:c,value:br}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cM}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:br}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"){"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F color, attached to current verticle {r,g,b,alpha}"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F same a["}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F v_positionWithOffset.x,"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F v_positionWithOffset.y, "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F v_positionWithOffset.z, "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F 1"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F ]"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" gl_FragColor"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:aG}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"v_positionWithOffset"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"xyz"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cO}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-0b8227{color:#79C0FF}.ct-aea678{color:#8B949E}.ct-02b732{color:#79C0FF}.ct-cd3b9c{color:#79C0FF}.ct-f22312{color:#79C0FF}.ct-0555f3{color:#79C0FF}.ct-89a5fc{color:#FFA657}.ct-2eab2c{color:#FF7B72}.ct-c4ba0e{color:#FFA657}.ct-aaa2c9{color:#C9D1D9}.ct-7d5ed7{color:#D2A8FF}.ct-5011ab{color:#79C0FF}.ct-fd83b5{color:#FF7B72}.ct-2010d6{color:#A5D6FF}.ct-0c42a0{color:#C9D1D9}.ct-5a6e76{color:#C9D1D9}.ct-532f07{color:#FF7B72}.ct-6e2271{color:#8B949E}.light .ct-6e2271{color:#93A1A1}.light .ct-532f07{color:#859900}.light .ct-5a6e76{color:#657B83}.light .ct-0c42a0{color:#268BD2}.light .ct-2010d6{color:#2AA198}.light .ct-fd83b5{color:#073642}.light .ct-5011ab{color:#268BD2}.light .ct-7d5ed7{color:#268BD2}.light .ct-aaa2c9{color:#657B83}.light .ct-c4ba0e{color:#657B83}.light .ct-2eab2c{color:#859900}.light .ct-89a5fc{color:#268BD2}.light .ct-0555f3{color:#859900}.light .ct-f22312{color:#D33682}.light .ct-cd3b9c{color:#859900}.light .ct-02b732{color:#B58900}.light .ct-aea678{color:#93A1A1}.light .ct-0b8227{color:#CB4B16}"}]}],toc:{title:I,searchDepth:O,depth:O,links:[{id:aI,depth:O,text:aJ},{id:aK,depth:O,text:aL},{id:aM,depth:O,text:aN},{id:aO,depth:O,text:aP},{id:aQ,depth:O,text:aR},{id:aS,depth:O,text:aT},{id:aV,depth:O,text:aW},{id:aY,depth:O,text:aZ},{id:a$,depth:O,text:ba}]}},_type:"markdown",_id:"content:Frontend:WebGL:Basics of WebGL (Drawing a Cube).md",_source:"content",_file:"Frontend\u002FWebGL\u002FBasics of WebGL (Drawing a Cube).md",_extension:"md"}},prerenderedAt:1703697991962}}("element","span","text","ct-5a6e76","line","ct-0c42a0",", "," ","ct-f22312","ct-532f07","."," ","gl","ct-7d5ed7","(","ct-6e2271"," ","1","ct-5011ab",");","a","ct-fd83b5","p","=","h2","ct-aaa2c9","code","0","ct-2010d6","strong","code-inline","Vertex Shaders","const","-","","Vertex%20Shaders","Fragment Shaders",";",",","prg",2,"nofollow","Fragment%20Shaders","pre"," ","indices"," (","shader","varyings"," and ","ct-c4ba0e","ct-2eab2c",":","bindBuffer"," ","createShader","if","new","ct-cd3b9c","2","7","6","li","https:\u002F\u002Fopen.gl\u002F","Vertices","vertices","uniforms",").","typescript","Read more at ","c","width","ct-0555f3","height",") {","!","throw"," }","3","4","5","ARRAY_BUFFER","), ","ELEMENT_ARRAY_BUFFER","i","speed","vec4",false,"helpful-documentation","Helpful documentation","vertices-and-indices","Vertices and Indices","shaders","Shaders","program","Program","applying-transformations","Applying transformations","source-code-with-explanations","Source code with explanations","\u002F\u002F render-a-cube.ts\nimport { createShader } from \".\u002Fcreate-shader\";\nimport vxShader from \".\u002Fvertex.glsl?raw\";\nimport fgShader from \".\u002Ffragment.glsl?raw\";\n\nconst canvas = document.getElementyId('view');\nconst ctx = canvas.getRenderingContext('webgl');\n\n\u002F\u002F should be put inside requestAnimationFrame\ndrawCube(ctx)(); \n\nfunction drawCube (\n gl: WebGL2RenderingContext, \n width: number,\n height: number\n) {\n \u002F\u002F Initializing viewport\n gl.viewport(0, 0, width, height);\n gl.clearColor(0, 0, 0, 0);\n gl.clear(gl.COLOR_BUFFER_BIT);\n\n const prg = gl.createProgram();\n if (!prg) {\n throw new Error(\"Can't init programm\");\n }\n\n \u002F\u002F Setting up VERTEX and FRAGMENT shaders\n const vx = createShader(gl, vxShader, gl.VERTEX_SHADER);\n gl.attachShader(prg, vx);\n const fx = createShader(gl, fgShader, gl.FRAGMENT_SHADER);\n gl.attachShader(prg, fx);\n gl.linkProgram(prg);\n if (!gl.getProgramParameter(prg, gl.LINK_STATUS)) {\n throw new Error(\"Could not initialise shaders\");\n }\n\n \u002F\u002F Cube's vertices Array\u003C[x,y,z]\u003E, 8 items\n const vertices = [\n -1, -1, -1, \u002F\u002F 0\n 1, -1, -1, \u002F\u002F 1\n 1, 1, -1, \u002F\u002F 2\n -1, 1, -1, \u002F\u002F 3\n -1, -1, 1, \u002F\u002F 4\n 1, -1, 1, \u002F\u002F 5\n 1, 1, 1, \u002F\u002F 6\n -1, 1, 1, \u002F\u002F 7\n ];\n\n \u002F\u002F indices, that form triangles, that form cube sides\n const indices = [\n 2, 1, 0, \u002F\u002F side 0 (first triangle)\n 0, 3, 2, \u002F\u002F side 0 (second triangle)\n 0, 4, 7, \u002F\u002F side 1 (first triangle)\n 7, 3, 0, \u002F\u002F side 1 (second triangle)\n 0, 1, 5, \u002F\u002F ...\n 5, 4, 0, \n 1, 2, 6, \n 6, 5, 1, \n 2, 3, 7, \n 7, 6, 2, \n 4, 5, 6, \n 6, 7, 4,\n ];\n\n \u002F\u002F createe a vertex buffer and bind vertices to it\n const squareVertexBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);\n gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);\n gl.bindBuffer(gl.ARRAY_BUFFER, null);\n\n \u002F\u002F create a vertex buffer and bind indices to it\n const squareIndexBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, squareIndexBuffer);\n gl.bufferData(\n gl.ELEMENT_ARRAY_BUFFER,\n new Uint16Array(indices),\n gl.STATIC_DRAW\n );\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);\n\n \u002F\u002F initial drawing\n gl.clearColor(0.0, 0.0, 0.0, 0.0);\n gl.enable(gl.DEPTH_TEST);\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n gl.viewport(0, 0, width, height);\n\n \u002F\u002F bind squareVertexBuffer as vertex positions buffer\n gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);\n \n \u002F\u002F send every 3 bytes from squareVertexBuffer as {x,y,z} for each verticle\n gl.vertexAttribPointer(\n gl.getAttribLocation(prg, \"aVertexPosition\"), \n 3, \u002F\u002F 3 bytes-long\n gl.FLOAT,\n false, \u002F\u002F don't normalize (int to float)\n 0, \n 0\n );\n \u002F\u002F send vertice buffer as `aVertexPosition` attribute inside vertex shader\n gl.enableVertexAttribArray(\n gl.getAttribLocation(prg, \"aVertexPosition\")\n );\n\n let i = 0;\n let speed = 0.01;\n\n \u002F\u002F that's the main rendering callback\n return () =\u003E {\n gl.useProgram(prg);\n\n const scale = i * 0.25 + 0.25;\n\n \u002F\u002F used for scaling inside Vertex Shader\n gl.uniform1f(gl.getUniformLocation(prg, \"slide\"), scale);\n \u002F\u002F GL Screen is square, so we need to fix it's aspect ration\n gl.uniform1f(gl.getUniformLocation(prg, \"aspect\"), height \u002F width);\n\n gl.bindBuffer(\n gl.ELEMENT_ARRAY_BUFFER, \n squareIndexBuffer\n );\n \n gl.drawElements(\n gl.TRIANGLES, \n indices.length, \n gl.UNSIGNED_SHORT, \n 0,\n );\n\n if (i \u003E 1 || i \u003C 0) {\n speed = -speed;\n }\n\n i += speed;\n };\n};\n","shader-compiler","Shader compiler","\u002F\u002F create-shader.ts\nexport const createShader = (\n gl: WebGL2RenderingContext,\n sourceCode: string,\n type: number, \u002F\u002F gl.VERTEX_SHADER or gl.FRAGMENT_SHADER\n) =\u003E {\n const shader = gl.createShader(type);\n if (!shader) {\n throw new Error(`Can't init shader`);\n }\n\n gl.shaderSource(shader, sourceCode);\n gl.compileShader(shader);\n\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n const info = gl.getShaderInfoLog(shader);\n throw `Could not compile WebGL program. \\n\\n${info}`;\n }\n\n return shader;\n};\n","vertex-shader-example","Vertex Shader Example","\u002F\u002F current vertice position {x,y,z,w}\nattribute vec4 aVertexPosition;\n\u002F\u002F final vertice position with all transformations applied,\n\u002F\u002F that will be passed to Fragment Shader\nvarying vec4 v_positionWithOffset;\n\u002F\u002F Parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(){\n \u002F\u002F float array of 4 elements, same as [slide,slide,slide,1]\n vec4 scale=vec4(vec3(slide),1);\n \u002F\u002F float array of 4 elements, same as [aspect,1,1,1]\n vec4 aspectRatioFix=vec4(aspect,vec3(1));\n \u002F\u002F vertice position, multiplied with matrices of scale and aspect ratio\n gl_Position=aVertexPosition*scale*aspectRatioFix,\n \u002F\u002F vertice offset, that will be passed to fragment shader\n v_positionWithOffset=gl_Position+vec4(1,1,1,1);\n}\n","fragment-shader-example","Fragment Shader Example","precision highp float;\n\n\u002F\u002F parameter from Vertex Shader\nvarying vec4 v_positionWithOffset;\n\nvoid main(void){\n \u002F\u002F color, attached to current verticle {r,g,b,alpha}\n \u002F\u002F same a[\n \u002F\u002F v_positionWithOffset.x,\n \u002F\u002F v_positionWithOffset.y, \n \u002F\u002F v_positionWithOffset.z, \n \u002F\u002F 1\n \u002F\u002F ]\n gl_FragColor=vec4(v_positionWithOffset.xyz,1);\n}\n","import","from","number","();","Error",", ",", ","squareVertexBuffer","ct-02b732","squareIndexBuffer"," );","0.0","scale","*","float","void","Basics Of WebGL (Drawing A Cube)","\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)","root","ul","This youtube series: ","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=kB0ZVUrI4Aw","Basics","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=3yLL9ADo-ko","Making a cube, applying transformations","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=hpnd11doMgc&t=52s","Texturing"," are points with specific coordinates ","{x,y,z}"," in a 3D-space. We can build any figure by connecting "," in triangles with ","Shaders are functions, written in C, which describe how to draw and color polygons to Graphic Card."," describe ","vertice"," positions, so Graphic Card can position them by connecting with "," and project to 2D canvas."," describe the way polygons should be colored by assigning colors to Vertices or by applying textures to polygons.","Shaders can have parameters passed from Javascript code (","attributes","). "," can also access data from "," (that ones called ","img","https:\u002F\u002Fopen.gl\u002Fmedia\u002Fimg\u002Fc2_pipeline.png","Program, as far as I understand, is a scene, that's described with ","Indices",", specific ","The best way to change positions inside "," or color in "," is to pass parameters (also called ","Read about that at ","https:\u002F\u002Fopen.gl\u002Ftransformations","open.gl"," and at ","vxShader","fgShader","canvas","ctx","drawCube","ct-89a5fc","WebGL2RenderingContext","viewport","clearColor","clear","COLOR_BUFFER_BIT","vx","attachShader","fx",")) {"," ["," ];","createBuffer","bufferData","STATIC_DRAW","null","getAttribLocation","\"aVertexPosition\"","let","return","=\u003E"," {","uniform1f","getUniformLocation"," );","};","sourceCode","type","info","varying vec4 v_positionWithOffset;","uniform ","main","vec3","}"))
\ No newline at end of file
diff --git a/docs/frontend/webgl/basics-of-webgl-(drawing-a-cube)/index.html b/docs/frontend/webgl/basics-of-webgl-(drawing-a-cube)/index.html
index 05b8985..5329a86 100644
--- a/docs/frontend/webgl/basics-of-webgl-(drawing-a-cube)/index.html
+++ b/docs/frontend/webgl/basics-of-webgl-(drawing-a-cube)/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Basics Of WebGL (Drawing A Cube) • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="head:count" content="2"><link rel="modulepreload" href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseH2.d950f051.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseUl.b892d423.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseLi.a224f663.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseA.c52e44f8.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseStrong.e968ffe9.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCodeInline.d9bcf614.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseImg.06e5e7fa.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a aria-current="page" href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="router-link-active _active_192pu_81 _link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Basics Of WebGL (Drawing A Cube)</h1><article><div><h2 id="helpful-documentation"><a href="#helpful-documentation"><!--[-->Helpful documentation<!--]--></a></h2><ul><!--[--><li><!--[--><a href="https://open.gl/" rel="nofollow" target="_blank"><!--[-->https://open.gl/<!--]--></a><!--]--></li><li><!--[-->This youtube series: <a href="https://www.youtube.com/watch?v=kB0ZVUrI4Aw" rel="nofollow" target="_blank"><!--[-->Basics<!--]--></a>, <a href="https://www.youtube.com/watch?v=3yLL9ADo-ko" rel="nofollow" target="_blank"><!--[-->Making a cube, applying transformations<!--]--></a>, <a href="https://www.youtube.com/watch?v=hpnd11doMgc&t=52s" rel="nofollow" target="_blank"><!--[-->Texturing<!--]--></a><!--]--></li><!--]--></ul><h2 id="vertices-and-indices"><a href="#vertices-and-indices"><!--[-->Vertices and Indices<!--]--></a></h2><p><!--[--><strong><!--[-->Vertices<!--]--></strong> are points with specific coordinates <code><!--[-->{x,y,z}<!--]--></code> in a 3D-space. We can build any figure by connecting <strong><!--[-->vertices<!--]--></strong> in triangles with <strong><!--[-->indices<!--]--></strong>.<!--]--></p><h2 id="shaders"><a href="#shaders"><!--[-->Shaders<!--]--></a></h2><p><!--[-->Shaders are functions, written in C, which describe how to draw and color polygons to Graphic Card.<!--]--></p><p><!--[--><a href="/frontend/webgl/vertex-shaders" class=""><!--[-->Vertex Shaders<!--]--></a> describe <strong><!--[-->vertice<!--]--></strong> positions, so Graphic Card can position them by connecting with <strong><!--[-->indices<!--]--></strong> and project to 2D canvas.<!--]--></p><p><!--[--><a href="/frontend/webgl/fragment-shaders" class=""><!--[-->Fragment Shaders<!--]--></a> describe the way polygons should be colored by assigning colors to Vertices or by applying textures to polygons.<!--]--></p><p><!--[-->Shaders can have parameters passed from Javascript code (<code><!--[-->uniforms<!--]--></code>, <code><!--[-->varyings<!--]--></code> and <code><!--[-->attributes<!--]--></code>). <a href="/frontend/webgl/fragment-shaders" class=""><!--[-->Fragment Shaders<!--]--></a> can also access data from <a href="/frontend/webgl/vertex-shaders" class=""><!--[-->Vertex Shaders<!--]--></a> (that ones called <code><!--[-->varyings<!--]--></code>).<!--]--></p><p><!--[--><img src="https://open.gl/media/img/c2_pipeline.png" alt><!--]--></p><h2 id="program"><a href="#program"><!--[-->Program<!--]--></a></h2><p><!--[-->Program, as far as I understand, is a scene, that's described with <strong><!--[-->Vertices<!--]--></strong>, <strong><!--[-->Indices<!--]--></strong>, specific <a href="/frontend/webgl/vertex-shaders" class=""><!--[-->Vertex Shaders<!--]--></a> and <a href="/frontend/webgl/fragment-shaders" class=""><!--[-->Fragment Shaders<!--]--></a>.<!--]--></p><h2 id="applying-transformations"><a href="#applying-transformations"><!--[-->Applying transformations<!--]--></a></h2><p><!--[-->The best way to change positions inside <a href="/frontend/webgl/vertex-shaders" class=""><!--[-->Vertex Shaders<!--]--></a> or color in <a href="/frontend/webgl/fragment-shaders" class=""><!--[-->Fragment Shaders<!--]--></a> is to pass parameters (also called <code><!--[-->uniforms<!--]--></code> and <code><!--[-->varyings<!--]--></code>).<!--]--></p><p><!--[-->Read about that at <a href="https://open.gl/transformations" rel="nofollow" target="_blank"><!--[-->open.gl<!--]--></a> and at <a href="/frontend/webgl/vertex-shaders" class=""><!--[-->Vertex Shaders<!--]--></a>.<!--]--></p><h2 id="source-code-with-explanations"><a href="#source-code-with-explanations"><!--[-->Source code with explanations<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-337041">// render-a-cube.ts</span></span><span class="line"><span class="ct-0c8b20">import</span><span class="ct-6c11ea"> { </span><span class="ct-a7c351">createShader</span><span class="ct-6c11ea"> } </span><span class="ct-0c8b20">from</span><span class="ct-6c11ea"> </span><span class="ct-2e53f1">"./create-shader"</span><span class="ct-6c11ea">;</span></span><span class="line"><span class="ct-0c8b20">import</span><span class="ct-6c11ea"> </span><span class="ct-a7c351">vxShader</span><span class="ct-6c11ea"> </span><span class="ct-0c8b20">from</span><span class="ct-6c11ea"> </span><span class="ct-2e53f1">"./vertex.glsl?raw"</span><span class="ct-6c11ea">;</span></span><span class="line"><span class="ct-0c8b20">import</span><span class="ct-6c11ea"> </span><span class="ct-a7c351">fgShader</span><span class="ct-6c11ea"> </span><span class="ct-0c8b20">from</span><span class="ct-6c11ea"> </span><span class="ct-2e53f1">"./fragment.glsl?raw"</span><span class="ct-6c11ea">;</span></span><span class="line"></span><span class="line"><span class="ct-20ed3f">const</span><span class="ct-6c11ea"> </span><span class="ct-b321a9">canvas</span><span class="ct-6c11ea"> </span><span class="ct-0c8b20">=</span><span class="ct-6c11ea"> </span><span class="ct-a7c351">document</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">getElementyId</span><span class="ct-6c11ea">(</span><span class="ct-2e53f1">'view'</span><span class="ct-6c11ea">);</span></span><span class="line"><span class="ct-20ed3f">const</span><span class="ct-6c11ea"> </span><span class="ct-b321a9">ctx</span><span class="ct-6c11ea"> </span><span class="ct-0c8b20">=</span><span class="ct-6c11ea"> </span><span class="ct-a7c351">canvas</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">getRenderingContext</span><span class="ct-6c11ea">(</span><span class="ct-2e53f1">'webgl'</span><span class="ct-6c11ea">);</span></span><span class="line"></span><span class="line"><span class="ct-337041">// should be put inside requestAnimationFrame</span></span><span class="line"><span class="ct-2909a9">drawCube</span><span class="ct-6c11ea">(</span><span class="ct-a7c351">ctx</span><span class="ct-6c11ea">)(); </span></span><span class="line"></span><span class="line"><span class="ct-20ed3f">function</span><span class="ct-6c11ea"> </span><span class="ct-2909a9">drawCube</span><span class="ct-6c11ea"> (</span></span><span class="line"><span class="ct-8eb92a"> </span><span class="ct-6cdf8d">gl</span><span class="ct-80e1b8">:</span><span class="ct-8eb92a"> </span><span class="ct-feb2dc">WebGL2RenderingContext</span><span class="ct-8eb92a">, </span></span><span class="line"><span class="ct-8eb92a"> </span><span class="ct-6cdf8d">width</span><span class="ct-80e1b8">:</span><span class="ct-8eb92a"> </span><span class="ct-08630c">number</span><span class="ct-8eb92a">,</span></span><span class="line"><span class="ct-8eb92a"> </span><span class="ct-6cdf8d">height</span><span class="ct-80e1b8">:</span><span class="ct-8eb92a"> </span><span class="ct-08630c">number</span></span><span class="line"><span class="ct-6c11ea">) {</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-337041">// Initializing viewport</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">viewport</span><span class="ct-6c11ea">(</span><span class="ct-b68eea">0</span><span class="ct-6c11ea">, </span><span class="ct-a7c351">width</span><span class="ct-6c11ea">, </span><span class="ct-a7c351">height</span><span class="ct-6c11ea">);</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">clearColor</span><span class="ct-6c11ea">(</span><span class="ct-b68eea">0</span><span class="ct-6c11ea">, </span><span class="ct-b68eea">0</span><span class="ct-6c11ea">, </span><span class="ct-b68eea">0</span><span class="ct-6c11ea">);</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">clear</span><span class="ct-6c11ea">(</span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-b321a9">COLOR_BUFFER_BIT</span><span class="ct-6c11ea">);</span></span><span class="line"></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-20ed3f">const</span><span class="ct-6c11ea"> </span><span class="ct-b321a9">prg</span><span class="ct-6c11ea"> </span><span class="ct-0c8b20">=</span><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">createProgram</span><span class="ct-6c11ea">();</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-0c8b20">if</span><span class="ct-6c11ea"> (</span><span class="ct-0c8b20">!</span><span class="ct-a7c351">prg</span><span class="ct-6c11ea">) {</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-0c8b20">throw</span><span class="ct-6c11ea"> </span><span class="ct-0c8b20">new</span><span class="ct-6c11ea"> </span><span class="ct-65a97f">Error</span><span class="ct-6c11ea">(</span><span class="ct-2e53f1">"Can't init programm"</span><span class="ct-6c11ea">);</span></span><span class="line"><span class="ct-6c11ea"> }</span></span><span class="line"></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-337041">// Setting up VERTEX and FRAGMENT shaders</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-20ed3f">const</span><span class="ct-6c11ea"> </span><span class="ct-b321a9">vx</span><span class="ct-6c11ea"> </span><span class="ct-0c8b20">=</span><span class="ct-6c11ea"> </span><span class="ct-2909a9">createShader</span><span class="ct-6c11ea">(</span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">, </span><span class="ct-a7c351">vxShader</span><span class="ct-6c11ea">, </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-b321a9">VERTEX_SHADER</span><span class="ct-6c11ea">);</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">attachShader</span><span class="ct-6c11ea">(</span><span class="ct-a7c351">prg</span><span class="ct-6c11ea">, </span><span class="ct-a7c351">vx</span><span class="ct-6c11ea">);</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-20ed3f">const</span><span class="ct-6c11ea"> </span><span class="ct-b321a9">fx</span><span class="ct-6c11ea"> </span><span class="ct-0c8b20">=</span><span class="ct-6c11ea"> </span><span class="ct-2909a9">createShader</span><span class="ct-6c11ea">(</span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">, </span><span class="ct-a7c351">fgShader</span><span class="ct-6c11ea">, </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-b321a9">FRAGMENT_SHADER</span><span class="ct-6c11ea">);</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">attachShader</span><span class="ct-6c11ea">(</span><span class="ct-a7c351">prg</span><span class="ct-6c11ea">, </span><span class="ct-a7c351">fx</span><span class="ct-6c11ea">);</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">linkProgram</span><span class="ct-6c11ea">(</span><span class="ct-a7c351">prg</span><span class="ct-6c11ea">);</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-0c8b20">if</span><span class="ct-6c11ea"> (</span><span class="ct-0c8b20">!</span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">getProgramParameter</span><span class="ct-6c11ea">(</span><span class="ct-a7c351">prg</span><span class="ct-6c11ea">, </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-b321a9">LINK_STATUS</span><span class="ct-6c11ea">)) {</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-0c8b20">throw</span><span class="ct-6c11ea"> </span><span class="ct-0c8b20">new</span><span class="ct-6c11ea"> </span><span class="ct-65a97f">Error</span><span class="ct-6c11ea">(</span><span class="ct-2e53f1">"Could not initialise shaders"</span><span class="ct-6c11ea">);</span></span><span class="line"><span class="ct-6c11ea"> }</span></span><span class="line"></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-337041">// Cube's vertices Array<[x,y,z]>, 8 items</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-20ed3f">const</span><span class="ct-6c11ea"> </span><span class="ct-b321a9">vertices</span><span class="ct-6c11ea"> </span><span class="ct-0c8b20">=</span><span class="ct-6c11ea"> [</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-0c8b20">-</span><span class="ct-b68eea">1</span><span class="ct-6c11ea">, </span><span class="ct-0c8b20">-</span><span class="ct-b68eea">1</span><span class="ct-6c11ea">, </span><span class="ct-0c8b20">-</span><span class="ct-b68eea">1</span><span class="ct-6c11ea">, </span><span class="ct-337041">// 0</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-b68eea">1</span><span class="ct-6c11ea">, </span><span class="ct-0c8b20">-</span><span class="ct-b68eea">1</span><span class="ct-6c11ea">, </span><span class="ct-0c8b20">-</span><span class="ct-b68eea">1</span><span class="ct-6c11ea">, </span><span class="ct-337041">// 1</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-b68eea">1</span><span class="ct-6c11ea">, </span><span class="ct-b68eea">1</span><span class="ct-6c11ea">, </span><span class="ct-0c8b20">-</span><span class="ct-b68eea">1</span><span class="ct-6c11ea">, </span><span class="ct-337041">// 2</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-0c8b20">-</span><span class="ct-b68eea">1</span><span class="ct-6c11ea">, </span><span class="ct-b68eea">1</span><span class="ct-6c11ea">, </span><span class="ct-0c8b20">-</span><span class="ct-b68eea">1</span><span class="ct-6c11ea">, </span><span class="ct-337041">// 3</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-0c8b20">-</span><span class="ct-b68eea">1</span><span class="ct-6c11ea">, </span><span class="ct-0c8b20">-</span><span class="ct-b68eea">1</span><span class="ct-6c11ea">, </span><span class="ct-b68eea">1</span><span class="ct-6c11ea">, </span><span class="ct-337041">// 4</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-b68eea">1</span><span class="ct-6c11ea">, </span><span class="ct-0c8b20">-</span><span class="ct-b68eea">1</span><span class="ct-6c11ea">, </span><span class="ct-b68eea">1</span><span class="ct-6c11ea">, </span><span class="ct-337041">// 5</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-b68eea">1</span><span class="ct-6c11ea">, </span><span class="ct-b68eea">1</span><span class="ct-6c11ea">, </span><span class="ct-b68eea">1</span><span class="ct-6c11ea">, </span><span class="ct-337041">// 6</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-0c8b20">-</span><span class="ct-b68eea">1</span><span class="ct-6c11ea">, </span><span class="ct-b68eea">1</span><span class="ct-6c11ea">, </span><span class="ct-b68eea">1</span><span class="ct-6c11ea">, </span><span class="ct-337041">// 7</span></span><span class="line"><span class="ct-6c11ea"> ];</span></span><span class="line"></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-337041">// indices, that form triangles, that form cube sides</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-20ed3f">const</span><span class="ct-6c11ea"> </span><span class="ct-b321a9">indices</span><span class="ct-6c11ea"> </span><span class="ct-0c8b20">=</span><span class="ct-6c11ea"> [</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-b68eea">2</span><span class="ct-6c11ea">, </span><span class="ct-b68eea">1</span><span class="ct-6c11ea">, </span><span class="ct-b68eea">0</span><span class="ct-6c11ea">, </span><span class="ct-337041">// side 0 (first triangle)</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-b68eea">0</span><span class="ct-6c11ea">, </span><span class="ct-b68eea">3</span><span class="ct-6c11ea">, </span><span class="ct-b68eea">2</span><span class="ct-6c11ea">, </span><span class="ct-337041">// side 0 (second triangle)</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-b68eea">0</span><span class="ct-6c11ea">, </span><span class="ct-b68eea">4</span><span class="ct-6c11ea">, </span><span class="ct-b68eea">7</span><span class="ct-6c11ea">, </span><span class="ct-337041">// side 1 (first triangle)</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-b68eea">7</span><span class="ct-6c11ea">, </span><span class="ct-b68eea">3</span><span class="ct-6c11ea">, </span><span class="ct-b68eea">0</span><span class="ct-6c11ea">, </span><span class="ct-337041">// side 1 (second triangle)</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-b68eea">0</span><span class="ct-6c11ea">, </span><span class="ct-b68eea">1</span><span class="ct-6c11ea">, </span><span class="ct-b68eea">5</span><span class="ct-6c11ea">, </span><span class="ct-337041">// ...</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-b68eea">5</span><span class="ct-6c11ea">, </span><span class="ct-b68eea">4</span><span class="ct-6c11ea">, </span><span class="ct-b68eea">0</span><span class="ct-6c11ea">, </span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-b68eea">1</span><span class="ct-6c11ea">, </span><span class="ct-b68eea">2</span><span class="ct-6c11ea">, </span><span class="ct-b68eea">6</span><span class="ct-6c11ea">, </span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-b68eea">6</span><span class="ct-6c11ea">, </span><span class="ct-b68eea">5</span><span class="ct-6c11ea">, </span><span class="ct-b68eea">1</span><span class="ct-6c11ea">, </span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-b68eea">2</span><span class="ct-6c11ea">, </span><span class="ct-b68eea">3</span><span class="ct-6c11ea">, </span><span class="ct-b68eea">7</span><span class="ct-6c11ea">, </span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-b68eea">7</span><span class="ct-6c11ea">, </span><span class="ct-b68eea">6</span><span class="ct-6c11ea">, </span><span class="ct-b68eea">2</span><span class="ct-6c11ea">, </span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-b68eea">4</span><span class="ct-6c11ea">, </span><span class="ct-b68eea">5</span><span class="ct-6c11ea">, </span><span class="ct-b68eea">6</span><span class="ct-6c11ea">, </span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-b68eea">6</span><span class="ct-6c11ea">, </span><span class="ct-b68eea">7</span><span class="ct-6c11ea">, </span><span class="ct-b68eea">4</span><span class="ct-6c11ea">,</span></span><span class="line"><span class="ct-6c11ea"> ];</span></span><span class="line"></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-337041">// createe a vertex buffer and bind vertices to it</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-20ed3f">const</span><span class="ct-6c11ea"> </span><span class="ct-b321a9">squareVertexBuffer</span><span class="ct-6c11ea"> </span><span class="ct-0c8b20">=</span><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">createBuffer</span><span class="ct-6c11ea">();</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">bindBuffer</span><span class="ct-6c11ea">(</span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-b321a9">ARRAY_BUFFER</span><span class="ct-6c11ea">, </span><span class="ct-a7c351">squareVertexBuffer</span><span class="ct-6c11ea">);</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">bufferData</span><span class="ct-6c11ea">(</span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-b321a9">ARRAY_BUFFER</span><span class="ct-6c11ea">, </span><span class="ct-0c8b20">new</span><span class="ct-6c11ea"> </span><span class="ct-65a97f">Float32Array</span><span class="ct-6c11ea">(</span><span class="ct-a7c351">vertices</span><span class="ct-6c11ea">), </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-b321a9">STATIC_DRAW</span><span class="ct-6c11ea">);</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">bindBuffer</span><span class="ct-6c11ea">(</span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-b321a9">ARRAY_BUFFER</span><span class="ct-6c11ea">, </span><span class="ct-336e7b">null</span><span class="ct-6c11ea">);</span></span><span class="line"></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-337041">// create a vertex buffer and bind indices to it</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-20ed3f">const</span><span class="ct-6c11ea"> </span><span class="ct-b321a9">squareIndexBuffer</span><span class="ct-6c11ea"> </span><span class="ct-0c8b20">=</span><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">createBuffer</span><span class="ct-6c11ea">();</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">bindBuffer</span><span class="ct-6c11ea">(</span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-b321a9">ELEMENT_ARRAY_BUFFER</span><span class="ct-6c11ea">, </span><span class="ct-a7c351">squareIndexBuffer</span><span class="ct-6c11ea">);</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">bufferData</span><span class="ct-6c11ea">(</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-b321a9">ELEMENT_ARRAY_BUFFER</span><span class="ct-6c11ea">,</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-0c8b20">new</span><span class="ct-6c11ea"> </span><span class="ct-65a97f">Uint16Array</span><span class="ct-6c11ea">(</span><span class="ct-a7c351">indices</span><span class="ct-6c11ea">),</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-b321a9">STATIC_DRAW</span></span><span class="line"><span class="ct-6c11ea"> );</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">bindBuffer</span><span class="ct-6c11ea">(</span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-b321a9">ELEMENT_ARRAY_BUFFER</span><span class="ct-6c11ea">, </span><span class="ct-336e7b">null</span><span class="ct-6c11ea">);</span></span><span class="line"></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-337041">// initial drawing</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">clearColor</span><span class="ct-6c11ea">(</span><span class="ct-b68eea">0.0</span><span class="ct-6c11ea">, </span><span class="ct-b68eea">0.0</span><span class="ct-6c11ea">, </span><span class="ct-b68eea">0.0</span><span class="ct-6c11ea">);</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">enable</span><span class="ct-6c11ea">(</span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-b321a9">DEPTH_TEST</span><span class="ct-6c11ea">);</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">clear</span><span class="ct-6c11ea">(</span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-b321a9">COLOR_BUFFER_BIT</span><span class="ct-6c11ea"> </span><span class="ct-0c8b20">|</span><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-b321a9">DEPTH_BUFFER_BIT</span><span class="ct-6c11ea">);</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">viewport</span><span class="ct-6c11ea">(</span><span class="ct-b68eea">0</span><span class="ct-6c11ea">, </span><span class="ct-a7c351">width</span><span class="ct-6c11ea">, </span><span class="ct-a7c351">height</span><span class="ct-6c11ea">);</span></span><span class="line"></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-337041">// bind squareVertexBuffer as vertex positions buffer</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">bindBuffer</span><span class="ct-6c11ea">(</span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-b321a9">ARRAY_BUFFER</span><span class="ct-6c11ea">, </span><span class="ct-a7c351">squareVertexBuffer</span><span class="ct-6c11ea">);</span></span><span class="line"><span class="ct-6c11ea"> </span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-337041">// send every 3 bytes from squareVertexBuffer as {x,y,z} for each verticle</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">vertexAttribPointer</span><span class="ct-6c11ea">(</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">getAttribLocation</span><span class="ct-6c11ea">(</span><span class="ct-a7c351">prg</span><span class="ct-6c11ea">, </span><span class="ct-2e53f1">"aVertexPosition"</span><span class="ct-6c11ea">), </span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-b68eea">3</span><span class="ct-6c11ea">, </span><span class="ct-337041">// 3 bytes-long</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-b321a9">FLOAT</span><span class="ct-6c11ea">,</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-336e7b">false</span><span class="ct-6c11ea">, </span><span class="ct-337041">// don't normalize (int to float)</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-b68eea">0</span><span class="ct-6c11ea">, </span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-b68eea">0</span></span><span class="line"><span class="ct-6c11ea"> );</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-337041">// send vertice buffer as `aVertexPosition` attribute inside vertex shader</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">enableVertexAttribArray</span><span class="ct-6c11ea">(</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">getAttribLocation</span><span class="ct-6c11ea">(</span><span class="ct-a7c351">prg</span><span class="ct-6c11ea">, </span><span class="ct-2e53f1">"aVertexPosition"</span><span class="ct-6c11ea">)</span></span><span class="line"><span class="ct-6c11ea"> );</span></span><span class="line"></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-20ed3f">let</span><span class="ct-6c11ea"> </span><span class="ct-a7c351">i</span><span class="ct-6c11ea"> </span><span class="ct-0c8b20">=</span><span class="ct-6c11ea"> </span><span class="ct-b68eea">0</span><span class="ct-6c11ea">;</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-20ed3f">let</span><span class="ct-6c11ea"> </span><span class="ct-a7c351">speed</span><span class="ct-6c11ea"> </span><span class="ct-0c8b20">=</span><span class="ct-6c11ea"> </span><span class="ct-b68eea">0.01</span><span class="ct-6c11ea">;</span></span><span class="line"></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-337041">// that's the main rendering callback</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-0c8b20">return</span><span class="ct-6c11ea"> () </span><span class="ct-20ed3f">=></span><span class="ct-6c11ea"> {</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">useProgram</span><span class="ct-6c11ea">(</span><span class="ct-a7c351">prg</span><span class="ct-6c11ea">);</span></span><span class="line"></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-20ed3f">const</span><span class="ct-6c11ea"> </span><span class="ct-b321a9">scale</span><span class="ct-6c11ea"> </span><span class="ct-0c8b20">=</span><span class="ct-6c11ea"> </span><span class="ct-a7c351">i</span><span class="ct-6c11ea"> </span><span class="ct-0c8b20">*</span><span class="ct-6c11ea"> </span><span class="ct-6c11ea"> </span><span class="ct-b68eea">0.25</span><span class="ct-6c11ea">;</span></span><span class="line"></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-337041">// used for scaling inside Vertex Shader</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">uniform1f</span><span class="ct-6c11ea">(</span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">getUniformLocation</span><span class="ct-6c11ea">(</span><span class="ct-a7c351">prg</span><span class="ct-6c11ea">, </span><span class="ct-2e53f1">"slide"</span><span class="ct-6c11ea">), </span><span class="ct-a7c351">scale</span><span class="ct-6c11ea">);</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-337041">// GL Screen is square, so we need to fix it's aspect ration</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">uniform1f</span><span class="ct-6c11ea">(</span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">getUniformLocation</span><span class="ct-6c11ea">(</span><span class="ct-a7c351">prg</span><span class="ct-6c11ea">, </span><span class="ct-2e53f1">"aspect"</span><span class="ct-6c11ea">), </span><span class="ct-a7c351">height</span><span class="ct-6c11ea"> </span><span class="ct-0c8b20">/</span><span class="ct-6c11ea"> </span><span class="ct-a7c351">width</span><span class="ct-6c11ea">);</span></span><span class="line"></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">bindBuffer</span><span class="ct-6c11ea">(</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-b321a9">ELEMENT_ARRAY_BUFFER</span><span class="ct-6c11ea">, </span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">squareIndexBuffer</span></span><span class="line"><span class="ct-6c11ea"> );</span></span><span class="line"><span class="ct-6c11ea"> </span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">drawElements</span><span class="ct-6c11ea">(</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-b321a9">TRIANGLES</span><span class="ct-6c11ea">, </span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">indices</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-b321a9">UNSIGNED_SHORT</span><span class="ct-6c11ea">, </span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-b68eea">0</span><span class="ct-6c11ea">,</span></span><span class="line"><span class="ct-6c11ea"> );</span></span><span class="line"></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-0c8b20">if</span><span class="ct-6c11ea"> (</span><span class="ct-a7c351">i</span><span class="ct-6c11ea"> </span><span class="ct-0c8b20">></span><span class="ct-6c11ea"> </span><span class="ct-0c8b20">||</span><span class="ct-6c11ea"> </span><span class="ct-b68eea">0</span><span class="ct-6c11ea">) {</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">speed</span><span class="ct-6c11ea"> </span><span class="ct-0c8b20">=</span><span class="ct-6c11ea"> </span><span class="ct-0c8b20">-</span><span class="ct-a7c351">speed</span><span class="ct-6c11ea">;</span></span><span class="line"><span class="ct-6c11ea"> }</span></span><span class="line"></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">i</span><span class="ct-6c11ea"> </span><span class="ct-0c8b20">+=</span><span class="ct-6c11ea"> </span><span class="ct-a7c351">speed</span><span class="ct-6c11ea">;</span></span><span class="line"><span class="ct-6c11ea"> };</span></span><span class="line"><span class="ct-6c11ea">};</span></span></code></pre><!--]--></div><h2 id="shader-compiler"><a href="#shader-compiler"><!--[-->Shader compiler<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-337041">// create-shader.ts</span></span><span class="line"><span class="ct-0c8b20">export</span><span class="ct-6c11ea"> </span><span class="ct-20ed3f">const</span><span class="ct-6c11ea"> </span><span class="ct-2909a9">createShader</span><span class="ct-6c11ea"> </span><span class="ct-0c8b20">=</span><span class="ct-6c11ea"> (</span></span><span class="line"><span class="ct-8eb92a"> </span><span class="ct-6cdf8d">gl</span><span class="ct-80e1b8">:</span><span class="ct-8eb92a"> </span><span class="ct-feb2dc">WebGL2RenderingContext</span><span class="ct-8eb92a">,</span></span><span class="line"><span class="ct-8eb92a"> </span><span class="ct-6cdf8d">sourceCode</span><span class="ct-80e1b8">:</span><span class="ct-8eb92a"> </span><span class="ct-08630c">string</span><span class="ct-8eb92a">,</span></span><span class="line"><span class="ct-8eb92a"> </span><span class="ct-6cdf8d">type</span><span class="ct-80e1b8">:</span><span class="ct-8eb92a"> </span><span class="ct-08630c">number</span><span class="ct-8eb92a">, </span><span class="ct-b23b27">// gl.VERTEX_SHADER or gl.FRAGMENT_SHADER</span></span><span class="line"><span class="ct-6c11ea">) </span><span class="ct-20ed3f">=></span><span class="ct-6c11ea"> {</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-20ed3f">const</span><span class="ct-6c11ea"> </span><span class="ct-b321a9">shader</span><span class="ct-6c11ea"> </span><span class="ct-0c8b20">=</span><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">createShader</span><span class="ct-6c11ea">(</span><span class="ct-a7c351">type</span><span class="ct-6c11ea">);</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-0c8b20">if</span><span class="ct-6c11ea"> (</span><span class="ct-0c8b20">!</span><span class="ct-a7c351">shader</span><span class="ct-6c11ea">) {</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-0c8b20">throw</span><span class="ct-6c11ea"> </span><span class="ct-0c8b20">new</span><span class="ct-6c11ea"> </span><span class="ct-65a97f">Error</span><span class="ct-6c11ea">(</span><span class="ct-2e53f1">`Can't init shader`</span><span class="ct-6c11ea">);</span></span><span class="line"><span class="ct-6c11ea"> }</span></span><span class="line"></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">shaderSource</span><span class="ct-6c11ea">(</span><span class="ct-a7c351">shader</span><span class="ct-6c11ea">, </span><span class="ct-a7c351">sourceCode</span><span class="ct-6c11ea">);</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">compileShader</span><span class="ct-6c11ea">(</span><span class="ct-a7c351">shader</span><span class="ct-6c11ea">);</span></span><span class="line"></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-0c8b20">if</span><span class="ct-6c11ea"> (</span><span class="ct-0c8b20">!</span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">getShaderParameter</span><span class="ct-6c11ea">(</span><span class="ct-a7c351">shader</span><span class="ct-6c11ea">, </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-b321a9">COMPILE_STATUS</span><span class="ct-6c11ea">)) {</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-20ed3f">const</span><span class="ct-6c11ea"> </span><span class="ct-b321a9">info</span><span class="ct-6c11ea"> </span><span class="ct-0c8b20">=</span><span class="ct-6c11ea"> </span><span class="ct-a7c351">gl</span><span class="ct-6c11ea">.</span><span class="ct-2909a9">getShaderInfoLog</span><span class="ct-6c11ea">(</span><span class="ct-a7c351">shader</span><span class="ct-6c11ea">);</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-0c8b20">throw</span><span class="ct-6c11ea"> </span><span class="ct-2e53f1">`Could not compile WebGL program. </span><span class="ct-814214">\n\n</span><span class="ct-2e53f1">${</span><span class="ct-a7c351">info</span><span class="ct-2e53f1">}`</span><span class="ct-6c11ea">;</span></span><span class="line"><span class="ct-6c11ea"> }</span></span><span class="line"></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-0c8b20">return</span><span class="ct-6c11ea"> </span><span class="ct-a7c351">shader</span><span class="ct-6c11ea">;</span></span><span class="line"><span class="ct-6c11ea">};</span></span></code></pre><!--]--></div><h2 id="vertex-shader-example"><a href="#vertex-shader-example"><!--[-->Vertex Shader Example<!--]--></a></h2><p><!--[-->Read more at <a href="/frontend/webgl/vertex-shaders" class=""><!--[-->Vertex Shaders<!--]--></a><!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>c</span></button><!--[--><pre><code><span class="line"><span class="ct-337041">// current vertice position {x,y,z,w}</span></span><span class="line"><span class="ct-6c11ea">attribute vec4 aVertexPosition;</span></span><span class="line"><span class="ct-337041">// final vertice position with all transformations applied,</span></span><span class="line"><span class="ct-337041">// that will be passed to Fragment Shader</span></span><span class="line"><span class="ct-6c11ea">varying vec4 v_positionWithOffset;</span></span><span class="line"><span class="ct-337041">// Parameters passed from Javascript loop</span></span><span class="line"><span class="ct-6c11ea">uniform </span><span class="ct-20ed3f">float</span><span class="ct-6c11ea"> slide;</span></span><span class="line"><span class="ct-6c11ea">uniform </span><span class="ct-20ed3f">float</span><span class="ct-6c11ea"> aspect;</span></span><span class="line"></span><span class="line"><span class="ct-20ed3f">void</span><span class="ct-6c11ea"> </span><span class="ct-2909a9">main</span><span class="ct-6c11ea">(){</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-337041">// float array of 4 elements, same as [slide,slide,slide,1]</span></span><span class="line"><span class="ct-6c11ea"> vec4 scale</span><span class="ct-0c8b20">=</span><span class="ct-2909a9">vec4</span><span class="ct-6c11ea">(</span><span class="ct-2909a9">vec3</span><span class="ct-6c11ea">(slide),</span><span class="ct-b68eea">1</span><span class="ct-6c11ea">);</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-337041">// float array of 4 elements, same as [aspect,1,1,1]</span></span><span class="line"><span class="ct-6c11ea"> vec4 aspectRatioFix</span><span class="ct-0c8b20">=</span><span class="ct-2909a9">vec4</span><span class="ct-6c11ea">(aspect,</span><span class="ct-2909a9">vec3</span><span class="ct-6c11ea">(</span><span class="ct-b68eea">1</span><span class="ct-6c11ea">));</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-337041">// vertice position, multiplied with matrices of scale and aspect ratio</span></span><span class="line"><span class="ct-6c11ea"> gl_Position</span><span class="ct-0c8b20">=</span><span class="ct-6c11ea">aVertexPosition</span><span class="ct-0c8b20">*</span><span class="ct-6c11ea">scale</span><span class="ct-0c8b20">*</span><span class="ct-6c11ea">aspectRatioFix,</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-337041">// vertice offset, that will be passed to fragment shader</span></span><span class="line"><span class="ct-6c11ea"> v_positionWithOffset</span><span class="ct-0c8b20">=</span><span class="ct-6c11ea">gl_Position</span><span class="ct-0c8b20">+</span><span class="ct-2909a9">vec4</span><span class="ct-6c11ea">(</span><span class="ct-b68eea">1</span><span class="ct-6c11ea">,</span><span class="ct-b68eea">1</span><span class="ct-6c11ea">,</span><span class="ct-b68eea">1</span><span class="ct-6c11ea">,</span><span class="ct-b68eea">1</span><span class="ct-6c11ea">);</span></span><span class="line"><span class="ct-6c11ea">}</span></span></code></pre><!--]--></div><h2 id="fragment-shader-example"><a href="#fragment-shader-example"><!--[-->Fragment Shader Example<!--]--></a></h2><p><!--[-->Read more at <a href="/frontend/webgl/fragment-shaders" class=""><!--[-->Fragment Shaders<!--]--></a>.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>c</span></button><!--[--><pre><code><span class="line"><span class="ct-6c11ea">precision highp </span><span class="ct-20ed3f">float</span><span class="ct-6c11ea">;</span></span><span class="line"></span><span class="line"><span class="ct-337041">// parameter from Vertex Shader</span></span><span class="line"><span class="ct-6c11ea">varying vec4 v_positionWithOffset;</span></span><span class="line"></span><span class="line"><span class="ct-20ed3f">void</span><span class="ct-6c11ea"> </span><span class="ct-2909a9">main</span><span class="ct-6c11ea">(</span><span class="ct-20ed3f">void</span><span class="ct-6c11ea">){</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-337041">// color, attached to current verticle {r,g,b,alpha}</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-337041">// same a[</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-337041">// v_positionWithOffset.x,</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-337041">// v_positionWithOffset.y, </span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-337041">// v_positionWithOffset.z, </span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-337041">// 1</span></span><span class="line"><span class="ct-6c11ea"> </span><span class="ct-337041">// ]</span></span><span class="line"><span class="ct-6c11ea"> gl_FragColor</span><span class="ct-0c8b20">=</span><span class="ct-2909a9">vec4</span><span class="ct-6c11ea">(</span><span class="ct-a7c351">v_positionWithOffset</span><span class="ct-6c11ea">.</span><span class="ct-a7c351">xyz</span><span class="ct-6c11ea">,</span><span class="ct-b68eea">1</span><span class="ct-6c11ea">);</span></span><span class="line"><span class="ct-6c11ea">}</span></span></code></pre><!--]--></div><style>.ct-814214{color:#79C0FF}.ct-b23b27{color:#8B949E}.ct-336e7b{color:#79C0FF}.ct-65a97f{color:#79C0FF}.ct-b68eea{color:#79C0FF}.ct-08630c{color:#79C0FF}.ct-feb2dc{color:#FFA657}.ct-80e1b8{color:#FF7B72}.ct-6cdf8d{color:#FFA657}.ct-8eb92a{color:#C9D1D9}.ct-2909a9{color:#D2A8FF}.ct-b321a9{color:#79C0FF}.ct-20ed3f{color:#FF7B72}.ct-2e53f1{color:#A5D6FF}.ct-a7c351{color:#C9D1D9}.ct-6c11ea{color:#C9D1D9}.ct-0c8b20{color:#FF7B72}.ct-337041{color:#8B949E}.light .ct-337041{color:#93A1A1}.light .ct-0c8b20{color:#859900}.light .ct-6c11ea{color:#657B83}.light .ct-a7c351{color:#268BD2}.light .ct-2e53f1{color:#2AA198}.light .ct-20ed3f{color:#073642}.light .ct-b321a9{color:#268BD2}.light .ct-2909a9{color:#268BD2}.light .ct-8eb92a{color:#657B83}.light .ct-6cdf8d{color:#657B83}.light .ct-80e1b8{color:#859900}.light .ct-feb2dc{color:#268BD2}.light .ct-08630c{color:#859900}.light .ct-b68eea{color:#D33682}.light .ct-65a97f{color:#859900}.light .ct-336e7b{color:#B58900}.light .ct-b23b27{color:#93A1A1}.light .ct-814214{color:#CB4B16}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/frontend/webgl/basics-of-webgl-(drawing-a-cube)/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695530558}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseUl.b892d423.js" crossorigin></script><script type="module" src="/nuxt/ProseLi.a224f663.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseStrong.e968ffe9.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseImg.06e5e7fa.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a aria-current="page" href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="router-link-active _active_192pu_81 _link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Basics Of WebGL (Drawing A Cube)</h1><article><div><h2 id="helpful-documentation"><a href="#helpful-documentation"><!--[-->Helpful documentation<!--]--></a></h2><ul><!--[--><li><!--[--><a href="https://open.gl/" rel="nofollow" target="_blank"><!--[-->https://open.gl/<!--]--></a><!--]--></li><li><!--[-->This youtube series: <a href="https://www.youtube.com/watch?v=kB0ZVUrI4Aw" rel="nofollow" target="_blank"><!--[-->Basics<!--]--></a>, <a href="https://www.youtube.com/watch?v=3yLL9ADo-ko" rel="nofollow" target="_blank"><!--[-->Making a cube, applying transformations<!--]--></a>, <a href="https://www.youtube.com/watch?v=hpnd11doMgc&t=52s" rel="nofollow" target="_blank"><!--[-->Texturing<!--]--></a><!--]--></li><!--]--></ul><h2 id="vertices-and-indices"><a href="#vertices-and-indices"><!--[-->Vertices and Indices<!--]--></a></h2><p><!--[--><strong><!--[-->Vertices<!--]--></strong> are points with specific coordinates <code><!--[-->{x,y,z}<!--]--></code> in a 3D-space. We can build any figure by connecting <strong><!--[-->vertices<!--]--></strong> in triangles with <strong><!--[-->indices<!--]--></strong>.<!--]--></p><h2 id="shaders"><a href="#shaders"><!--[-->Shaders<!--]--></a></h2><p><!--[-->Shaders are functions, written in C, which describe how to draw and color polygons to Graphic Card.<!--]--></p><p><!--[--><a href="/frontend/webgl/vertex-shaders" class=""><!--[-->Vertex Shaders<!--]--></a> describe <strong><!--[-->vertice<!--]--></strong> positions, so Graphic Card can position them by connecting with <strong><!--[-->indices<!--]--></strong> and project to 2D canvas.<!--]--></p><p><!--[--><a href="/frontend/webgl/fragment-shaders" class=""><!--[-->Fragment Shaders<!--]--></a> describe the way polygons should be colored by assigning colors to Vertices or by applying textures to polygons.<!--]--></p><p><!--[-->Shaders can have parameters passed from Javascript code (<code><!--[-->uniforms<!--]--></code>, <code><!--[-->varyings<!--]--></code> and <code><!--[-->attributes<!--]--></code>). <a href="/frontend/webgl/fragment-shaders" class=""><!--[-->Fragment Shaders<!--]--></a> can also access data from <a href="/frontend/webgl/vertex-shaders" class=""><!--[-->Vertex Shaders<!--]--></a> (that ones called <code><!--[-->varyings<!--]--></code>).<!--]--></p><p><!--[--><img src="https://open.gl/media/img/c2_pipeline.png" alt><!--]--></p><h2 id="program"><a href="#program"><!--[-->Program<!--]--></a></h2><p><!--[-->Program, as far as I understand, is a scene, that's described with <strong><!--[-->Vertices<!--]--></strong>, <strong><!--[-->Indices<!--]--></strong>, specific <a href="/frontend/webgl/vertex-shaders" class=""><!--[-->Vertex Shaders<!--]--></a> and <a href="/frontend/webgl/fragment-shaders" class=""><!--[-->Fragment Shaders<!--]--></a>.<!--]--></p><h2 id="applying-transformations"><a href="#applying-transformations"><!--[-->Applying transformations<!--]--></a></h2><p><!--[-->The best way to change positions inside <a href="/frontend/webgl/vertex-shaders" class=""><!--[-->Vertex Shaders<!--]--></a> or color in <a href="/frontend/webgl/fragment-shaders" class=""><!--[-->Fragment Shaders<!--]--></a> is to pass parameters (also called <code><!--[-->uniforms<!--]--></code> and <code><!--[-->varyings<!--]--></code>).<!--]--></p><p><!--[-->Read about that at <a href="https://open.gl/transformations" rel="nofollow" target="_blank"><!--[-->open.gl<!--]--></a> and at <a href="/frontend/webgl/vertex-shaders" class=""><!--[-->Vertex Shaders<!--]--></a>.<!--]--></p><h2 id="source-code-with-explanations"><a href="#source-code-with-explanations"><!--[-->Source code with explanations<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-6e2271">// render-a-cube.ts</span></span><span class="line"><span class="ct-532f07">import</span><span class="ct-5a6e76"> { </span><span class="ct-0c42a0">createShader</span><span class="ct-5a6e76"> } </span><span class="ct-532f07">from</span><span class="ct-5a6e76"> </span><span class="ct-2010d6">"./create-shader"</span><span class="ct-5a6e76">;</span></span><span class="line"><span class="ct-532f07">import</span><span class="ct-5a6e76"> </span><span class="ct-0c42a0">vxShader</span><span class="ct-5a6e76"> </span><span class="ct-532f07">from</span><span class="ct-5a6e76"> </span><span class="ct-2010d6">"./vertex.glsl?raw"</span><span class="ct-5a6e76">;</span></span><span class="line"><span class="ct-532f07">import</span><span class="ct-5a6e76"> </span><span class="ct-0c42a0">fgShader</span><span class="ct-5a6e76"> </span><span class="ct-532f07">from</span><span class="ct-5a6e76"> </span><span class="ct-2010d6">"./fragment.glsl?raw"</span><span class="ct-5a6e76">;</span></span><span class="line"></span><span class="line"><span class="ct-fd83b5">const</span><span class="ct-5a6e76"> </span><span class="ct-5011ab">canvas</span><span class="ct-5a6e76"> </span><span class="ct-532f07">=</span><span class="ct-5a6e76"> </span><span class="ct-0c42a0">document</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">getElementyId</span><span class="ct-5a6e76">(</span><span class="ct-2010d6">'view'</span><span class="ct-5a6e76">);</span></span><span class="line"><span class="ct-fd83b5">const</span><span class="ct-5a6e76"> </span><span class="ct-5011ab">ctx</span><span class="ct-5a6e76"> </span><span class="ct-532f07">=</span><span class="ct-5a6e76"> </span><span class="ct-0c42a0">canvas</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">getRenderingContext</span><span class="ct-5a6e76">(</span><span class="ct-2010d6">'webgl'</span><span class="ct-5a6e76">);</span></span><span class="line"></span><span class="line"><span class="ct-6e2271">// should be put inside requestAnimationFrame</span></span><span class="line"><span class="ct-7d5ed7">drawCube</span><span class="ct-5a6e76">(</span><span class="ct-0c42a0">ctx</span><span class="ct-5a6e76">)(); </span></span><span class="line"></span><span class="line"><span class="ct-fd83b5">function</span><span class="ct-5a6e76"> </span><span class="ct-7d5ed7">drawCube</span><span class="ct-5a6e76"> (</span></span><span class="line"><span class="ct-aaa2c9"> </span><span class="ct-c4ba0e">gl</span><span class="ct-2eab2c">:</span><span class="ct-aaa2c9"> </span><span class="ct-89a5fc">WebGL2RenderingContext</span><span class="ct-aaa2c9">, </span></span><span class="line"><span class="ct-aaa2c9"> </span><span class="ct-c4ba0e">width</span><span class="ct-2eab2c">:</span><span class="ct-aaa2c9"> </span><span class="ct-0555f3">number</span><span class="ct-aaa2c9">,</span></span><span class="line"><span class="ct-aaa2c9"> </span><span class="ct-c4ba0e">height</span><span class="ct-2eab2c">:</span><span class="ct-aaa2c9"> </span><span class="ct-0555f3">number</span></span><span class="line"><span class="ct-5a6e76">) {</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-6e2271">// Initializing viewport</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">viewport</span><span class="ct-5a6e76">(</span><span class="ct-f22312">0</span><span class="ct-5a6e76">, </span><span class="ct-0c42a0">width</span><span class="ct-5a6e76">, </span><span class="ct-0c42a0">height</span><span class="ct-5a6e76">);</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">clearColor</span><span class="ct-5a6e76">(</span><span class="ct-f22312">0</span><span class="ct-5a6e76">, </span><span class="ct-f22312">0</span><span class="ct-5a6e76">, </span><span class="ct-f22312">0</span><span class="ct-5a6e76">);</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">clear</span><span class="ct-5a6e76">(</span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-5011ab">COLOR_BUFFER_BIT</span><span class="ct-5a6e76">);</span></span><span class="line"></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-fd83b5">const</span><span class="ct-5a6e76"> </span><span class="ct-5011ab">prg</span><span class="ct-5a6e76"> </span><span class="ct-532f07">=</span><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">createProgram</span><span class="ct-5a6e76">();</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-532f07">if</span><span class="ct-5a6e76"> (</span><span class="ct-532f07">!</span><span class="ct-0c42a0">prg</span><span class="ct-5a6e76">) {</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-532f07">throw</span><span class="ct-5a6e76"> </span><span class="ct-532f07">new</span><span class="ct-5a6e76"> </span><span class="ct-cd3b9c">Error</span><span class="ct-5a6e76">(</span><span class="ct-2010d6">"Can't init programm"</span><span class="ct-5a6e76">);</span></span><span class="line"><span class="ct-5a6e76"> }</span></span><span class="line"></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-6e2271">// Setting up VERTEX and FRAGMENT shaders</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-fd83b5">const</span><span class="ct-5a6e76"> </span><span class="ct-5011ab">vx</span><span class="ct-5a6e76"> </span><span class="ct-532f07">=</span><span class="ct-5a6e76"> </span><span class="ct-7d5ed7">createShader</span><span class="ct-5a6e76">(</span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">, </span><span class="ct-0c42a0">vxShader</span><span class="ct-5a6e76">, </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-5011ab">VERTEX_SHADER</span><span class="ct-5a6e76">);</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">attachShader</span><span class="ct-5a6e76">(</span><span class="ct-0c42a0">prg</span><span class="ct-5a6e76">, </span><span class="ct-0c42a0">vx</span><span class="ct-5a6e76">);</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-fd83b5">const</span><span class="ct-5a6e76"> </span><span class="ct-5011ab">fx</span><span class="ct-5a6e76"> </span><span class="ct-532f07">=</span><span class="ct-5a6e76"> </span><span class="ct-7d5ed7">createShader</span><span class="ct-5a6e76">(</span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">, </span><span class="ct-0c42a0">fgShader</span><span class="ct-5a6e76">, </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-5011ab">FRAGMENT_SHADER</span><span class="ct-5a6e76">);</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">attachShader</span><span class="ct-5a6e76">(</span><span class="ct-0c42a0">prg</span><span class="ct-5a6e76">, </span><span class="ct-0c42a0">fx</span><span class="ct-5a6e76">);</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">linkProgram</span><span class="ct-5a6e76">(</span><span class="ct-0c42a0">prg</span><span class="ct-5a6e76">);</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-532f07">if</span><span class="ct-5a6e76"> (</span><span class="ct-532f07">!</span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">getProgramParameter</span><span class="ct-5a6e76">(</span><span class="ct-0c42a0">prg</span><span class="ct-5a6e76">, </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-5011ab">LINK_STATUS</span><span class="ct-5a6e76">)) {</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-532f07">throw</span><span class="ct-5a6e76"> </span><span class="ct-532f07">new</span><span class="ct-5a6e76"> </span><span class="ct-cd3b9c">Error</span><span class="ct-5a6e76">(</span><span class="ct-2010d6">"Could not initialise shaders"</span><span class="ct-5a6e76">);</span></span><span class="line"><span class="ct-5a6e76"> }</span></span><span class="line"></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-6e2271">// Cube's vertices Array<[x,y,z]>, 8 items</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-fd83b5">const</span><span class="ct-5a6e76"> </span><span class="ct-5011ab">vertices</span><span class="ct-5a6e76"> </span><span class="ct-532f07">=</span><span class="ct-5a6e76"> [</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-532f07">-</span><span class="ct-f22312">1</span><span class="ct-5a6e76">, </span><span class="ct-532f07">-</span><span class="ct-f22312">1</span><span class="ct-5a6e76">, </span><span class="ct-532f07">-</span><span class="ct-f22312">1</span><span class="ct-5a6e76">, </span><span class="ct-6e2271">// 0</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-f22312">1</span><span class="ct-5a6e76">, </span><span class="ct-532f07">-</span><span class="ct-f22312">1</span><span class="ct-5a6e76">, </span><span class="ct-532f07">-</span><span class="ct-f22312">1</span><span class="ct-5a6e76">, </span><span class="ct-6e2271">// 1</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-f22312">1</span><span class="ct-5a6e76">, </span><span class="ct-f22312">1</span><span class="ct-5a6e76">, </span><span class="ct-532f07">-</span><span class="ct-f22312">1</span><span class="ct-5a6e76">, </span><span class="ct-6e2271">// 2</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-532f07">-</span><span class="ct-f22312">1</span><span class="ct-5a6e76">, </span><span class="ct-f22312">1</span><span class="ct-5a6e76">, </span><span class="ct-532f07">-</span><span class="ct-f22312">1</span><span class="ct-5a6e76">, </span><span class="ct-6e2271">// 3</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-532f07">-</span><span class="ct-f22312">1</span><span class="ct-5a6e76">, </span><span class="ct-532f07">-</span><span class="ct-f22312">1</span><span class="ct-5a6e76">, </span><span class="ct-f22312">1</span><span class="ct-5a6e76">, </span><span class="ct-6e2271">// 4</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-f22312">1</span><span class="ct-5a6e76">, </span><span class="ct-532f07">-</span><span class="ct-f22312">1</span><span class="ct-5a6e76">, </span><span class="ct-f22312">1</span><span class="ct-5a6e76">, </span><span class="ct-6e2271">// 5</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-f22312">1</span><span class="ct-5a6e76">, </span><span class="ct-f22312">1</span><span class="ct-5a6e76">, </span><span class="ct-f22312">1</span><span class="ct-5a6e76">, </span><span class="ct-6e2271">// 6</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-532f07">-</span><span class="ct-f22312">1</span><span class="ct-5a6e76">, </span><span class="ct-f22312">1</span><span class="ct-5a6e76">, </span><span class="ct-f22312">1</span><span class="ct-5a6e76">, </span><span class="ct-6e2271">// 7</span></span><span class="line"><span class="ct-5a6e76"> ];</span></span><span class="line"></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-6e2271">// indices, that form triangles, that form cube sides</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-fd83b5">const</span><span class="ct-5a6e76"> </span><span class="ct-5011ab">indices</span><span class="ct-5a6e76"> </span><span class="ct-532f07">=</span><span class="ct-5a6e76"> [</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-f22312">2</span><span class="ct-5a6e76">, </span><span class="ct-f22312">1</span><span class="ct-5a6e76">, </span><span class="ct-f22312">0</span><span class="ct-5a6e76">, </span><span class="ct-6e2271">// side 0 (first triangle)</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-f22312">0</span><span class="ct-5a6e76">, </span><span class="ct-f22312">3</span><span class="ct-5a6e76">, </span><span class="ct-f22312">2</span><span class="ct-5a6e76">, </span><span class="ct-6e2271">// side 0 (second triangle)</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-f22312">0</span><span class="ct-5a6e76">, </span><span class="ct-f22312">4</span><span class="ct-5a6e76">, </span><span class="ct-f22312">7</span><span class="ct-5a6e76">, </span><span class="ct-6e2271">// side 1 (first triangle)</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-f22312">7</span><span class="ct-5a6e76">, </span><span class="ct-f22312">3</span><span class="ct-5a6e76">, </span><span class="ct-f22312">0</span><span class="ct-5a6e76">, </span><span class="ct-6e2271">// side 1 (second triangle)</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-f22312">0</span><span class="ct-5a6e76">, </span><span class="ct-f22312">1</span><span class="ct-5a6e76">, </span><span class="ct-f22312">5</span><span class="ct-5a6e76">, </span><span class="ct-6e2271">// ...</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-f22312">5</span><span class="ct-5a6e76">, </span><span class="ct-f22312">4</span><span class="ct-5a6e76">, </span><span class="ct-f22312">0</span><span class="ct-5a6e76">, </span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-f22312">1</span><span class="ct-5a6e76">, </span><span class="ct-f22312">2</span><span class="ct-5a6e76">, </span><span class="ct-f22312">6</span><span class="ct-5a6e76">, </span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-f22312">6</span><span class="ct-5a6e76">, </span><span class="ct-f22312">5</span><span class="ct-5a6e76">, </span><span class="ct-f22312">1</span><span class="ct-5a6e76">, </span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-f22312">2</span><span class="ct-5a6e76">, </span><span class="ct-f22312">3</span><span class="ct-5a6e76">, </span><span class="ct-f22312">7</span><span class="ct-5a6e76">, </span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-f22312">7</span><span class="ct-5a6e76">, </span><span class="ct-f22312">6</span><span class="ct-5a6e76">, </span><span class="ct-f22312">2</span><span class="ct-5a6e76">, </span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-f22312">4</span><span class="ct-5a6e76">, </span><span class="ct-f22312">5</span><span class="ct-5a6e76">, </span><span class="ct-f22312">6</span><span class="ct-5a6e76">, </span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-f22312">6</span><span class="ct-5a6e76">, </span><span class="ct-f22312">7</span><span class="ct-5a6e76">, </span><span class="ct-f22312">4</span><span class="ct-5a6e76">,</span></span><span class="line"><span class="ct-5a6e76"> ];</span></span><span class="line"></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-6e2271">// createe a vertex buffer and bind vertices to it</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-fd83b5">const</span><span class="ct-5a6e76"> </span><span class="ct-5011ab">squareVertexBuffer</span><span class="ct-5a6e76"> </span><span class="ct-532f07">=</span><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">createBuffer</span><span class="ct-5a6e76">();</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">bindBuffer</span><span class="ct-5a6e76">(</span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-5011ab">ARRAY_BUFFER</span><span class="ct-5a6e76">, </span><span class="ct-0c42a0">squareVertexBuffer</span><span class="ct-5a6e76">);</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">bufferData</span><span class="ct-5a6e76">(</span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-5011ab">ARRAY_BUFFER</span><span class="ct-5a6e76">, </span><span class="ct-532f07">new</span><span class="ct-5a6e76"> </span><span class="ct-cd3b9c">Float32Array</span><span class="ct-5a6e76">(</span><span class="ct-0c42a0">vertices</span><span class="ct-5a6e76">), </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-5011ab">STATIC_DRAW</span><span class="ct-5a6e76">);</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">bindBuffer</span><span class="ct-5a6e76">(</span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-5011ab">ARRAY_BUFFER</span><span class="ct-5a6e76">, </span><span class="ct-02b732">null</span><span class="ct-5a6e76">);</span></span><span class="line"></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-6e2271">// create a vertex buffer and bind indices to it</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-fd83b5">const</span><span class="ct-5a6e76"> </span><span class="ct-5011ab">squareIndexBuffer</span><span class="ct-5a6e76"> </span><span class="ct-532f07">=</span><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">createBuffer</span><span class="ct-5a6e76">();</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">bindBuffer</span><span class="ct-5a6e76">(</span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-5011ab">ELEMENT_ARRAY_BUFFER</span><span class="ct-5a6e76">, </span><span class="ct-0c42a0">squareIndexBuffer</span><span class="ct-5a6e76">);</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">bufferData</span><span class="ct-5a6e76">(</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-5011ab">ELEMENT_ARRAY_BUFFER</span><span class="ct-5a6e76">,</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-532f07">new</span><span class="ct-5a6e76"> </span><span class="ct-cd3b9c">Uint16Array</span><span class="ct-5a6e76">(</span><span class="ct-0c42a0">indices</span><span class="ct-5a6e76">),</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-5011ab">STATIC_DRAW</span></span><span class="line"><span class="ct-5a6e76"> );</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">bindBuffer</span><span class="ct-5a6e76">(</span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-5011ab">ELEMENT_ARRAY_BUFFER</span><span class="ct-5a6e76">, </span><span class="ct-02b732">null</span><span class="ct-5a6e76">);</span></span><span class="line"></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-6e2271">// initial drawing</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">clearColor</span><span class="ct-5a6e76">(</span><span class="ct-f22312">0.0</span><span class="ct-5a6e76">, </span><span class="ct-f22312">0.0</span><span class="ct-5a6e76">, </span><span class="ct-f22312">0.0</span><span class="ct-5a6e76">);</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">enable</span><span class="ct-5a6e76">(</span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-5011ab">DEPTH_TEST</span><span class="ct-5a6e76">);</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">clear</span><span class="ct-5a6e76">(</span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-5011ab">COLOR_BUFFER_BIT</span><span class="ct-5a6e76"> </span><span class="ct-532f07">|</span><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-5011ab">DEPTH_BUFFER_BIT</span><span class="ct-5a6e76">);</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">viewport</span><span class="ct-5a6e76">(</span><span class="ct-f22312">0</span><span class="ct-5a6e76">, </span><span class="ct-0c42a0">width</span><span class="ct-5a6e76">, </span><span class="ct-0c42a0">height</span><span class="ct-5a6e76">);</span></span><span class="line"></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-6e2271">// bind squareVertexBuffer as vertex positions buffer</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">bindBuffer</span><span class="ct-5a6e76">(</span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-5011ab">ARRAY_BUFFER</span><span class="ct-5a6e76">, </span><span class="ct-0c42a0">squareVertexBuffer</span><span class="ct-5a6e76">);</span></span><span class="line"><span class="ct-5a6e76"> </span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-6e2271">// send every 3 bytes from squareVertexBuffer as {x,y,z} for each verticle</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">vertexAttribPointer</span><span class="ct-5a6e76">(</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">getAttribLocation</span><span class="ct-5a6e76">(</span><span class="ct-0c42a0">prg</span><span class="ct-5a6e76">, </span><span class="ct-2010d6">"aVertexPosition"</span><span class="ct-5a6e76">), </span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-f22312">3</span><span class="ct-5a6e76">, </span><span class="ct-6e2271">// 3 bytes-long</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-5011ab">FLOAT</span><span class="ct-5a6e76">,</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-02b732">false</span><span class="ct-5a6e76">, </span><span class="ct-6e2271">// don't normalize (int to float)</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-f22312">0</span><span class="ct-5a6e76">, </span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-f22312">0</span></span><span class="line"><span class="ct-5a6e76"> );</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-6e2271">// send vertice buffer as `aVertexPosition` attribute inside vertex shader</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">enableVertexAttribArray</span><span class="ct-5a6e76">(</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">getAttribLocation</span><span class="ct-5a6e76">(</span><span class="ct-0c42a0">prg</span><span class="ct-5a6e76">, </span><span class="ct-2010d6">"aVertexPosition"</span><span class="ct-5a6e76">)</span></span><span class="line"><span class="ct-5a6e76"> );</span></span><span class="line"></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-fd83b5">let</span><span class="ct-5a6e76"> </span><span class="ct-0c42a0">i</span><span class="ct-5a6e76"> </span><span class="ct-532f07">=</span><span class="ct-5a6e76"> </span><span class="ct-f22312">0</span><span class="ct-5a6e76">;</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-fd83b5">let</span><span class="ct-5a6e76"> </span><span class="ct-0c42a0">speed</span><span class="ct-5a6e76"> </span><span class="ct-532f07">=</span><span class="ct-5a6e76"> </span><span class="ct-f22312">0.01</span><span class="ct-5a6e76">;</span></span><span class="line"></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-6e2271">// that's the main rendering callback</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-532f07">return</span><span class="ct-5a6e76"> () </span><span class="ct-fd83b5">=></span><span class="ct-5a6e76"> {</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">useProgram</span><span class="ct-5a6e76">(</span><span class="ct-0c42a0">prg</span><span class="ct-5a6e76">);</span></span><span class="line"></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-fd83b5">const</span><span class="ct-5a6e76"> </span><span class="ct-5011ab">scale</span><span class="ct-5a6e76"> </span><span class="ct-532f07">=</span><span class="ct-5a6e76"> </span><span class="ct-0c42a0">i</span><span class="ct-5a6e76"> </span><span class="ct-532f07">*</span><span class="ct-5a6e76"> </span><span class="ct-5a6e76"> </span><span class="ct-f22312">0.25</span><span class="ct-5a6e76">;</span></span><span class="line"></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-6e2271">// used for scaling inside Vertex Shader</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">uniform1f</span><span class="ct-5a6e76">(</span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">getUniformLocation</span><span class="ct-5a6e76">(</span><span class="ct-0c42a0">prg</span><span class="ct-5a6e76">, </span><span class="ct-2010d6">"slide"</span><span class="ct-5a6e76">), </span><span class="ct-0c42a0">scale</span><span class="ct-5a6e76">);</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-6e2271">// GL Screen is square, so we need to fix it's aspect ration</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">uniform1f</span><span class="ct-5a6e76">(</span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">getUniformLocation</span><span class="ct-5a6e76">(</span><span class="ct-0c42a0">prg</span><span class="ct-5a6e76">, </span><span class="ct-2010d6">"aspect"</span><span class="ct-5a6e76">), </span><span class="ct-0c42a0">height</span><span class="ct-5a6e76"> </span><span class="ct-532f07">/</span><span class="ct-5a6e76"> </span><span class="ct-0c42a0">width</span><span class="ct-5a6e76">);</span></span><span class="line"></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">bindBuffer</span><span class="ct-5a6e76">(</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-5011ab">ELEMENT_ARRAY_BUFFER</span><span class="ct-5a6e76">, </span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">squareIndexBuffer</span></span><span class="line"><span class="ct-5a6e76"> );</span></span><span class="line"><span class="ct-5a6e76"> </span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">drawElements</span><span class="ct-5a6e76">(</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-5011ab">TRIANGLES</span><span class="ct-5a6e76">, </span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">indices</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-5011ab">UNSIGNED_SHORT</span><span class="ct-5a6e76">, </span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-f22312">0</span><span class="ct-5a6e76">,</span></span><span class="line"><span class="ct-5a6e76"> );</span></span><span class="line"></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-532f07">if</span><span class="ct-5a6e76"> (</span><span class="ct-0c42a0">i</span><span class="ct-5a6e76"> </span><span class="ct-532f07">></span><span class="ct-5a6e76"> </span><span class="ct-532f07">||</span><span class="ct-5a6e76"> </span><span class="ct-f22312">0</span><span class="ct-5a6e76">) {</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">speed</span><span class="ct-5a6e76"> </span><span class="ct-532f07">=</span><span class="ct-5a6e76"> </span><span class="ct-532f07">-</span><span class="ct-0c42a0">speed</span><span class="ct-5a6e76">;</span></span><span class="line"><span class="ct-5a6e76"> }</span></span><span class="line"></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">i</span><span class="ct-5a6e76"> </span><span class="ct-532f07">+=</span><span class="ct-5a6e76"> </span><span class="ct-0c42a0">speed</span><span class="ct-5a6e76">;</span></span><span class="line"><span class="ct-5a6e76"> };</span></span><span class="line"><span class="ct-5a6e76">};</span></span></code></pre><!--]--></div><h2 id="shader-compiler"><a href="#shader-compiler"><!--[-->Shader compiler<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-6e2271">// create-shader.ts</span></span><span class="line"><span class="ct-532f07">export</span><span class="ct-5a6e76"> </span><span class="ct-fd83b5">const</span><span class="ct-5a6e76"> </span><span class="ct-7d5ed7">createShader</span><span class="ct-5a6e76"> </span><span class="ct-532f07">=</span><span class="ct-5a6e76"> (</span></span><span class="line"><span class="ct-aaa2c9"> </span><span class="ct-c4ba0e">gl</span><span class="ct-2eab2c">:</span><span class="ct-aaa2c9"> </span><span class="ct-89a5fc">WebGL2RenderingContext</span><span class="ct-aaa2c9">,</span></span><span class="line"><span class="ct-aaa2c9"> </span><span class="ct-c4ba0e">sourceCode</span><span class="ct-2eab2c">:</span><span class="ct-aaa2c9"> </span><span class="ct-0555f3">string</span><span class="ct-aaa2c9">,</span></span><span class="line"><span class="ct-aaa2c9"> </span><span class="ct-c4ba0e">type</span><span class="ct-2eab2c">:</span><span class="ct-aaa2c9"> </span><span class="ct-0555f3">number</span><span class="ct-aaa2c9">, </span><span class="ct-aea678">// gl.VERTEX_SHADER or gl.FRAGMENT_SHADER</span></span><span class="line"><span class="ct-5a6e76">) </span><span class="ct-fd83b5">=></span><span class="ct-5a6e76"> {</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-fd83b5">const</span><span class="ct-5a6e76"> </span><span class="ct-5011ab">shader</span><span class="ct-5a6e76"> </span><span class="ct-532f07">=</span><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">createShader</span><span class="ct-5a6e76">(</span><span class="ct-0c42a0">type</span><span class="ct-5a6e76">);</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-532f07">if</span><span class="ct-5a6e76"> (</span><span class="ct-532f07">!</span><span class="ct-0c42a0">shader</span><span class="ct-5a6e76">) {</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-532f07">throw</span><span class="ct-5a6e76"> </span><span class="ct-532f07">new</span><span class="ct-5a6e76"> </span><span class="ct-cd3b9c">Error</span><span class="ct-5a6e76">(</span><span class="ct-2010d6">`Can't init shader`</span><span class="ct-5a6e76">);</span></span><span class="line"><span class="ct-5a6e76"> }</span></span><span class="line"></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">shaderSource</span><span class="ct-5a6e76">(</span><span class="ct-0c42a0">shader</span><span class="ct-5a6e76">, </span><span class="ct-0c42a0">sourceCode</span><span class="ct-5a6e76">);</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">compileShader</span><span class="ct-5a6e76">(</span><span class="ct-0c42a0">shader</span><span class="ct-5a6e76">);</span></span><span class="line"></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-532f07">if</span><span class="ct-5a6e76"> (</span><span class="ct-532f07">!</span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">getShaderParameter</span><span class="ct-5a6e76">(</span><span class="ct-0c42a0">shader</span><span class="ct-5a6e76">, </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-5011ab">COMPILE_STATUS</span><span class="ct-5a6e76">)) {</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-fd83b5">const</span><span class="ct-5a6e76"> </span><span class="ct-5011ab">info</span><span class="ct-5a6e76"> </span><span class="ct-532f07">=</span><span class="ct-5a6e76"> </span><span class="ct-0c42a0">gl</span><span class="ct-5a6e76">.</span><span class="ct-7d5ed7">getShaderInfoLog</span><span class="ct-5a6e76">(</span><span class="ct-0c42a0">shader</span><span class="ct-5a6e76">);</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-532f07">throw</span><span class="ct-5a6e76"> </span><span class="ct-2010d6">`Could not compile WebGL program. </span><span class="ct-0b8227">\n\n</span><span class="ct-2010d6">${</span><span class="ct-0c42a0">info</span><span class="ct-2010d6">}`</span><span class="ct-5a6e76">;</span></span><span class="line"><span class="ct-5a6e76"> }</span></span><span class="line"></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-532f07">return</span><span class="ct-5a6e76"> </span><span class="ct-0c42a0">shader</span><span class="ct-5a6e76">;</span></span><span class="line"><span class="ct-5a6e76">};</span></span></code></pre><!--]--></div><h2 id="vertex-shader-example"><a href="#vertex-shader-example"><!--[-->Vertex Shader Example<!--]--></a></h2><p><!--[-->Read more at <a href="/frontend/webgl/vertex-shaders" class=""><!--[-->Vertex Shaders<!--]--></a><!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>c</span></button><!--[--><pre><code><span class="line"><span class="ct-6e2271">// current vertice position {x,y,z,w}</span></span><span class="line"><span class="ct-5a6e76">attribute vec4 aVertexPosition;</span></span><span class="line"><span class="ct-6e2271">// final vertice position with all transformations applied,</span></span><span class="line"><span class="ct-6e2271">// that will be passed to Fragment Shader</span></span><span class="line"><span class="ct-5a6e76">varying vec4 v_positionWithOffset;</span></span><span class="line"><span class="ct-6e2271">// Parameters passed from Javascript loop</span></span><span class="line"><span class="ct-5a6e76">uniform </span><span class="ct-fd83b5">float</span><span class="ct-5a6e76"> slide;</span></span><span class="line"><span class="ct-5a6e76">uniform </span><span class="ct-fd83b5">float</span><span class="ct-5a6e76"> aspect;</span></span><span class="line"></span><span class="line"><span class="ct-fd83b5">void</span><span class="ct-5a6e76"> </span><span class="ct-7d5ed7">main</span><span class="ct-5a6e76">(){</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-6e2271">// float array of 4 elements, same as [slide,slide,slide,1]</span></span><span class="line"><span class="ct-5a6e76"> vec4 scale</span><span class="ct-532f07">=</span><span class="ct-7d5ed7">vec4</span><span class="ct-5a6e76">(</span><span class="ct-7d5ed7">vec3</span><span class="ct-5a6e76">(slide),</span><span class="ct-f22312">1</span><span class="ct-5a6e76">);</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-6e2271">// float array of 4 elements, same as [aspect,1,1,1]</span></span><span class="line"><span class="ct-5a6e76"> vec4 aspectRatioFix</span><span class="ct-532f07">=</span><span class="ct-7d5ed7">vec4</span><span class="ct-5a6e76">(aspect,</span><span class="ct-7d5ed7">vec3</span><span class="ct-5a6e76">(</span><span class="ct-f22312">1</span><span class="ct-5a6e76">));</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-6e2271">// vertice position, multiplied with matrices of scale and aspect ratio</span></span><span class="line"><span class="ct-5a6e76"> gl_Position</span><span class="ct-532f07">=</span><span class="ct-5a6e76">aVertexPosition</span><span class="ct-532f07">*</span><span class="ct-5a6e76">scale</span><span class="ct-532f07">*</span><span class="ct-5a6e76">aspectRatioFix,</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-6e2271">// vertice offset, that will be passed to fragment shader</span></span><span class="line"><span class="ct-5a6e76"> v_positionWithOffset</span><span class="ct-532f07">=</span><span class="ct-5a6e76">gl_Position</span><span class="ct-532f07">+</span><span class="ct-7d5ed7">vec4</span><span class="ct-5a6e76">(</span><span class="ct-f22312">1</span><span class="ct-5a6e76">,</span><span class="ct-f22312">1</span><span class="ct-5a6e76">,</span><span class="ct-f22312">1</span><span class="ct-5a6e76">,</span><span class="ct-f22312">1</span><span class="ct-5a6e76">);</span></span><span class="line"><span class="ct-5a6e76">}</span></span></code></pre><!--]--></div><h2 id="fragment-shader-example"><a href="#fragment-shader-example"><!--[-->Fragment Shader Example<!--]--></a></h2><p><!--[-->Read more at <a href="/frontend/webgl/fragment-shaders" class=""><!--[-->Fragment Shaders<!--]--></a>.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>c</span></button><!--[--><pre><code><span class="line"><span class="ct-5a6e76">precision highp </span><span class="ct-fd83b5">float</span><span class="ct-5a6e76">;</span></span><span class="line"></span><span class="line"><span class="ct-6e2271">// parameter from Vertex Shader</span></span><span class="line"><span class="ct-5a6e76">varying vec4 v_positionWithOffset;</span></span><span class="line"></span><span class="line"><span class="ct-fd83b5">void</span><span class="ct-5a6e76"> </span><span class="ct-7d5ed7">main</span><span class="ct-5a6e76">(</span><span class="ct-fd83b5">void</span><span class="ct-5a6e76">){</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-6e2271">// color, attached to current verticle {r,g,b,alpha}</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-6e2271">// same a[</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-6e2271">// v_positionWithOffset.x,</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-6e2271">// v_positionWithOffset.y, </span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-6e2271">// v_positionWithOffset.z, </span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-6e2271">// 1</span></span><span class="line"><span class="ct-5a6e76"> </span><span class="ct-6e2271">// ]</span></span><span class="line"><span class="ct-5a6e76"> gl_FragColor</span><span class="ct-532f07">=</span><span class="ct-7d5ed7">vec4</span><span class="ct-5a6e76">(</span><span class="ct-0c42a0">v_positionWithOffset</span><span class="ct-5a6e76">.</span><span class="ct-0c42a0">xyz</span><span class="ct-5a6e76">,</span><span class="ct-f22312">1</span><span class="ct-5a6e76">);</span></span><span class="line"><span class="ct-5a6e76">}</span></span></code></pre><!--]--></div><style>.ct-0b8227{color:#79C0FF}.ct-aea678{color:#8B949E}.ct-02b732{color:#79C0FF}.ct-cd3b9c{color:#79C0FF}.ct-f22312{color:#79C0FF}.ct-0555f3{color:#79C0FF}.ct-89a5fc{color:#FFA657}.ct-2eab2c{color:#FF7B72}.ct-c4ba0e{color:#FFA657}.ct-aaa2c9{color:#C9D1D9}.ct-7d5ed7{color:#D2A8FF}.ct-5011ab{color:#79C0FF}.ct-fd83b5{color:#FF7B72}.ct-2010d6{color:#A5D6FF}.ct-0c42a0{color:#C9D1D9}.ct-5a6e76{color:#C9D1D9}.ct-532f07{color:#FF7B72}.ct-6e2271{color:#8B949E}.light .ct-6e2271{color:#93A1A1}.light .ct-532f07{color:#859900}.light .ct-5a6e76{color:#657B83}.light .ct-0c42a0{color:#268BD2}.light .ct-2010d6{color:#2AA198}.light .ct-fd83b5{color:#073642}.light .ct-5011ab{color:#268BD2}.light .ct-7d5ed7{color:#268BD2}.light .ct-aaa2c9{color:#657B83}.light .ct-c4ba0e{color:#657B83}.light .ct-2eab2c{color:#859900}.light .ct-89a5fc{color:#268BD2}.light .ct-0555f3{color:#859900}.light .ct-f22312{color:#D33682}.light .ct-cd3b9c{color:#859900}.light .ct-02b732{color:#B58900}.light .ct-aea678{color:#93A1A1}.light .ct-0b8227{color:#CB4B16}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/frontend/webgl/basics-of-webgl-(drawing-a-cube)/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697991962}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseUl.b892d423.js" crossorigin></script><script type="module" src="/nuxt/ProseLi.a224f663.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseStrong.e968ffe9.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseImg.06e5e7fa.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/frontend/webgl/fragment-shaders/_payload.js b/docs/frontend/webgl/fragment-shaders/_payload.js
index b28b62c..1058481 100644
--- a/docs/frontend/webgl/fragment-shaders/_payload.js
+++ b/docs/frontend/webgl/fragment-shaders/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:u,_path:v},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:l,_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-qKKsIqiioV":{_path:v,_dir:"webgl",_draft:m,_partial:m,_locale:"en",_empty:m,title:u,description:"Fragment shaders describe how polygons are painted (or textured). Read Basics of WebGL (Drawing a Cube) first.",excerpt:{type:w,children:[{type:a,tag:i,props:{},children:[{type:b,value:x},{type:a,tag:c,props:{className:[y]},children:[{type:b,value:z}]},{type:b,value:A},{type:a,tag:j,props:{href:B},children:[{type:b,value:C}]},{type:b,value:D}]},{type:a,tag:E,props:{id:n},children:[{type:b,value:o}]},{type:a,tag:i,props:{},children:[{type:b,value:F},{type:a,tag:j,props:{href:G},children:[{type:b,value:l}]},{type:b,value:p}]},{type:a,tag:k,props:{code:q,language:H},children:[{type:a,tag:I,props:{},children:[{type:a,tag:k,props:{__ignoreMap:r},children:[{type:b,value:q}]}]}]}]},body:{type:w,children:[{type:a,tag:i,props:{},children:[{type:b,value:x},{type:a,tag:c,props:{className:[y]},children:[{type:b,value:z}]},{type:b,value:A},{type:a,tag:j,props:{href:B},children:[{type:b,value:C}]},{type:b,value:D}]},{type:a,tag:E,props:{id:n},children:[{type:b,value:o}]},{type:a,tag:i,props:{},children:[{type:b,value:F},{type:a,tag:j,props:{href:G},children:[{type:b,value:l}]},{type:b,value:p}]},{type:a,tag:k,props:{code:q,language:H},children:[{type:a,tag:I,props:{},children:[{type:a,tag:k,props:{__ignoreMap:r},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"precision highp "}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:s}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:";"}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:f},children:[{type:b,value:"\u002F\u002F parameter from Vertex Shader"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"varying vec4 v_positionWithOffset;"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:f},children:[{type:b,value:"\u002F\u002F parameters passed from Javascript loop"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:J}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:s}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" slide;"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:J}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:s}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" aspect;"}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:h},children:[{type:b,value:K}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" "}]},{type:a,tag:c,props:{class:L},children:[{type:b,value:"main"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:M}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:K}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"){"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"\u002F\u002F color, attached to current verticle {r,g,b,alpha}"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"\u002F\u002F same a["}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"\u002F\u002F v_positionWithOffset.x,"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"\u002F\u002F v_positionWithOffset.y, "}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"\u002F\u002F v_positionWithOffset.z, "}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"\u002F\u002F 1"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"\u002F\u002F ]"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" gl_FragColor"}]},{type:a,tag:c,props:{class:"ct-c82e83"},children:[{type:b,value:"="}]},{type:a,tag:c,props:{class:L},children:[{type:b,value:"vec4"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:M}]},{type:a,tag:c,props:{class:N},children:[{type:b,value:"v_positionWithOffset"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:N},children:[{type:b,value:"xyz"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:","}]},{type:a,tag:c,props:{class:"ct-a2381f"},children:[{type:b,value:"1"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:");"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"}```"}]}]}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-a2381f{color:#79C0FF}.ct-f7e6d6{color:#C9D1D9}.ct-c82e83{color:#FF7B72}.ct-08fe9b{color:#D2A8FF}.ct-0c12f0{color:#8B949E}.ct-d2c18b{color:#FF7B72}.ct-d4727d{color:#C9D1D9}.light .ct-d4727d{color:#657B83}.light .ct-d2c18b{color:#073642}.light .ct-0c12f0{color:#93A1A1}.light .ct-08fe9b{color:#268BD2}.light .ct-c82e83{color:#859900}.light .ct-f7e6d6{color:#268BD2}.light .ct-a2381f{color:#D33682}"}]}],toc:{title:r,searchDepth:t,depth:t,links:[{id:n,depth:t,text:o}]}},_type:"markdown",_id:"content:Frontend:WebGL:Fragment Shaders.md",_source:"content",_file:"Frontend\u002FWebGL\u002FFragment Shaders.md",_extension:"md"}},prerenderedAt:1703695530709}}("element","text","span","ct-d4727d","line","ct-0c12f0"," ","ct-d2c18b","p","a","code","Vertex Shaders",false,"sample-fragment-vertex","Sample fragment vertex",".","precision highp float;\n\n\u002F\u002F parameter from Vertex Shader\nvarying vec4 v_positionWithOffset;\n\u002F\u002F parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(void){\n \u002F\u002F color, attached to current verticle {r,g,b,alpha}\n \u002F\u002F same a[\n \u002F\u002F v_positionWithOffset.x,\n \u002F\u002F v_positionWithOffset.y, \n \u002F\u002F v_positionWithOffset.z, \n \u002F\u002F 1\n \u002F\u002F ]\n gl_FragColor=vec4(v_positionWithOffset.xyz,1);\n}```\n","","float",2,"Fragment Shaders","\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders","root","Fragment shaders describe ","highlight","how polygons are painted"," (or textured). Read ","Basics%20of%20WebGL%20(Drawing%20a%20Cube)","Basics of WebGL (Drawing a Cube)"," first.","h2","Parameters could be passed here as written at ","Vertex%20Shaders","c","pre","uniform ","void","ct-08fe9b","(","ct-f7e6d6"))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:u,_path:v},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:l,_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-qKKsIqiioV":{_path:v,_dir:"webgl",_draft:m,_partial:m,_locale:"en",_empty:m,title:u,description:"Fragment shaders describe how polygons are painted (or textured). Read Basics of WebGL (Drawing a Cube) first.",excerpt:{type:w,children:[{type:a,tag:i,props:{},children:[{type:b,value:x},{type:a,tag:c,props:{className:[y]},children:[{type:b,value:z}]},{type:b,value:A},{type:a,tag:j,props:{href:B},children:[{type:b,value:C}]},{type:b,value:D}]},{type:a,tag:E,props:{id:n},children:[{type:b,value:o}]},{type:a,tag:i,props:{},children:[{type:b,value:F},{type:a,tag:j,props:{href:G},children:[{type:b,value:l}]},{type:b,value:p}]},{type:a,tag:k,props:{code:q,language:H},children:[{type:a,tag:I,props:{},children:[{type:a,tag:k,props:{__ignoreMap:r},children:[{type:b,value:q}]}]}]}]},body:{type:w,children:[{type:a,tag:i,props:{},children:[{type:b,value:x},{type:a,tag:c,props:{className:[y]},children:[{type:b,value:z}]},{type:b,value:A},{type:a,tag:j,props:{href:B},children:[{type:b,value:C}]},{type:b,value:D}]},{type:a,tag:E,props:{id:n},children:[{type:b,value:o}]},{type:a,tag:i,props:{},children:[{type:b,value:F},{type:a,tag:j,props:{href:G},children:[{type:b,value:l}]},{type:b,value:p}]},{type:a,tag:k,props:{code:q,language:H},children:[{type:a,tag:I,props:{},children:[{type:a,tag:k,props:{__ignoreMap:r},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"precision highp "}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:s}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:";"}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:f},children:[{type:b,value:"\u002F\u002F parameter from Vertex Shader"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"varying vec4 v_positionWithOffset;"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:f},children:[{type:b,value:"\u002F\u002F parameters passed from Javascript loop"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:J}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:s}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" slide;"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:J}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:s}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" aspect;"}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:h},children:[{type:b,value:K}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" "}]},{type:a,tag:c,props:{class:L},children:[{type:b,value:"main"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:M}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:K}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"){"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"\u002F\u002F color, attached to current verticle {r,g,b,alpha}"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"\u002F\u002F same a["}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"\u002F\u002F v_positionWithOffset.x,"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"\u002F\u002F v_positionWithOffset.y, "}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"\u002F\u002F v_positionWithOffset.z, "}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"\u002F\u002F 1"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"\u002F\u002F ]"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" gl_FragColor"}]},{type:a,tag:c,props:{class:"ct-6b3b3a"},children:[{type:b,value:"="}]},{type:a,tag:c,props:{class:L},children:[{type:b,value:"vec4"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:M}]},{type:a,tag:c,props:{class:N},children:[{type:b,value:"v_positionWithOffset"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:N},children:[{type:b,value:"xyz"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:","}]},{type:a,tag:c,props:{class:"ct-7ab632"},children:[{type:b,value:"1"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:");"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"}```"}]}]}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-7ab632{color:#79C0FF}.ct-453e67{color:#C9D1D9}.ct-6b3b3a{color:#FF7B72}.ct-bdb0d0{color:#D2A8FF}.ct-e6c8c0{color:#8B949E}.ct-1dfc87{color:#FF7B72}.ct-8297c4{color:#C9D1D9}.light .ct-8297c4{color:#657B83}.light .ct-1dfc87{color:#073642}.light .ct-e6c8c0{color:#93A1A1}.light .ct-bdb0d0{color:#268BD2}.light .ct-6b3b3a{color:#859900}.light .ct-453e67{color:#268BD2}.light .ct-7ab632{color:#D33682}"}]}],toc:{title:r,searchDepth:t,depth:t,links:[{id:n,depth:t,text:o}]}},_type:"markdown",_id:"content:Frontend:WebGL:Fragment Shaders.md",_source:"content",_file:"Frontend\u002FWebGL\u002FFragment Shaders.md",_extension:"md"}},prerenderedAt:1703697992166}}("element","text","span","ct-8297c4","line","ct-e6c8c0"," ","ct-1dfc87","p","a","code","Vertex Shaders",false,"sample-fragment-vertex","Sample fragment vertex",".","precision highp float;\n\n\u002F\u002F parameter from Vertex Shader\nvarying vec4 v_positionWithOffset;\n\u002F\u002F parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(void){\n \u002F\u002F color, attached to current verticle {r,g,b,alpha}\n \u002F\u002F same a[\n \u002F\u002F v_positionWithOffset.x,\n \u002F\u002F v_positionWithOffset.y, \n \u002F\u002F v_positionWithOffset.z, \n \u002F\u002F 1\n \u002F\u002F ]\n gl_FragColor=vec4(v_positionWithOffset.xyz,1);\n}```\n","","float",2,"Fragment Shaders","\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders","root","Fragment shaders describe ","highlight","how polygons are painted"," (or textured). Read ","Basics%20of%20WebGL%20(Drawing%20a%20Cube)","Basics of WebGL (Drawing a Cube)"," first.","h2","Parameters could be passed here as written at ","Vertex%20Shaders","c","pre","uniform ","void","ct-bdb0d0","(","ct-453e67"))
\ No newline at end of file
diff --git a/docs/frontend/webgl/fragment-shaders/index.html b/docs/frontend/webgl/fragment-shaders/index.html
index bfce6d4..03d4bbc 100644
--- a/docs/frontend/webgl/fragment-shaders/index.html
+++ b/docs/frontend/webgl/fragment-shaders/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Fragment Shaders • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Fragment shaders describe how polygons are painted (or textured). Read Basics of WebGL (Drawing a Cube) first."><meta name="head:count" content="3"><link rel="modulepreload" href="/frontend/webgl/fragment-shaders/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseH2.d950f051.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseA.c52e44f8.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a aria-current="page" href="/frontend/webgl/fragment-shaders" class="router-link-active _active_192pu_81 _link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Fragment Shaders</h1><article><div><p><!--[-->Fragment shaders describe <span class="highlight">how polygons are painted</span> (or textured). Read <a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class=""><!--[-->Basics of WebGL (Drawing a Cube)<!--]--></a> first.<!--]--></p><h2 id="sample-fragment-vertex"><a href="#sample-fragment-vertex"><!--[-->Sample fragment vertex<!--]--></a></h2><p><!--[-->Parameters could be passed here as written at <a href="/frontend/webgl/vertex-shaders" class=""><!--[-->Vertex Shaders<!--]--></a>.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>c</span></button><!--[--><pre><code><span class="line"><span class="ct-d4727d">precision highp </span><span class="ct-d2c18b">float</span><span class="ct-d4727d">;</span></span><span class="line"></span><span class="line"><span class="ct-0c12f0">// parameter from Vertex Shader</span></span><span class="line"><span class="ct-d4727d">varying vec4 v_positionWithOffset;</span></span><span class="line"><span class="ct-0c12f0">// parameters passed from Javascript loop</span></span><span class="line"><span class="ct-d4727d">uniform </span><span class="ct-d2c18b">float</span><span class="ct-d4727d"> slide;</span></span><span class="line"><span class="ct-d4727d">uniform </span><span class="ct-d2c18b">float</span><span class="ct-d4727d"> aspect;</span></span><span class="line"></span><span class="line"><span class="ct-d2c18b">void</span><span class="ct-d4727d"> </span><span class="ct-08fe9b">main</span><span class="ct-d4727d">(</span><span class="ct-d2c18b">void</span><span class="ct-d4727d">){</span></span><span class="line"><span class="ct-d4727d"> </span><span class="ct-0c12f0">// color, attached to current verticle {r,g,b,alpha}</span></span><span class="line"><span class="ct-d4727d"> </span><span class="ct-0c12f0">// same a[</span></span><span class="line"><span class="ct-d4727d"> </span><span class="ct-0c12f0">// v_positionWithOffset.x,</span></span><span class="line"><span class="ct-d4727d"> </span><span class="ct-0c12f0">// v_positionWithOffset.y, </span></span><span class="line"><span class="ct-d4727d"> </span><span class="ct-0c12f0">// v_positionWithOffset.z, </span></span><span class="line"><span class="ct-d4727d"> </span><span class="ct-0c12f0">// 1</span></span><span class="line"><span class="ct-d4727d"> </span><span class="ct-0c12f0">// ]</span></span><span class="line"><span class="ct-d4727d"> gl_FragColor</span><span class="ct-c82e83">=</span><span class="ct-08fe9b">vec4</span><span class="ct-d4727d">(</span><span class="ct-f7e6d6">v_positionWithOffset</span><span class="ct-d4727d">.</span><span class="ct-f7e6d6">xyz</span><span class="ct-d4727d">,</span><span class="ct-a2381f">1</span><span class="ct-d4727d">);</span></span><span class="line"><span class="ct-d4727d">}```</span></span></code></pre><!--]--></div><style>.ct-a2381f{color:#79C0FF}.ct-f7e6d6{color:#C9D1D9}.ct-c82e83{color:#FF7B72}.ct-08fe9b{color:#D2A8FF}.ct-0c12f0{color:#8B949E}.ct-d2c18b{color:#FF7B72}.ct-d4727d{color:#C9D1D9}.light .ct-d4727d{color:#657B83}.light .ct-d2c18b{color:#073642}.light .ct-0c12f0{color:#93A1A1}.light .ct-08fe9b{color:#268BD2}.light .ct-c82e83{color:#859900}.light .ct-f7e6d6{color:#268BD2}.light .ct-a2381f{color:#D33682}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/frontend/webgl/fragment-shaders/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695530709}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a aria-current="page" href="/frontend/webgl/fragment-shaders" class="router-link-active _active_192pu_81 _link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Fragment Shaders</h1><article><div><p><!--[-->Fragment shaders describe <span class="highlight">how polygons are painted</span> (or textured). Read <a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class=""><!--[-->Basics of WebGL (Drawing a Cube)<!--]--></a> first.<!--]--></p><h2 id="sample-fragment-vertex"><a href="#sample-fragment-vertex"><!--[-->Sample fragment vertex<!--]--></a></h2><p><!--[-->Parameters could be passed here as written at <a href="/frontend/webgl/vertex-shaders" class=""><!--[-->Vertex Shaders<!--]--></a>.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>c</span></button><!--[--><pre><code><span class="line"><span class="ct-8297c4">precision highp </span><span class="ct-1dfc87">float</span><span class="ct-8297c4">;</span></span><span class="line"></span><span class="line"><span class="ct-e6c8c0">// parameter from Vertex Shader</span></span><span class="line"><span class="ct-8297c4">varying vec4 v_positionWithOffset;</span></span><span class="line"><span class="ct-e6c8c0">// parameters passed from Javascript loop</span></span><span class="line"><span class="ct-8297c4">uniform </span><span class="ct-1dfc87">float</span><span class="ct-8297c4"> slide;</span></span><span class="line"><span class="ct-8297c4">uniform </span><span class="ct-1dfc87">float</span><span class="ct-8297c4"> aspect;</span></span><span class="line"></span><span class="line"><span class="ct-1dfc87">void</span><span class="ct-8297c4"> </span><span class="ct-bdb0d0">main</span><span class="ct-8297c4">(</span><span class="ct-1dfc87">void</span><span class="ct-8297c4">){</span></span><span class="line"><span class="ct-8297c4"> </span><span class="ct-e6c8c0">// color, attached to current verticle {r,g,b,alpha}</span></span><span class="line"><span class="ct-8297c4"> </span><span class="ct-e6c8c0">// same a[</span></span><span class="line"><span class="ct-8297c4"> </span><span class="ct-e6c8c0">// v_positionWithOffset.x,</span></span><span class="line"><span class="ct-8297c4"> </span><span class="ct-e6c8c0">// v_positionWithOffset.y, </span></span><span class="line"><span class="ct-8297c4"> </span><span class="ct-e6c8c0">// v_positionWithOffset.z, </span></span><span class="line"><span class="ct-8297c4"> </span><span class="ct-e6c8c0">// 1</span></span><span class="line"><span class="ct-8297c4"> </span><span class="ct-e6c8c0">// ]</span></span><span class="line"><span class="ct-8297c4"> gl_FragColor</span><span class="ct-6b3b3a">=</span><span class="ct-bdb0d0">vec4</span><span class="ct-8297c4">(</span><span class="ct-453e67">v_positionWithOffset</span><span class="ct-8297c4">.</span><span class="ct-453e67">xyz</span><span class="ct-8297c4">,</span><span class="ct-7ab632">1</span><span class="ct-8297c4">);</span></span><span class="line"><span class="ct-8297c4">}```</span></span></code></pre><!--]--></div><style>.ct-7ab632{color:#79C0FF}.ct-453e67{color:#C9D1D9}.ct-6b3b3a{color:#FF7B72}.ct-bdb0d0{color:#D2A8FF}.ct-e6c8c0{color:#8B949E}.ct-1dfc87{color:#FF7B72}.ct-8297c4{color:#C9D1D9}.light .ct-8297c4{color:#657B83}.light .ct-1dfc87{color:#073642}.light .ct-e6c8c0{color:#93A1A1}.light .ct-bdb0d0{color:#268BD2}.light .ct-6b3b3a{color:#859900}.light .ct-453e67{color:#268BD2}.light .ct-7ab632{color:#D33682}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/frontend/webgl/fragment-shaders/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697992166}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/frontend/webgl/rendering-without-blocking-in-a-worker/_payload.js b/docs/frontend/webgl/rendering-without-blocking-in-a-worker/_payload.js
index fdafec0..4f6bc3a 100644
--- a/docs/frontend/webgl/rendering-without-blocking-in-a-worker/_payload.js
+++ b/docs/frontend/webgl/rendering-without-blocking-in-a-worker/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av,aw,ax,ay,az,aA,aB,aC,aD,aE,aF,aG,aH,aI,aJ,aK){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:$,_path:aa},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-jfOHJYayRG":{_path:aa,_dir:"webgl",_draft:Q,_partial:Q,_locale:"en",_empty:Q,title:$,description:"Rendering items on #canvas in main loop might cause interface freezes, preventing render process from executing properly by flooding execution stack with operations.",excerpt:{type:ab,children:[{type:a,tag:m,props:{},children:[{type:c,value:ac},{type:a,tag:b,props:{className:[B]},children:[{type:c,value:ad}]},{type:c,value:ae}]},{type:a,tag:m,props:{},children:[{type:c,value:af}]},{type:a,tag:m,props:{},children:[{type:c,value:ag},{type:a,tag:C,props:{href:ah,rel:[D]},children:[{type:c,value:ai}]},{type:c,value:aj},{type:a,tag:b,props:{className:[B]},children:[{type:c,value:ak}]},{type:c,value:al},{type:a,tag:C,props:{href:am,rel:[D]},children:[{type:c,value:E}]},{type:c,value:an}]},{type:a,tag:m,props:{},children:[{type:c,value:ao}]},{type:a,tag:r,props:{code:R,language:F},children:[{type:a,tag:G,props:{},children:[{type:a,tag:r,props:{__ignoreMap:z},children:[{type:c,value:R}]}]}]},{type:a,tag:m,props:{},children:[{type:c,value:ap}]},{type:a,tag:r,props:{code:S,language:F},children:[{type:a,tag:G,props:{},children:[{type:a,tag:r,props:{__ignoreMap:z},children:[{type:c,value:S}]}]}]}]},body:{type:ab,children:[{type:a,tag:m,props:{},children:[{type:c,value:ac},{type:a,tag:b,props:{className:[B]},children:[{type:c,value:ad}]},{type:c,value:ae}]},{type:a,tag:m,props:{},children:[{type:c,value:af}]},{type:a,tag:m,props:{},children:[{type:c,value:ag},{type:a,tag:C,props:{href:ah,rel:[D]},children:[{type:c,value:ai}]},{type:c,value:aj},{type:a,tag:b,props:{className:[B]},children:[{type:c,value:ak}]},{type:c,value:al},{type:a,tag:C,props:{href:am,rel:[D]},children:[{type:c,value:E}]},{type:c,value:an}]},{type:a,tag:m,props:{},children:[{type:c,value:ao}]},{type:a,tag:r,props:{code:R,language:F},children:[{type:a,tag:G,props:{},children:[{type:a,tag:r,props:{__ignoreMap:z},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:s},children:[{type:c,value:"\u002F\u002F main.ts"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:n},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"Worker"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"'.\u002Frender-worker.ts'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:n},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"document"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"getElementById"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"'view'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:s},children:[{type:c,value:"\u002F\u002F attaching event listener to worker"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:":"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:U},children:[{type:c,value:"MessageEvent"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:") "}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:V}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"?."}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:as}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:W}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:at}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:Y},children:[{type:c,value:Z}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:au}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:av}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"event"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"as"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:U},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:M},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:M},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"}"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:s},children:[{type:c,value:"\u002F\u002F sending canvas contents to worker"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:n},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"renderInCanvas"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aw}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:V}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ax}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:W}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"return"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ay}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:az}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ax}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aA}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aB}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:at}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aC}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aD}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"] })"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aE}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aF}]}]}]}]}]},{type:a,tag:m,props:{},children:[{type:c,value:ap}]},{type:a,tag:r,props:{code:S,language:F},children:[{type:a,tag:G,props:{},children:[{type:a,tag:r,props:{__ignoreMap:z},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:s},children:[{type:c,value:"\u002F\u002F render-worker.ts"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:aG},children:[{type:c,value:"export"}]},{type:a,tag:b,props:{class:_},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:aG},children:[{type:c,value:"default"}]},{type:a,tag:b,props:{class:_},children:[{type:c,value:aw}]},{type:a,tag:b,props:{class:"ct-cb6926"},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:_},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:"ct-3db1bc"},children:[{type:c,value:"{"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" "}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aH}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"message"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ay}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"instanceof"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:U},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:")) {"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:Y},children:[{type:c,value:Z}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"'Received unknown data'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:")"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"\u002F\u002F OffscreenCanvas can be set up inside workers"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"OffscreenCanvas"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aI}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aJ}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:as}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:W}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:Y},children:[{type:c,value:Z}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:au}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:av}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:M},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:M},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"\u002F\u002F That will block execution inside worker for "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"\u002F\u002F a couple of seconds"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"doHardRenderingStuffHere"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aI}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aJ}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"\u002F\u002F Sending resulting image back to main thread"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:az}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aA}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aB}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:V}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aH}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aC}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aD}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"] });"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aE}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" };"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aF}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-3db1bc{color:#C9D1D9}.ct-cb6926{color:#FF7B72}.ct-e85a8f{color:#FFA657}.ct-61807b{color:#FF7B72}.ct-681bbd{color:#79C0FF}.ct-a16a39{color:#79C0FF}.ct-36f108{color:#FFA657}.ct-74181d{color:#C9D1D9}.ct-4c8dcb{color:#A5D6FF}.ct-ed2a5b{color:#D2A8FF}.ct-6ca315{color:#FF7B72}.ct-13794f{color:#79C0FF}.ct-80dbaa{color:#C9D1D9}.ct-0bce60{color:#FF7B72}.ct-ab36bf{color:#8B949E}.light .ct-ab36bf{color:#93A1A1}.light .ct-0bce60{color:#073642}.light .ct-80dbaa{color:#657B83}.light .ct-13794f{color:#268BD2}.light .ct-6ca315{color:#859900}.light .ct-ed2a5b{color:#268BD2}.light .ct-4c8dcb{color:#2AA198}.light .ct-74181d{color:#268BD2}.light .ct-36f108{color:#268BD2}.light .ct-a16a39{color:#859900}.light .ct-681bbd{color:#D33682}.light .ct-61807b{color:#859900}.light .ct-e85a8f{color:#657B83}.light .ct-cb6926{color:#073642}.light .ct-3db1bc{color:#657B83}"}]}],toc:{title:z,searchDepth:aK,depth:aK,links:[]}},_type:"markdown",_id:"content:Frontend:WebGL:Rendering without blocking in a Worker.md",_source:"content",_file:"Frontend\u002FWebGL\u002FRendering without blocking in a Worker.md",_extension:"md"}},prerenderedAt:1703695530741}}("element","span","text","ct-80dbaa","line"," ","ct-74181d","ct-6ca315"," ","ct-ed2a5b","(",".","p","ct-0bce60",");","=","data","code","ct-ab36bf","const","ct-4c8dcb","canvas","ctx",", ","ct-13794f","","new","highlight","a","nofollow","ImageBitmap","typescript","pre","=\u003E","if"," (","!"," }","ct-681bbd","0"," ","image",false,"\u002F\u002F main.ts\nconst instance = new Worker('.\u002Frender-worker.ts');\nconst canvas = document.getElementById('view');\n\n\u002F\u002F attaching event listener to worker\ninstance.onmessage = (event: MessageEvent) =\u003E {\n const ctx = canvas?.getContext(\"2d\");\n if (!ctx) {\n throw new Error(`Can't get 2D context`);\n }\n \n ctx.drawImage(event.data as ImageBitmap, 0, 0);\n}\n\n\u002F\u002F sending canvas contents to worker\nconst renderInCanvas = () =\u003E {\n if (!canvas.current) {\n return;\n }\n \n createImageBitmap(canvas.current).then(image =\u003E {\n instance.postMessage(image, { transfer: [image] })\n });\n};\n","\u002F\u002F render-worker.ts\nexport default () =\u003E {\n self.onmessage = (message: MessageEvent) =\u003E {\n const data = message.data;\n\n if (!(data instanceof ImageBitmap)) {\n throw new Error('Received unknown data')\n }\n\n \u002F\u002F OffscreenCanvas can be set up inside workers\n const canvas = new OffscreenCanvas(data.width, data.height);\n const ctx = canvas.getContext(\"2d\");\n\n if (!ctx) {\n throw new Error(`Can't get 2D context`);\n }\n\n ctx.drawImage(data, 0, 0);\n\n \u002F\u002F That will block execution inside worker for \n \u002F\u002F a couple of seconds\n doHardRenderingStuffHere(ctx, data.width, data.height);\n\n \u002F\u002F Sending resulting image back to main thread\n createImageBitmap(canvas).then((image) =\u003E {\n self.postMessage(image, { transfer: [image] });\n });\n };\n};\n","instance","ct-36f108"," {",") {","throw","ct-a16a39","Error","ct-e85a8f","Rendering Without Blocking In A Worker","\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker","root","Rendering items on #canvas in main loop ","might cause interface freezes",", preventing render process from executing properly by flooding execution stack with operations.","To handle it properly, we can start separate #worker thread, that will handle rendering in its own event loop, so that won't affect the source tab's event loop.","Workers can have access to ","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FGlossary\u002FTransferable_objects","Transferrable Objects"," from main thread by receiving memory address. ","That's a lot faster than cloning",". In this case ","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FImageBitmap"," is transferrable.","Code for the main thread component:","Worker code:","onmessage","getContext","\"2d\""," ","`Can't get 2D context`","drawImage"," () ","current",";","createImageBitmap",").","then","postMessage",", { transfer: ["," });","};","ct-61807b","self","width","height",2))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av,aw,ax,ay,az,aA,aB,aC,aD,aE,aF,aG,aH,aI,aJ,aK){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:$,_path:aa},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-jfOHJYayRG":{_path:aa,_dir:"webgl",_draft:Q,_partial:Q,_locale:"en",_empty:Q,title:$,description:"Rendering items on #canvas in main loop might cause interface freezes, preventing render process from executing properly by flooding execution stack with operations.",excerpt:{type:ab,children:[{type:a,tag:m,props:{},children:[{type:c,value:ac},{type:a,tag:b,props:{className:[B]},children:[{type:c,value:ad}]},{type:c,value:ae}]},{type:a,tag:m,props:{},children:[{type:c,value:af}]},{type:a,tag:m,props:{},children:[{type:c,value:ag},{type:a,tag:C,props:{href:ah,rel:[D]},children:[{type:c,value:ai}]},{type:c,value:aj},{type:a,tag:b,props:{className:[B]},children:[{type:c,value:ak}]},{type:c,value:al},{type:a,tag:C,props:{href:am,rel:[D]},children:[{type:c,value:E}]},{type:c,value:an}]},{type:a,tag:m,props:{},children:[{type:c,value:ao}]},{type:a,tag:r,props:{code:R,language:F},children:[{type:a,tag:G,props:{},children:[{type:a,tag:r,props:{__ignoreMap:z},children:[{type:c,value:R}]}]}]},{type:a,tag:m,props:{},children:[{type:c,value:ap}]},{type:a,tag:r,props:{code:S,language:F},children:[{type:a,tag:G,props:{},children:[{type:a,tag:r,props:{__ignoreMap:z},children:[{type:c,value:S}]}]}]}]},body:{type:ab,children:[{type:a,tag:m,props:{},children:[{type:c,value:ac},{type:a,tag:b,props:{className:[B]},children:[{type:c,value:ad}]},{type:c,value:ae}]},{type:a,tag:m,props:{},children:[{type:c,value:af}]},{type:a,tag:m,props:{},children:[{type:c,value:ag},{type:a,tag:C,props:{href:ah,rel:[D]},children:[{type:c,value:ai}]},{type:c,value:aj},{type:a,tag:b,props:{className:[B]},children:[{type:c,value:ak}]},{type:c,value:al},{type:a,tag:C,props:{href:am,rel:[D]},children:[{type:c,value:E}]},{type:c,value:an}]},{type:a,tag:m,props:{},children:[{type:c,value:ao}]},{type:a,tag:r,props:{code:R,language:F},children:[{type:a,tag:G,props:{},children:[{type:a,tag:r,props:{__ignoreMap:z},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:s},children:[{type:c,value:"\u002F\u002F main.ts"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:n},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"Worker"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"'.\u002Frender-worker.ts'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:n},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"document"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"getElementById"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"'view'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:s},children:[{type:c,value:"\u002F\u002F attaching event listener to worker"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:":"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:U},children:[{type:c,value:"MessageEvent"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:") "}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:V}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"?."}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:as}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:W}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:at}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:Y},children:[{type:c,value:Z}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:au}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:av}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"event"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"as"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:U},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:M},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:M},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"}"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:s},children:[{type:c,value:"\u002F\u002F sending canvas contents to worker"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:n},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"renderInCanvas"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aw}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:V}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ax}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:W}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"return"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ay}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:az}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ax}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aA}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aB}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:at}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aC}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aD}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"] })"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aE}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aF}]}]}]}]}]},{type:a,tag:m,props:{},children:[{type:c,value:ap}]},{type:a,tag:r,props:{code:S,language:F},children:[{type:a,tag:G,props:{},children:[{type:a,tag:r,props:{__ignoreMap:z},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:s},children:[{type:c,value:"\u002F\u002F render-worker.ts"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:aG},children:[{type:c,value:"export"}]},{type:a,tag:b,props:{class:_},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:aG},children:[{type:c,value:"default"}]},{type:a,tag:b,props:{class:_},children:[{type:c,value:aw}]},{type:a,tag:b,props:{class:"ct-1068a0"},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:_},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:"ct-d00ff5"},children:[{type:c,value:"{"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" "}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aH}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"message"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ay}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"instanceof"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:U},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:")) {"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:Y},children:[{type:c,value:Z}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"'Received unknown data'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:")"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"\u002F\u002F OffscreenCanvas can be set up inside workers"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"OffscreenCanvas"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aI}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aJ}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:as}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:W}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:Y},children:[{type:c,value:Z}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:au}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:av}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:M},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:M},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"\u002F\u002F That will block execution inside worker for "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"\u002F\u002F a couple of seconds"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"doHardRenderingStuffHere"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aI}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aJ}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"\u002F\u002F Sending resulting image back to main thread"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:az}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aA}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aB}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:V}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aH}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aC}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aD}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"] });"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aE}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" };"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aF}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-d00ff5{color:#C9D1D9}.ct-1068a0{color:#FF7B72}.ct-188de8{color:#FFA657}.ct-06f34b{color:#FF7B72}.ct-527554{color:#79C0FF}.ct-e37a18{color:#79C0FF}.ct-f26505{color:#FFA657}.ct-06555d{color:#C9D1D9}.ct-0f9bbf{color:#A5D6FF}.ct-8b87ec{color:#D2A8FF}.ct-5659a8{color:#FF7B72}.ct-99c685{color:#79C0FF}.ct-fabed9{color:#C9D1D9}.ct-f8f6ea{color:#FF7B72}.ct-9baa47{color:#8B949E}.light .ct-9baa47{color:#93A1A1}.light .ct-f8f6ea{color:#073642}.light .ct-fabed9{color:#657B83}.light .ct-99c685{color:#268BD2}.light .ct-5659a8{color:#859900}.light .ct-8b87ec{color:#268BD2}.light .ct-0f9bbf{color:#2AA198}.light .ct-06555d{color:#268BD2}.light .ct-f26505{color:#268BD2}.light .ct-e37a18{color:#859900}.light .ct-527554{color:#D33682}.light .ct-06f34b{color:#859900}.light .ct-188de8{color:#657B83}.light .ct-1068a0{color:#073642}.light .ct-d00ff5{color:#657B83}"}]}],toc:{title:z,searchDepth:aK,depth:aK,links:[]}},_type:"markdown",_id:"content:Frontend:WebGL:Rendering without blocking in a Worker.md",_source:"content",_file:"Frontend\u002FWebGL\u002FRendering without blocking in a Worker.md",_extension:"md"}},prerenderedAt:1703697992208}}("element","span","text","ct-fabed9","line"," ","ct-06555d","ct-5659a8"," ","ct-8b87ec","(",".","p","ct-f8f6ea",");","=","data","code","ct-9baa47","const","ct-0f9bbf","canvas","ctx",", ","ct-99c685","","new","highlight","a","nofollow","ImageBitmap","typescript","pre","=\u003E","if"," (","!"," }","ct-527554","0"," ","image",false,"\u002F\u002F main.ts\nconst instance = new Worker('.\u002Frender-worker.ts');\nconst canvas = document.getElementById('view');\n\n\u002F\u002F attaching event listener to worker\ninstance.onmessage = (event: MessageEvent) =\u003E {\n const ctx = canvas?.getContext(\"2d\");\n if (!ctx) {\n throw new Error(`Can't get 2D context`);\n }\n \n ctx.drawImage(event.data as ImageBitmap, 0, 0);\n}\n\n\u002F\u002F sending canvas contents to worker\nconst renderInCanvas = () =\u003E {\n if (!canvas.current) {\n return;\n }\n \n createImageBitmap(canvas.current).then(image =\u003E {\n instance.postMessage(image, { transfer: [image] })\n });\n};\n","\u002F\u002F render-worker.ts\nexport default () =\u003E {\n self.onmessage = (message: MessageEvent) =\u003E {\n const data = message.data;\n\n if (!(data instanceof ImageBitmap)) {\n throw new Error('Received unknown data')\n }\n\n \u002F\u002F OffscreenCanvas can be set up inside workers\n const canvas = new OffscreenCanvas(data.width, data.height);\n const ctx = canvas.getContext(\"2d\");\n\n if (!ctx) {\n throw new Error(`Can't get 2D context`);\n }\n\n ctx.drawImage(data, 0, 0);\n\n \u002F\u002F That will block execution inside worker for \n \u002F\u002F a couple of seconds\n doHardRenderingStuffHere(ctx, data.width, data.height);\n\n \u002F\u002F Sending resulting image back to main thread\n createImageBitmap(canvas).then((image) =\u003E {\n self.postMessage(image, { transfer: [image] });\n });\n };\n};\n","instance","ct-f26505"," {",") {","throw","ct-e37a18","Error","ct-188de8","Rendering Without Blocking In A Worker","\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker","root","Rendering items on #canvas in main loop ","might cause interface freezes",", preventing render process from executing properly by flooding execution stack with operations.","To handle it properly, we can start separate #worker thread, that will handle rendering in its own event loop, so that won't affect the source tab's event loop.","Workers can have access to ","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FGlossary\u002FTransferable_objects","Transferrable Objects"," from main thread by receiving memory address. ","That's a lot faster than cloning",". In this case ","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FImageBitmap"," is transferrable.","Code for the main thread component:","Worker code:","onmessage","getContext","\"2d\""," ","`Can't get 2D context`","drawImage"," () ","current",";","createImageBitmap",").","then","postMessage",", { transfer: ["," });","};","ct-06f34b","self","width","height",2))
\ No newline at end of file
diff --git a/docs/frontend/webgl/rendering-without-blocking-in-a-worker/index.html b/docs/frontend/webgl/rendering-without-blocking-in-a-worker/index.html
index b399a95..9984f56 100644
--- a/docs/frontend/webgl/rendering-without-blocking-in-a-worker/index.html
+++ b/docs/frontend/webgl/rendering-without-blocking-in-a-worker/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Rendering Without Blocking In A Worker • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Rendering items on #canvas in main loop might cause interface freezes, preventing render process from executing properly by flooding execution stack with operations."><meta name="head:count" content="3"><link rel="modulepreload" href="/frontend/webgl/rendering-without-blocking-in-a-worker/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseA.c52e44f8.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a aria-current="page" href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="router-link-active _active_192pu_81 _link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Rendering Without Blocking In A Worker</h1><article><div><p><!--[-->Rendering items on #canvas in main loop <span class="highlight">might cause interface freezes</span>, preventing render process from executing properly by flooding execution stack with operations.<!--]--></p><p><!--[-->To handle it properly, we can start separate #worker thread, that will handle rendering in its own event loop, so that won't affect the source tab's event loop.<!--]--></p><p><!--[-->Workers can have access to <a href="https://developer.mozilla.org/en-US/docs/Glossary/Transferable_objects" rel="nofollow" target="_blank"><!--[-->Transferrable Objects<!--]--></a> from main thread by receiving memory address. <span class="highlight">That's a lot faster than cloning</span>. In this case <a href="https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap" rel="nofollow" target="_blank"><!--[-->ImageBitmap<!--]--></a> is transferrable.<!--]--></p><p><!--[-->Code for the main thread component:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-ab36bf">// main.ts</span></span><span class="line"><span class="ct-0bce60">const</span><span class="ct-80dbaa"> </span><span class="ct-13794f">instance</span><span class="ct-80dbaa"> </span><span class="ct-6ca315">=</span><span class="ct-80dbaa"> </span><span class="ct-6ca315">new</span><span class="ct-80dbaa"> </span><span class="ct-ed2a5b">Worker</span><span class="ct-80dbaa">(</span><span class="ct-4c8dcb">'./render-worker.ts'</span><span class="ct-80dbaa">);</span></span><span class="line"><span class="ct-0bce60">const</span><span class="ct-80dbaa"> </span><span class="ct-13794f">canvas</span><span class="ct-80dbaa"> </span><span class="ct-6ca315">=</span><span class="ct-80dbaa"> </span><span class="ct-74181d">document</span><span class="ct-80dbaa">.</span><span class="ct-ed2a5b">getElementById</span><span class="ct-80dbaa">(</span><span class="ct-4c8dcb">'view'</span><span class="ct-80dbaa">);</span></span><span class="line"></span><span class="line"><span class="ct-ab36bf">// attaching event listener to worker</span></span><span class="line"><span class="ct-74181d">instance</span><span class="ct-80dbaa">.</span><span class="ct-ed2a5b">onmessage</span><span class="ct-80dbaa"> </span><span class="ct-6ca315">=</span><span class="ct-6ca315">:</span><span class="ct-80dbaa"> </span><span class="ct-36f108">MessageEvent</span><span class="ct-80dbaa">) </span><span class="ct-0bce60">=></span><span class="ct-80dbaa"> {</span></span><span class="line"><span class="ct-80dbaa"> </span><span class="ct-0bce60">const</span><span class="ct-80dbaa"> </span><span class="ct-13794f">ctx</span><span class="ct-80dbaa"> </span><span class="ct-6ca315">=</span><span class="ct-80dbaa"> </span><span class="ct-74181d">canvas</span><span class="ct-80dbaa">?.</span><span class="ct-ed2a5b">getContext</span><span class="ct-80dbaa">(</span><span class="ct-4c8dcb">"2d"</span><span class="ct-80dbaa">);</span></span><span class="line"><span class="ct-80dbaa"> </span><span class="ct-6ca315">if</span><span class="ct-80dbaa"> (</span><span class="ct-6ca315">!</span><span class="ct-74181d">ctx</span><span class="ct-80dbaa">) {</span></span><span class="line"><span class="ct-80dbaa"> </span><span class="ct-6ca315">throw</span><span class="ct-80dbaa"> </span><span class="ct-6ca315">new</span><span class="ct-80dbaa"> </span><span class="ct-a16a39">Error</span><span class="ct-80dbaa">(</span><span class="ct-4c8dcb">`Can't get 2D context`</span><span class="ct-80dbaa">);</span></span><span class="line"><span class="ct-80dbaa"> }</span></span><span class="line"><span class="ct-80dbaa"> </span></span><span class="line"><span class="ct-80dbaa"> </span><span class="ct-74181d">ctx</span><span class="ct-80dbaa">.</span><span class="ct-ed2a5b">drawImage</span><span class="ct-80dbaa">(</span><span class="ct-74181d">event</span><span class="ct-80dbaa">.</span><span class="ct-74181d">data</span><span class="ct-80dbaa"> </span><span class="ct-6ca315">as</span><span class="ct-80dbaa"> </span><span class="ct-36f108">ImageBitmap</span><span class="ct-80dbaa">, </span><span class="ct-681bbd">0</span><span class="ct-80dbaa">, </span><span class="ct-681bbd">0</span><span class="ct-80dbaa">);</span></span><span class="line"><span class="ct-80dbaa">}</span></span><span class="line"></span><span class="line"><span class="ct-ab36bf">// sending canvas contents to worker</span></span><span class="line"><span class="ct-0bce60">const</span><span class="ct-80dbaa"> </span><span class="ct-ed2a5b">renderInCanvas</span><span class="ct-80dbaa"> </span><span class="ct-6ca315">=</span><span class="ct-80dbaa"> () </span><span class="ct-0bce60">=></span><span class="ct-80dbaa"> {</span></span><span class="line"><span class="ct-80dbaa"> </span><span class="ct-6ca315">if</span><span class="ct-80dbaa"> (</span><span class="ct-6ca315">!</span><span class="ct-74181d">canvas</span><span class="ct-80dbaa">.</span><span class="ct-74181d">current</span><span class="ct-80dbaa">) {</span></span><span class="line"><span class="ct-80dbaa"> </span><span class="ct-6ca315">return</span><span class="ct-80dbaa">;</span></span><span class="line"><span class="ct-80dbaa"> }</span></span><span class="line"><span class="ct-80dbaa"> </span></span><span class="line"><span class="ct-80dbaa"> </span><span class="ct-ed2a5b">createImageBitmap</span><span class="ct-80dbaa">(</span><span class="ct-74181d">canvas</span><span class="ct-80dbaa">.</span><span class="ct-74181d">current</span><span class="ct-80dbaa">).</span><span class="ct-ed2a5b">then</span></span><span class="line"><span class="ct-80dbaa"> </span><span class="ct-74181d">instance</span><span class="ct-80dbaa">.</span><span class="ct-ed2a5b">postMessage</span><span class="ct-80dbaa">(</span><span class="ct-74181d">image</span><span class="ct-80dbaa">, { transfer: [</span><span class="ct-74181d">image</span><span class="ct-80dbaa">] })</span></span><span class="line"><span class="ct-80dbaa"> });</span></span><span class="line"><span class="ct-80dbaa">};</span></span></code></pre><!--]--></div><p><!--[-->Worker code:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-ab36bf">// render-worker.ts</span></span><span class="line"><span class="ct-61807b">export</span><span class="ct-e85a8f"> </span><span class="ct-61807b">default</span><span class="ct-e85a8f"> () </span><span class="ct-cb6926">=></span><span class="ct-e85a8f"> </span><span class="ct-3db1bc">{</span></span><span class="line"><span class="ct-80dbaa"> </span><span class="ct-74181d">self</span><span class="ct-80dbaa">.</span><span class="ct-ed2a5b">onmessage</span><span class="ct-80dbaa"> </span><span class="ct-6ca315">=</span><span class="ct-80dbaa"> </span></span><span class="line"><span class="ct-80dbaa"> </span><span class="ct-0bce60">const</span><span class="ct-80dbaa"> </span><span class="ct-13794f">data</span><span class="ct-80dbaa"> </span><span class="ct-6ca315">=</span><span class="ct-80dbaa"> </span><span class="ct-74181d">message</span><span class="ct-80dbaa">.</span><span class="ct-74181d">data</span><span class="ct-80dbaa">;</span></span><span class="line"></span><span class="line"><span class="ct-80dbaa"> </span><span class="ct-6ca315">if</span><span class="ct-80dbaa"> (</span><span class="ct-6ca315">!</span><span class="ct-80dbaa">(</span><span class="ct-74181d">data</span><span class="ct-80dbaa"> </span><span class="ct-6ca315">instanceof</span><span class="ct-80dbaa"> </span><span class="ct-36f108">ImageBitmap</span><span class="ct-80dbaa">)) {</span></span><span class="line"><span class="ct-80dbaa"> </span><span class="ct-6ca315">throw</span><span class="ct-80dbaa"> </span><span class="ct-6ca315">new</span><span class="ct-80dbaa"> </span><span class="ct-a16a39">Error</span><span class="ct-80dbaa">(</span><span class="ct-4c8dcb">'Received unknown data'</span><span class="ct-80dbaa">)</span></span><span class="line"><span class="ct-80dbaa"> }</span></span><span class="line"></span><span class="line"><span class="ct-80dbaa"> </span><span class="ct-ab36bf">// OffscreenCanvas can be set up inside workers</span></span><span class="line"><span class="ct-80dbaa"> </span><span class="ct-0bce60">const</span><span class="ct-80dbaa"> </span><span class="ct-13794f">canvas</span><span class="ct-80dbaa"> </span><span class="ct-6ca315">=</span><span class="ct-80dbaa"> </span><span class="ct-6ca315">new</span><span class="ct-80dbaa"> </span><span class="ct-ed2a5b">OffscreenCanvas</span><span class="ct-80dbaa">(</span><span class="ct-74181d">data</span><span class="ct-80dbaa">.</span><span class="ct-74181d">width</span><span class="ct-80dbaa">, </span><span class="ct-74181d">data</span><span class="ct-80dbaa">.</span><span class="ct-74181d">height</span><span class="ct-80dbaa">);</span></span><span class="line"><span class="ct-80dbaa"> </span><span class="ct-0bce60">const</span><span class="ct-80dbaa"> </span><span class="ct-13794f">ctx</span><span class="ct-80dbaa"> </span><span class="ct-6ca315">=</span><span class="ct-80dbaa"> </span><span class="ct-74181d">canvas</span><span class="ct-80dbaa">.</span><span class="ct-ed2a5b">getContext</span><span class="ct-80dbaa">(</span><span class="ct-4c8dcb">"2d"</span><span class="ct-80dbaa">);</span></span><span class="line"></span><span class="line"><span class="ct-80dbaa"> </span><span class="ct-6ca315">if</span><span class="ct-80dbaa"> (</span><span class="ct-6ca315">!</span><span class="ct-74181d">ctx</span><span class="ct-80dbaa">) {</span></span><span class="line"><span class="ct-80dbaa"> </span><span class="ct-6ca315">throw</span><span class="ct-80dbaa"> </span><span class="ct-6ca315">new</span><span class="ct-80dbaa"> </span><span class="ct-a16a39">Error</span><span class="ct-80dbaa">(</span><span class="ct-4c8dcb">`Can't get 2D context`</span><span class="ct-80dbaa">);</span></span><span class="line"><span class="ct-80dbaa"> }</span></span><span class="line"></span><span class="line"><span class="ct-80dbaa"> </span><span class="ct-74181d">ctx</span><span class="ct-80dbaa">.</span><span class="ct-ed2a5b">drawImage</span><span class="ct-80dbaa">(</span><span class="ct-74181d">data</span><span class="ct-80dbaa">, </span><span class="ct-681bbd">0</span><span class="ct-80dbaa">, </span><span class="ct-681bbd">0</span><span class="ct-80dbaa">);</span></span><span class="line"></span><span class="line"><span class="ct-80dbaa"> </span><span class="ct-ab36bf">// That will block execution inside worker for </span></span><span class="line"><span class="ct-80dbaa"> </span><span class="ct-ab36bf">// a couple of seconds</span></span><span class="line"><span class="ct-80dbaa"> </span><span class="ct-ed2a5b">doHardRenderingStuffHere</span><span class="ct-80dbaa">(</span><span class="ct-74181d">ctx</span><span class="ct-80dbaa">, </span><span class="ct-74181d">data</span><span class="ct-80dbaa">.</span><span class="ct-74181d">width</span><span class="ct-80dbaa">, </span><span class="ct-74181d">data</span><span class="ct-80dbaa">.</span><span class="ct-74181d">height</span><span class="ct-80dbaa">);</span></span><span class="line"></span><span class="line"><span class="ct-80dbaa"> </span><span class="ct-ab36bf">// Sending resulting image back to main thread</span></span><span class="line"><span class="ct-80dbaa"> </span><span class="ct-ed2a5b">createImageBitmap</span><span class="ct-80dbaa">(</span><span class="ct-74181d">canvas</span><span class="ct-80dbaa">).</span><span class="ct-ed2a5b">then</span><span class="ct-0bce60">=></span><span class="ct-80dbaa"> {</span></span><span class="line"><span class="ct-80dbaa"> </span><span class="ct-74181d">self</span><span class="ct-80dbaa">.</span><span class="ct-ed2a5b">postMessage</span><span class="ct-80dbaa">(</span><span class="ct-74181d">image</span><span class="ct-80dbaa">, { transfer: [</span><span class="ct-74181d">image</span><span class="ct-80dbaa">] });</span></span><span class="line"><span class="ct-80dbaa"> });</span></span><span class="line"><span class="ct-80dbaa"> };</span></span><span class="line"><span class="ct-80dbaa">};</span></span></code></pre><!--]--></div><style>.ct-3db1bc{color:#C9D1D9}.ct-cb6926{color:#FF7B72}.ct-e85a8f{color:#FFA657}.ct-61807b{color:#FF7B72}.ct-681bbd{color:#79C0FF}.ct-a16a39{color:#79C0FF}.ct-36f108{color:#FFA657}.ct-74181d{color:#C9D1D9}.ct-4c8dcb{color:#A5D6FF}.ct-ed2a5b{color:#D2A8FF}.ct-6ca315{color:#FF7B72}.ct-13794f{color:#79C0FF}.ct-80dbaa{color:#C9D1D9}.ct-0bce60{color:#FF7B72}.ct-ab36bf{color:#8B949E}.light .ct-ab36bf{color:#93A1A1}.light .ct-0bce60{color:#073642}.light .ct-80dbaa{color:#657B83}.light .ct-13794f{color:#268BD2}.light .ct-6ca315{color:#859900}.light .ct-ed2a5b{color:#268BD2}.light .ct-4c8dcb{color:#2AA198}.light .ct-74181d{color:#268BD2}.light .ct-36f108{color:#268BD2}.light .ct-a16a39{color:#859900}.light .ct-681bbd{color:#D33682}.light .ct-61807b{color:#859900}.light .ct-e85a8f{color:#657B83}.light .ct-cb6926{color:#073642}.light .ct-3db1bc{color:#657B83}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/frontend/webgl/rendering-without-blocking-in-a-worker/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695530741}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a aria-current="page" href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="router-link-active _active_192pu_81 _link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Rendering Without Blocking In A Worker</h1><article><div><p><!--[-->Rendering items on #canvas in main loop <span class="highlight">might cause interface freezes</span>, preventing render process from executing properly by flooding execution stack with operations.<!--]--></p><p><!--[-->To handle it properly, we can start separate #worker thread, that will handle rendering in its own event loop, so that won't affect the source tab's event loop.<!--]--></p><p><!--[-->Workers can have access to <a href="https://developer.mozilla.org/en-US/docs/Glossary/Transferable_objects" rel="nofollow" target="_blank"><!--[-->Transferrable Objects<!--]--></a> from main thread by receiving memory address. <span class="highlight">That's a lot faster than cloning</span>. In this case <a href="https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap" rel="nofollow" target="_blank"><!--[-->ImageBitmap<!--]--></a> is transferrable.<!--]--></p><p><!--[-->Code for the main thread component:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-9baa47">// main.ts</span></span><span class="line"><span class="ct-f8f6ea">const</span><span class="ct-fabed9"> </span><span class="ct-99c685">instance</span><span class="ct-fabed9"> </span><span class="ct-5659a8">=</span><span class="ct-fabed9"> </span><span class="ct-5659a8">new</span><span class="ct-fabed9"> </span><span class="ct-8b87ec">Worker</span><span class="ct-fabed9">(</span><span class="ct-0f9bbf">'./render-worker.ts'</span><span class="ct-fabed9">);</span></span><span class="line"><span class="ct-f8f6ea">const</span><span class="ct-fabed9"> </span><span class="ct-99c685">canvas</span><span class="ct-fabed9"> </span><span class="ct-5659a8">=</span><span class="ct-fabed9"> </span><span class="ct-06555d">document</span><span class="ct-fabed9">.</span><span class="ct-8b87ec">getElementById</span><span class="ct-fabed9">(</span><span class="ct-0f9bbf">'view'</span><span class="ct-fabed9">);</span></span><span class="line"></span><span class="line"><span class="ct-9baa47">// attaching event listener to worker</span></span><span class="line"><span class="ct-06555d">instance</span><span class="ct-fabed9">.</span><span class="ct-8b87ec">onmessage</span><span class="ct-fabed9"> </span><span class="ct-5659a8">=</span><span class="ct-5659a8">:</span><span class="ct-fabed9"> </span><span class="ct-f26505">MessageEvent</span><span class="ct-fabed9">) </span><span class="ct-f8f6ea">=></span><span class="ct-fabed9"> {</span></span><span class="line"><span class="ct-fabed9"> </span><span class="ct-f8f6ea">const</span><span class="ct-fabed9"> </span><span class="ct-99c685">ctx</span><span class="ct-fabed9"> </span><span class="ct-5659a8">=</span><span class="ct-fabed9"> </span><span class="ct-06555d">canvas</span><span class="ct-fabed9">?.</span><span class="ct-8b87ec">getContext</span><span class="ct-fabed9">(</span><span class="ct-0f9bbf">"2d"</span><span class="ct-fabed9">);</span></span><span class="line"><span class="ct-fabed9"> </span><span class="ct-5659a8">if</span><span class="ct-fabed9"> (</span><span class="ct-5659a8">!</span><span class="ct-06555d">ctx</span><span class="ct-fabed9">) {</span></span><span class="line"><span class="ct-fabed9"> </span><span class="ct-5659a8">throw</span><span class="ct-fabed9"> </span><span class="ct-5659a8">new</span><span class="ct-fabed9"> </span><span class="ct-e37a18">Error</span><span class="ct-fabed9">(</span><span class="ct-0f9bbf">`Can't get 2D context`</span><span class="ct-fabed9">);</span></span><span class="line"><span class="ct-fabed9"> }</span></span><span class="line"><span class="ct-fabed9"> </span></span><span class="line"><span class="ct-fabed9"> </span><span class="ct-06555d">ctx</span><span class="ct-fabed9">.</span><span class="ct-8b87ec">drawImage</span><span class="ct-fabed9">(</span><span class="ct-06555d">event</span><span class="ct-fabed9">.</span><span class="ct-06555d">data</span><span class="ct-fabed9"> </span><span class="ct-5659a8">as</span><span class="ct-fabed9"> </span><span class="ct-f26505">ImageBitmap</span><span class="ct-fabed9">, </span><span class="ct-527554">0</span><span class="ct-fabed9">, </span><span class="ct-527554">0</span><span class="ct-fabed9">);</span></span><span class="line"><span class="ct-fabed9">}</span></span><span class="line"></span><span class="line"><span class="ct-9baa47">// sending canvas contents to worker</span></span><span class="line"><span class="ct-f8f6ea">const</span><span class="ct-fabed9"> </span><span class="ct-8b87ec">renderInCanvas</span><span class="ct-fabed9"> </span><span class="ct-5659a8">=</span><span class="ct-fabed9"> () </span><span class="ct-f8f6ea">=></span><span class="ct-fabed9"> {</span></span><span class="line"><span class="ct-fabed9"> </span><span class="ct-5659a8">if</span><span class="ct-fabed9"> (</span><span class="ct-5659a8">!</span><span class="ct-06555d">canvas</span><span class="ct-fabed9">.</span><span class="ct-06555d">current</span><span class="ct-fabed9">) {</span></span><span class="line"><span class="ct-fabed9"> </span><span class="ct-5659a8">return</span><span class="ct-fabed9">;</span></span><span class="line"><span class="ct-fabed9"> }</span></span><span class="line"><span class="ct-fabed9"> </span></span><span class="line"><span class="ct-fabed9"> </span><span class="ct-8b87ec">createImageBitmap</span><span class="ct-fabed9">(</span><span class="ct-06555d">canvas</span><span class="ct-fabed9">.</span><span class="ct-06555d">current</span><span class="ct-fabed9">).</span><span class="ct-8b87ec">then</span></span><span class="line"><span class="ct-fabed9"> </span><span class="ct-06555d">instance</span><span class="ct-fabed9">.</span><span class="ct-8b87ec">postMessage</span><span class="ct-fabed9">(</span><span class="ct-06555d">image</span><span class="ct-fabed9">, { transfer: [</span><span class="ct-06555d">image</span><span class="ct-fabed9">] })</span></span><span class="line"><span class="ct-fabed9"> });</span></span><span class="line"><span class="ct-fabed9">};</span></span></code></pre><!--]--></div><p><!--[-->Worker code:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-9baa47">// render-worker.ts</span></span><span class="line"><span class="ct-06f34b">export</span><span class="ct-188de8"> </span><span class="ct-06f34b">default</span><span class="ct-188de8"> () </span><span class="ct-1068a0">=></span><span class="ct-188de8"> </span><span class="ct-d00ff5">{</span></span><span class="line"><span class="ct-fabed9"> </span><span class="ct-06555d">self</span><span class="ct-fabed9">.</span><span class="ct-8b87ec">onmessage</span><span class="ct-fabed9"> </span><span class="ct-5659a8">=</span><span class="ct-fabed9"> </span></span><span class="line"><span class="ct-fabed9"> </span><span class="ct-f8f6ea">const</span><span class="ct-fabed9"> </span><span class="ct-99c685">data</span><span class="ct-fabed9"> </span><span class="ct-5659a8">=</span><span class="ct-fabed9"> </span><span class="ct-06555d">message</span><span class="ct-fabed9">.</span><span class="ct-06555d">data</span><span class="ct-fabed9">;</span></span><span class="line"></span><span class="line"><span class="ct-fabed9"> </span><span class="ct-5659a8">if</span><span class="ct-fabed9"> (</span><span class="ct-5659a8">!</span><span class="ct-fabed9">(</span><span class="ct-06555d">data</span><span class="ct-fabed9"> </span><span class="ct-5659a8">instanceof</span><span class="ct-fabed9"> </span><span class="ct-f26505">ImageBitmap</span><span class="ct-fabed9">)) {</span></span><span class="line"><span class="ct-fabed9"> </span><span class="ct-5659a8">throw</span><span class="ct-fabed9"> </span><span class="ct-5659a8">new</span><span class="ct-fabed9"> </span><span class="ct-e37a18">Error</span><span class="ct-fabed9">(</span><span class="ct-0f9bbf">'Received unknown data'</span><span class="ct-fabed9">)</span></span><span class="line"><span class="ct-fabed9"> }</span></span><span class="line"></span><span class="line"><span class="ct-fabed9"> </span><span class="ct-9baa47">// OffscreenCanvas can be set up inside workers</span></span><span class="line"><span class="ct-fabed9"> </span><span class="ct-f8f6ea">const</span><span class="ct-fabed9"> </span><span class="ct-99c685">canvas</span><span class="ct-fabed9"> </span><span class="ct-5659a8">=</span><span class="ct-fabed9"> </span><span class="ct-5659a8">new</span><span class="ct-fabed9"> </span><span class="ct-8b87ec">OffscreenCanvas</span><span class="ct-fabed9">(</span><span class="ct-06555d">data</span><span class="ct-fabed9">.</span><span class="ct-06555d">width</span><span class="ct-fabed9">, </span><span class="ct-06555d">data</span><span class="ct-fabed9">.</span><span class="ct-06555d">height</span><span class="ct-fabed9">);</span></span><span class="line"><span class="ct-fabed9"> </span><span class="ct-f8f6ea">const</span><span class="ct-fabed9"> </span><span class="ct-99c685">ctx</span><span class="ct-fabed9"> </span><span class="ct-5659a8">=</span><span class="ct-fabed9"> </span><span class="ct-06555d">canvas</span><span class="ct-fabed9">.</span><span class="ct-8b87ec">getContext</span><span class="ct-fabed9">(</span><span class="ct-0f9bbf">"2d"</span><span class="ct-fabed9">);</span></span><span class="line"></span><span class="line"><span class="ct-fabed9"> </span><span class="ct-5659a8">if</span><span class="ct-fabed9"> (</span><span class="ct-5659a8">!</span><span class="ct-06555d">ctx</span><span class="ct-fabed9">) {</span></span><span class="line"><span class="ct-fabed9"> </span><span class="ct-5659a8">throw</span><span class="ct-fabed9"> </span><span class="ct-5659a8">new</span><span class="ct-fabed9"> </span><span class="ct-e37a18">Error</span><span class="ct-fabed9">(</span><span class="ct-0f9bbf">`Can't get 2D context`</span><span class="ct-fabed9">);</span></span><span class="line"><span class="ct-fabed9"> }</span></span><span class="line"></span><span class="line"><span class="ct-fabed9"> </span><span class="ct-06555d">ctx</span><span class="ct-fabed9">.</span><span class="ct-8b87ec">drawImage</span><span class="ct-fabed9">(</span><span class="ct-06555d">data</span><span class="ct-fabed9">, </span><span class="ct-527554">0</span><span class="ct-fabed9">, </span><span class="ct-527554">0</span><span class="ct-fabed9">);</span></span><span class="line"></span><span class="line"><span class="ct-fabed9"> </span><span class="ct-9baa47">// That will block execution inside worker for </span></span><span class="line"><span class="ct-fabed9"> </span><span class="ct-9baa47">// a couple of seconds</span></span><span class="line"><span class="ct-fabed9"> </span><span class="ct-8b87ec">doHardRenderingStuffHere</span><span class="ct-fabed9">(</span><span class="ct-06555d">ctx</span><span class="ct-fabed9">, </span><span class="ct-06555d">data</span><span class="ct-fabed9">.</span><span class="ct-06555d">width</span><span class="ct-fabed9">, </span><span class="ct-06555d">data</span><span class="ct-fabed9">.</span><span class="ct-06555d">height</span><span class="ct-fabed9">);</span></span><span class="line"></span><span class="line"><span class="ct-fabed9"> </span><span class="ct-9baa47">// Sending resulting image back to main thread</span></span><span class="line"><span class="ct-fabed9"> </span><span class="ct-8b87ec">createImageBitmap</span><span class="ct-fabed9">(</span><span class="ct-06555d">canvas</span><span class="ct-fabed9">).</span><span class="ct-8b87ec">then</span><span class="ct-f8f6ea">=></span><span class="ct-fabed9"> {</span></span><span class="line"><span class="ct-fabed9"> </span><span class="ct-06555d">self</span><span class="ct-fabed9">.</span><span class="ct-8b87ec">postMessage</span><span class="ct-fabed9">(</span><span class="ct-06555d">image</span><span class="ct-fabed9">, { transfer: [</span><span class="ct-06555d">image</span><span class="ct-fabed9">] });</span></span><span class="line"><span class="ct-fabed9"> });</span></span><span class="line"><span class="ct-fabed9"> };</span></span><span class="line"><span class="ct-fabed9">};</span></span></code></pre><!--]--></div><style>.ct-d00ff5{color:#C9D1D9}.ct-1068a0{color:#FF7B72}.ct-188de8{color:#FFA657}.ct-06f34b{color:#FF7B72}.ct-527554{color:#79C0FF}.ct-e37a18{color:#79C0FF}.ct-f26505{color:#FFA657}.ct-06555d{color:#C9D1D9}.ct-0f9bbf{color:#A5D6FF}.ct-8b87ec{color:#D2A8FF}.ct-5659a8{color:#FF7B72}.ct-99c685{color:#79C0FF}.ct-fabed9{color:#C9D1D9}.ct-f8f6ea{color:#FF7B72}.ct-9baa47{color:#8B949E}.light .ct-9baa47{color:#93A1A1}.light .ct-f8f6ea{color:#073642}.light .ct-fabed9{color:#657B83}.light .ct-99c685{color:#268BD2}.light .ct-5659a8{color:#859900}.light .ct-8b87ec{color:#268BD2}.light .ct-0f9bbf{color:#2AA198}.light .ct-06555d{color:#268BD2}.light .ct-f26505{color:#268BD2}.light .ct-e37a18{color:#859900}.light .ct-527554{color:#D33682}.light .ct-06f34b{color:#859900}.light .ct-188de8{color:#657B83}.light .ct-1068a0{color:#073642}.light .ct-d00ff5{color:#657B83}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/frontend/webgl/rendering-without-blocking-in-a-worker/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697992208}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/frontend/webgl/vertex-shaders/_payload.js b/docs/frontend/webgl/vertex-shaders/_payload.js
index 452bc83..b66887b 100644
--- a/docs/frontend/webgl/vertex-shaders/_payload.js
+++ b/docs/frontend/webgl/vertex-shaders/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av,aw,ax,ay,az,aA,aB,aC){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:x,_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:r,_path:N}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-AJXcBpscEK":{_path:N,_dir:"webgl",_draft:y,_partial:y,_locale:"en",_empty:y,title:r,description:"Read Basics of WebGL (Drawing a Cube) first.",excerpt:{type:O,children:[{type:a,tag:f,props:{},children:[{type:b,value:P},{type:a,tag:h,props:{href:Q},children:[{type:b,value:R}]},{type:b,value:S}]},{type:a,tag:f,props:{},children:[{type:a,tag:T,props:{},children:[{type:b,value:r}]},{type:b,value:U},{type:a,tag:g,props:{},children:[{type:b,value:z}]},{type:b,value:V}]},{type:a,tag:k,props:{id:A},children:[{type:b,value:B}]},{type:a,tag:s,props:{code:C,language:W},children:[{type:a,tag:X,props:{},children:[{type:a,tag:s,props:{__ignoreMap:D},children:[{type:b,value:C}]}]}]},{type:a,tag:k,props:{id:E},children:[{type:b,value:F}]},{type:a,tag:f,props:{},children:[{type:b,value:Y},{type:a,tag:g,props:{},children:[{type:b,value:Z}]},{type:b,value:G},{type:a,tag:h,props:{href:_,rel:[t]},children:[{type:b,value:$}]},{type:b,value:aa}]},{type:a,tag:f,props:{},children:[{type:b,value:ab}]},{type:a,tag:ac,props:{},children:[{type:a,tag:l,props:{},children:[{type:a,tag:g,props:{},children:[{type:b,value:ad}]},{type:b,value:ae}]},{type:a,tag:l,props:{},children:[{type:a,tag:g,props:{},children:[{type:b,value:af}]},{type:b,value:ag}]},{type:a,tag:l,props:{},children:[{type:a,tag:g,props:{},children:[{type:b,value:ah}]},{type:b,value:ai},{type:a,tag:h,props:{href:aj},children:[{type:b,value:x}]},{type:b,value:u}]}]},{type:a,tag:k,props:{id:H},children:[{type:b,value:I}]},{type:a,tag:f,props:{},children:[{type:b,value:ak},{type:a,tag:g,props:{},children:[{type:b,value:al}]},{type:b,value:am},{type:a,tag:g,props:{},children:[{type:b,value:an}]},{type:b,value:ao}]},{type:a,tag:f,props:{},children:[{type:a,tag:c,props:{className:[m]},children:[{type:b,value:ap}]},{type:b,value:aq},{type:a,tag:c,props:{className:[m]},children:[{type:b,value:ar}]},{type:b,value:as},{type:a,tag:c,props:{className:[m]},children:[{type:b,value:at}]},{type:b,value:au}]},{type:a,tag:f,props:{},children:[{type:b,value:av},{type:a,tag:h,props:{href:aw,rel:[t]},children:[{type:b,value:ax}]},{type:b,value:u}]}]},body:{type:O,children:[{type:a,tag:f,props:{},children:[{type:b,value:P},{type:a,tag:h,props:{href:Q},children:[{type:b,value:R}]},{type:b,value:S}]},{type:a,tag:f,props:{},children:[{type:a,tag:T,props:{},children:[{type:b,value:r}]},{type:b,value:U},{type:a,tag:g,props:{},children:[{type:b,value:z}]},{type:b,value:V}]},{type:a,tag:k,props:{id:A},children:[{type:b,value:B}]},{type:a,tag:s,props:{code:C,language:W},children:[{type:a,tag:X,props:{},children:[{type:a,tag:s,props:{__ignoreMap:D},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:i},children:[{type:b,value:"\u002F\u002F current vertice position {x,y,z,w}"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"attribute vec4 aVertexPosition;"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:i},children:[{type:b,value:"\u002F\u002F final vertice position with all transformations applied,"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:i},children:[{type:b,value:"\u002F\u002F that will be passed to Fragment Shader"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"varying vec4 v_positionWithOffset;"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:i},children:[{type:b,value:"\u002F\u002F Parameters passed from Javascript loop"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:ay}]},{type:a,tag:c,props:{class:J},children:[{type:b,value:az}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" slide;"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:ay}]},{type:a,tag:c,props:{class:J},children:[{type:b,value:az}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" aspect;"}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:J},children:[{type:b,value:"void"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:G}]},{type:a,tag:c,props:{class:n},children:[{type:b,value:"main"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"(){"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:v}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:"\u002F\u002F float array of 4 elements, same as [slide,slide,slide,1]"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" vec4 scale"}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:w}]},{type:a,tag:c,props:{class:n},children:[{type:b,value:K}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:L}]},{type:a,tag:c,props:{class:n},children:[{type:b,value:aA}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"(slide),"}]},{type:a,tag:c,props:{class:o},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:aB}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:v}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:"\u002F\u002F float array of 4 elements, same as [aspect,1,1,1]"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" vec4 aspectRatioFix"}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:w}]},{type:a,tag:c,props:{class:n},children:[{type:b,value:K}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"(aspect,"}]},{type:a,tag:c,props:{class:n},children:[{type:b,value:aA}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:L}]},{type:a,tag:c,props:{class:o},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"));"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:v}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:"\u002F\u002F vertice position, multiplied with matrices of scale and aspect ratio"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" gl_Position"}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:w}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"aVertexPosition"}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:aC}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"scale"}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:aC}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"aspectRatioFix,"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:v}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:"\u002F\u002F vertice offset, that will be passed to fragment shader"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" v_positionWithOffset"}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:w}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:z}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:"+"}]},{type:a,tag:c,props:{class:n},children:[{type:b,value:K}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:L}]},{type:a,tag:c,props:{class:o},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:M}]},{type:a,tag:c,props:{class:o},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:M}]},{type:a,tag:c,props:{class:o},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:M}]},{type:a,tag:c,props:{class:o},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:aB}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"}"}]}]}]}]}]},{type:a,tag:k,props:{id:E},children:[{type:b,value:F}]},{type:a,tag:f,props:{},children:[{type:b,value:Y},{type:a,tag:g,props:{},children:[{type:b,value:Z}]},{type:b,value:G},{type:a,tag:h,props:{href:_,rel:[t]},children:[{type:b,value:$}]},{type:b,value:aa}]},{type:a,tag:f,props:{},children:[{type:b,value:ab}]},{type:a,tag:ac,props:{},children:[{type:a,tag:l,props:{},children:[{type:a,tag:g,props:{},children:[{type:b,value:ad}]},{type:b,value:ae}]},{type:a,tag:l,props:{},children:[{type:a,tag:g,props:{},children:[{type:b,value:af}]},{type:b,value:ag}]},{type:a,tag:l,props:{},children:[{type:a,tag:g,props:{},children:[{type:b,value:ah}]},{type:b,value:ai},{type:a,tag:h,props:{href:aj},children:[{type:b,value:x}]},{type:b,value:u}]}]},{type:a,tag:k,props:{id:H},children:[{type:b,value:I}]},{type:a,tag:f,props:{},children:[{type:b,value:ak},{type:a,tag:g,props:{},children:[{type:b,value:al}]},{type:b,value:am},{type:a,tag:g,props:{},children:[{type:b,value:an}]},{type:b,value:ao}]},{type:a,tag:f,props:{},children:[{type:a,tag:c,props:{className:[m]},children:[{type:b,value:ap}]},{type:b,value:aq},{type:a,tag:c,props:{className:[m]},children:[{type:b,value:ar}]},{type:b,value:as},{type:a,tag:c,props:{className:[m]},children:[{type:b,value:at}]},{type:b,value:au}]},{type:a,tag:f,props:{},children:[{type:b,value:av},{type:a,tag:h,props:{href:aw,rel:[t]},children:[{type:b,value:ax}]},{type:b,value:u}]},{type:a,tag:"style",children:[{type:b,value:".ct-5b280b{color:#79C0FF}.ct-f3cef3{color:#FF7B72}.ct-6823c5{color:#D2A8FF}.ct-439ac8{color:#FF7B72}.ct-fda822{color:#C9D1D9}.ct-bf1472{color:#8B949E}.light .ct-bf1472{color:#93A1A1}.light .ct-fda822{color:#657B83}.light .ct-439ac8{color:#073642}.light .ct-6823c5{color:#268BD2}.light .ct-f3cef3{color:#859900}.light .ct-5b280b{color:#D33682}"}]}],toc:{title:D,searchDepth:q,depth:q,links:[{id:A,depth:q,text:B},{id:E,depth:q,text:F},{id:H,depth:q,text:I}]}},_type:"markdown",_id:"content:Frontend:WebGL:Vertex Shaders.md",_source:"content",_file:"Frontend\u002FWebGL\u002FVertex Shaders.md",_extension:"md"}},prerenderedAt:1703695530801}}("element","text","span","ct-fda822","line","p","code-inline","a","ct-bf1472","ct-f3cef3","h2","li","highlight","ct-6823c5","ct-5b280b","1",2,"Vertex Shaders","code","nofollow","."," ","=","Fragment Shaders",false,"gl_Position","sample-code","Sample code","\u002F\u002F current vertice position {x,y,z,w}\nattribute vec4 aVertexPosition;\n\u002F\u002F final vertice position with all transformations applied,\n\u002F\u002F that will be passed to Fragment Shader\nvarying vec4 v_positionWithOffset;\n\u002F\u002F Parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(){\n \u002F\u002F float array of 4 elements, same as [slide,slide,slide,1]\n vec4 scale=vec4(vec3(slide),1);\n \u002F\u002F float array of 4 elements, same as [aspect,1,1,1]\n vec4 aspectRatioFix=vec4(aspect,vec3(1));\n \u002F\u002F vertice position, multiplied with matrices of scale and aspect ratio\n gl_Position=aVertexPosition*scale*aspectRatioFix,\n \u002F\u002F vertice offset, that will be passed to fragment shader\n v_positionWithOffset=gl_Position+vec4(1,1,1,1);\n}\n","","passing-parameters-to-vertexshader","Passing parameters to VertexShader"," ","applying-transformations","Applying transformations","ct-439ac8","vec4","(",",","\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders","root","Read ","Basics%20of%20WebGL%20(Drawing%20a%20Cube)","Basics of WebGL (Drawing a Cube)"," first.","strong"," define vertice positions in 3D-space. That's just a function, that defines "," value by applying different transformations to it.","c","pre","Search for ","Uniforms","https:\u002F\u002Fopen.gl\u002Fdrawing","at open.gl"," for further reading.","There're 3 ways to pass parameters.","ul","attribute"," are parameters, that won't change. Good for vertex buffers.","uniform"," are meant to change over the time. Good for passing transformations.","varying"," are parameters, that's shared between Vertex and ","Fragment%20Shaders","Every vertice position is defined as ","{x,y,z,w}",", where ","w"," is a common denominator, that's used to achieve fast coord transformations by multiplying number of square matrices with original vertice coordinates.","We don't change vertice position buffer",", because it's slow when being run inside Javascript loop, we ","pass transformation matrices"," instead and ","multiply vertice positions with transformation matrices"," inside a Graphic Card's GPU, because that's what GPU made for.","Good explanation can be found here: ","https:\u002F\u002Fopen.gl\u002Ftransformations","open.gl","uniform ","float","vec3",");","*"))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av,aw,ax,ay,az,aA,aB,aC){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:x,_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:r,_path:N}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-AJXcBpscEK":{_path:N,_dir:"webgl",_draft:y,_partial:y,_locale:"en",_empty:y,title:r,description:"Read Basics of WebGL (Drawing a Cube) first.",excerpt:{type:O,children:[{type:a,tag:f,props:{},children:[{type:b,value:P},{type:a,tag:h,props:{href:Q},children:[{type:b,value:R}]},{type:b,value:S}]},{type:a,tag:f,props:{},children:[{type:a,tag:T,props:{},children:[{type:b,value:r}]},{type:b,value:U},{type:a,tag:g,props:{},children:[{type:b,value:z}]},{type:b,value:V}]},{type:a,tag:k,props:{id:A},children:[{type:b,value:B}]},{type:a,tag:s,props:{code:C,language:W},children:[{type:a,tag:X,props:{},children:[{type:a,tag:s,props:{__ignoreMap:D},children:[{type:b,value:C}]}]}]},{type:a,tag:k,props:{id:E},children:[{type:b,value:F}]},{type:a,tag:f,props:{},children:[{type:b,value:Y},{type:a,tag:g,props:{},children:[{type:b,value:Z}]},{type:b,value:G},{type:a,tag:h,props:{href:_,rel:[t]},children:[{type:b,value:$}]},{type:b,value:aa}]},{type:a,tag:f,props:{},children:[{type:b,value:ab}]},{type:a,tag:ac,props:{},children:[{type:a,tag:l,props:{},children:[{type:a,tag:g,props:{},children:[{type:b,value:ad}]},{type:b,value:ae}]},{type:a,tag:l,props:{},children:[{type:a,tag:g,props:{},children:[{type:b,value:af}]},{type:b,value:ag}]},{type:a,tag:l,props:{},children:[{type:a,tag:g,props:{},children:[{type:b,value:ah}]},{type:b,value:ai},{type:a,tag:h,props:{href:aj},children:[{type:b,value:x}]},{type:b,value:u}]}]},{type:a,tag:k,props:{id:H},children:[{type:b,value:I}]},{type:a,tag:f,props:{},children:[{type:b,value:ak},{type:a,tag:g,props:{},children:[{type:b,value:al}]},{type:b,value:am},{type:a,tag:g,props:{},children:[{type:b,value:an}]},{type:b,value:ao}]},{type:a,tag:f,props:{},children:[{type:a,tag:c,props:{className:[m]},children:[{type:b,value:ap}]},{type:b,value:aq},{type:a,tag:c,props:{className:[m]},children:[{type:b,value:ar}]},{type:b,value:as},{type:a,tag:c,props:{className:[m]},children:[{type:b,value:at}]},{type:b,value:au}]},{type:a,tag:f,props:{},children:[{type:b,value:av},{type:a,tag:h,props:{href:aw,rel:[t]},children:[{type:b,value:ax}]},{type:b,value:u}]}]},body:{type:O,children:[{type:a,tag:f,props:{},children:[{type:b,value:P},{type:a,tag:h,props:{href:Q},children:[{type:b,value:R}]},{type:b,value:S}]},{type:a,tag:f,props:{},children:[{type:a,tag:T,props:{},children:[{type:b,value:r}]},{type:b,value:U},{type:a,tag:g,props:{},children:[{type:b,value:z}]},{type:b,value:V}]},{type:a,tag:k,props:{id:A},children:[{type:b,value:B}]},{type:a,tag:s,props:{code:C,language:W},children:[{type:a,tag:X,props:{},children:[{type:a,tag:s,props:{__ignoreMap:D},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:i},children:[{type:b,value:"\u002F\u002F current vertice position {x,y,z,w}"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"attribute vec4 aVertexPosition;"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:i},children:[{type:b,value:"\u002F\u002F final vertice position with all transformations applied,"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:i},children:[{type:b,value:"\u002F\u002F that will be passed to Fragment Shader"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"varying vec4 v_positionWithOffset;"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:i},children:[{type:b,value:"\u002F\u002F Parameters passed from Javascript loop"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:ay}]},{type:a,tag:c,props:{class:J},children:[{type:b,value:az}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" slide;"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:ay}]},{type:a,tag:c,props:{class:J},children:[{type:b,value:az}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" aspect;"}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:J},children:[{type:b,value:"void"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:G}]},{type:a,tag:c,props:{class:n},children:[{type:b,value:"main"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"(){"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:v}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:"\u002F\u002F float array of 4 elements, same as [slide,slide,slide,1]"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" vec4 scale"}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:w}]},{type:a,tag:c,props:{class:n},children:[{type:b,value:K}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:L}]},{type:a,tag:c,props:{class:n},children:[{type:b,value:aA}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"(slide),"}]},{type:a,tag:c,props:{class:o},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:aB}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:v}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:"\u002F\u002F float array of 4 elements, same as [aspect,1,1,1]"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" vec4 aspectRatioFix"}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:w}]},{type:a,tag:c,props:{class:n},children:[{type:b,value:K}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"(aspect,"}]},{type:a,tag:c,props:{class:n},children:[{type:b,value:aA}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:L}]},{type:a,tag:c,props:{class:o},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"));"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:v}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:"\u002F\u002F vertice position, multiplied with matrices of scale and aspect ratio"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" gl_Position"}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:w}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"aVertexPosition"}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:aC}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"scale"}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:aC}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"aspectRatioFix,"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:v}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:"\u002F\u002F vertice offset, that will be passed to fragment shader"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" v_positionWithOffset"}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:w}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:z}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:"+"}]},{type:a,tag:c,props:{class:n},children:[{type:b,value:K}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:L}]},{type:a,tag:c,props:{class:o},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:M}]},{type:a,tag:c,props:{class:o},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:M}]},{type:a,tag:c,props:{class:o},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:M}]},{type:a,tag:c,props:{class:o},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:aB}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"}"}]}]}]}]}]},{type:a,tag:k,props:{id:E},children:[{type:b,value:F}]},{type:a,tag:f,props:{},children:[{type:b,value:Y},{type:a,tag:g,props:{},children:[{type:b,value:Z}]},{type:b,value:G},{type:a,tag:h,props:{href:_,rel:[t]},children:[{type:b,value:$}]},{type:b,value:aa}]},{type:a,tag:f,props:{},children:[{type:b,value:ab}]},{type:a,tag:ac,props:{},children:[{type:a,tag:l,props:{},children:[{type:a,tag:g,props:{},children:[{type:b,value:ad}]},{type:b,value:ae}]},{type:a,tag:l,props:{},children:[{type:a,tag:g,props:{},children:[{type:b,value:af}]},{type:b,value:ag}]},{type:a,tag:l,props:{},children:[{type:a,tag:g,props:{},children:[{type:b,value:ah}]},{type:b,value:ai},{type:a,tag:h,props:{href:aj},children:[{type:b,value:x}]},{type:b,value:u}]}]},{type:a,tag:k,props:{id:H},children:[{type:b,value:I}]},{type:a,tag:f,props:{},children:[{type:b,value:ak},{type:a,tag:g,props:{},children:[{type:b,value:al}]},{type:b,value:am},{type:a,tag:g,props:{},children:[{type:b,value:an}]},{type:b,value:ao}]},{type:a,tag:f,props:{},children:[{type:a,tag:c,props:{className:[m]},children:[{type:b,value:ap}]},{type:b,value:aq},{type:a,tag:c,props:{className:[m]},children:[{type:b,value:ar}]},{type:b,value:as},{type:a,tag:c,props:{className:[m]},children:[{type:b,value:at}]},{type:b,value:au}]},{type:a,tag:f,props:{},children:[{type:b,value:av},{type:a,tag:h,props:{href:aw,rel:[t]},children:[{type:b,value:ax}]},{type:b,value:u}]},{type:a,tag:"style",children:[{type:b,value:".ct-10abe3{color:#79C0FF}.ct-7abd18{color:#FF7B72}.ct-aae1d7{color:#D2A8FF}.ct-5f3977{color:#FF7B72}.ct-61138c{color:#C9D1D9}.ct-cab054{color:#8B949E}.light .ct-cab054{color:#93A1A1}.light .ct-61138c{color:#657B83}.light .ct-5f3977{color:#073642}.light .ct-aae1d7{color:#268BD2}.light .ct-7abd18{color:#859900}.light .ct-10abe3{color:#D33682}"}]}],toc:{title:D,searchDepth:q,depth:q,links:[{id:A,depth:q,text:B},{id:E,depth:q,text:F},{id:H,depth:q,text:I}]}},_type:"markdown",_id:"content:Frontend:WebGL:Vertex Shaders.md",_source:"content",_file:"Frontend\u002FWebGL\u002FVertex Shaders.md",_extension:"md"}},prerenderedAt:1703697992287}}("element","text","span","ct-61138c","line","p","code-inline","a","ct-cab054","ct-7abd18","h2","li","highlight","ct-aae1d7","ct-10abe3","1",2,"Vertex Shaders","code","nofollow","."," ","=","Fragment Shaders",false,"gl_Position","sample-code","Sample code","\u002F\u002F current vertice position {x,y,z,w}\nattribute vec4 aVertexPosition;\n\u002F\u002F final vertice position with all transformations applied,\n\u002F\u002F that will be passed to Fragment Shader\nvarying vec4 v_positionWithOffset;\n\u002F\u002F Parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(){\n \u002F\u002F float array of 4 elements, same as [slide,slide,slide,1]\n vec4 scale=vec4(vec3(slide),1);\n \u002F\u002F float array of 4 elements, same as [aspect,1,1,1]\n vec4 aspectRatioFix=vec4(aspect,vec3(1));\n \u002F\u002F vertice position, multiplied with matrices of scale and aspect ratio\n gl_Position=aVertexPosition*scale*aspectRatioFix,\n \u002F\u002F vertice offset, that will be passed to fragment shader\n v_positionWithOffset=gl_Position+vec4(1,1,1,1);\n}\n","","passing-parameters-to-vertexshader","Passing parameters to VertexShader"," ","applying-transformations","Applying transformations","ct-5f3977","vec4","(",",","\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders","root","Read ","Basics%20of%20WebGL%20(Drawing%20a%20Cube)","Basics of WebGL (Drawing a Cube)"," first.","strong"," define vertice positions in 3D-space. That's just a function, that defines "," value by applying different transformations to it.","c","pre","Search for ","Uniforms","https:\u002F\u002Fopen.gl\u002Fdrawing","at open.gl"," for further reading.","There're 3 ways to pass parameters.","ul","attribute"," are parameters, that won't change. Good for vertex buffers.","uniform"," are meant to change over the time. Good for passing transformations.","varying"," are parameters, that's shared between Vertex and ","Fragment%20Shaders","Every vertice position is defined as ","{x,y,z,w}",", where ","w"," is a common denominator, that's used to achieve fast coord transformations by multiplying number of square matrices with original vertice coordinates.","We don't change vertice position buffer",", because it's slow when being run inside Javascript loop, we ","pass transformation matrices"," instead and ","multiply vertice positions with transformation matrices"," inside a Graphic Card's GPU, because that's what GPU made for.","Good explanation can be found here: ","https:\u002F\u002Fopen.gl\u002Ftransformations","open.gl","uniform ","float","vec3",");","*"))
\ No newline at end of file
diff --git a/docs/frontend/webgl/vertex-shaders/index.html b/docs/frontend/webgl/vertex-shaders/index.html
index b850108..bd3c740 100644
--- a/docs/frontend/webgl/vertex-shaders/index.html
+++ b/docs/frontend/webgl/vertex-shaders/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Vertex Shaders • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Read Basics of WebGL (Drawing a Cube) first."><meta name="head:count" content="3"><link rel="modulepreload" href="/frontend/webgl/vertex-shaders/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseA.c52e44f8.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseStrong.e968ffe9.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCodeInline.d9bcf614.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseH2.d950f051.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseUl.b892d423.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseLi.a224f663.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a aria-current="page" href="/frontend/webgl/vertex-shaders" class="router-link-active _active_192pu_81 _link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Vertex Shaders</h1><article><div><p><!--[-->Read <a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class=""><!--[-->Basics of WebGL (Drawing a Cube)<!--]--></a> first.<!--]--></p><p><!--[--><strong><!--[-->Vertex Shaders<!--]--></strong> define vertice positions in 3D-space. That's just a function, that defines <code><!--[-->gl_Position<!--]--></code> value by applying different transformations to it.<!--]--></p><h2 id="sample-code"><a href="#sample-code"><!--[-->Sample code<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>c</span></button><!--[--><pre><code><span class="line"><span class="ct-bf1472">// current vertice position {x,y,z,w}</span></span><span class="line"><span class="ct-fda822">attribute vec4 aVertexPosition;</span></span><span class="line"><span class="ct-bf1472">// final vertice position with all transformations applied,</span></span><span class="line"><span class="ct-bf1472">// that will be passed to Fragment Shader</span></span><span class="line"><span class="ct-fda822">varying vec4 v_positionWithOffset;</span></span><span class="line"><span class="ct-bf1472">// Parameters passed from Javascript loop</span></span><span class="line"><span class="ct-fda822">uniform </span><span class="ct-439ac8">float</span><span class="ct-fda822"> slide;</span></span><span class="line"><span class="ct-fda822">uniform </span><span class="ct-439ac8">float</span><span class="ct-fda822"> aspect;</span></span><span class="line"></span><span class="line"><span class="ct-439ac8">void</span><span class="ct-fda822"> </span><span class="ct-6823c5">main</span><span class="ct-fda822">(){</span></span><span class="line"><span class="ct-fda822"> </span><span class="ct-bf1472">// float array of 4 elements, same as [slide,slide,slide,1]</span></span><span class="line"><span class="ct-fda822"> vec4 scale</span><span class="ct-f3cef3">=</span><span class="ct-6823c5">vec4</span><span class="ct-fda822">(</span><span class="ct-6823c5">vec3</span><span class="ct-fda822">(slide),</span><span class="ct-5b280b">1</span><span class="ct-fda822">);</span></span><span class="line"><span class="ct-fda822"> </span><span class="ct-bf1472">// float array of 4 elements, same as [aspect,1,1,1]</span></span><span class="line"><span class="ct-fda822"> vec4 aspectRatioFix</span><span class="ct-f3cef3">=</span><span class="ct-6823c5">vec4</span><span class="ct-fda822">(aspect,</span><span class="ct-6823c5">vec3</span><span class="ct-fda822">(</span><span class="ct-5b280b">1</span><span class="ct-fda822">));</span></span><span class="line"><span class="ct-fda822"> </span><span class="ct-bf1472">// vertice position, multiplied with matrices of scale and aspect ratio</span></span><span class="line"><span class="ct-fda822"> gl_Position</span><span class="ct-f3cef3">=</span><span class="ct-fda822">aVertexPosition</span><span class="ct-f3cef3">*</span><span class="ct-fda822">scale</span><span class="ct-f3cef3">*</span><span class="ct-fda822">aspectRatioFix,</span></span><span class="line"><span class="ct-fda822"> </span><span class="ct-bf1472">// vertice offset, that will be passed to fragment shader</span></span><span class="line"><span class="ct-fda822"> v_positionWithOffset</span><span class="ct-f3cef3">=</span><span class="ct-fda822">gl_Position</span><span class="ct-f3cef3">+</span><span class="ct-6823c5">vec4</span><span class="ct-fda822">(</span><span class="ct-5b280b">1</span><span class="ct-fda822">,</span><span class="ct-5b280b">1</span><span class="ct-fda822">,</span><span class="ct-5b280b">1</span><span class="ct-fda822">,</span><span class="ct-5b280b">1</span><span class="ct-fda822">);</span></span><span class="line"><span class="ct-fda822">}</span></span></code></pre><!--]--></div><h2 id="passing-parameters-to-vertexshader"><a href="#passing-parameters-to-vertexshader"><!--[-->Passing parameters to VertexShader<!--]--></a></h2><p><!--[-->Search for <code><!--[-->Uniforms<!--]--></code> <a href="https://open.gl/drawing" rel="nofollow" target="_blank"><!--[-->at open.gl<!--]--></a> for further reading.<!--]--></p><p><!--[-->There're 3 ways to pass parameters.<!--]--></p><ul><!--[--><li><!--[--><code><!--[-->attribute<!--]--></code> are parameters, that won't change. Good for vertex buffers.<!--]--></li><li><!--[--><code><!--[-->uniform<!--]--></code> are meant to change over the time. Good for passing transformations.<!--]--></li><li><!--[--><code><!--[-->varying<!--]--></code> are parameters, that's shared between Vertex and <a href="/frontend/webgl/fragment-shaders" class=""><!--[-->Fragment Shaders<!--]--></a>.<!--]--></li><!--]--></ul><h2 id="applying-transformations"><a href="#applying-transformations"><!--[-->Applying transformations<!--]--></a></h2><p><!--[-->Every vertice position is defined as <code><!--[-->{x,y,z,w}<!--]--></code>, where <code><!--[-->w<!--]--></code> is a common denominator, that's used to achieve fast coord transformations by multiplying number of square matrices with original vertice coordinates.<!--]--></p><p><!--[--><span class="highlight">We don't change vertice position buffer</span>, because it's slow when being run inside Javascript loop, we <span class="highlight">pass transformation matrices</span> instead and <span class="highlight">multiply vertice positions with transformation matrices</span> inside a Graphic Card's GPU, because that's what GPU made for.<!--]--></p><p><!--[-->Good explanation can be found here: <a href="https://open.gl/transformations" rel="nofollow" target="_blank"><!--[-->open.gl<!--]--></a>.<!--]--></p><style>.ct-5b280b{color:#79C0FF}.ct-f3cef3{color:#FF7B72}.ct-6823c5{color:#D2A8FF}.ct-439ac8{color:#FF7B72}.ct-fda822{color:#C9D1D9}.ct-bf1472{color:#8B949E}.light .ct-bf1472{color:#93A1A1}.light .ct-fda822{color:#657B83}.light .ct-439ac8{color:#073642}.light .ct-6823c5{color:#268BD2}.light .ct-f3cef3{color:#859900}.light .ct-5b280b{color:#D33682}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/frontend/webgl/vertex-shaders/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695530801}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseStrong.e968ffe9.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script><script type="module" src="/nuxt/ProseUl.b892d423.js" crossorigin></script><script type="module" src="/nuxt/ProseLi.a224f663.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a aria-current="page" href="/frontend/webgl/vertex-shaders" class="router-link-active _active_192pu_81 _link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Vertex Shaders</h1><article><div><p><!--[-->Read <a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class=""><!--[-->Basics of WebGL (Drawing a Cube)<!--]--></a> first.<!--]--></p><p><!--[--><strong><!--[-->Vertex Shaders<!--]--></strong> define vertice positions in 3D-space. That's just a function, that defines <code><!--[-->gl_Position<!--]--></code> value by applying different transformations to it.<!--]--></p><h2 id="sample-code"><a href="#sample-code"><!--[-->Sample code<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>c</span></button><!--[--><pre><code><span class="line"><span class="ct-cab054">// current vertice position {x,y,z,w}</span></span><span class="line"><span class="ct-61138c">attribute vec4 aVertexPosition;</span></span><span class="line"><span class="ct-cab054">// final vertice position with all transformations applied,</span></span><span class="line"><span class="ct-cab054">// that will be passed to Fragment Shader</span></span><span class="line"><span class="ct-61138c">varying vec4 v_positionWithOffset;</span></span><span class="line"><span class="ct-cab054">// Parameters passed from Javascript loop</span></span><span class="line"><span class="ct-61138c">uniform </span><span class="ct-5f3977">float</span><span class="ct-61138c"> slide;</span></span><span class="line"><span class="ct-61138c">uniform </span><span class="ct-5f3977">float</span><span class="ct-61138c"> aspect;</span></span><span class="line"></span><span class="line"><span class="ct-5f3977">void</span><span class="ct-61138c"> </span><span class="ct-aae1d7">main</span><span class="ct-61138c">(){</span></span><span class="line"><span class="ct-61138c"> </span><span class="ct-cab054">// float array of 4 elements, same as [slide,slide,slide,1]</span></span><span class="line"><span class="ct-61138c"> vec4 scale</span><span class="ct-7abd18">=</span><span class="ct-aae1d7">vec4</span><span class="ct-61138c">(</span><span class="ct-aae1d7">vec3</span><span class="ct-61138c">(slide),</span><span class="ct-10abe3">1</span><span class="ct-61138c">);</span></span><span class="line"><span class="ct-61138c"> </span><span class="ct-cab054">// float array of 4 elements, same as [aspect,1,1,1]</span></span><span class="line"><span class="ct-61138c"> vec4 aspectRatioFix</span><span class="ct-7abd18">=</span><span class="ct-aae1d7">vec4</span><span class="ct-61138c">(aspect,</span><span class="ct-aae1d7">vec3</span><span class="ct-61138c">(</span><span class="ct-10abe3">1</span><span class="ct-61138c">));</span></span><span class="line"><span class="ct-61138c"> </span><span class="ct-cab054">// vertice position, multiplied with matrices of scale and aspect ratio</span></span><span class="line"><span class="ct-61138c"> gl_Position</span><span class="ct-7abd18">=</span><span class="ct-61138c">aVertexPosition</span><span class="ct-7abd18">*</span><span class="ct-61138c">scale</span><span class="ct-7abd18">*</span><span class="ct-61138c">aspectRatioFix,</span></span><span class="line"><span class="ct-61138c"> </span><span class="ct-cab054">// vertice offset, that will be passed to fragment shader</span></span><span class="line"><span class="ct-61138c"> v_positionWithOffset</span><span class="ct-7abd18">=</span><span class="ct-61138c">gl_Position</span><span class="ct-7abd18">+</span><span class="ct-aae1d7">vec4</span><span class="ct-61138c">(</span><span class="ct-10abe3">1</span><span class="ct-61138c">,</span><span class="ct-10abe3">1</span><span class="ct-61138c">,</span><span class="ct-10abe3">1</span><span class="ct-61138c">,</span><span class="ct-10abe3">1</span><span class="ct-61138c">);</span></span><span class="line"><span class="ct-61138c">}</span></span></code></pre><!--]--></div><h2 id="passing-parameters-to-vertexshader"><a href="#passing-parameters-to-vertexshader"><!--[-->Passing parameters to VertexShader<!--]--></a></h2><p><!--[-->Search for <code><!--[-->Uniforms<!--]--></code> <a href="https://open.gl/drawing" rel="nofollow" target="_blank"><!--[-->at open.gl<!--]--></a> for further reading.<!--]--></p><p><!--[-->There're 3 ways to pass parameters.<!--]--></p><ul><!--[--><li><!--[--><code><!--[-->attribute<!--]--></code> are parameters, that won't change. Good for vertex buffers.<!--]--></li><li><!--[--><code><!--[-->uniform<!--]--></code> are meant to change over the time. Good for passing transformations.<!--]--></li><li><!--[--><code><!--[-->varying<!--]--></code> are parameters, that's shared between Vertex and <a href="/frontend/webgl/fragment-shaders" class=""><!--[-->Fragment Shaders<!--]--></a>.<!--]--></li><!--]--></ul><h2 id="applying-transformations"><a href="#applying-transformations"><!--[-->Applying transformations<!--]--></a></h2><p><!--[-->Every vertice position is defined as <code><!--[-->{x,y,z,w}<!--]--></code>, where <code><!--[-->w<!--]--></code> is a common denominator, that's used to achieve fast coord transformations by multiplying number of square matrices with original vertice coordinates.<!--]--></p><p><!--[--><span class="highlight">We don't change vertice position buffer</span>, because it's slow when being run inside Javascript loop, we <span class="highlight">pass transformation matrices</span> instead and <span class="highlight">multiply vertice positions with transformation matrices</span> inside a Graphic Card's GPU, because that's what GPU made for.<!--]--></p><p><!--[-->Good explanation can be found here: <a href="https://open.gl/transformations" rel="nofollow" target="_blank"><!--[-->open.gl<!--]--></a>.<!--]--></p><style>.ct-10abe3{color:#79C0FF}.ct-7abd18{color:#FF7B72}.ct-aae1d7{color:#D2A8FF}.ct-5f3977{color:#FF7B72}.ct-61138c{color:#C9D1D9}.ct-cab054{color:#8B949E}.light .ct-cab054{color:#93A1A1}.light .ct-61138c{color:#657B83}.light .ct-5f3977{color:#073642}.light .ct-aae1d7{color:#268BD2}.light .ct-7abd18{color:#859900}.light .ct-10abe3{color:#D33682}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/frontend/webgl/vertex-shaders/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697992287}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseStrong.e968ffe9.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script><script type="module" src="/nuxt/ProseUl.b892d423.js" crossorigin></script><script type="module" src="/nuxt/ProseLi.a224f663.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/git/force-git-to-use-https/_payload.js b/docs/git/force-git-to-use-https/_payload.js
index baad0a4..8ad5652 100644
--- a/docs/git/force-git-to-use-https/_payload.js
+++ b/docs/git/force-git-to-use-https/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:k,_path:l},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-atqGqeweL2":{_path:l,_dir:"git",_draft:g,_partial:g,_locale:"en",_empty:g,title:k,description:h,excerpt:{type:m,children:[{type:a,tag:d,props:{},children:[{type:b,value:h}]},{type:a,tag:d,props:{},children:[{type:b,value:n},{type:a,tag:o,props:{},children:[{type:b,value:p}]},{type:b,value:q}]},{type:a,tag:e,props:{code:i,language:r},children:[{type:a,tag:s,props:{},children:[{type:a,tag:e,props:{__ignoreMap:j},children:[{type:b,value:i}]}]}]}]},body:{type:m,children:[{type:a,tag:d,props:{},children:[{type:b,value:h}]},{type:a,tag:d,props:{},children:[{type:b,value:n},{type:a,tag:o,props:{},children:[{type:b,value:p}]},{type:b,value:q}]},{type:a,tag:e,props:{code:i,language:r},children:[{type:a,tag:s,props:{},children:[{type:a,tag:e,props:{__ignoreMap:j},children:[{type:a,tag:c,props:{class:t},children:[{type:a,tag:c,props:{class:f},children:[{type:b,value:"[url "}]},{type:a,tag:c,props:{class:"ct-e03aef"},children:[{type:b,value:"\"https:\u002F\u002Fgithub.com\""}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"]"}]}]},{type:a,tag:c,props:{class:t},children:[{type:a,tag:c,props:{class:f},children:[{type:b,value:" insteadOf "}]},{type:a,tag:c,props:{class:"ct-6c803e"},children:[{type:b,value:"="}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:" git:"}]},{type:a,tag:c,props:{class:"ct-172751"},children:[{type:b,value:"\u002F\u002Fgithub.com"}]}]}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-172751{color:#8B949E}.ct-6c803e{color:#FF7B72}.ct-e03aef{color:#A5D6FF}.ct-b3f4ac{color:#C9D1D9}.light .ct-b3f4ac{color:#657B83}.light .ct-e03aef{color:#2AA198}.light .ct-6c803e{color:#859900}.light .ct-172751{color:#93A1A1}"}]}],toc:{title:j,searchDepth:u,depth:u,links:[]}},_type:"markdown",_id:"content:Git:Force git to use HTTPS.md",_source:"content",_file:"Git\u002FForce git to use HTTPS.md",_extension:"md"}},prerenderedAt:1703695530846}}("element","text","span","p","code","ct-b3f4ac",false,"Forces #git to use https even if remote url is #SSH. Useful for the networks with blocked #ssh protocol.","[url \"https:\u002F\u002Fgithub.com\"]\n insteadOf = git:\u002F\u002Fgithub.com\n","","Force Git To Use HTTPS","\u002Fgit\u002Fforce-git-to-use-https","root","Put this inside your ","code-inline","~\u002F.gitconfig",":","c","pre","line",2))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:k,_path:l},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-atqGqeweL2":{_path:l,_dir:"git",_draft:g,_partial:g,_locale:"en",_empty:g,title:k,description:h,excerpt:{type:m,children:[{type:a,tag:d,props:{},children:[{type:b,value:h}]},{type:a,tag:d,props:{},children:[{type:b,value:n},{type:a,tag:o,props:{},children:[{type:b,value:p}]},{type:b,value:q}]},{type:a,tag:e,props:{code:i,language:r},children:[{type:a,tag:s,props:{},children:[{type:a,tag:e,props:{__ignoreMap:j},children:[{type:b,value:i}]}]}]}]},body:{type:m,children:[{type:a,tag:d,props:{},children:[{type:b,value:h}]},{type:a,tag:d,props:{},children:[{type:b,value:n},{type:a,tag:o,props:{},children:[{type:b,value:p}]},{type:b,value:q}]},{type:a,tag:e,props:{code:i,language:r},children:[{type:a,tag:s,props:{},children:[{type:a,tag:e,props:{__ignoreMap:j},children:[{type:a,tag:c,props:{class:t},children:[{type:a,tag:c,props:{class:f},children:[{type:b,value:"[url "}]},{type:a,tag:c,props:{class:"ct-e92d62"},children:[{type:b,value:"\"https:\u002F\u002Fgithub.com\""}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"]"}]}]},{type:a,tag:c,props:{class:t},children:[{type:a,tag:c,props:{class:f},children:[{type:b,value:" insteadOf "}]},{type:a,tag:c,props:{class:"ct-8324af"},children:[{type:b,value:"="}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:" git:"}]},{type:a,tag:c,props:{class:"ct-ffb31d"},children:[{type:b,value:"\u002F\u002Fgithub.com"}]}]}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-ffb31d{color:#8B949E}.ct-8324af{color:#FF7B72}.ct-e92d62{color:#A5D6FF}.ct-94d865{color:#C9D1D9}.light .ct-94d865{color:#657B83}.light .ct-e92d62{color:#2AA198}.light .ct-8324af{color:#859900}.light .ct-ffb31d{color:#93A1A1}"}]}],toc:{title:j,searchDepth:u,depth:u,links:[]}},_type:"markdown",_id:"content:Git:Force git to use HTTPS.md",_source:"content",_file:"Git\u002FForce git to use HTTPS.md",_extension:"md"}},prerenderedAt:1703697992334}}("element","text","span","p","code","ct-94d865",false,"Forces #git to use https even if remote url is #SSH. Useful for the networks with blocked #ssh protocol.","[url \"https:\u002F\u002Fgithub.com\"]\n insteadOf = git:\u002F\u002Fgithub.com\n","","Force Git To Use HTTPS","\u002Fgit\u002Fforce-git-to-use-https","root","Put this inside your ","code-inline","~\u002F.gitconfig",":","c","pre","line",2))
\ No newline at end of file
diff --git a/docs/git/force-git-to-use-https/index.html b/docs/git/force-git-to-use-https/index.html
index 281e845..ec02219 100644
--- a/docs/git/force-git-to-use-https/index.html
+++ b/docs/git/force-git-to-use-https/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Force Git To Use HTTPS • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Forces #git to use https even if remote url is #SSH. Useful for the networks with blocked #ssh protocol."><meta name="head:count" content="3"><link rel="modulepreload" href="/git/force-git-to-use-https/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCodeInline.d9bcf614.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a aria-current="page" href="/git/force-git-to-use-https" class="router-link-active _active_192pu_81 _link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Force Git To Use HTTPS</h1><article><div><p><!--[-->Forces #git to use https even if remote url is #SSH. Useful for the networks with blocked #ssh protocol.<!--]--></p><p><!--[-->Put this inside your <code><!--[-->~/.gitconfig<!--]--></code>:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>c</span></button><!--[--><pre><code><span class="line"><span class="ct-b3f4ac">[url </span><span class="ct-e03aef">"https://github.com"</span><span class="ct-b3f4ac">]</span></span><span class="line"><span class="ct-b3f4ac"> insteadOf </span><span class="ct-6c803e">=</span><span class="ct-b3f4ac"> git:</span><span class="ct-172751">//github.com</span></span></code></pre><!--]--></div><style>.ct-172751{color:#8B949E}.ct-6c803e{color:#FF7B72}.ct-e03aef{color:#A5D6FF}.ct-b3f4ac{color:#C9D1D9}.light .ct-b3f4ac{color:#657B83}.light .ct-e03aef{color:#2AA198}.light .ct-6c803e{color:#859900}.light .ct-172751{color:#93A1A1}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/git/force-git-to-use-https/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695530846}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a aria-current="page" href="/git/force-git-to-use-https" class="router-link-active _active_192pu_81 _link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Force Git To Use HTTPS</h1><article><div><p><!--[-->Forces #git to use https even if remote url is #SSH. Useful for the networks with blocked #ssh protocol.<!--]--></p><p><!--[-->Put this inside your <code><!--[-->~/.gitconfig<!--]--></code>:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>c</span></button><!--[--><pre><code><span class="line"><span class="ct-94d865">[url </span><span class="ct-e92d62">"https://github.com"</span><span class="ct-94d865">]</span></span><span class="line"><span class="ct-94d865"> insteadOf </span><span class="ct-8324af">=</span><span class="ct-94d865"> git:</span><span class="ct-ffb31d">//github.com</span></span></code></pre><!--]--></div><style>.ct-ffb31d{color:#8B949E}.ct-8324af{color:#FF7B72}.ct-e92d62{color:#A5D6FF}.ct-94d865{color:#C9D1D9}.light .ct-94d865{color:#657B83}.light .ct-e92d62{color:#2AA198}.light .ct-8324af{color:#859900}.light .ct-ffb31d{color:#93A1A1}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/git/force-git-to-use-https/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697992334}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/git/git-aliases-and-useful-commands/_payload.js b/docs/git/git-aliases-and-useful-commands/_payload.js
index 87eead6..5abe532 100644
--- a/docs/git/git-aliases-and-useful-commands/_payload.js
+++ b/docs/git/git-aliases-and-useful-commands/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:t,_path:u}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-VrJO0uSyzq":{_path:u,_dir:"git",_draft:q,_partial:q,_locale:"en",_empty:q,title:t,description:"Shorthands for #git commands can be specified. Should be placed at ~\u002F.gitconfig.",excerpt:{type:v,children:[{type:a,tag:w,props:{},children:[{type:b,value:x},{type:a,tag:h,props:{},children:[{type:b,value:y}]},{type:b,value:z}]},{type:a,tag:n,props:{code:r,language:A},children:[{type:a,tag:B,props:{},children:[{type:a,tag:n,props:{__ignoreMap:s},children:[{type:b,value:r}]}]}]},{type:a,tag:C,props:{},children:[{type:a,tag:D,props:{},children:[{type:a,tag:i,props:{},children:[{type:a,tag:o,props:{align:e},children:[{type:a,tag:p,props:{},children:[{type:b,value:E}]}]},{type:a,tag:o,props:{align:e},children:[{type:a,tag:p,props:{},children:[{type:b,value:F}]}]}]}]},{type:a,tag:G,props:{},children:[{type:a,tag:i,props:{},children:[{type:a,tag:f,props:{align:e},children:[{type:a,tag:h,props:{},children:[{type:b,value:H}]}]},{type:a,tag:f,props:{align:e},children:[{type:b,value:I}]}]},{type:a,tag:i,props:{},children:[{type:a,tag:f,props:{align:e},children:[{type:a,tag:h,props:{},children:[{type:b,value:J}]}]},{type:a,tag:f,props:{align:e},children:[{type:b,value:K}]}]},{type:a,tag:i,props:{},children:[{type:a,tag:f,props:{align:e},children:[{type:a,tag:h,props:{},children:[{type:b,value:L}]}]},{type:a,tag:f,props:{align:e},children:[{type:b,value:M}]}]},{type:a,tag:i,props:{},children:[{type:a,tag:f,props:{align:e},children:[{type:a,tag:h,props:{},children:[{type:b,value:N}]}]},{type:a,tag:f,props:{align:e},children:[{type:b,value:O}]}]},{type:a,tag:i,props:{},children:[{type:a,tag:f,props:{align:e},children:[{type:a,tag:h,props:{},children:[{type:b,value:P}]}]},{type:a,tag:f,props:{align:e},children:[{type:b,value:Q}]}]},{type:a,tag:i,props:{},children:[{type:a,tag:f,props:{align:e},children:[{type:a,tag:h,props:{},children:[{type:b,value:R}]}]},{type:a,tag:f,props:{align:e},children:[{type:b,value:S}]}]},{type:a,tag:i,props:{},children:[{type:a,tag:f,props:{align:e},children:[{type:a,tag:h,props:{},children:[{type:b,value:T}]}]},{type:a,tag:f,props:{align:e},children:[{type:b,value:U}]}]}]}]}]},body:{type:v,children:[{type:a,tag:w,props:{},children:[{type:b,value:x},{type:a,tag:h,props:{},children:[{type:b,value:y}]},{type:b,value:z}]},{type:a,tag:n,props:{code:r,language:A},children:[{type:a,tag:B,props:{},children:[{type:a,tag:n,props:{__ignoreMap:s},children:[{type:a,tag:c,props:{class:k},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"[alias]"}]}]},{type:a,tag:c,props:{class:k},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" flush "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" git clean"}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"branches branch "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:V}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" grep "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"v master "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:V}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" xargs git branch "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"D"}]}]},{type:a,tag:c,props:{class:k},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" lol "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" log "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"oneline "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"graph"}]}]},{type:a,tag:c,props:{class:k},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" l "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" lol"}]}]},{type:a,tag:c,props:{class:k},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" c "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:W}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:X}]}]},{type:a,tag:c,props:{class:k},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" cv "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:W}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"no"}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"verify "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:X}]}]},{type:a,tag:c,props:{class:k},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" p "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" push"}]}]},{type:a,tag:c,props:{class:k},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" pf "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" p "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"force"}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"with"}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"lease"}]}]},{type:a,tag:c,props:{class:k},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" ignore"}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"now "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" update"}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"index "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"skip"}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"worktree"}]}]}]}]}]},{type:a,tag:C,props:{},children:[{type:a,tag:D,props:{},children:[{type:a,tag:i,props:{},children:[{type:a,tag:o,props:{align:e},children:[{type:a,tag:p,props:{},children:[{type:b,value:E}]}]},{type:a,tag:o,props:{align:e},children:[{type:a,tag:p,props:{},children:[{type:b,value:F}]}]}]}]},{type:a,tag:G,props:{},children:[{type:a,tag:i,props:{},children:[{type:a,tag:f,props:{align:e},children:[{type:a,tag:h,props:{},children:[{type:b,value:H}]}]},{type:a,tag:f,props:{align:e},children:[{type:b,value:I}]}]},{type:a,tag:i,props:{},children:[{type:a,tag:f,props:{align:e},children:[{type:a,tag:h,props:{},children:[{type:b,value:J}]}]},{type:a,tag:f,props:{align:e},children:[{type:b,value:K}]}]},{type:a,tag:i,props:{},children:[{type:a,tag:f,props:{align:e},children:[{type:a,tag:h,props:{},children:[{type:b,value:L}]}]},{type:a,tag:f,props:{align:e},children:[{type:b,value:M}]}]},{type:a,tag:i,props:{},children:[{type:a,tag:f,props:{align:e},children:[{type:a,tag:h,props:{},children:[{type:b,value:N}]}]},{type:a,tag:f,props:{align:e},children:[{type:b,value:O}]}]},{type:a,tag:i,props:{},children:[{type:a,tag:f,props:{align:e},children:[{type:a,tag:h,props:{},children:[{type:b,value:P}]}]},{type:a,tag:f,props:{align:e},children:[{type:b,value:Q}]}]},{type:a,tag:i,props:{},children:[{type:a,tag:f,props:{align:e},children:[{type:a,tag:h,props:{},children:[{type:b,value:R}]}]},{type:a,tag:f,props:{align:e},children:[{type:b,value:S}]}]},{type:a,tag:i,props:{},children:[{type:a,tag:f,props:{align:e},children:[{type:a,tag:h,props:{},children:[{type:b,value:T}]}]},{type:a,tag:f,props:{align:e},children:[{type:b,value:U}]}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-949382{color:#FF7B72}.ct-a2d84d{color:#C9D1D9}.light .ct-a2d84d{color:#657B83}.light .ct-949382{color:#859900}"}]}],toc:{title:s,searchDepth:Y,depth:Y,links:[]}},_type:"markdown",_id:"content:Git:Git aliases and useful commands.md",_source:"content",_file:"Git\u002FGit aliases and useful commands.md",_extension:"md"}},prerenderedAt:1703695530868}}("element","text","span","ct-a2d84d",null,"td","ct-949382","code-inline","tr","-","line","=","--","code","th","strong",false,"[alias]\n flush = git clean-branches branch | grep -v master | xargs git branch -D\n lol = log --oneline --graph\n l = lol\n c = commit -am\n cv = commit --no-verify -am\n p = push\n pf = p --force-with-lease\n ignore-now = update-index --skip-worktree\n","","Git Aliases And Useful Commands","\u002Fgit\u002Fgit-aliases-and-useful-commands","root","p","Shorthands for #git commands can be specified. Should be placed at ","~\u002F.gitconfig",".","c","pre","table","thead","command","description","tbody","git flush","drops all branches, except master","git lol","shows log","git c","commits with message","git cv","commits without hooks","git p","pushes","git pf","push with --force and additional check","git ignore-now","starts ignoring file from now on","|"," commit ","am",2))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:t,_path:u}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-VrJO0uSyzq":{_path:u,_dir:"git",_draft:q,_partial:q,_locale:"en",_empty:q,title:t,description:"Shorthands for #git commands can be specified. Should be placed at ~\u002F.gitconfig.",excerpt:{type:v,children:[{type:a,tag:w,props:{},children:[{type:b,value:x},{type:a,tag:h,props:{},children:[{type:b,value:y}]},{type:b,value:z}]},{type:a,tag:n,props:{code:r,language:A},children:[{type:a,tag:B,props:{},children:[{type:a,tag:n,props:{__ignoreMap:s},children:[{type:b,value:r}]}]}]},{type:a,tag:C,props:{},children:[{type:a,tag:D,props:{},children:[{type:a,tag:i,props:{},children:[{type:a,tag:o,props:{align:e},children:[{type:a,tag:p,props:{},children:[{type:b,value:E}]}]},{type:a,tag:o,props:{align:e},children:[{type:a,tag:p,props:{},children:[{type:b,value:F}]}]}]}]},{type:a,tag:G,props:{},children:[{type:a,tag:i,props:{},children:[{type:a,tag:f,props:{align:e},children:[{type:a,tag:h,props:{},children:[{type:b,value:H}]}]},{type:a,tag:f,props:{align:e},children:[{type:b,value:I}]}]},{type:a,tag:i,props:{},children:[{type:a,tag:f,props:{align:e},children:[{type:a,tag:h,props:{},children:[{type:b,value:J}]}]},{type:a,tag:f,props:{align:e},children:[{type:b,value:K}]}]},{type:a,tag:i,props:{},children:[{type:a,tag:f,props:{align:e},children:[{type:a,tag:h,props:{},children:[{type:b,value:L}]}]},{type:a,tag:f,props:{align:e},children:[{type:b,value:M}]}]},{type:a,tag:i,props:{},children:[{type:a,tag:f,props:{align:e},children:[{type:a,tag:h,props:{},children:[{type:b,value:N}]}]},{type:a,tag:f,props:{align:e},children:[{type:b,value:O}]}]},{type:a,tag:i,props:{},children:[{type:a,tag:f,props:{align:e},children:[{type:a,tag:h,props:{},children:[{type:b,value:P}]}]},{type:a,tag:f,props:{align:e},children:[{type:b,value:Q}]}]},{type:a,tag:i,props:{},children:[{type:a,tag:f,props:{align:e},children:[{type:a,tag:h,props:{},children:[{type:b,value:R}]}]},{type:a,tag:f,props:{align:e},children:[{type:b,value:S}]}]},{type:a,tag:i,props:{},children:[{type:a,tag:f,props:{align:e},children:[{type:a,tag:h,props:{},children:[{type:b,value:T}]}]},{type:a,tag:f,props:{align:e},children:[{type:b,value:U}]}]}]}]}]},body:{type:v,children:[{type:a,tag:w,props:{},children:[{type:b,value:x},{type:a,tag:h,props:{},children:[{type:b,value:y}]},{type:b,value:z}]},{type:a,tag:n,props:{code:r,language:A},children:[{type:a,tag:B,props:{},children:[{type:a,tag:n,props:{__ignoreMap:s},children:[{type:a,tag:c,props:{class:k},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"[alias]"}]}]},{type:a,tag:c,props:{class:k},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" flush "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" git clean"}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"branches branch "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:V}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" grep "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"v master "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:V}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" xargs git branch "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"D"}]}]},{type:a,tag:c,props:{class:k},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" lol "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" log "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"oneline "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"graph"}]}]},{type:a,tag:c,props:{class:k},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" l "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" lol"}]}]},{type:a,tag:c,props:{class:k},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" c "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:W}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:X}]}]},{type:a,tag:c,props:{class:k},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" cv "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:W}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"no"}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"verify "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:X}]}]},{type:a,tag:c,props:{class:k},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" p "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" push"}]}]},{type:a,tag:c,props:{class:k},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" pf "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" p "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"force"}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"with"}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"lease"}]}]},{type:a,tag:c,props:{class:k},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" ignore"}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"now "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:l}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" update"}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"index "}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:m}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"skip"}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:j}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"worktree"}]}]}]}]}]},{type:a,tag:C,props:{},children:[{type:a,tag:D,props:{},children:[{type:a,tag:i,props:{},children:[{type:a,tag:o,props:{align:e},children:[{type:a,tag:p,props:{},children:[{type:b,value:E}]}]},{type:a,tag:o,props:{align:e},children:[{type:a,tag:p,props:{},children:[{type:b,value:F}]}]}]}]},{type:a,tag:G,props:{},children:[{type:a,tag:i,props:{},children:[{type:a,tag:f,props:{align:e},children:[{type:a,tag:h,props:{},children:[{type:b,value:H}]}]},{type:a,tag:f,props:{align:e},children:[{type:b,value:I}]}]},{type:a,tag:i,props:{},children:[{type:a,tag:f,props:{align:e},children:[{type:a,tag:h,props:{},children:[{type:b,value:J}]}]},{type:a,tag:f,props:{align:e},children:[{type:b,value:K}]}]},{type:a,tag:i,props:{},children:[{type:a,tag:f,props:{align:e},children:[{type:a,tag:h,props:{},children:[{type:b,value:L}]}]},{type:a,tag:f,props:{align:e},children:[{type:b,value:M}]}]},{type:a,tag:i,props:{},children:[{type:a,tag:f,props:{align:e},children:[{type:a,tag:h,props:{},children:[{type:b,value:N}]}]},{type:a,tag:f,props:{align:e},children:[{type:b,value:O}]}]},{type:a,tag:i,props:{},children:[{type:a,tag:f,props:{align:e},children:[{type:a,tag:h,props:{},children:[{type:b,value:P}]}]},{type:a,tag:f,props:{align:e},children:[{type:b,value:Q}]}]},{type:a,tag:i,props:{},children:[{type:a,tag:f,props:{align:e},children:[{type:a,tag:h,props:{},children:[{type:b,value:R}]}]},{type:a,tag:f,props:{align:e},children:[{type:b,value:S}]}]},{type:a,tag:i,props:{},children:[{type:a,tag:f,props:{align:e},children:[{type:a,tag:h,props:{},children:[{type:b,value:T}]}]},{type:a,tag:f,props:{align:e},children:[{type:b,value:U}]}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-00cd05{color:#FF7B72}.ct-145c34{color:#C9D1D9}.light .ct-145c34{color:#657B83}.light .ct-00cd05{color:#859900}"}]}],toc:{title:s,searchDepth:Y,depth:Y,links:[]}},_type:"markdown",_id:"content:Git:Git aliases and useful commands.md",_source:"content",_file:"Git\u002FGit aliases and useful commands.md",_extension:"md"}},prerenderedAt:1703697992369}}("element","text","span","ct-145c34",null,"td","ct-00cd05","code-inline","tr","-","line","=","--","code","th","strong",false,"[alias]\n flush = git clean-branches branch | grep -v master | xargs git branch -D\n lol = log --oneline --graph\n l = lol\n c = commit -am\n cv = commit --no-verify -am\n p = push\n pf = p --force-with-lease\n ignore-now = update-index --skip-worktree\n","","Git Aliases And Useful Commands","\u002Fgit\u002Fgit-aliases-and-useful-commands","root","p","Shorthands for #git commands can be specified. Should be placed at ","~\u002F.gitconfig",".","c","pre","table","thead","command","description","tbody","git flush","drops all branches, except master","git lol","shows log","git c","commits with message","git cv","commits without hooks","git p","pushes","git pf","push with --force and additional check","git ignore-now","starts ignoring file from now on","|"," commit ","am",2))
\ No newline at end of file
diff --git a/docs/git/git-aliases-and-useful-commands/index.html b/docs/git/git-aliases-and-useful-commands/index.html
index 71cf166..b1f9e1e 100644
--- a/docs/git/git-aliases-and-useful-commands/index.html
+++ b/docs/git/git-aliases-and-useful-commands/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Git Aliases And Useful Commands • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Shorthands for #git commands can be specified. Should be placed at ~/.gitconfig."><meta name="head:count" content="3"><link rel="modulepreload" href="/git/git-aliases-and-useful-commands/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCodeInline.d9bcf614.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseTable.a6868268.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseThead.bf65d032.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseTr.3fc71a52.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseTh.acfd56d4.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseStrong.e968ffe9.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseTbody.b0aefa1b.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseTd.bca11fec.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a aria-current="page" href="/git/git-aliases-and-useful-commands" class="router-link-active _active_192pu_81 _link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Git Aliases And Useful Commands</h1><article><div><p><!--[-->Shorthands for #git commands can be specified. Should be placed at <code><!--[-->~/.gitconfig<!--]--></code>.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>c</span></button><!--[--><pre><code><span class="line"><span class="ct-a2d84d">[alias]</span></span><span class="line"><span class="ct-a2d84d"> flush </span><span class="ct-949382">=</span><span class="ct-a2d84d"> git clean</span><span class="ct-949382">-</span><span class="ct-a2d84d">branches branch </span><span class="ct-949382">|</span><span class="ct-a2d84d"> grep </span><span class="ct-949382">-</span><span class="ct-a2d84d">v master </span><span class="ct-949382">|</span><span class="ct-a2d84d"> xargs git branch </span><span class="ct-949382">-</span><span class="ct-a2d84d">D</span></span><span class="line"><span class="ct-a2d84d"> lol </span><span class="ct-949382">=</span><span class="ct-a2d84d"> log </span><span class="ct-949382">--</span><span class="ct-a2d84d">oneline </span><span class="ct-949382">--</span><span class="ct-a2d84d">graph</span></span><span class="line"><span class="ct-a2d84d"> l </span><span class="ct-949382">=</span><span class="ct-a2d84d"> lol</span></span><span class="line"><span class="ct-a2d84d"> c </span><span class="ct-949382">=</span><span class="ct-a2d84d"> commit </span><span class="ct-949382">-</span><span class="ct-a2d84d">am</span></span><span class="line"><span class="ct-a2d84d"> cv </span><span class="ct-949382">=</span><span class="ct-a2d84d"> commit </span><span class="ct-949382">--</span><span class="ct-a2d84d">no</span><span class="ct-949382">-</span><span class="ct-a2d84d">verify </span><span class="ct-949382">-</span><span class="ct-a2d84d">am</span></span><span class="line"><span class="ct-a2d84d"> p </span><span class="ct-949382">=</span><span class="ct-a2d84d"> push</span></span><span class="line"><span class="ct-a2d84d"> pf </span><span class="ct-949382">=</span><span class="ct-a2d84d"> p </span><span class="ct-949382">--</span><span class="ct-a2d84d">force</span><span class="ct-949382">-</span><span class="ct-a2d84d">with</span><span class="ct-949382">-</span><span class="ct-a2d84d">lease</span></span><span class="line"><span class="ct-a2d84d"> ignore</span><span class="ct-949382">-</span><span class="ct-a2d84d">now </span><span class="ct-949382">=</span><span class="ct-a2d84d"> update</span><span class="ct-949382">-</span><span class="ct-a2d84d">index </span><span class="ct-949382">--</span><span class="ct-a2d84d">skip</span><span class="ct-949382">-</span><span class="ct-a2d84d">worktree</span></span></code></pre><!--]--></div><table><!--[--><thead><!--[--><tr><!--[--><th><!--[--><strong><!--[-->command<!--]--></strong><!--]--></th><th><!--[--><strong><!--[-->description<!--]--></strong><!--]--></th><!--]--></tr><!--]--></thead><tbody><!--[--><tr><!--[--><td><!--[--><code><!--[-->git flush<!--]--></code><!--]--></td><td><!--[-->drops all branches, except master<!--]--></td><!--]--></tr><tr><!--[--><td><!--[--><code><!--[-->git lol<!--]--></code><!--]--></td><td><!--[-->shows log<!--]--></td><!--]--></tr><tr><!--[--><td><!--[--><code><!--[-->git c<!--]--></code><!--]--></td><td><!--[-->commits with message<!--]--></td><!--]--></tr><tr><!--[--><td><!--[--><code><!--[-->git cv<!--]--></code><!--]--></td><td><!--[-->commits without hooks<!--]--></td><!--]--></tr><tr><!--[--><td><!--[--><code><!--[-->git p<!--]--></code><!--]--></td><td><!--[-->pushes<!--]--></td><!--]--></tr><tr><!--[--><td><!--[--><code><!--[-->git pf<!--]--></code><!--]--></td><td><!--[-->push with --force and additional check<!--]--></td><!--]--></tr><tr><!--[--><td><!--[--><code><!--[-->git ignore-now<!--]--></code><!--]--></td><td><!--[-->starts ignoring file from now on<!--]--></td><!--]--></tr><!--]--></tbody><!--]--></table><style>.ct-949382{color:#FF7B72}.ct-a2d84d{color:#C9D1D9}.light .ct-a2d84d{color:#657B83}.light .ct-949382{color:#859900}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/git/git-aliases-and-useful-commands/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695530868}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script><script type="module" src="/nuxt/ProseTable.a6868268.js" crossorigin></script><script type="module" src="/nuxt/ProseThead.bf65d032.js" crossorigin></script><script type="module" src="/nuxt/ProseTr.3fc71a52.js" crossorigin></script><script type="module" src="/nuxt/ProseTh.acfd56d4.js" crossorigin></script><script type="module" src="/nuxt/ProseStrong.e968ffe9.js" crossorigin></script><script type="module" src="/nuxt/ProseTbody.b0aefa1b.js" crossorigin></script><script type="module" src="/nuxt/ProseTd.bca11fec.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a aria-current="page" href="/git/git-aliases-and-useful-commands" class="router-link-active _active_192pu_81 _link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Git Aliases And Useful Commands</h1><article><div><p><!--[-->Shorthands for #git commands can be specified. Should be placed at <code><!--[-->~/.gitconfig<!--]--></code>.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>c</span></button><!--[--><pre><code><span class="line"><span class="ct-145c34">[alias]</span></span><span class="line"><span class="ct-145c34"> flush </span><span class="ct-00cd05">=</span><span class="ct-145c34"> git clean</span><span class="ct-00cd05">-</span><span class="ct-145c34">branches branch </span><span class="ct-00cd05">|</span><span class="ct-145c34"> grep </span><span class="ct-00cd05">-</span><span class="ct-145c34">v master </span><span class="ct-00cd05">|</span><span class="ct-145c34"> xargs git branch </span><span class="ct-00cd05">-</span><span class="ct-145c34">D</span></span><span class="line"><span class="ct-145c34"> lol </span><span class="ct-00cd05">=</span><span class="ct-145c34"> log </span><span class="ct-00cd05">--</span><span class="ct-145c34">oneline </span><span class="ct-00cd05">--</span><span class="ct-145c34">graph</span></span><span class="line"><span class="ct-145c34"> l </span><span class="ct-00cd05">=</span><span class="ct-145c34"> lol</span></span><span class="line"><span class="ct-145c34"> c </span><span class="ct-00cd05">=</span><span class="ct-145c34"> commit </span><span class="ct-00cd05">-</span><span class="ct-145c34">am</span></span><span class="line"><span class="ct-145c34"> cv </span><span class="ct-00cd05">=</span><span class="ct-145c34"> commit </span><span class="ct-00cd05">--</span><span class="ct-145c34">no</span><span class="ct-00cd05">-</span><span class="ct-145c34">verify </span><span class="ct-00cd05">-</span><span class="ct-145c34">am</span></span><span class="line"><span class="ct-145c34"> p </span><span class="ct-00cd05">=</span><span class="ct-145c34"> push</span></span><span class="line"><span class="ct-145c34"> pf </span><span class="ct-00cd05">=</span><span class="ct-145c34"> p </span><span class="ct-00cd05">--</span><span class="ct-145c34">force</span><span class="ct-00cd05">-</span><span class="ct-145c34">with</span><span class="ct-00cd05">-</span><span class="ct-145c34">lease</span></span><span class="line"><span class="ct-145c34"> ignore</span><span class="ct-00cd05">-</span><span class="ct-145c34">now </span><span class="ct-00cd05">=</span><span class="ct-145c34"> update</span><span class="ct-00cd05">-</span><span class="ct-145c34">index </span><span class="ct-00cd05">--</span><span class="ct-145c34">skip</span><span class="ct-00cd05">-</span><span class="ct-145c34">worktree</span></span></code></pre><!--]--></div><table><!--[--><thead><!--[--><tr><!--[--><th><!--[--><strong><!--[-->command<!--]--></strong><!--]--></th><th><!--[--><strong><!--[-->description<!--]--></strong><!--]--></th><!--]--></tr><!--]--></thead><tbody><!--[--><tr><!--[--><td><!--[--><code><!--[-->git flush<!--]--></code><!--]--></td><td><!--[-->drops all branches, except master<!--]--></td><!--]--></tr><tr><!--[--><td><!--[--><code><!--[-->git lol<!--]--></code><!--]--></td><td><!--[-->shows log<!--]--></td><!--]--></tr><tr><!--[--><td><!--[--><code><!--[-->git c<!--]--></code><!--]--></td><td><!--[-->commits with message<!--]--></td><!--]--></tr><tr><!--[--><td><!--[--><code><!--[-->git cv<!--]--></code><!--]--></td><td><!--[-->commits without hooks<!--]--></td><!--]--></tr><tr><!--[--><td><!--[--><code><!--[-->git p<!--]--></code><!--]--></td><td><!--[-->pushes<!--]--></td><!--]--></tr><tr><!--[--><td><!--[--><code><!--[-->git pf<!--]--></code><!--]--></td><td><!--[-->push with --force and additional check<!--]--></td><!--]--></tr><tr><!--[--><td><!--[--><code><!--[-->git ignore-now<!--]--></code><!--]--></td><td><!--[-->starts ignoring file from now on<!--]--></td><!--]--></tr><!--]--></tbody><!--]--></table><style>.ct-00cd05{color:#FF7B72}.ct-145c34{color:#C9D1D9}.light .ct-145c34{color:#657B83}.light .ct-00cd05{color:#859900}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/git/git-aliases-and-useful-commands/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697992369}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script><script type="module" src="/nuxt/ProseTable.a6868268.js" crossorigin></script><script type="module" src="/nuxt/ProseThead.bf65d032.js" crossorigin></script><script type="module" src="/nuxt/ProseTr.3fc71a52.js" crossorigin></script><script type="module" src="/nuxt/ProseTh.acfd56d4.js" crossorigin></script><script type="module" src="/nuxt/ProseStrong.e968ffe9.js" crossorigin></script><script type="module" src="/nuxt/ProseTbody.b0aefa1b.js" crossorigin></script><script type="module" src="/nuxt/ProseTd.bca11fec.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/golang/i18n-in-golang/_payload.js b/docs/golang/i18n-in-golang/_payload.js
index ab7fc40..5db4b02 100644
--- a/docs/golang/i18n-in-golang/_payload.js
+++ b/docs/golang/i18n-in-golang/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av,aw,ax,ay,az,aA,aB,aC,aD,aE,aF,aG,aH,aI,aJ,aK,aL,aM,aN,aO,aP,aQ,aR,aS,aT,aU,aV,aW,aX,aY,aZ,a_,a$,ba,bb,bc,bd,be,bf,bg,bh,bi,bj,bk,bl,bm,bn,bo,bp,bq){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:V,_path:W}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-jPHqVKRuVS":{_path:W,_dir:"golang",_draft:I,_partial:I,_locale:"en",_empty:I,title:V,description:"There are no good examples of golang.org\u002Fx\u002Ftext uses and description of how pluralization made. So, this is it.",excerpt:{type:X,children:[{type:a,tag:i,props:{},children:[{type:b,value:Y},{type:a,tag:m,props:{href:Z,rel:[n]},children:[{type:b,value:_}]},{type:b,value:$}]},{type:a,tag:s,props:{id:aa},children:[{type:b,value:ab}]},{type:a,tag:ac,props:{},children:[{type:a,tag:i,props:{},children:[{type:b,value:ad},{type:a,tag:m,props:{href:ae,rel:[n]},children:[{type:b,value:af}]},{type:b,value:ag}]}]},{type:a,tag:i,props:{},children:[{type:b,value:ah}]},{type:a,tag:h,props:{code:J,language:w},children:[{type:a,tag:o,props:{},children:[{type:a,tag:h,props:{__ignoreMap:l},children:[{type:b,value:J}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:ai},{type:a,tag:f,props:{},children:[{type:b,value:K}]},{type:b,value:aj}]},{type:a,tag:h,props:{code:L,language:x},children:[{type:a,tag:o,props:{},children:[{type:a,tag:h,props:{__ignoreMap:l},children:[{type:b,value:L}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:ak},{type:a,tag:f,props:{},children:[{type:b,value:al}]},{type:b,value:am},{type:a,tag:f,props:{},children:[{type:b,value:an}]},{type:b,value:ao},{type:a,tag:f,props:{},children:[{type:b,value:ap}]},{type:b,value:y}]},{type:a,tag:s,props:{id:aq},children:[{type:b,value:ar}]},{type:a,tag:i,props:{},children:[{type:b,value:as},{type:a,tag:f,props:{},children:[{type:b,value:M}]},{type:b,value:at},{type:a,tag:f,props:{},children:[{type:b,value:au}]},{type:b,value:av},{type:a,tag:f,props:{},children:[{type:b,value:aw}]},{type:b,value:ax},{type:a,tag:f,props:{},children:[{type:b,value:ay}]},{type:b,value:az},{type:a,tag:c,props:{className:[aA]},children:[{type:b,value:aB}]},{type:b,value:aC},{type:a,tag:f,props:{},children:[{type:b,value:aD}]},{type:b,value:y}]},{type:a,tag:i,props:{},children:[{type:b,value:aE},{type:a,tag:m,props:{href:z,rel:[n]},children:[{type:b,value:aF}]},{type:b,value:aG}]},{type:a,tag:A,props:{},children:[{type:a,tag:t,props:{},children:[{type:a,tag:f,props:{},children:[{type:b,value:aH}]},{type:b,value:aI},{type:a,tag:f,props:{},children:[{type:b,value:aJ}]},{type:b,value:aK},{type:a,tag:f,props:{},children:[{type:b,value:aL}]},{type:b,value:aM}]},{type:a,tag:t,props:{},children:[{type:a,tag:f,props:{},children:[{type:b,value:aN}]},{type:b,value:p},{type:a,tag:f,props:{},children:[{type:b,value:aO}]},{type:b,value:p},{type:a,tag:f,props:{},children:[{type:b,value:aP}]},{type:b,value:p},{type:a,tag:f,props:{},children:[{type:b,value:aQ}]},{type:b,value:p},{type:a,tag:f,props:{},children:[{type:b,value:aR}]},{type:b,value:p},{type:a,tag:f,props:{},children:[{type:b,value:aS}]},{type:b,value:aT}]}]},{type:a,tag:h,props:{code:N,language:aU},children:[{type:a,tag:o,props:{},children:[{type:a,tag:h,props:{__ignoreMap:l},children:[{type:b,value:N}]}]}]},{type:a,tag:s,props:{id:aV},children:[{type:b,value:aW}]},{type:a,tag:i,props:{},children:[{type:b,value:aX},{type:a,tag:f,props:{},children:[{type:b,value:aY}]},{type:b,value:aZ}]},{type:a,tag:h,props:{code:O,language:w},children:[{type:a,tag:o,props:{},children:[{type:a,tag:h,props:{__ignoreMap:l},children:[{type:b,value:O}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:a_}]},{type:a,tag:h,props:{code:P,language:x},children:[{type:a,tag:o,props:{},children:[{type:a,tag:h,props:{__ignoreMap:l},children:[{type:b,value:P}]}]}]},{type:a,tag:s,props:{id:a$},children:[{type:b,value:ba}]},{type:a,tag:A,props:{},children:[{type:a,tag:t,props:{},children:[{type:a,tag:m,props:{href:z,rel:[n]},children:[{type:b,value:bb}]}]},{type:a,tag:t,props:{},children:[{type:a,tag:m,props:{href:bc,rel:[n]},children:[{type:b,value:bd}]}]}]}]},body:{type:X,children:[{type:a,tag:i,props:{},children:[{type:b,value:Y},{type:a,tag:m,props:{href:Z,rel:[n]},children:[{type:b,value:_}]},{type:b,value:$}]},{type:a,tag:s,props:{id:aa},children:[{type:b,value:ab}]},{type:a,tag:ac,props:{},children:[{type:a,tag:i,props:{},children:[{type:b,value:ad},{type:a,tag:m,props:{href:ae,rel:[n]},children:[{type:b,value:af}]},{type:b,value:ag}]}]},{type:a,tag:i,props:{},children:[{type:b,value:ah}]},{type:a,tag:h,props:{code:J,language:w},children:[{type:a,tag:o,props:{},children:[{type:a,tag:h,props:{__ignoreMap:l},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:B},children:[{type:b,value:"import"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" ("}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:be},children:[{type:b,value:Q}]},{type:a,tag:c,props:{class:C},children:[{type:b,value:v}]},{type:a,tag:c,props:{class:bf},children:[{type:b,value:"golang.org\u002Fx\u002Ftext\u002Flanguage"}]},{type:a,tag:c,props:{class:C},children:[{type:b,value:v}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:be},children:[{type:b,value:Q}]},{type:a,tag:c,props:{class:C},children:[{type:b,value:v}]},{type:a,tag:c,props:{class:bf},children:[{type:b,value:"golang.org\u002Fx\u002Ftext\u002Fmessage"}]},{type:a,tag:c,props:{class:C},children:[{type:b,value:v}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:bg}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:R},children:[{type:b,value:"lang"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:D}]},{type:a,tag:c,props:{class:B},children:[{type:b,value:S}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" language."}]},{type:a,tag:c,props:{class:T},children:[{type:b,value:"MustParse"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:bh}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:bi}]},{type:a,tag:c,props:{class:"ct-0a943a"},children:[{type:b,value:K}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:bi}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:bg}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:R},children:[{type:b,value:"printer"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:D}]},{type:a,tag:c,props:{class:B},children:[{type:b,value:S}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" message."}]},{type:a,tag:c,props:{class:T},children:[{type:b,value:"NewPrinter"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"(lang)"}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:R},children:[{type:b,value:"count"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:D}]},{type:a,tag:c,props:{class:B},children:[{type:b,value:S}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:D}]},{type:a,tag:c,props:{class:bj},children:[{type:b,value:bk}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"printer."}]},{type:a,tag:c,props:{class:T},children:[{type:b,value:"Sprintf"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:bh}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:v}]},{type:a,tag:c,props:{class:"ct-b76416"},children:[{type:b,value:"%d"}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:" butterflies\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:", count)"}]}]}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:ai},{type:a,tag:f,props:{},children:[{type:b,value:K}]},{type:b,value:aj}]},{type:a,tag:h,props:{code:L,language:x},children:[{type:a,tag:o,props:{},children:[{type:a,tag:h,props:{__ignoreMap:l},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"gotext -srclang=en-GB update -lang=ru-RU \\"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" -out=translations.go github.com\u002Fpath\u002Fto-output-folder"}]}]}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:ak},{type:a,tag:f,props:{},children:[{type:b,value:al}]},{type:b,value:am},{type:a,tag:f,props:{},children:[{type:b,value:an}]},{type:b,value:ao},{type:a,tag:f,props:{},children:[{type:b,value:ap}]},{type:b,value:y}]},{type:a,tag:s,props:{id:aq},children:[{type:b,value:ar}]},{type:a,tag:i,props:{},children:[{type:b,value:as},{type:a,tag:f,props:{},children:[{type:b,value:M}]},{type:b,value:at},{type:a,tag:f,props:{},children:[{type:b,value:au}]},{type:b,value:av},{type:a,tag:f,props:{},children:[{type:b,value:aw}]},{type:b,value:ax},{type:a,tag:f,props:{},children:[{type:b,value:ay}]},{type:b,value:az},{type:a,tag:c,props:{className:[aA]},children:[{type:b,value:aB}]},{type:b,value:aC},{type:a,tag:f,props:{},children:[{type:b,value:aD}]},{type:b,value:y}]},{type:a,tag:i,props:{},children:[{type:b,value:aE},{type:a,tag:m,props:{href:z,rel:[n]},children:[{type:b,value:aF}]},{type:b,value:aG}]},{type:a,tag:A,props:{},children:[{type:a,tag:t,props:{},children:[{type:a,tag:f,props:{},children:[{type:b,value:aH}]},{type:b,value:aI},{type:a,tag:f,props:{},children:[{type:b,value:aJ}]},{type:b,value:aK},{type:a,tag:f,props:{},children:[{type:b,value:aL}]},{type:b,value:aM}]},{type:a,tag:t,props:{},children:[{type:a,tag:f,props:{},children:[{type:b,value:aN}]},{type:b,value:p},{type:a,tag:f,props:{},children:[{type:b,value:aO}]},{type:b,value:p},{type:a,tag:f,props:{},children:[{type:b,value:aP}]},{type:b,value:p},{type:a,tag:f,props:{},children:[{type:b,value:aQ}]},{type:b,value:p},{type:a,tag:f,props:{},children:[{type:b,value:aR}]},{type:b,value:p},{type:a,tag:f,props:{},children:[{type:b,value:aS}]},{type:b,value:aT}]}]},{type:a,tag:h,props:{code:N,language:aU},children:[{type:a,tag:o,props:{},children:[{type:a,tag:h,props:{__ignoreMap:l},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"{"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:E}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:bl}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:k}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:bm}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:q}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:E}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\"message\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:k}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:bm}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:q}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:E}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:M}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:u}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:Q}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\"select\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:u}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\"feature\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:k}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:"\"plural\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:q}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\"arg\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:k}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:bn}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:q}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\"cases\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:u}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:F}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\"one\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:u}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:G}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:H}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:k}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:"\"{Count} бабочка\""}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:U}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:F}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\"few\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:u}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:G}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:H}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:k}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:"\"{Count} бабочки\""}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:U}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:F}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\"many\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:u}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:G}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:H}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:k}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:"\"{Count} бабочек\""}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:U}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:F}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\"other\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:u}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:G}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:H}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:k}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:"\"{Count} бабочуль\""}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" }"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" }"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:bo}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" },"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:E}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\"placeholders\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:": ["}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" {"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:bl}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:k}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:bn}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:q}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\"string\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:k}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:"\"%[1]d\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:q}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\"type\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:k}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:bp}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:q}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\"underlyingType\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:k}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:bp}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:q}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\"argNum\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:k}]},{type:a,tag:c,props:{class:bj},children:[{type:b,value:bk}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:q}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\"expr\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:k}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:"\"count\""}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:bo}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" ]"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"},"}]}]}]}]}]},{type:a,tag:s,props:{id:aV},children:[{type:b,value:aW}]},{type:a,tag:i,props:{},children:[{type:b,value:aX},{type:a,tag:f,props:{},children:[{type:b,value:aY}]},{type:b,value:aZ}]},{type:a,tag:h,props:{code:O,language:w},children:[{type:a,tag:o,props:{},children:[{type:a,tag:h,props:{__ignoreMap:l},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:"ct-cb8ea8"},children:[{type:b,value:"\u002F\u002Fgo:generate gotext -srclang=en-GB update -out=translations.go -lang=ru-RU github.com\u002Fmuerwre\u002Fvault-golang\u002Finternal\u002Fapi"}]}]}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:a_}]},{type:a,tag:h,props:{code:P,language:x},children:[{type:a,tag:o,props:{},children:[{type:a,tag:h,props:{__ignoreMap:l},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"go generate .\u002F..."}]}]}]}]}]},{type:a,tag:s,props:{id:a$},children:[{type:b,value:ba}]},{type:a,tag:A,props:{},children:[{type:a,tag:t,props:{},children:[{type:a,tag:m,props:{href:z,rel:[n]},children:[{type:b,value:bb}]}]},{type:a,tag:t,props:{},children:[{type:a,tag:m,props:{href:bc,rel:[n]},children:[{type:b,value:bd}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-cb8ea8{color:#8B949E}.ct-525738{color:#79C0FF}.ct-b76416{color:#79C0FF}.ct-f726b6{color:#79C0FF}.ct-0a943a{color:#FFA198}.ct-84260f{color:#A5D6FF}.ct-cdbf83{color:#79C0FF}.ct-d136e8{color:#C9D1D9}.ct-e35103{color:#FFA657}.ct-00c2ca{color:#A5D6FF}.ct-04fd5c{color:#C9D1D9}.ct-7594fe{color:#C9D1D9}.ct-1f4481{color:#FF7B72}.light .ct-1f4481{color:#859900}.light .ct-7594fe{color:#657B83}.light .ct-04fd5c{color:#657B83}.light .ct-00c2ca{color:#2AA198}.light .ct-e35103{color:#2AA198}.light .ct-d136e8{color:#268BD2}.light .ct-cdbf83{color:#268BD2}.light .ct-84260f{color:#2AA198}.light .ct-0a943a{color:#CD3131}.light .ct-f726b6{color:#D33682}.light .ct-b76416{color:#CB4B16}.light .ct-525738{color:#859900}.light .ct-cb8ea8{color:#93A1A1}"}]}],toc:{title:l,searchDepth:bq,depth:bq,links:[]}},_type:"markdown",_id:"content:Golang:i18n in golang.md",_source:"content",_file:"Golang\u002Fi18n in golang.md",_extension:"md"}},prerenderedAt:1703695530980}}("element","text","span","ct-7594fe","line","code-inline","ct-525738","code","p","ct-84260f",": ","","a","nofollow","pre"," | ",","," ","h4","li",": {","\"","go","shell",".","https:\u002F\u002Fgithub.com\u002Fgolang\u002Ftext\u002Fblob\u002Fmaster\u002Ffeature\u002Fplural\u002Fgen_common.go#L19","ul","ct-1f4481","ct-00c2ca"," "," "," "," ","\"msg\"",false,"import (\n \"golang.org\u002Fx\u002Ftext\u002Flanguage\"\n \"golang.org\u002Fx\u002Ftext\u002Fmessage\"\n)\n\nlang := language.MustParse('ru-RU')\nprinter := message.NewPrinter(lang)\n\ncount := 1\nprinter.Sprintf(\"%d butterflies\", count)\n","ru-RU","gotext -srclang=en-GB update -lang=ru-RU \\\n -out=translations.go github.com\u002Fpath\u002Fto-output-folder\n","\"translation\"","{\n \"id\": \"{Count} butterflies\",\n \"message\": \"{Count} butterflies\",\n \"translation\": {\n \"select\": {\n \"feature\": \"plural\",\n \"arg\": \"Count\",\n \"cases\": {\n \"one\": {\n \"msg\": \"{Count} бабочка\"\n },\n \"few\": {\n \"msg\": \"{Count} бабочки\"\n },\n \"many\": {\n \"msg\": \"{Count} бабочек\"\n },\n \"other\": {\n \"msg\": \"{Count} бабочуль\"\n }\n }\n }\n },\n \"placeholders\": [\n {\n \"id\": \"Count\",\n \"string\": \"%[1]d\",\n \"type\": \"int\",\n \"underlyingType\": \"int\",\n \"argNum\": 1,\n \"expr\": \"count\"\n }\n ]\n},\n","\u002F\u002Fgo:generate gotext -srclang=en-GB update -out=translations.go -lang=ru-RU github.com\u002Fmuerwre\u002Fvault-golang\u002Finternal\u002Fapi\n","go generate .\u002F...\n"," ","ct-d136e8",":=","ct-cdbf83"," },","I18n In Golang","\u002Fgolang\u002Fi18n-in-golang","root","There are no good examples of ","https:\u002F\u002Fgolang.org\u002Fx\u002Ftext","golang.org\u002Fx\u002Ftext"," uses and description of how pluralization made. So, this is it.","generating-translations","Generating translations","blockquote","You should specify valid ","https:\u002F\u002Fwww.iso.org\u002Fobp\u002Fui\u002F#iso:code:3166","ISO-3166 locale code"," to get plurals working!","Write your code:","Then run generator for your locale (mine is ","):","This will generate ","out.gotext.json"," in ","\u002Fpath\u002Fto-output-folder\u002Fru-RU"," of your project. Copy it to ","messages.out.json","translating-and-adding-plural-forms","Translating and adding plural forms","Change "," value in generated ","messages.gotext.json"," to ","string"," or ","object"," of the form shown below if you want pluralize strings, ","highlight","then run gotext command again",", it will generate ",".go files with translations","According to ","source files of gen_common",", there's a couple of forms:","=N",", ","!=N",", ","%N"," for exact matches","zero","one","two","few","many","other"," - they're different for each language, so,","json","using-go-generate","Using go-generate","Write this at some ",".go"," file:","Then run go generation:","useful-links","Useful links","All available forms in this .go file","https:\u002F\u002Fcommunity.crowdin.com\u002Ft\u002Fplurals-in-gotext-json-files\u002F600","Answer, that solved it for me","ct-04fd5c","ct-e35103",")","(","'","ct-f726b6","1","\"id\"","\"{Count} butterflies\"","\"Count\""," }","\"int\"",2))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av,aw,ax,ay,az,aA,aB,aC,aD,aE,aF,aG,aH,aI,aJ,aK,aL,aM,aN,aO,aP,aQ,aR,aS,aT,aU,aV,aW,aX,aY,aZ,a_,a$,ba,bb,bc,bd,be,bf,bg,bh,bi,bj,bk,bl,bm,bn,bo,bp,bq){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:V,_path:W}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-jPHqVKRuVS":{_path:W,_dir:"golang",_draft:I,_partial:I,_locale:"en",_empty:I,title:V,description:"There are no good examples of golang.org\u002Fx\u002Ftext uses and description of how pluralization made. So, this is it.",excerpt:{type:X,children:[{type:a,tag:i,props:{},children:[{type:b,value:Y},{type:a,tag:m,props:{href:Z,rel:[n]},children:[{type:b,value:_}]},{type:b,value:$}]},{type:a,tag:s,props:{id:aa},children:[{type:b,value:ab}]},{type:a,tag:ac,props:{},children:[{type:a,tag:i,props:{},children:[{type:b,value:ad},{type:a,tag:m,props:{href:ae,rel:[n]},children:[{type:b,value:af}]},{type:b,value:ag}]}]},{type:a,tag:i,props:{},children:[{type:b,value:ah}]},{type:a,tag:h,props:{code:J,language:w},children:[{type:a,tag:o,props:{},children:[{type:a,tag:h,props:{__ignoreMap:l},children:[{type:b,value:J}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:ai},{type:a,tag:f,props:{},children:[{type:b,value:K}]},{type:b,value:aj}]},{type:a,tag:h,props:{code:L,language:x},children:[{type:a,tag:o,props:{},children:[{type:a,tag:h,props:{__ignoreMap:l},children:[{type:b,value:L}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:ak},{type:a,tag:f,props:{},children:[{type:b,value:al}]},{type:b,value:am},{type:a,tag:f,props:{},children:[{type:b,value:an}]},{type:b,value:ao},{type:a,tag:f,props:{},children:[{type:b,value:ap}]},{type:b,value:y}]},{type:a,tag:s,props:{id:aq},children:[{type:b,value:ar}]},{type:a,tag:i,props:{},children:[{type:b,value:as},{type:a,tag:f,props:{},children:[{type:b,value:M}]},{type:b,value:at},{type:a,tag:f,props:{},children:[{type:b,value:au}]},{type:b,value:av},{type:a,tag:f,props:{},children:[{type:b,value:aw}]},{type:b,value:ax},{type:a,tag:f,props:{},children:[{type:b,value:ay}]},{type:b,value:az},{type:a,tag:c,props:{className:[aA]},children:[{type:b,value:aB}]},{type:b,value:aC},{type:a,tag:f,props:{},children:[{type:b,value:aD}]},{type:b,value:y}]},{type:a,tag:i,props:{},children:[{type:b,value:aE},{type:a,tag:m,props:{href:z,rel:[n]},children:[{type:b,value:aF}]},{type:b,value:aG}]},{type:a,tag:A,props:{},children:[{type:a,tag:t,props:{},children:[{type:a,tag:f,props:{},children:[{type:b,value:aH}]},{type:b,value:aI},{type:a,tag:f,props:{},children:[{type:b,value:aJ}]},{type:b,value:aK},{type:a,tag:f,props:{},children:[{type:b,value:aL}]},{type:b,value:aM}]},{type:a,tag:t,props:{},children:[{type:a,tag:f,props:{},children:[{type:b,value:aN}]},{type:b,value:p},{type:a,tag:f,props:{},children:[{type:b,value:aO}]},{type:b,value:p},{type:a,tag:f,props:{},children:[{type:b,value:aP}]},{type:b,value:p},{type:a,tag:f,props:{},children:[{type:b,value:aQ}]},{type:b,value:p},{type:a,tag:f,props:{},children:[{type:b,value:aR}]},{type:b,value:p},{type:a,tag:f,props:{},children:[{type:b,value:aS}]},{type:b,value:aT}]}]},{type:a,tag:h,props:{code:N,language:aU},children:[{type:a,tag:o,props:{},children:[{type:a,tag:h,props:{__ignoreMap:l},children:[{type:b,value:N}]}]}]},{type:a,tag:s,props:{id:aV},children:[{type:b,value:aW}]},{type:a,tag:i,props:{},children:[{type:b,value:aX},{type:a,tag:f,props:{},children:[{type:b,value:aY}]},{type:b,value:aZ}]},{type:a,tag:h,props:{code:O,language:w},children:[{type:a,tag:o,props:{},children:[{type:a,tag:h,props:{__ignoreMap:l},children:[{type:b,value:O}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:a_}]},{type:a,tag:h,props:{code:P,language:x},children:[{type:a,tag:o,props:{},children:[{type:a,tag:h,props:{__ignoreMap:l},children:[{type:b,value:P}]}]}]},{type:a,tag:s,props:{id:a$},children:[{type:b,value:ba}]},{type:a,tag:A,props:{},children:[{type:a,tag:t,props:{},children:[{type:a,tag:m,props:{href:z,rel:[n]},children:[{type:b,value:bb}]}]},{type:a,tag:t,props:{},children:[{type:a,tag:m,props:{href:bc,rel:[n]},children:[{type:b,value:bd}]}]}]}]},body:{type:X,children:[{type:a,tag:i,props:{},children:[{type:b,value:Y},{type:a,tag:m,props:{href:Z,rel:[n]},children:[{type:b,value:_}]},{type:b,value:$}]},{type:a,tag:s,props:{id:aa},children:[{type:b,value:ab}]},{type:a,tag:ac,props:{},children:[{type:a,tag:i,props:{},children:[{type:b,value:ad},{type:a,tag:m,props:{href:ae,rel:[n]},children:[{type:b,value:af}]},{type:b,value:ag}]}]},{type:a,tag:i,props:{},children:[{type:b,value:ah}]},{type:a,tag:h,props:{code:J,language:w},children:[{type:a,tag:o,props:{},children:[{type:a,tag:h,props:{__ignoreMap:l},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:B},children:[{type:b,value:"import"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" ("}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:be},children:[{type:b,value:Q}]},{type:a,tag:c,props:{class:C},children:[{type:b,value:v}]},{type:a,tag:c,props:{class:bf},children:[{type:b,value:"golang.org\u002Fx\u002Ftext\u002Flanguage"}]},{type:a,tag:c,props:{class:C},children:[{type:b,value:v}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:be},children:[{type:b,value:Q}]},{type:a,tag:c,props:{class:C},children:[{type:b,value:v}]},{type:a,tag:c,props:{class:bf},children:[{type:b,value:"golang.org\u002Fx\u002Ftext\u002Fmessage"}]},{type:a,tag:c,props:{class:C},children:[{type:b,value:v}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:bg}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:R},children:[{type:b,value:"lang"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:D}]},{type:a,tag:c,props:{class:B},children:[{type:b,value:S}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" language."}]},{type:a,tag:c,props:{class:T},children:[{type:b,value:"MustParse"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:bh}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:bi}]},{type:a,tag:c,props:{class:"ct-2891df"},children:[{type:b,value:K}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:bi}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:bg}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:R},children:[{type:b,value:"printer"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:D}]},{type:a,tag:c,props:{class:B},children:[{type:b,value:S}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" message."}]},{type:a,tag:c,props:{class:T},children:[{type:b,value:"NewPrinter"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"(lang)"}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:R},children:[{type:b,value:"count"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:D}]},{type:a,tag:c,props:{class:B},children:[{type:b,value:S}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:D}]},{type:a,tag:c,props:{class:bj},children:[{type:b,value:bk}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"printer."}]},{type:a,tag:c,props:{class:T},children:[{type:b,value:"Sprintf"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:bh}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:v}]},{type:a,tag:c,props:{class:"ct-ebe6d6"},children:[{type:b,value:"%d"}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:" butterflies\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:", count)"}]}]}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:ai},{type:a,tag:f,props:{},children:[{type:b,value:K}]},{type:b,value:aj}]},{type:a,tag:h,props:{code:L,language:x},children:[{type:a,tag:o,props:{},children:[{type:a,tag:h,props:{__ignoreMap:l},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"gotext -srclang=en-GB update -lang=ru-RU \\"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" -out=translations.go github.com\u002Fpath\u002Fto-output-folder"}]}]}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:ak},{type:a,tag:f,props:{},children:[{type:b,value:al}]},{type:b,value:am},{type:a,tag:f,props:{},children:[{type:b,value:an}]},{type:b,value:ao},{type:a,tag:f,props:{},children:[{type:b,value:ap}]},{type:b,value:y}]},{type:a,tag:s,props:{id:aq},children:[{type:b,value:ar}]},{type:a,tag:i,props:{},children:[{type:b,value:as},{type:a,tag:f,props:{},children:[{type:b,value:M}]},{type:b,value:at},{type:a,tag:f,props:{},children:[{type:b,value:au}]},{type:b,value:av},{type:a,tag:f,props:{},children:[{type:b,value:aw}]},{type:b,value:ax},{type:a,tag:f,props:{},children:[{type:b,value:ay}]},{type:b,value:az},{type:a,tag:c,props:{className:[aA]},children:[{type:b,value:aB}]},{type:b,value:aC},{type:a,tag:f,props:{},children:[{type:b,value:aD}]},{type:b,value:y}]},{type:a,tag:i,props:{},children:[{type:b,value:aE},{type:a,tag:m,props:{href:z,rel:[n]},children:[{type:b,value:aF}]},{type:b,value:aG}]},{type:a,tag:A,props:{},children:[{type:a,tag:t,props:{},children:[{type:a,tag:f,props:{},children:[{type:b,value:aH}]},{type:b,value:aI},{type:a,tag:f,props:{},children:[{type:b,value:aJ}]},{type:b,value:aK},{type:a,tag:f,props:{},children:[{type:b,value:aL}]},{type:b,value:aM}]},{type:a,tag:t,props:{},children:[{type:a,tag:f,props:{},children:[{type:b,value:aN}]},{type:b,value:p},{type:a,tag:f,props:{},children:[{type:b,value:aO}]},{type:b,value:p},{type:a,tag:f,props:{},children:[{type:b,value:aP}]},{type:b,value:p},{type:a,tag:f,props:{},children:[{type:b,value:aQ}]},{type:b,value:p},{type:a,tag:f,props:{},children:[{type:b,value:aR}]},{type:b,value:p},{type:a,tag:f,props:{},children:[{type:b,value:aS}]},{type:b,value:aT}]}]},{type:a,tag:h,props:{code:N,language:aU},children:[{type:a,tag:o,props:{},children:[{type:a,tag:h,props:{__ignoreMap:l},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"{"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:E}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:bl}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:k}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:bm}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:q}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:E}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\"message\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:k}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:bm}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:q}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:E}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:M}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:u}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:Q}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\"select\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:u}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\"feature\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:k}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:"\"plural\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:q}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\"arg\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:k}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:bn}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:q}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\"cases\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:u}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:F}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\"one\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:u}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:G}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:H}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:k}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:"\"{Count} бабочка\""}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:U}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:F}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\"few\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:u}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:G}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:H}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:k}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:"\"{Count} бабочки\""}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:U}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:F}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\"many\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:u}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:G}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:H}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:k}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:"\"{Count} бабочек\""}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:U}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:F}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\"other\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:u}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:G}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:H}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:k}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:"\"{Count} бабочуль\""}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" }"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" }"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:bo}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" },"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:E}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\"placeholders\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:": ["}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" {"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:bl}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:k}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:bn}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:q}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\"string\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:k}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:"\"%[1]d\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:q}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\"type\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:k}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:bp}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:q}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\"underlyingType\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:k}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:bp}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:q}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\"argNum\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:k}]},{type:a,tag:c,props:{class:bj},children:[{type:b,value:bk}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:q}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:g},children:[{type:b,value:"\"expr\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:k}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:"\"count\""}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:bo}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" ]"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"},"}]}]}]}]}]},{type:a,tag:s,props:{id:aV},children:[{type:b,value:aW}]},{type:a,tag:i,props:{},children:[{type:b,value:aX},{type:a,tag:f,props:{},children:[{type:b,value:aY}]},{type:b,value:aZ}]},{type:a,tag:h,props:{code:O,language:w},children:[{type:a,tag:o,props:{},children:[{type:a,tag:h,props:{__ignoreMap:l},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:"ct-e81ade"},children:[{type:b,value:"\u002F\u002Fgo:generate gotext -srclang=en-GB update -out=translations.go -lang=ru-RU github.com\u002Fmuerwre\u002Fvault-golang\u002Finternal\u002Fapi"}]}]}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:a_}]},{type:a,tag:h,props:{code:P,language:x},children:[{type:a,tag:o,props:{},children:[{type:a,tag:h,props:{__ignoreMap:l},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"go generate .\u002F..."}]}]}]}]}]},{type:a,tag:s,props:{id:a$},children:[{type:b,value:ba}]},{type:a,tag:A,props:{},children:[{type:a,tag:t,props:{},children:[{type:a,tag:m,props:{href:z,rel:[n]},children:[{type:b,value:bb}]}]},{type:a,tag:t,props:{},children:[{type:a,tag:m,props:{href:bc,rel:[n]},children:[{type:b,value:bd}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-e81ade{color:#8B949E}.ct-0dacf2{color:#79C0FF}.ct-ebe6d6{color:#79C0FF}.ct-82e32d{color:#79C0FF}.ct-2891df{color:#FFA198}.ct-1e836b{color:#A5D6FF}.ct-91dbaa{color:#79C0FF}.ct-3ccebd{color:#C9D1D9}.ct-b637b2{color:#FFA657}.ct-03e448{color:#A5D6FF}.ct-d55d13{color:#C9D1D9}.ct-13cb8b{color:#C9D1D9}.ct-d75569{color:#FF7B72}.light .ct-d75569{color:#859900}.light .ct-13cb8b{color:#657B83}.light .ct-d55d13{color:#657B83}.light .ct-03e448{color:#2AA198}.light .ct-b637b2{color:#2AA198}.light .ct-3ccebd{color:#268BD2}.light .ct-91dbaa{color:#268BD2}.light .ct-1e836b{color:#2AA198}.light .ct-2891df{color:#CD3131}.light .ct-82e32d{color:#D33682}.light .ct-ebe6d6{color:#CB4B16}.light .ct-0dacf2{color:#859900}.light .ct-e81ade{color:#93A1A1}"}]}],toc:{title:l,searchDepth:bq,depth:bq,links:[]}},_type:"markdown",_id:"content:Golang:i18n in golang.md",_source:"content",_file:"Golang\u002Fi18n in golang.md",_extension:"md"}},prerenderedAt:1703697992482}}("element","text","span","ct-13cb8b","line","code-inline","ct-0dacf2","code","p","ct-1e836b",": ","","a","nofollow","pre"," | ",","," ","h4","li",": {","\"","go","shell",".","https:\u002F\u002Fgithub.com\u002Fgolang\u002Ftext\u002Fblob\u002Fmaster\u002Ffeature\u002Fplural\u002Fgen_common.go#L19","ul","ct-d75569","ct-03e448"," "," "," "," ","\"msg\"",false,"import (\n \"golang.org\u002Fx\u002Ftext\u002Flanguage\"\n \"golang.org\u002Fx\u002Ftext\u002Fmessage\"\n)\n\nlang := language.MustParse('ru-RU')\nprinter := message.NewPrinter(lang)\n\ncount := 1\nprinter.Sprintf(\"%d butterflies\", count)\n","ru-RU","gotext -srclang=en-GB update -lang=ru-RU \\\n -out=translations.go github.com\u002Fpath\u002Fto-output-folder\n","\"translation\"","{\n \"id\": \"{Count} butterflies\",\n \"message\": \"{Count} butterflies\",\n \"translation\": {\n \"select\": {\n \"feature\": \"plural\",\n \"arg\": \"Count\",\n \"cases\": {\n \"one\": {\n \"msg\": \"{Count} бабочка\"\n },\n \"few\": {\n \"msg\": \"{Count} бабочки\"\n },\n \"many\": {\n \"msg\": \"{Count} бабочек\"\n },\n \"other\": {\n \"msg\": \"{Count} бабочуль\"\n }\n }\n }\n },\n \"placeholders\": [\n {\n \"id\": \"Count\",\n \"string\": \"%[1]d\",\n \"type\": \"int\",\n \"underlyingType\": \"int\",\n \"argNum\": 1,\n \"expr\": \"count\"\n }\n ]\n},\n","\u002F\u002Fgo:generate gotext -srclang=en-GB update -out=translations.go -lang=ru-RU github.com\u002Fmuerwre\u002Fvault-golang\u002Finternal\u002Fapi\n","go generate .\u002F...\n"," ","ct-3ccebd",":=","ct-91dbaa"," },","I18n In Golang","\u002Fgolang\u002Fi18n-in-golang","root","There are no good examples of ","https:\u002F\u002Fgolang.org\u002Fx\u002Ftext","golang.org\u002Fx\u002Ftext"," uses and description of how pluralization made. So, this is it.","generating-translations","Generating translations","blockquote","You should specify valid ","https:\u002F\u002Fwww.iso.org\u002Fobp\u002Fui\u002F#iso:code:3166","ISO-3166 locale code"," to get plurals working!","Write your code:","Then run generator for your locale (mine is ","):","This will generate ","out.gotext.json"," in ","\u002Fpath\u002Fto-output-folder\u002Fru-RU"," of your project. Copy it to ","messages.out.json","translating-and-adding-plural-forms","Translating and adding plural forms","Change "," value in generated ","messages.gotext.json"," to ","string"," or ","object"," of the form shown below if you want pluralize strings, ","highlight","then run gotext command again",", it will generate ",".go files with translations","According to ","source files of gen_common",", there's a couple of forms:","=N",", ","!=N",", ","%N"," for exact matches","zero","one","two","few","many","other"," - they're different for each language, so,","json","using-go-generate","Using go-generate","Write this at some ",".go"," file:","Then run go generation:","useful-links","Useful links","All available forms in this .go file","https:\u002F\u002Fcommunity.crowdin.com\u002Ft\u002Fplurals-in-gotext-json-files\u002F600","Answer, that solved it for me","ct-d55d13","ct-b637b2",")","(","'","ct-82e32d","1","\"id\"","\"{Count} butterflies\"","\"Count\""," }","\"int\"",2))
\ No newline at end of file
diff --git a/docs/golang/i18n-in-golang/index.html b/docs/golang/i18n-in-golang/index.html
index f5fa597..39a1606 100644
--- a/docs/golang/i18n-in-golang/index.html
+++ b/docs/golang/i18n-in-golang/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>I18n In Golang • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="There are no good examples of golang.org/x/text uses and description of how pluralization made. So, this is it."><meta name="head:count" content="3"><link rel="modulepreload" href="/golang/i18n-in-golang/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseA.c52e44f8.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseH4.b4e68251.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseBlockquote.1ce8e279.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCodeInline.d9bcf614.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseUl.b892d423.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseLi.a224f663.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a aria-current="page" href="/golang/i18n-in-golang" class="router-link-active _active_192pu_81 _link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>I18n In Golang</h1><article><div><p><!--[-->There are no good examples of <a href="https://golang.org/x/text" rel="nofollow" target="_blank"><!--[-->golang.org/x/text<!--]--></a> uses and description of how pluralization made. So, this is it.<!--]--></p><h4 id="generating-translations"><a href="#generating-translations"><!--[-->Generating translations<!--]--></a></h4><blockquote><!--[--><p><!--[-->You should specify valid <a href="https://www.iso.org/obp/ui/#iso:code:3166" rel="nofollow" target="_blank"><!--[-->ISO-3166 locale code<!--]--></a> to get plurals working!<!--]--></p><!--]--></blockquote><p><!--[-->Write your code:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>go</span></button><!--[--><pre><code><span class="line"><span class="ct-1f4481">import</span><span class="ct-7594fe"> (</span></span><span class="line"><span class="ct-04fd5c"> </span><span class="ct-00c2ca">"</span><span class="ct-e35103">golang.org/x/text/language</span><span class="ct-00c2ca">"</span></span><span class="line"><span class="ct-04fd5c"> </span><span class="ct-00c2ca">"</span><span class="ct-e35103">golang.org/x/text/message</span><span class="ct-00c2ca">"</span></span><span class="line"><span class="ct-7594fe">)</span></span><span class="line"></span><span class="line"><span class="ct-d136e8">lang</span><span class="ct-7594fe"> </span><span class="ct-1f4481">:=</span><span class="ct-7594fe"> language.</span><span class="ct-cdbf83">MustParse</span><span class="ct-7594fe">(</span><span class="ct-84260f">'</span><span class="ct-0a943a">ru-RU</span><span class="ct-84260f">'</span><span class="ct-7594fe">)</span></span><span class="line"><span class="ct-d136e8">printer</span><span class="ct-7594fe"> </span><span class="ct-1f4481">:=</span><span class="ct-7594fe"> message.</span><span class="ct-cdbf83">NewPrinter</span><span class="ct-7594fe">(lang)</span></span><span class="line"></span><span class="line"><span class="ct-d136e8">count</span><span class="ct-7594fe"> </span><span class="ct-1f4481">:=</span><span class="ct-7594fe"> </span><span class="ct-f726b6">1</span></span><span class="line"><span class="ct-7594fe">printer.</span><span class="ct-cdbf83">Sprintf</span><span class="ct-7594fe">(</span><span class="ct-84260f">"</span><span class="ct-b76416">%d</span><span class="ct-84260f"> butterflies"</span><span class="ct-7594fe">, count)</span></span></code></pre><!--]--></div><p><!--[-->Then run generator for your locale (mine is <code><!--[-->ru-RU<!--]--></code>):<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-7594fe">gotext -srclang=en-GB update -lang=ru-RU \</span></span><span class="line"><span class="ct-7594fe"> -out=translations.go github.com/path/to-output-folder</span></span></code></pre><!--]--></div><p><!--[-->This will generate <code><!--[-->out.gotext.json<!--]--></code> in <code><!--[-->/path/to-output-folder/ru-RU<!--]--></code> of your project. Copy it to <code><!--[-->messages.out.json<!--]--></code>.<!--]--></p><h4 id="translating-and-adding-plural-forms"><a href="#translating-and-adding-plural-forms"><!--[-->Translating and adding plural forms<!--]--></a></h4><p><!--[-->Change <code><!--[-->"translation"<!--]--></code> value in generated <code><!--[-->messages.gotext.json<!--]--></code> to <code><!--[-->string<!--]--></code> or <code><!--[-->object<!--]--></code> of the form shown below if you want pluralize strings, <span class="highlight">then run gotext command again</span>, it will generate <code><!--[-->.go files with translations<!--]--></code>.<!--]--></p><p><!--[-->According to <a href="https://github.com/golang/text/blob/master/feature/plural/gen_common.go#L19" rel="nofollow" target="_blank"><!--[-->source files of gen_common<!--]--></a>, there's a couple of forms:<!--]--></p><ul><!--[--><li><!--[--><code><!--[-->=N<!--]--></code>, <code><!--[-->!=N<!--]--></code>, <code><!--[-->%N<!--]--></code> for exact matches<!--]--></li><li><!--[--><code><!--[-->zero<!--]--></code> | <code><!--[-->one<!--]--></code> | <code><!--[-->two<!--]--></code> | <code><!--[-->few<!--]--></code> | <code><!--[-->many<!--]--></code> | <code><!--[-->other<!--]--></code> - they're different for each language, so,<!--]--></li><!--]--></ul><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>json</span></button><!--[--><pre><code><span class="line"><span class="ct-7594fe">{</span></span><span class="line"><span class="ct-7594fe"> </span><span class="ct-525738">"id"</span><span class="ct-7594fe">: </span><span class="ct-84260f">"{Count} butterflies"</span><span class="ct-7594fe">,</span></span><span class="line"><span class="ct-7594fe"> </span><span class="ct-525738">"message"</span><span class="ct-7594fe">: </span><span class="ct-84260f">"{Count} butterflies"</span><span class="ct-7594fe">,</span></span><span class="line"><span class="ct-7594fe"> </span><span class="ct-525738">"translation"</span><span class="ct-7594fe">: {</span></span><span class="line"><span class="ct-7594fe"> </span><span class="ct-525738">"select"</span><span class="ct-7594fe">: {</span></span><span class="line"><span class="ct-7594fe"> </span><span class="ct-525738">"feature"</span><span class="ct-7594fe">: </span><span class="ct-84260f">"plural"</span><span class="ct-7594fe">,</span></span><span class="line"><span class="ct-7594fe"> </span><span class="ct-525738">"arg"</span><span class="ct-7594fe">: </span><span class="ct-84260f">"Count"</span><span class="ct-7594fe">,</span></span><span class="line"><span class="ct-7594fe"> </span><span class="ct-525738">"cases"</span><span class="ct-7594fe">: {</span></span><span class="line"><span class="ct-7594fe"> </span><span class="ct-525738">"one"</span><span class="ct-7594fe">: {</span></span><span class="line"><span class="ct-7594fe"> </span><span class="ct-525738">"msg"</span><span class="ct-7594fe">: </span><span class="ct-84260f">"{Count} бабочка"</span></span><span class="line"><span class="ct-7594fe"> },</span></span><span class="line"><span class="ct-7594fe"> </span><span class="ct-525738">"few"</span><span class="ct-7594fe">: {</span></span><span class="line"><span class="ct-7594fe"> </span><span class="ct-525738">"msg"</span><span class="ct-7594fe">: </span><span class="ct-84260f">"{Count} бабочки"</span></span><span class="line"><span class="ct-7594fe"> },</span></span><span class="line"><span class="ct-7594fe"> </span><span class="ct-525738">"many"</span><span class="ct-7594fe">: {</span></span><span class="line"><span class="ct-7594fe"> </span><span class="ct-525738">"msg"</span><span class="ct-7594fe">: </span><span class="ct-84260f">"{Count} бабочек"</span></span><span class="line"><span class="ct-7594fe"> },</span></span><span class="line"><span class="ct-7594fe"> </span><span class="ct-525738">"other"</span><span class="ct-7594fe">: {</span></span><span class="line"><span class="ct-7594fe"> </span><span class="ct-525738">"msg"</span><span class="ct-7594fe">: </span><span class="ct-84260f">"{Count} бабочуль"</span></span><span class="line"><span class="ct-7594fe"> }</span></span><span class="line"><span class="ct-7594fe"> }</span></span><span class="line"><span class="ct-7594fe"> }</span></span><span class="line"><span class="ct-7594fe"> },</span></span><span class="line"><span class="ct-7594fe"> </span><span class="ct-525738">"placeholders"</span><span class="ct-7594fe">: [</span></span><span class="line"><span class="ct-7594fe"> {</span></span><span class="line"><span class="ct-7594fe"> </span><span class="ct-525738">"id"</span><span class="ct-7594fe">: </span><span class="ct-84260f">"Count"</span><span class="ct-7594fe">,</span></span><span class="line"><span class="ct-7594fe"> </span><span class="ct-525738">"string"</span><span class="ct-7594fe">: </span><span class="ct-84260f">"%[1]d"</span><span class="ct-7594fe">,</span></span><span class="line"><span class="ct-7594fe"> </span><span class="ct-525738">"type"</span><span class="ct-7594fe">: </span><span class="ct-84260f">"int"</span><span class="ct-7594fe">,</span></span><span class="line"><span class="ct-7594fe"> </span><span class="ct-525738">"underlyingType"</span><span class="ct-7594fe">: </span><span class="ct-84260f">"int"</span><span class="ct-7594fe">,</span></span><span class="line"><span class="ct-7594fe"> </span><span class="ct-525738">"argNum"</span><span class="ct-7594fe">: </span><span class="ct-f726b6">1</span><span class="ct-7594fe">,</span></span><span class="line"><span class="ct-7594fe"> </span><span class="ct-525738">"expr"</span><span class="ct-7594fe">: </span><span class="ct-84260f">"count"</span></span><span class="line"><span class="ct-7594fe"> }</span></span><span class="line"><span class="ct-7594fe"> ]</span></span><span class="line"><span class="ct-7594fe">},</span></span></code></pre><!--]--></div><h4 id="using-go-generate"><a href="#using-go-generate"><!--[-->Using go-generate<!--]--></a></h4><p><!--[-->Write this at some <code><!--[-->.go<!--]--></code> file:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>go</span></button><!--[--><pre><code><span class="line"><span class="ct-cb8ea8">//go:generate gotext -srclang=en-GB update -out=translations.go -lang=ru-RU github.com/muerwre/vault-golang/internal/api</span></span></code></pre><!--]--></div><p><!--[-->Then run go generation:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-7594fe">go generate ./...</span></span></code></pre><!--]--></div><h4 id="useful-links"><a href="#useful-links"><!--[-->Useful links<!--]--></a></h4><ul><!--[--><li><!--[--><a href="https://github.com/golang/text/blob/master/feature/plural/gen_common.go#L19" rel="nofollow" target="_blank"><!--[-->All available forms in this .go file<!--]--></a><!--]--></li><li><!--[--><a href="https://community.crowdin.com/t/plurals-in-gotext-json-files/600" rel="nofollow" target="_blank"><!--[-->Answer, that solved it for me<!--]--></a><!--]--></li><!--]--></ul><style>.ct-cb8ea8{color:#8B949E}.ct-525738{color:#79C0FF}.ct-b76416{color:#79C0FF}.ct-f726b6{color:#79C0FF}.ct-0a943a{color:#FFA198}.ct-84260f{color:#A5D6FF}.ct-cdbf83{color:#79C0FF}.ct-d136e8{color:#C9D1D9}.ct-e35103{color:#FFA657}.ct-00c2ca{color:#A5D6FF}.ct-04fd5c{color:#C9D1D9}.ct-7594fe{color:#C9D1D9}.ct-1f4481{color:#FF7B72}.light .ct-1f4481{color:#859900}.light .ct-7594fe{color:#657B83}.light .ct-04fd5c{color:#657B83}.light .ct-00c2ca{color:#2AA198}.light .ct-e35103{color:#2AA198}.light .ct-d136e8{color:#268BD2}.light .ct-cdbf83{color:#268BD2}.light .ct-84260f{color:#2AA198}.light .ct-0a943a{color:#CD3131}.light .ct-f726b6{color:#D33682}.light .ct-b76416{color:#CB4B16}.light .ct-525738{color:#859900}.light .ct-cb8ea8{color:#93A1A1}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/golang/i18n-in-golang/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695530980}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseH4.b4e68251.js" crossorigin></script><script type="module" src="/nuxt/ProseBlockquote.1ce8e279.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseUl.b892d423.js" crossorigin></script><script type="module" src="/nuxt/ProseLi.a224f663.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a aria-current="page" href="/golang/i18n-in-golang" class="router-link-active _active_192pu_81 _link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>I18n In Golang</h1><article><div><p><!--[-->There are no good examples of <a href="https://golang.org/x/text" rel="nofollow" target="_blank"><!--[-->golang.org/x/text<!--]--></a> uses and description of how pluralization made. So, this is it.<!--]--></p><h4 id="generating-translations"><a href="#generating-translations"><!--[-->Generating translations<!--]--></a></h4><blockquote><!--[--><p><!--[-->You should specify valid <a href="https://www.iso.org/obp/ui/#iso:code:3166" rel="nofollow" target="_blank"><!--[-->ISO-3166 locale code<!--]--></a> to get plurals working!<!--]--></p><!--]--></blockquote><p><!--[-->Write your code:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>go</span></button><!--[--><pre><code><span class="line"><span class="ct-d75569">import</span><span class="ct-13cb8b"> (</span></span><span class="line"><span class="ct-d55d13"> </span><span class="ct-03e448">"</span><span class="ct-b637b2">golang.org/x/text/language</span><span class="ct-03e448">"</span></span><span class="line"><span class="ct-d55d13"> </span><span class="ct-03e448">"</span><span class="ct-b637b2">golang.org/x/text/message</span><span class="ct-03e448">"</span></span><span class="line"><span class="ct-13cb8b">)</span></span><span class="line"></span><span class="line"><span class="ct-3ccebd">lang</span><span class="ct-13cb8b"> </span><span class="ct-d75569">:=</span><span class="ct-13cb8b"> language.</span><span class="ct-91dbaa">MustParse</span><span class="ct-13cb8b">(</span><span class="ct-1e836b">'</span><span class="ct-2891df">ru-RU</span><span class="ct-1e836b">'</span><span class="ct-13cb8b">)</span></span><span class="line"><span class="ct-3ccebd">printer</span><span class="ct-13cb8b"> </span><span class="ct-d75569">:=</span><span class="ct-13cb8b"> message.</span><span class="ct-91dbaa">NewPrinter</span><span class="ct-13cb8b">(lang)</span></span><span class="line"></span><span class="line"><span class="ct-3ccebd">count</span><span class="ct-13cb8b"> </span><span class="ct-d75569">:=</span><span class="ct-13cb8b"> </span><span class="ct-82e32d">1</span></span><span class="line"><span class="ct-13cb8b">printer.</span><span class="ct-91dbaa">Sprintf</span><span class="ct-13cb8b">(</span><span class="ct-1e836b">"</span><span class="ct-ebe6d6">%d</span><span class="ct-1e836b"> butterflies"</span><span class="ct-13cb8b">, count)</span></span></code></pre><!--]--></div><p><!--[-->Then run generator for your locale (mine is <code><!--[-->ru-RU<!--]--></code>):<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-13cb8b">gotext -srclang=en-GB update -lang=ru-RU \</span></span><span class="line"><span class="ct-13cb8b"> -out=translations.go github.com/path/to-output-folder</span></span></code></pre><!--]--></div><p><!--[-->This will generate <code><!--[-->out.gotext.json<!--]--></code> in <code><!--[-->/path/to-output-folder/ru-RU<!--]--></code> of your project. Copy it to <code><!--[-->messages.out.json<!--]--></code>.<!--]--></p><h4 id="translating-and-adding-plural-forms"><a href="#translating-and-adding-plural-forms"><!--[-->Translating and adding plural forms<!--]--></a></h4><p><!--[-->Change <code><!--[-->"translation"<!--]--></code> value in generated <code><!--[-->messages.gotext.json<!--]--></code> to <code><!--[-->string<!--]--></code> or <code><!--[-->object<!--]--></code> of the form shown below if you want pluralize strings, <span class="highlight">then run gotext command again</span>, it will generate <code><!--[-->.go files with translations<!--]--></code>.<!--]--></p><p><!--[-->According to <a href="https://github.com/golang/text/blob/master/feature/plural/gen_common.go#L19" rel="nofollow" target="_blank"><!--[-->source files of gen_common<!--]--></a>, there's a couple of forms:<!--]--></p><ul><!--[--><li><!--[--><code><!--[-->=N<!--]--></code>, <code><!--[-->!=N<!--]--></code>, <code><!--[-->%N<!--]--></code> for exact matches<!--]--></li><li><!--[--><code><!--[-->zero<!--]--></code> | <code><!--[-->one<!--]--></code> | <code><!--[-->two<!--]--></code> | <code><!--[-->few<!--]--></code> | <code><!--[-->many<!--]--></code> | <code><!--[-->other<!--]--></code> - they're different for each language, so,<!--]--></li><!--]--></ul><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>json</span></button><!--[--><pre><code><span class="line"><span class="ct-13cb8b">{</span></span><span class="line"><span class="ct-13cb8b"> </span><span class="ct-0dacf2">"id"</span><span class="ct-13cb8b">: </span><span class="ct-1e836b">"{Count} butterflies"</span><span class="ct-13cb8b">,</span></span><span class="line"><span class="ct-13cb8b"> </span><span class="ct-0dacf2">"message"</span><span class="ct-13cb8b">: </span><span class="ct-1e836b">"{Count} butterflies"</span><span class="ct-13cb8b">,</span></span><span class="line"><span class="ct-13cb8b"> </span><span class="ct-0dacf2">"translation"</span><span class="ct-13cb8b">: {</span></span><span class="line"><span class="ct-13cb8b"> </span><span class="ct-0dacf2">"select"</span><span class="ct-13cb8b">: {</span></span><span class="line"><span class="ct-13cb8b"> </span><span class="ct-0dacf2">"feature"</span><span class="ct-13cb8b">: </span><span class="ct-1e836b">"plural"</span><span class="ct-13cb8b">,</span></span><span class="line"><span class="ct-13cb8b"> </span><span class="ct-0dacf2">"arg"</span><span class="ct-13cb8b">: </span><span class="ct-1e836b">"Count"</span><span class="ct-13cb8b">,</span></span><span class="line"><span class="ct-13cb8b"> </span><span class="ct-0dacf2">"cases"</span><span class="ct-13cb8b">: {</span></span><span class="line"><span class="ct-13cb8b"> </span><span class="ct-0dacf2">"one"</span><span class="ct-13cb8b">: {</span></span><span class="line"><span class="ct-13cb8b"> </span><span class="ct-0dacf2">"msg"</span><span class="ct-13cb8b">: </span><span class="ct-1e836b">"{Count} бабочка"</span></span><span class="line"><span class="ct-13cb8b"> },</span></span><span class="line"><span class="ct-13cb8b"> </span><span class="ct-0dacf2">"few"</span><span class="ct-13cb8b">: {</span></span><span class="line"><span class="ct-13cb8b"> </span><span class="ct-0dacf2">"msg"</span><span class="ct-13cb8b">: </span><span class="ct-1e836b">"{Count} бабочки"</span></span><span class="line"><span class="ct-13cb8b"> },</span></span><span class="line"><span class="ct-13cb8b"> </span><span class="ct-0dacf2">"many"</span><span class="ct-13cb8b">: {</span></span><span class="line"><span class="ct-13cb8b"> </span><span class="ct-0dacf2">"msg"</span><span class="ct-13cb8b">: </span><span class="ct-1e836b">"{Count} бабочек"</span></span><span class="line"><span class="ct-13cb8b"> },</span></span><span class="line"><span class="ct-13cb8b"> </span><span class="ct-0dacf2">"other"</span><span class="ct-13cb8b">: {</span></span><span class="line"><span class="ct-13cb8b"> </span><span class="ct-0dacf2">"msg"</span><span class="ct-13cb8b">: </span><span class="ct-1e836b">"{Count} бабочуль"</span></span><span class="line"><span class="ct-13cb8b"> }</span></span><span class="line"><span class="ct-13cb8b"> }</span></span><span class="line"><span class="ct-13cb8b"> }</span></span><span class="line"><span class="ct-13cb8b"> },</span></span><span class="line"><span class="ct-13cb8b"> </span><span class="ct-0dacf2">"placeholders"</span><span class="ct-13cb8b">: [</span></span><span class="line"><span class="ct-13cb8b"> {</span></span><span class="line"><span class="ct-13cb8b"> </span><span class="ct-0dacf2">"id"</span><span class="ct-13cb8b">: </span><span class="ct-1e836b">"Count"</span><span class="ct-13cb8b">,</span></span><span class="line"><span class="ct-13cb8b"> </span><span class="ct-0dacf2">"string"</span><span class="ct-13cb8b">: </span><span class="ct-1e836b">"%[1]d"</span><span class="ct-13cb8b">,</span></span><span class="line"><span class="ct-13cb8b"> </span><span class="ct-0dacf2">"type"</span><span class="ct-13cb8b">: </span><span class="ct-1e836b">"int"</span><span class="ct-13cb8b">,</span></span><span class="line"><span class="ct-13cb8b"> </span><span class="ct-0dacf2">"underlyingType"</span><span class="ct-13cb8b">: </span><span class="ct-1e836b">"int"</span><span class="ct-13cb8b">,</span></span><span class="line"><span class="ct-13cb8b"> </span><span class="ct-0dacf2">"argNum"</span><span class="ct-13cb8b">: </span><span class="ct-82e32d">1</span><span class="ct-13cb8b">,</span></span><span class="line"><span class="ct-13cb8b"> </span><span class="ct-0dacf2">"expr"</span><span class="ct-13cb8b">: </span><span class="ct-1e836b">"count"</span></span><span class="line"><span class="ct-13cb8b"> }</span></span><span class="line"><span class="ct-13cb8b"> ]</span></span><span class="line"><span class="ct-13cb8b">},</span></span></code></pre><!--]--></div><h4 id="using-go-generate"><a href="#using-go-generate"><!--[-->Using go-generate<!--]--></a></h4><p><!--[-->Write this at some <code><!--[-->.go<!--]--></code> file:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>go</span></button><!--[--><pre><code><span class="line"><span class="ct-e81ade">//go:generate gotext -srclang=en-GB update -out=translations.go -lang=ru-RU github.com/muerwre/vault-golang/internal/api</span></span></code></pre><!--]--></div><p><!--[-->Then run go generation:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-13cb8b">go generate ./...</span></span></code></pre><!--]--></div><h4 id="useful-links"><a href="#useful-links"><!--[-->Useful links<!--]--></a></h4><ul><!--[--><li><!--[--><a href="https://github.com/golang/text/blob/master/feature/plural/gen_common.go#L19" rel="nofollow" target="_blank"><!--[-->All available forms in this .go file<!--]--></a><!--]--></li><li><!--[--><a href="https://community.crowdin.com/t/plurals-in-gotext-json-files/600" rel="nofollow" target="_blank"><!--[-->Answer, that solved it for me<!--]--></a><!--]--></li><!--]--></ul><style>.ct-e81ade{color:#8B949E}.ct-0dacf2{color:#79C0FF}.ct-ebe6d6{color:#79C0FF}.ct-82e32d{color:#79C0FF}.ct-2891df{color:#FFA198}.ct-1e836b{color:#A5D6FF}.ct-91dbaa{color:#79C0FF}.ct-3ccebd{color:#C9D1D9}.ct-b637b2{color:#FFA657}.ct-03e448{color:#A5D6FF}.ct-d55d13{color:#C9D1D9}.ct-13cb8b{color:#C9D1D9}.ct-d75569{color:#FF7B72}.light .ct-d75569{color:#859900}.light .ct-13cb8b{color:#657B83}.light .ct-d55d13{color:#657B83}.light .ct-03e448{color:#2AA198}.light .ct-b637b2{color:#2AA198}.light .ct-3ccebd{color:#268BD2}.light .ct-91dbaa{color:#268BD2}.light .ct-1e836b{color:#2AA198}.light .ct-2891df{color:#CD3131}.light .ct-82e32d{color:#D33682}.light .ct-ebe6d6{color:#CB4B16}.light .ct-0dacf2{color:#859900}.light .ct-e81ade{color:#93A1A1}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/golang/i18n-in-golang/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697992482}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseH4.b4e68251.js" crossorigin></script><script type="module" src="/nuxt/ProseBlockquote.1ce8e279.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseUl.b892d423.js" crossorigin></script><script type="module" src="/nuxt/ProseLi.a224f663.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/graphql/apollo-client-pagination/_payload.js b/docs/graphql/apollo-client-pagination/_payload.js
index eec8540..0b1d249 100644
--- a/docs/graphql/apollo-client-pagination/_payload.js
+++ b/docs/graphql/apollo-client-pagination/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av,aw,ax,ay,az,aA,aB,aC,aD,aE,aF){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:ab,_path:ac},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-k91xxFGA5Y":{_path:ac,_dir:R,_draft:S,_partial:S,_locale:"en",_empty:S,title:ab,description:"Say, we have gql response like this and we wan't to have pagination with it. Let's merge it as it specified in official documentation",excerpt:{type:ad,children:[{type:a,tag:v,props:{},children:[{type:c,value:ae},{type:a,tag:o,props:{},children:[{type:c,value:af}]},{type:c,value:ag},{type:a,tag:ah,props:{href:ai,rel:[aj]},children:[{type:c,value:ak}]}]},{type:a,tag:k,props:{code:T,language:R},children:[{type:a,tag:w,props:{},children:[{type:a,tag:k,props:{__ignoreMap:r},children:[{type:c,value:T}]}]}]},{type:a,tag:v,props:{},children:[{type:c,value:al},{type:a,tag:o,props:{},children:[{type:c,value:I}]},{type:c,value:am},{type:a,tag:o,props:{},children:[{type:c,value:J}]},{type:c,value:an}]},{type:a,tag:k,props:{code:U,language:K},children:[{type:a,tag:w,props:{},children:[{type:a,tag:k,props:{__ignoreMap:r},children:[{type:c,value:U}]}]}]},{type:a,tag:v,props:{},children:[{type:c,value:ao},{type:a,tag:o,props:{},children:[{type:c,value:L}]},{type:c,value:ap}]},{type:a,tag:k,props:{code:V,language:K},children:[{type:a,tag:w,props:{},children:[{type:a,tag:k,props:{__ignoreMap:r},children:[{type:c,value:V}]}]}]}]},body:{type:ad,children:[{type:a,tag:v,props:{},children:[{type:c,value:ae},{type:a,tag:o,props:{},children:[{type:c,value:af}]},{type:c,value:ag},{type:a,tag:ah,props:{href:ai,rel:[aj]},children:[{type:c,value:ak}]}]},{type:a,tag:k,props:{code:T,language:R},children:[{type:a,tag:w,props:{},children:[{type:a,tag:k,props:{__ignoreMap:r},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:"query"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:M},children:[{type:c,value:"listItems"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:W}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"filter"}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"sort"}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:x}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"limit"}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:x}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:Y}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:x}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"): "}]},{type:a,tag:b,props:{class:M},children:[{type:c,value:as}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:"input"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:at},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:C}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"name"}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:q}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:au}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:q}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:Z}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:au}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:at},children:[{type:c,value:as}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:C}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:": ["}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"Item"}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"]"}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:q}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"Int"}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:q}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:Z}]}]}]}]}]},{type:a,tag:v,props:{},children:[{type:c,value:al},{type:a,tag:o,props:{},children:[{type:c,value:I}]},{type:c,value:am},{type:a,tag:o,props:{},children:[{type:c,value:J}]},{type:c,value:an}]},{type:a,tag:k,props:{code:U,language:K},children:[{type:a,tag:w,props:{},children:[{type:a,tag:k,props:{__ignoreMap:r},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:"import"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" { "}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:av}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" } "}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"from"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:F},children:[{type:c,value:"'@apollo\u002Fclient'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aw}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:N},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:O},children:[{type:c,value:"client"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ax}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:M},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"({"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ay}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" cache: "}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ax}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:M},children:[{type:c,value:av}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"({ "}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" }),"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ay}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"});"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:"export"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:N},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:O},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:":"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:"ct-4f2e82"},children:[{type:c,value:"TypePolicies"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:C}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" Query: {"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" fields: {"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"\u002F\u002F query name"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" listItems: {"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"\u002F\u002F apollo will serialize and use keyArgs as unique"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"\u002F\u002F identifier in cache for every query"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"\u002F\u002F consider choosing the right fields, "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"\u002F\u002F i.e. limit and offset won't work here"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" keyArgs: ["}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:az}]},{type:a,tag:b,props:{class:F},children:[{type:c,value:"'sort'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"\u002F\u002F primitive type"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:az}]},{type:a,tag:b,props:{class:F},children:[{type:c,value:"'filter'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:", ["}]},{type:a,tag:b,props:{class:F},children:[{type:c,value:"'name'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:F},children:[{type:c,value:"'type'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"] "}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"\u002F\u002F nested fields of `filter`"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" ],"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" merge: "}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" },"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:Z}]}]}]}]}]},{type:a,tag:v,props:{},children:[{type:c,value:ao},{type:a,tag:o,props:{},children:[{type:c,value:L}]},{type:c,value:ap}]},{type:a,tag:k,props:{code:V,language:K},children:[{type:a,tag:w,props:{},children:[{type:a,tag:k,props:{__ignoreMap:r},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:"\u002F** merges all sources with { items: unknown[], totalCount: number } *\u002F"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:aA},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:"ct-d8487a"},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:", { "}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:" }) "}]},{type:a,tag:b,props:{class:aA},children:[{type:c,value:"=\u003E"}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:C}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"\u002F\u002F no existing data"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:Y}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"."}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:Y}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\u003C"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aC}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aD}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"\u002F\u002F If hook was called multiple times"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aC}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aD}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"\u002F\u002F merge cache and incoming data"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:N},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:O},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" ["}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aE}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"\u002F\u002F apply latest result for totalCount"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:N},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:O},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aw}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:C}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aE}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" };"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" };"}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-d8487a{color:#D2A8FF}.ct-9daaf1{color:#FF7B72}.ct-4f2e82{color:#FFA657}.ct-5baecc{color:#8B949E}.ct-7982ff{color:#79C0FF}.ct-2e1fb9{color:#FF7B72}.ct-9cb4e4{color:#A5D6FF}.ct-6a8d9e{color:#C9D1D9}.ct-8f48bb{color:#FF7B72}.ct-cb1275{color:#79C0FF}.ct-b6a8d2{color:#79C0FF}.ct-2ccaad{color:#FFA657}.ct-237419{color:#C9D1D9}.ct-ad782e{color:#D2A8FF}.ct-654dd2{color:#C9D1D9}.ct-e9af43{color:#FF7B72}.light .ct-e9af43{color:#859900}.light .ct-654dd2{color:#657B83}.light .ct-ad782e{color:#268BD2}.light .ct-237419{color:#657B83}.light .ct-2ccaad{color:#657B83}.light .ct-b6a8d2{color:#859900}.light .ct-cb1275{color:#859900}.light .ct-8f48bb{color:#859900}.light .ct-6a8d9e{color:#268BD2}.light .ct-9cb4e4{color:#2AA198}.light .ct-2e1fb9{color:#073642}.light .ct-7982ff{color:#268BD2}.light .ct-5baecc{color:#93A1A1}.light .ct-4f2e82{color:#268BD2}.light .ct-9daaf1{color:#073642}.light .ct-d8487a{color:#268BD2}"}]}],toc:{title:r,searchDepth:aF,depth:aF,links:[]}},_type:"markdown",_id:"content:GraphQL:Apollo Client pagination.md",_source:"content",_file:"GraphQL\u002FApollo Client pagination.md",_extension:"md"}},prerenderedAt:1703695531125}}("element","span","text","ct-654dd2","line"," ","ct-e9af43","ct-237419","ct-6a8d9e","ct-5baecc","code","ct-2ccaad"," "," ","code-inline","ct-b6a8d2","!","",": ","existing","||","p","pre",",","ct-8f48bb"," ","?.",", "," {","items","totalCount","ct-9cb4e4","const","=","ApolloClient","typePolicies","typescript","mergeItemsWithTotalCount","ct-ad782e","ct-2e1fb9","ct-7982ff"," ","incoming","graphql",false,"query listItems(\n filter: Filter, \n sort: String,\n limit: Number,\n offset: Number,\n): ItemList!\n\ninput Filter {\n name: String!\n type: String!\n}\n\ntype ItemList {\n items: [Item!]!\n totalCount: Int!\n}\n","import { ApolloClient, InMemoryCache } from '@apollo\u002Fclient';\n\nconst client = new ApolloClient({\n \u002F\u002F ...\n cache: new InMemoryCache({ typePolicies }),\n \u002F\u002F ...\n});\n\nexport const typePolicies: TypePolicies = {\n Query: {\n fields: {\n \u002F\u002F query name\n listItems: {\n \u002F\u002F apollo will serialize and use keyArgs as unique\n \u002F\u002F identifier in cache for every query\n \u002F\u002F consider choosing the right fields, \n \u002F\u002F i.e. limit and offset won't work here\n keyArgs: [\n 'sort', \u002F\u002F primitive type\n 'filter', ['name', 'type'] \u002F\u002F nested fields of `filter`\n ],\n merge: mergeItemsWithTotalCount,\n },\n }\n}\n","\u002F** merges all sources with { items: unknown[], totalCount: number } *\u002F\nconst mergeItemsWithTotalCount = (existing, incoming, { args }) =\u003E {\n \u002F\u002F no existing data\n if (!existing || !args?.offset || args.offset \u003C existing.length) {\n return incoming || [];\n }\n\n \u002F\u002F If hook was called multiple times\n if (existing?.items?.length && args?.offset \u003C existing.items.length) {\n return existing || [];\n }\n\n \u002F\u002F merge cache and incoming data\n const items = [...(existing?.items || []), ...(incoming?.items || [])];\n\n \u002F\u002F apply latest result for totalCount\n const totalCount = incoming?.totalCount || existing?.totalCount;\n\n return {\n ...(incoming || existing || {}),\n items,\n totalCount,\n };\n };\n","(","String","offset","}"," (","args","return","Apollo Client Pagination","\u002Fgraphql\u002Fapollo-client-pagination","root","Say, we have ","gql"," response like this and we wan't to have pagination with it. Let's merge it as it specified in ","a","https:\u002F\u002Fwww.apollographql.com\u002Fdocs\u002Freact\u002Fcaching\u002Fcache-field-behavior\u002F#the-merge-function","nofollow","official documentation","We will setup "," with "," to merge incoming data in cache:","We will need merge function ",", which will join results of query and cached data for specific key:","Filter","Number","ItemList","ct-cb1275","type","InMemoryCache",";","new","\u002F\u002F ..."," ","ct-9daaf1","if"," [];"," }","...",2))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av,aw,ax,ay,az,aA,aB,aC,aD,aE,aF){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:ab,_path:ac},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-k91xxFGA5Y":{_path:ac,_dir:R,_draft:S,_partial:S,_locale:"en",_empty:S,title:ab,description:"Say, we have gql response like this and we wan't to have pagination with it. Let's merge it as it specified in official documentation",excerpt:{type:ad,children:[{type:a,tag:v,props:{},children:[{type:c,value:ae},{type:a,tag:o,props:{},children:[{type:c,value:af}]},{type:c,value:ag},{type:a,tag:ah,props:{href:ai,rel:[aj]},children:[{type:c,value:ak}]}]},{type:a,tag:k,props:{code:T,language:R},children:[{type:a,tag:w,props:{},children:[{type:a,tag:k,props:{__ignoreMap:r},children:[{type:c,value:T}]}]}]},{type:a,tag:v,props:{},children:[{type:c,value:al},{type:a,tag:o,props:{},children:[{type:c,value:I}]},{type:c,value:am},{type:a,tag:o,props:{},children:[{type:c,value:J}]},{type:c,value:an}]},{type:a,tag:k,props:{code:U,language:K},children:[{type:a,tag:w,props:{},children:[{type:a,tag:k,props:{__ignoreMap:r},children:[{type:c,value:U}]}]}]},{type:a,tag:v,props:{},children:[{type:c,value:ao},{type:a,tag:o,props:{},children:[{type:c,value:L}]},{type:c,value:ap}]},{type:a,tag:k,props:{code:V,language:K},children:[{type:a,tag:w,props:{},children:[{type:a,tag:k,props:{__ignoreMap:r},children:[{type:c,value:V}]}]}]}]},body:{type:ad,children:[{type:a,tag:v,props:{},children:[{type:c,value:ae},{type:a,tag:o,props:{},children:[{type:c,value:af}]},{type:c,value:ag},{type:a,tag:ah,props:{href:ai,rel:[aj]},children:[{type:c,value:ak}]}]},{type:a,tag:k,props:{code:T,language:R},children:[{type:a,tag:w,props:{},children:[{type:a,tag:k,props:{__ignoreMap:r},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:"query"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:M},children:[{type:c,value:"listItems"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:W}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"filter"}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"sort"}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:x}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"limit"}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:x}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:Y}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:x}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"): "}]},{type:a,tag:b,props:{class:M},children:[{type:c,value:as}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:"input"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:at},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:C}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"name"}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:q}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:au}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:q}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:Z}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:au}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:at},children:[{type:c,value:as}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:C}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:": ["}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"Item"}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"]"}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:q}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"Int"}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:q}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:Z}]}]}]}]}]},{type:a,tag:v,props:{},children:[{type:c,value:al},{type:a,tag:o,props:{},children:[{type:c,value:I}]},{type:c,value:am},{type:a,tag:o,props:{},children:[{type:c,value:J}]},{type:c,value:an}]},{type:a,tag:k,props:{code:U,language:K},children:[{type:a,tag:w,props:{},children:[{type:a,tag:k,props:{__ignoreMap:r},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:"import"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" { "}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:av}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" } "}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"from"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:F},children:[{type:c,value:"'@apollo\u002Fclient'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aw}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:N},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:O},children:[{type:c,value:"client"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ax}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:M},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"({"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ay}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" cache: "}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ax}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:M},children:[{type:c,value:av}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"({ "}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" }),"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ay}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"});"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:"export"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:N},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:O},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:":"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:"ct-aa8127"},children:[{type:c,value:"TypePolicies"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:C}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" Query: {"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" fields: {"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"\u002F\u002F query name"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" listItems: {"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"\u002F\u002F apollo will serialize and use keyArgs as unique"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"\u002F\u002F identifier in cache for every query"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"\u002F\u002F consider choosing the right fields, "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"\u002F\u002F i.e. limit and offset won't work here"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" keyArgs: ["}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:az}]},{type:a,tag:b,props:{class:F},children:[{type:c,value:"'sort'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"\u002F\u002F primitive type"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:az}]},{type:a,tag:b,props:{class:F},children:[{type:c,value:"'filter'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:", ["}]},{type:a,tag:b,props:{class:F},children:[{type:c,value:"'name'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:F},children:[{type:c,value:"'type'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"] "}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"\u002F\u002F nested fields of `filter`"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" ],"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" merge: "}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" },"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:Z}]}]}]}]}]},{type:a,tag:v,props:{},children:[{type:c,value:ao},{type:a,tag:o,props:{},children:[{type:c,value:L}]},{type:c,value:ap}]},{type:a,tag:k,props:{code:V,language:K},children:[{type:a,tag:w,props:{},children:[{type:a,tag:k,props:{__ignoreMap:r},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:"\u002F** merges all sources with { items: unknown[], totalCount: number } *\u002F"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:aA},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:"ct-6af47c"},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:", { "}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:" }) "}]},{type:a,tag:b,props:{class:aA},children:[{type:c,value:"=\u003E"}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:C}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"\u002F\u002F no existing data"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:Y}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"."}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:Y}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\u003C"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aC}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aD}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"\u002F\u002F If hook was called multiple times"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aC}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aD}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"\u002F\u002F merge cache and incoming data"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:N},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:O},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" ["}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aE}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"\u002F\u002F apply latest result for totalCount"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:N},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:O},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aw}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:n}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:C}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aE}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" };"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" };"}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-6af47c{color:#D2A8FF}.ct-b5872a{color:#FF7B72}.ct-aa8127{color:#FFA657}.ct-1476e6{color:#8B949E}.ct-3aa4d5{color:#79C0FF}.ct-6561fc{color:#FF7B72}.ct-c275b5{color:#A5D6FF}.ct-aa253b{color:#C9D1D9}.ct-904dbb{color:#FF7B72}.ct-b9abb7{color:#79C0FF}.ct-e6f76e{color:#79C0FF}.ct-89a0ce{color:#FFA657}.ct-20ad43{color:#C9D1D9}.ct-bfd470{color:#D2A8FF}.ct-7dafdd{color:#C9D1D9}.ct-ac9afb{color:#FF7B72}.light .ct-ac9afb{color:#859900}.light .ct-7dafdd{color:#657B83}.light .ct-bfd470{color:#268BD2}.light .ct-20ad43{color:#657B83}.light .ct-89a0ce{color:#657B83}.light .ct-e6f76e{color:#859900}.light .ct-b9abb7{color:#859900}.light .ct-904dbb{color:#859900}.light .ct-aa253b{color:#268BD2}.light .ct-c275b5{color:#2AA198}.light .ct-6561fc{color:#073642}.light .ct-3aa4d5{color:#268BD2}.light .ct-1476e6{color:#93A1A1}.light .ct-aa8127{color:#268BD2}.light .ct-b5872a{color:#073642}.light .ct-6af47c{color:#268BD2}"}]}],toc:{title:r,searchDepth:aF,depth:aF,links:[]}},_type:"markdown",_id:"content:GraphQL:Apollo Client pagination.md",_source:"content",_file:"GraphQL\u002FApollo Client pagination.md",_extension:"md"}},prerenderedAt:1703697992577}}("element","span","text","ct-7dafdd","line"," ","ct-ac9afb","ct-20ad43","ct-aa253b","ct-1476e6","code","ct-89a0ce"," "," ","code-inline","ct-e6f76e","!","",": ","existing","||","p","pre",",","ct-904dbb"," ","?.",", "," {","items","totalCount","ct-c275b5","const","=","ApolloClient","typePolicies","typescript","mergeItemsWithTotalCount","ct-bfd470","ct-6561fc","ct-3aa4d5"," ","incoming","graphql",false,"query listItems(\n filter: Filter, \n sort: String,\n limit: Number,\n offset: Number,\n): ItemList!\n\ninput Filter {\n name: String!\n type: String!\n}\n\ntype ItemList {\n items: [Item!]!\n totalCount: Int!\n}\n","import { ApolloClient, InMemoryCache } from '@apollo\u002Fclient';\n\nconst client = new ApolloClient({\n \u002F\u002F ...\n cache: new InMemoryCache({ typePolicies }),\n \u002F\u002F ...\n});\n\nexport const typePolicies: TypePolicies = {\n Query: {\n fields: {\n \u002F\u002F query name\n listItems: {\n \u002F\u002F apollo will serialize and use keyArgs as unique\n \u002F\u002F identifier in cache for every query\n \u002F\u002F consider choosing the right fields, \n \u002F\u002F i.e. limit and offset won't work here\n keyArgs: [\n 'sort', \u002F\u002F primitive type\n 'filter', ['name', 'type'] \u002F\u002F nested fields of `filter`\n ],\n merge: mergeItemsWithTotalCount,\n },\n }\n}\n","\u002F** merges all sources with { items: unknown[], totalCount: number } *\u002F\nconst mergeItemsWithTotalCount = (existing, incoming, { args }) =\u003E {\n \u002F\u002F no existing data\n if (!existing || !args?.offset || args.offset \u003C existing.length) {\n return incoming || [];\n }\n\n \u002F\u002F If hook was called multiple times\n if (existing?.items?.length && args?.offset \u003C existing.items.length) {\n return existing || [];\n }\n\n \u002F\u002F merge cache and incoming data\n const items = [...(existing?.items || []), ...(incoming?.items || [])];\n\n \u002F\u002F apply latest result for totalCount\n const totalCount = incoming?.totalCount || existing?.totalCount;\n\n return {\n ...(incoming || existing || {}),\n items,\n totalCount,\n };\n };\n","(","String","offset","}"," (","args","return","Apollo Client Pagination","\u002Fgraphql\u002Fapollo-client-pagination","root","Say, we have ","gql"," response like this and we wan't to have pagination with it. Let's merge it as it specified in ","a","https:\u002F\u002Fwww.apollographql.com\u002Fdocs\u002Freact\u002Fcaching\u002Fcache-field-behavior\u002F#the-merge-function","nofollow","official documentation","We will setup "," with "," to merge incoming data in cache:","We will need merge function ",", which will join results of query and cached data for specific key:","Filter","Number","ItemList","ct-b9abb7","type","InMemoryCache",";","new","\u002F\u002F ..."," ","ct-b5872a","if"," [];"," }","...",2))
\ No newline at end of file
diff --git a/docs/graphql/apollo-client-pagination/index.html b/docs/graphql/apollo-client-pagination/index.html
index 2345fe4..05c96b4 100644
--- a/docs/graphql/apollo-client-pagination/index.html
+++ b/docs/graphql/apollo-client-pagination/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Apollo Client Pagination • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Say, we have gql response like this and we wan't to have pagination with it. Let's merge it as it specified in official documentation"><meta name="head:count" content="3"><link rel="modulepreload" href="/graphql/apollo-client-pagination/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCodeInline.d9bcf614.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseA.c52e44f8.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a aria-current="page" href="/graphql/apollo-client-pagination" class="router-link-active _active_192pu_81 _link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Apollo Client Pagination</h1><article><div><p><!--[-->Say, we have <code><!--[-->gql<!--]--></code> response like this and we wan't to have pagination with it. Let's merge it as it specified in <a href="https://www.apollographql.com/docs/react/caching/cache-field-behavior/#the-merge-function" rel="nofollow" target="_blank"><!--[-->official documentation<!--]--></a><!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>graphql</span></button><!--[--><pre><code><span class="line"><span class="ct-e9af43">query</span><span class="ct-654dd2"> </span><span class="ct-ad782e">listItems</span><span class="ct-654dd2">(</span></span><span class="line"><span class="ct-237419"> </span><span class="ct-2ccaad">filter</span><span class="ct-237419">: </span><span class="ct-b6a8d2">Filter</span><span class="ct-237419">, </span></span><span class="line"><span class="ct-237419"> </span><span class="ct-2ccaad">sort</span><span class="ct-237419">: </span><span class="ct-b6a8d2">String</span><span class="ct-237419">,</span></span><span class="line"><span class="ct-237419"> </span><span class="ct-2ccaad">limit</span><span class="ct-237419">: </span><span class="ct-b6a8d2">Number</span><span class="ct-237419">,</span></span><span class="line"><span class="ct-237419"> </span><span class="ct-2ccaad">offset</span><span class="ct-237419">: </span><span class="ct-b6a8d2">Number</span><span class="ct-237419">,</span></span><span class="line"><span class="ct-654dd2">): </span><span class="ct-ad782e">ItemList</span><span class="ct-654dd2">!</span></span><span class="line"></span><span class="line"><span class="ct-e9af43">input</span><span class="ct-654dd2"> </span><span class="ct-cb1275">Filter</span><span class="ct-654dd2"> {</span></span><span class="line"><span class="ct-237419"> </span><span class="ct-2ccaad">name</span><span class="ct-237419">: </span><span class="ct-b6a8d2">String</span><span class="ct-8f48bb">!</span></span><span class="line"><span class="ct-237419"> </span><span class="ct-2ccaad">type</span><span class="ct-237419">: </span><span class="ct-b6a8d2">String</span><span class="ct-8f48bb">!</span></span><span class="line"><span class="ct-654dd2">}</span></span><span class="line"></span><span class="line"><span class="ct-e9af43">type</span><span class="ct-654dd2"> </span><span class="ct-cb1275">ItemList</span><span class="ct-654dd2"> {</span></span><span class="line"><span class="ct-237419"> </span><span class="ct-2ccaad">items</span><span class="ct-237419">: [</span><span class="ct-b6a8d2">Item</span><span class="ct-8f48bb">!</span><span class="ct-237419">]</span><span class="ct-8f48bb">!</span></span><span class="line"><span class="ct-237419"> </span><span class="ct-2ccaad">totalCount</span><span class="ct-237419">: </span><span class="ct-b6a8d2">Int</span><span class="ct-8f48bb">!</span></span><span class="line"><span class="ct-654dd2">}</span></span></code></pre><!--]--></div><p><!--[-->We will setup <code><!--[-->ApolloClient<!--]--></code> with <code><!--[-->typePolicies<!--]--></code> to merge incoming data in cache:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-e9af43">import</span><span class="ct-654dd2"> { </span><span class="ct-6a8d9e">ApolloClient</span><span class="ct-654dd2">, </span><span class="ct-6a8d9e">InMemoryCache</span><span class="ct-654dd2"> } </span><span class="ct-e9af43">from</span><span class="ct-654dd2"> </span><span class="ct-9cb4e4">'@apollo/client'</span><span class="ct-654dd2">;</span></span><span class="line"></span><span class="line"><span class="ct-2e1fb9">const</span><span class="ct-654dd2"> </span><span class="ct-7982ff">client</span><span class="ct-654dd2"> </span><span class="ct-e9af43">=</span><span class="ct-654dd2"> </span><span class="ct-e9af43">new</span><span class="ct-654dd2"> </span><span class="ct-ad782e">ApolloClient</span><span class="ct-654dd2">({</span></span><span class="line"><span class="ct-654dd2"> </span><span class="ct-5baecc">// ...</span></span><span class="line"><span class="ct-654dd2"> cache: </span><span class="ct-e9af43">new</span><span class="ct-654dd2"> </span><span class="ct-ad782e">InMemoryCache</span><span class="ct-654dd2">({ </span><span class="ct-6a8d9e">typePolicies</span><span class="ct-654dd2"> }),</span></span><span class="line"><span class="ct-654dd2"> </span><span class="ct-5baecc">// ...</span></span><span class="line"><span class="ct-654dd2">});</span></span><span class="line"></span><span class="line"><span class="ct-e9af43">export</span><span class="ct-654dd2"> </span><span class="ct-2e1fb9">const</span><span class="ct-654dd2"> </span><span class="ct-7982ff">typePolicies</span><span class="ct-e9af43">:</span><span class="ct-654dd2"> </span><span class="ct-4f2e82">TypePolicies</span><span class="ct-654dd2"> </span><span class="ct-e9af43">=</span><span class="ct-654dd2"> {</span></span><span class="line"><span class="ct-654dd2"> Query: {</span></span><span class="line"><span class="ct-654dd2"> fields: {</span></span><span class="line"><span class="ct-654dd2"> </span><span class="ct-5baecc">// query name</span></span><span class="line"><span class="ct-654dd2"> listItems: {</span></span><span class="line"><span class="ct-654dd2"> </span><span class="ct-5baecc">// apollo will serialize and use keyArgs as unique</span></span><span class="line"><span class="ct-654dd2"> </span><span class="ct-5baecc">// identifier in cache for every query</span></span><span class="line"><span class="ct-654dd2"> </span><span class="ct-5baecc">// consider choosing the right fields, </span></span><span class="line"><span class="ct-654dd2"> </span><span class="ct-5baecc">// i.e. limit and offset won't work here</span></span><span class="line"><span class="ct-654dd2"> keyArgs: [</span></span><span class="line"><span class="ct-654dd2"> </span><span class="ct-9cb4e4">'sort'</span><span class="ct-654dd2">, </span><span class="ct-5baecc">// primitive type</span></span><span class="line"><span class="ct-654dd2"> </span><span class="ct-9cb4e4">'filter'</span><span class="ct-654dd2">, [</span><span class="ct-9cb4e4">'name'</span><span class="ct-654dd2">, </span><span class="ct-9cb4e4">'type'</span><span class="ct-654dd2">] </span><span class="ct-5baecc">// nested fields of `filter`</span></span><span class="line"><span class="ct-654dd2"> ],</span></span><span class="line"><span class="ct-654dd2"> merge: </span><span class="ct-6a8d9e">mergeItemsWithTotalCount</span><span class="ct-654dd2">,</span></span><span class="line"><span class="ct-654dd2"> },</span></span><span class="line"><span class="ct-654dd2"> }</span></span><span class="line"><span class="ct-654dd2">}</span></span></code></pre><!--]--></div><p><!--[-->We will need merge function <code><!--[-->mergeItemsWithTotalCount<!--]--></code>, which will join results of query and cached data for specific key:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-5baecc">/** merges all sources with { items: unknown[], totalCount: number } */</span></span><span class="line"><span class="ct-9daaf1">const</span><span class="ct-237419"> </span><span class="ct-d8487a">mergeItemsWithTotalCount</span><span class="ct-237419"> </span><span class="ct-8f48bb">=</span><span class="ct-237419"> (</span><span class="ct-2ccaad">existing</span><span class="ct-237419">, </span><span class="ct-2ccaad">incoming</span><span class="ct-237419">, { </span><span class="ct-2ccaad">args</span><span class="ct-237419"> }) </span><span class="ct-9daaf1">=></span><span class="ct-237419"> {</span></span><span class="line"><span class="ct-654dd2"> </span><span class="ct-5baecc">// no existing data</span></span><span class="line"><span class="ct-654dd2"> </span><span class="ct-e9af43">if</span><span class="ct-654dd2"> (</span><span class="ct-e9af43">!</span><span class="ct-6a8d9e">existing</span><span class="ct-654dd2"> </span><span class="ct-e9af43">||</span><span class="ct-654dd2"> </span><span class="ct-e9af43">!</span><span class="ct-6a8d9e">args</span><span class="ct-654dd2">?.</span><span class="ct-6a8d9e">offset</span><span class="ct-654dd2"> </span><span class="ct-e9af43">||</span><span class="ct-654dd2"> </span><span class="ct-6a8d9e">args</span><span class="ct-654dd2">.</span><span class="ct-6a8d9e">offset</span><span class="ct-654dd2"> </span><span class="ct-e9af43"><</span><span class="ct-654dd2"> </span><span class="ct-6a8d9e">existing</span></span><span class="line"><span class="ct-654dd2"> </span><span class="ct-e9af43">return</span><span class="ct-654dd2"> </span><span class="ct-6a8d9e">incoming</span><span class="ct-654dd2"> </span><span class="ct-e9af43">||</span><span class="ct-654dd2"> [];</span></span><span class="line"><span class="ct-654dd2"> }</span></span><span class="line"></span><span class="line"><span class="ct-654dd2"> </span><span class="ct-5baecc">// If hook was called multiple times</span></span><span class="line"><span class="ct-654dd2"> </span><span class="ct-e9af43">if</span><span class="ct-654dd2"> (</span><span class="ct-6a8d9e">existing</span><span class="ct-654dd2">?.</span><span class="ct-6a8d9e">items</span><span class="ct-654dd2">?.</span></span><span class="line"><span class="ct-654dd2"> </span><span class="ct-e9af43">return</span><span class="ct-654dd2"> </span><span class="ct-6a8d9e">existing</span><span class="ct-654dd2"> </span><span class="ct-e9af43">||</span><span class="ct-654dd2"> [];</span></span><span class="line"><span class="ct-654dd2"> }</span></span><span class="line"></span><span class="line"><span class="ct-654dd2"> </span><span class="ct-5baecc">// merge cache and incoming data</span></span><span class="line"><span class="ct-654dd2"> </span><span class="ct-2e1fb9">const</span><span class="ct-654dd2"> </span><span class="ct-7982ff">items</span><span class="ct-654dd2"> </span><span class="ct-e9af43">=</span><span class="ct-654dd2"> [</span><span class="ct-e9af43">...</span><span class="ct-654dd2">(</span><span class="ct-6a8d9e">existing</span><span class="ct-654dd2">?.</span><span class="ct-6a8d9e">items</span><span class="ct-654dd2"> </span><span class="ct-e9af43">||</span><span class="ct-654dd2"> </span></span><span class="line"></span><span class="line"><span class="ct-654dd2"> </span><span class="ct-5baecc">// apply latest result for totalCount</span></span><span class="line"><span class="ct-654dd2"> </span><span class="ct-2e1fb9">const</span><span class="ct-654dd2"> </span><span class="ct-7982ff">totalCount</span><span class="ct-654dd2"> </span><span class="ct-e9af43">=</span><span class="ct-654dd2"> </span><span class="ct-6a8d9e">incoming</span><span class="ct-654dd2">?.</span><span class="ct-6a8d9e">totalCount</span><span class="ct-654dd2"> </span><span class="ct-e9af43">||</span><span class="ct-654dd2"> </span><span class="ct-6a8d9e">existing</span><span class="ct-654dd2">?.</span><span class="ct-6a8d9e">totalCount</span><span class="ct-654dd2">;</span></span><span class="line"></span><span class="line"><span class="ct-654dd2"> </span><span class="ct-e9af43">return</span><span class="ct-654dd2"> {</span></span><span class="line"><span class="ct-654dd2"> </span><span class="ct-e9af43">...</span><span class="ct-654dd2">(</span><span class="ct-6a8d9e">incoming</span><span class="ct-654dd2"> </span><span class="ct-e9af43">||</span><span class="ct-654dd2"> </span></span><span class="line"><span class="ct-654dd2"> </span><span class="ct-6a8d9e">items</span><span class="ct-654dd2">,</span></span><span class="line"><span class="ct-654dd2"> </span><span class="ct-6a8d9e">totalCount</span><span class="ct-654dd2">,</span></span><span class="line"><span class="ct-654dd2"> };</span></span><span class="line"><span class="ct-654dd2"> };</span></span></code></pre><!--]--></div><style>.ct-d8487a{color:#D2A8FF}.ct-9daaf1{color:#FF7B72}.ct-4f2e82{color:#FFA657}.ct-5baecc{color:#8B949E}.ct-7982ff{color:#79C0FF}.ct-2e1fb9{color:#FF7B72}.ct-9cb4e4{color:#A5D6FF}.ct-6a8d9e{color:#C9D1D9}.ct-8f48bb{color:#FF7B72}.ct-cb1275{color:#79C0FF}.ct-b6a8d2{color:#79C0FF}.ct-2ccaad{color:#FFA657}.ct-237419{color:#C9D1D9}.ct-ad782e{color:#D2A8FF}.ct-654dd2{color:#C9D1D9}.ct-e9af43{color:#FF7B72}.light .ct-e9af43{color:#859900}.light .ct-654dd2{color:#657B83}.light .ct-ad782e{color:#268BD2}.light .ct-237419{color:#657B83}.light .ct-2ccaad{color:#657B83}.light .ct-b6a8d2{color:#859900}.light .ct-cb1275{color:#859900}.light .ct-8f48bb{color:#859900}.light .ct-6a8d9e{color:#268BD2}.light .ct-9cb4e4{color:#2AA198}.light .ct-2e1fb9{color:#073642}.light .ct-7982ff{color:#268BD2}.light .ct-5baecc{color:#93A1A1}.light .ct-4f2e82{color:#268BD2}.light .ct-9daaf1{color:#073642}.light .ct-d8487a{color:#268BD2}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/graphql/apollo-client-pagination/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695531125}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a aria-current="page" href="/graphql/apollo-client-pagination" class="router-link-active _active_192pu_81 _link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Apollo Client Pagination</h1><article><div><p><!--[-->Say, we have <code><!--[-->gql<!--]--></code> response like this and we wan't to have pagination with it. Let's merge it as it specified in <a href="https://www.apollographql.com/docs/react/caching/cache-field-behavior/#the-merge-function" rel="nofollow" target="_blank"><!--[-->official documentation<!--]--></a><!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>graphql</span></button><!--[--><pre><code><span class="line"><span class="ct-ac9afb">query</span><span class="ct-7dafdd"> </span><span class="ct-bfd470">listItems</span><span class="ct-7dafdd">(</span></span><span class="line"><span class="ct-20ad43"> </span><span class="ct-89a0ce">filter</span><span class="ct-20ad43">: </span><span class="ct-e6f76e">Filter</span><span class="ct-20ad43">, </span></span><span class="line"><span class="ct-20ad43"> </span><span class="ct-89a0ce">sort</span><span class="ct-20ad43">: </span><span class="ct-e6f76e">String</span><span class="ct-20ad43">,</span></span><span class="line"><span class="ct-20ad43"> </span><span class="ct-89a0ce">limit</span><span class="ct-20ad43">: </span><span class="ct-e6f76e">Number</span><span class="ct-20ad43">,</span></span><span class="line"><span class="ct-20ad43"> </span><span class="ct-89a0ce">offset</span><span class="ct-20ad43">: </span><span class="ct-e6f76e">Number</span><span class="ct-20ad43">,</span></span><span class="line"><span class="ct-7dafdd">): </span><span class="ct-bfd470">ItemList</span><span class="ct-7dafdd">!</span></span><span class="line"></span><span class="line"><span class="ct-ac9afb">input</span><span class="ct-7dafdd"> </span><span class="ct-b9abb7">Filter</span><span class="ct-7dafdd"> {</span></span><span class="line"><span class="ct-20ad43"> </span><span class="ct-89a0ce">name</span><span class="ct-20ad43">: </span><span class="ct-e6f76e">String</span><span class="ct-904dbb">!</span></span><span class="line"><span class="ct-20ad43"> </span><span class="ct-89a0ce">type</span><span class="ct-20ad43">: </span><span class="ct-e6f76e">String</span><span class="ct-904dbb">!</span></span><span class="line"><span class="ct-7dafdd">}</span></span><span class="line"></span><span class="line"><span class="ct-ac9afb">type</span><span class="ct-7dafdd"> </span><span class="ct-b9abb7">ItemList</span><span class="ct-7dafdd"> {</span></span><span class="line"><span class="ct-20ad43"> </span><span class="ct-89a0ce">items</span><span class="ct-20ad43">: [</span><span class="ct-e6f76e">Item</span><span class="ct-904dbb">!</span><span class="ct-20ad43">]</span><span class="ct-904dbb">!</span></span><span class="line"><span class="ct-20ad43"> </span><span class="ct-89a0ce">totalCount</span><span class="ct-20ad43">: </span><span class="ct-e6f76e">Int</span><span class="ct-904dbb">!</span></span><span class="line"><span class="ct-7dafdd">}</span></span></code></pre><!--]--></div><p><!--[-->We will setup <code><!--[-->ApolloClient<!--]--></code> with <code><!--[-->typePolicies<!--]--></code> to merge incoming data in cache:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-ac9afb">import</span><span class="ct-7dafdd"> { </span><span class="ct-aa253b">ApolloClient</span><span class="ct-7dafdd">, </span><span class="ct-aa253b">InMemoryCache</span><span class="ct-7dafdd"> } </span><span class="ct-ac9afb">from</span><span class="ct-7dafdd"> </span><span class="ct-c275b5">'@apollo/client'</span><span class="ct-7dafdd">;</span></span><span class="line"></span><span class="line"><span class="ct-6561fc">const</span><span class="ct-7dafdd"> </span><span class="ct-3aa4d5">client</span><span class="ct-7dafdd"> </span><span class="ct-ac9afb">=</span><span class="ct-7dafdd"> </span><span class="ct-ac9afb">new</span><span class="ct-7dafdd"> </span><span class="ct-bfd470">ApolloClient</span><span class="ct-7dafdd">({</span></span><span class="line"><span class="ct-7dafdd"> </span><span class="ct-1476e6">// ...</span></span><span class="line"><span class="ct-7dafdd"> cache: </span><span class="ct-ac9afb">new</span><span class="ct-7dafdd"> </span><span class="ct-bfd470">InMemoryCache</span><span class="ct-7dafdd">({ </span><span class="ct-aa253b">typePolicies</span><span class="ct-7dafdd"> }),</span></span><span class="line"><span class="ct-7dafdd"> </span><span class="ct-1476e6">// ...</span></span><span class="line"><span class="ct-7dafdd">});</span></span><span class="line"></span><span class="line"><span class="ct-ac9afb">export</span><span class="ct-7dafdd"> </span><span class="ct-6561fc">const</span><span class="ct-7dafdd"> </span><span class="ct-3aa4d5">typePolicies</span><span class="ct-ac9afb">:</span><span class="ct-7dafdd"> </span><span class="ct-aa8127">TypePolicies</span><span class="ct-7dafdd"> </span><span class="ct-ac9afb">=</span><span class="ct-7dafdd"> {</span></span><span class="line"><span class="ct-7dafdd"> Query: {</span></span><span class="line"><span class="ct-7dafdd"> fields: {</span></span><span class="line"><span class="ct-7dafdd"> </span><span class="ct-1476e6">// query name</span></span><span class="line"><span class="ct-7dafdd"> listItems: {</span></span><span class="line"><span class="ct-7dafdd"> </span><span class="ct-1476e6">// apollo will serialize and use keyArgs as unique</span></span><span class="line"><span class="ct-7dafdd"> </span><span class="ct-1476e6">// identifier in cache for every query</span></span><span class="line"><span class="ct-7dafdd"> </span><span class="ct-1476e6">// consider choosing the right fields, </span></span><span class="line"><span class="ct-7dafdd"> </span><span class="ct-1476e6">// i.e. limit and offset won't work here</span></span><span class="line"><span class="ct-7dafdd"> keyArgs: [</span></span><span class="line"><span class="ct-7dafdd"> </span><span class="ct-c275b5">'sort'</span><span class="ct-7dafdd">, </span><span class="ct-1476e6">// primitive type</span></span><span class="line"><span class="ct-7dafdd"> </span><span class="ct-c275b5">'filter'</span><span class="ct-7dafdd">, [</span><span class="ct-c275b5">'name'</span><span class="ct-7dafdd">, </span><span class="ct-c275b5">'type'</span><span class="ct-7dafdd">] </span><span class="ct-1476e6">// nested fields of `filter`</span></span><span class="line"><span class="ct-7dafdd"> ],</span></span><span class="line"><span class="ct-7dafdd"> merge: </span><span class="ct-aa253b">mergeItemsWithTotalCount</span><span class="ct-7dafdd">,</span></span><span class="line"><span class="ct-7dafdd"> },</span></span><span class="line"><span class="ct-7dafdd"> }</span></span><span class="line"><span class="ct-7dafdd">}</span></span></code></pre><!--]--></div><p><!--[-->We will need merge function <code><!--[-->mergeItemsWithTotalCount<!--]--></code>, which will join results of query and cached data for specific key:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-1476e6">/** merges all sources with { items: unknown[], totalCount: number } */</span></span><span class="line"><span class="ct-b5872a">const</span><span class="ct-20ad43"> </span><span class="ct-6af47c">mergeItemsWithTotalCount</span><span class="ct-20ad43"> </span><span class="ct-904dbb">=</span><span class="ct-20ad43"> (</span><span class="ct-89a0ce">existing</span><span class="ct-20ad43">, </span><span class="ct-89a0ce">incoming</span><span class="ct-20ad43">, { </span><span class="ct-89a0ce">args</span><span class="ct-20ad43"> }) </span><span class="ct-b5872a">=></span><span class="ct-20ad43"> {</span></span><span class="line"><span class="ct-7dafdd"> </span><span class="ct-1476e6">// no existing data</span></span><span class="line"><span class="ct-7dafdd"> </span><span class="ct-ac9afb">if</span><span class="ct-7dafdd"> (</span><span class="ct-ac9afb">!</span><span class="ct-aa253b">existing</span><span class="ct-7dafdd"> </span><span class="ct-ac9afb">||</span><span class="ct-7dafdd"> </span><span class="ct-ac9afb">!</span><span class="ct-aa253b">args</span><span class="ct-7dafdd">?.</span><span class="ct-aa253b">offset</span><span class="ct-7dafdd"> </span><span class="ct-ac9afb">||</span><span class="ct-7dafdd"> </span><span class="ct-aa253b">args</span><span class="ct-7dafdd">.</span><span class="ct-aa253b">offset</span><span class="ct-7dafdd"> </span><span class="ct-ac9afb"><</span><span class="ct-7dafdd"> </span><span class="ct-aa253b">existing</span></span><span class="line"><span class="ct-7dafdd"> </span><span class="ct-ac9afb">return</span><span class="ct-7dafdd"> </span><span class="ct-aa253b">incoming</span><span class="ct-7dafdd"> </span><span class="ct-ac9afb">||</span><span class="ct-7dafdd"> [];</span></span><span class="line"><span class="ct-7dafdd"> }</span></span><span class="line"></span><span class="line"><span class="ct-7dafdd"> </span><span class="ct-1476e6">// If hook was called multiple times</span></span><span class="line"><span class="ct-7dafdd"> </span><span class="ct-ac9afb">if</span><span class="ct-7dafdd"> (</span><span class="ct-aa253b">existing</span><span class="ct-7dafdd">?.</span><span class="ct-aa253b">items</span><span class="ct-7dafdd">?.</span></span><span class="line"><span class="ct-7dafdd"> </span><span class="ct-ac9afb">return</span><span class="ct-7dafdd"> </span><span class="ct-aa253b">existing</span><span class="ct-7dafdd"> </span><span class="ct-ac9afb">||</span><span class="ct-7dafdd"> [];</span></span><span class="line"><span class="ct-7dafdd"> }</span></span><span class="line"></span><span class="line"><span class="ct-7dafdd"> </span><span class="ct-1476e6">// merge cache and incoming data</span></span><span class="line"><span class="ct-7dafdd"> </span><span class="ct-6561fc">const</span><span class="ct-7dafdd"> </span><span class="ct-3aa4d5">items</span><span class="ct-7dafdd"> </span><span class="ct-ac9afb">=</span><span class="ct-7dafdd"> [</span><span class="ct-ac9afb">...</span><span class="ct-7dafdd">(</span><span class="ct-aa253b">existing</span><span class="ct-7dafdd">?.</span><span class="ct-aa253b">items</span><span class="ct-7dafdd"> </span><span class="ct-ac9afb">||</span><span class="ct-7dafdd"> </span></span><span class="line"></span><span class="line"><span class="ct-7dafdd"> </span><span class="ct-1476e6">// apply latest result for totalCount</span></span><span class="line"><span class="ct-7dafdd"> </span><span class="ct-6561fc">const</span><span class="ct-7dafdd"> </span><span class="ct-3aa4d5">totalCount</span><span class="ct-7dafdd"> </span><span class="ct-ac9afb">=</span><span class="ct-7dafdd"> </span><span class="ct-aa253b">incoming</span><span class="ct-7dafdd">?.</span><span class="ct-aa253b">totalCount</span><span class="ct-7dafdd"> </span><span class="ct-ac9afb">||</span><span class="ct-7dafdd"> </span><span class="ct-aa253b">existing</span><span class="ct-7dafdd">?.</span><span class="ct-aa253b">totalCount</span><span class="ct-7dafdd">;</span></span><span class="line"></span><span class="line"><span class="ct-7dafdd"> </span><span class="ct-ac9afb">return</span><span class="ct-7dafdd"> {</span></span><span class="line"><span class="ct-7dafdd"> </span><span class="ct-ac9afb">...</span><span class="ct-7dafdd">(</span><span class="ct-aa253b">incoming</span><span class="ct-7dafdd"> </span><span class="ct-ac9afb">||</span><span class="ct-7dafdd"> </span></span><span class="line"><span class="ct-7dafdd"> </span><span class="ct-aa253b">items</span><span class="ct-7dafdd">,</span></span><span class="line"><span class="ct-7dafdd"> </span><span class="ct-aa253b">totalCount</span><span class="ct-7dafdd">,</span></span><span class="line"><span class="ct-7dafdd"> };</span></span><span class="line"><span class="ct-7dafdd"> };</span></span></code></pre><!--]--></div><style>.ct-6af47c{color:#D2A8FF}.ct-b5872a{color:#FF7B72}.ct-aa8127{color:#FFA657}.ct-1476e6{color:#8B949E}.ct-3aa4d5{color:#79C0FF}.ct-6561fc{color:#FF7B72}.ct-c275b5{color:#A5D6FF}.ct-aa253b{color:#C9D1D9}.ct-904dbb{color:#FF7B72}.ct-b9abb7{color:#79C0FF}.ct-e6f76e{color:#79C0FF}.ct-89a0ce{color:#FFA657}.ct-20ad43{color:#C9D1D9}.ct-bfd470{color:#D2A8FF}.ct-7dafdd{color:#C9D1D9}.ct-ac9afb{color:#FF7B72}.light .ct-ac9afb{color:#859900}.light .ct-7dafdd{color:#657B83}.light .ct-bfd470{color:#268BD2}.light .ct-20ad43{color:#657B83}.light .ct-89a0ce{color:#657B83}.light .ct-e6f76e{color:#859900}.light .ct-b9abb7{color:#859900}.light .ct-904dbb{color:#859900}.light .ct-aa253b{color:#268BD2}.light .ct-c275b5{color:#2AA198}.light .ct-6561fc{color:#073642}.light .ct-3aa4d5{color:#268BD2}.light .ct-1476e6{color:#93A1A1}.light .ct-aa8127{color:#268BD2}.light .ct-b5872a{color:#073642}.light .ct-6af47c{color:#268BD2}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/graphql/apollo-client-pagination/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697992577}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/graphql/refresh-token-in-apollo-client/_payload.js b/docs/graphql/refresh-token-in-apollo-client/_payload.js
index e4fa66b..ee116ba 100644
--- a/docs/graphql/refresh-token-in-apollo-client/_payload.js
+++ b/docs/graphql/refresh-token-in-apollo-client/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av,aw,ax,ay,az,aA,aB,aC,aD,aE,aF,aG,aH,aI,aJ,aK,aL,aM,aN,aO,aP,aQ,aR,aS,aT,aU,aV,aW,aX,aY,aZ,a_,a$,ba,bb,bc,bd,be,bf,bg,bh,bi,bj,bk,bl,bm,bn,bo,bp,bq,br,bs,bt,bu,bv,bw,bx,by,bz,bA,bB){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:aN,_path:aO}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-4TVlzFXfLi":{_path:aO,_dir:"graphql",_draft:at,_partial:at,_locale:"en",_empty:at,title:aN,description:au,excerpt:{type:aP,children:[{type:a,tag:ag,props:{},children:[{type:c,value:au}]},{type:a,tag:E,props:{code:av,language:ah},children:[{type:a,tag:ai,props:{},children:[{type:a,tag:E,props:{__ignoreMap:Y},children:[{type:c,value:av}]}]}]},{type:a,tag:ag,props:{},children:[{type:c,value:aQ},{type:a,tag:aj,props:{},children:[{type:c,value:ak}]},{type:c,value:aR},{type:a,tag:aj,props:{},children:[{type:c,value:Z}]},{type:c,value:aS}]},{type:a,tag:E,props:{code:aw,language:ah},children:[{type:a,tag:ai,props:{},children:[{type:a,tag:E,props:{__ignoreMap:Y},children:[{type:c,value:aw}]}]}]}]},body:{type:aP,children:[{type:a,tag:ag,props:{},children:[{type:c,value:au}]},{type:a,tag:E,props:{code:av,language:ah},children:[{type:a,tag:ai,props:{},children:[{type:a,tag:E,props:{__ignoreMap:Y},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:aT}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"createApolloClient"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:aU}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:al}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:G},children:[{type:c,value:aV}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:S},children:[{type:c,value:aW}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:" { "}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:aX}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:" },"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:ax},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:N}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:" { "}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:ay}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:az}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aY}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:aA}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:aZ}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" \u003E,"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:l}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"ApolloClientBase"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:a_}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:a$}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" link: "}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"ApolloLink"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"from"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"(["}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:a$}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:S},children:[{type:c,value:"setContext"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:"_"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:", { "}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:" }) "}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" headers: {"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aW}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"(),"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" },"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ba}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bb}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"HttpLink"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:a_}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" uri: "}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:aU}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" fetch: "}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:bc}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:al}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:am}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"),"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bb}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" ]),"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bd}]}]}]}]}]},{type:a,tag:ag,props:{},children:[{type:c,value:aQ},{type:a,tag:aj,props:{},children:[{type:c,value:ak}]},{type:c,value:aR},{type:a,tag:aj,props:{},children:[{type:c,value:Z}]},{type:c,value:aS}]},{type:a,tag:E,props:{code:aw,language:ah},children:[{type:a,tag:ai,props:{},children:[{type:a,tag:E,props:{__ignoreMap:Y},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F** Global singleton for refreshing promise *\u002F"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:k},children:[{type:c,value:"let"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:ax},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:G},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aB}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:aA}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:G},children:[{type:c,value:an}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:X},children:[{type:c,value:an}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:P}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F** Checks if GraphQl errors has unauthenticated error *\u002F"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:s},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:S},children:[{type:c,value:ak}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:Q},children:[{type:c,value:be}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\u003C{ "}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"?:"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:Q},children:[{type:c,value:"ErrorCode"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:" }\u003E)"}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:l}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:G},children:[{type:c,value:be}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"isArray"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:aC}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"some"}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"error"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"status"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:bf}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:"ct-86c70f"},children:[{type:c,value:"401"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:az}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F Distinguish unauthorized error here"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bd}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F** Detects if customFetch is sending refresh request *\u002F"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:s},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:S},children:[{type:c,value:Z}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:Q},children:[{type:c,value:bg}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"try"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:$},children:[{type:c,value:bh}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:G},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aa}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:bh}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"operationName"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:bf}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:ab},children:[{type:c,value:"'RefreshToken'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:P}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" } "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ao}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"e"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aD}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:X},children:[{type:c,value:"false"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:P}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"};"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F** fetchWithTokenRefresh is a custom fetch function with token refresh for apollo *\u002F"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:aT}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:$},children:[{type:c,value:bc}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:v}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" ("}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:al}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bi}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:aV}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bi}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" { accessToken: "}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:az}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aE}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aY}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:aA}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:X},children:[{type:c,value:aZ}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"\u003E"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" ) "}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:l}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:ap}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:am}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:Q},children:[{type:c,value:bg}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aF}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:Q},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:Q},children:[{type:c,value:"Response"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aB}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F already refreshing token, wait for it and then use refreshed token"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F or use empty authorization if refreshing failed"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:Z}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:aC}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:aC}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" ("}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"as"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:ax},children:[{type:c,value:"Record"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:G},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:am}]},{type:a,tag:b,props:{class:G},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"\u003E)?."}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:aX}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" ) {"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:$},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:bj}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:M}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aG}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ao}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bk}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:bl}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:ab},children:[{type:c,value:bm}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:P}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bn}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aH}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" authorization: "}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" };"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aI}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ap}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:am}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:")."}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aJ}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:J}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:$},children:[{type:c,value:c}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:bj}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:bo}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:c}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bp}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:$},children:[{type:c,value:ae}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:v}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F check for unauthorized errors, if not present, just return result"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:Z}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ad}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ae}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aK}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ad}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ak}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ae}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aF}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" ) {"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:bo}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" ok: "}]},{type:a,tag:b,props:{class:X},children:[{type:c,value:"true"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ae}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aE}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:l}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:"unknown"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bq}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:as}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:af}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:as}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ae}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aa}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:br}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:c}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aE}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:l}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bq}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:as}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:af}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:as}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:c}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aa}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:br}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ba}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bs}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F If unauthorized, refresh token and try again"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aD}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"()"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:bt}]},{type:a,tag:b,props:{class:S},children:[{type:c,value:aJ}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:aL}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aF}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:Q},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aB}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:X},children:[{type:c,value:an}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:P}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:aL}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aK}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ay}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aD}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:af}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:bu}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:G},children:[{type:c,value:bv}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:ab},children:[{type:c,value:bw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aa}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:aL}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aK}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ay}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:P}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" })"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bt}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ao}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bk}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:X},children:[{type:c,value:an}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:P}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F can't refresh token. logging out"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:al}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bp}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:bu}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:G},children:[{type:c,value:bv}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:ab},children:[{type:c,value:bw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aa}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aM}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bs}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F success or any non-auth error"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:M}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:aG}]},{type:a,tag:b,props:{class:S},children:[{type:c,value:aJ}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F wait for other request's refreshing query to finish, when retry"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aI}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ap}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bx}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:by}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:af}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aH}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bz}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bA}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aM}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" })"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aG}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ao}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:bl}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aI}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ap}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bx}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:by}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:af}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aH}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bz}]},{type:a,tag:b,props:{class:ab},children:[{type:c,value:bm}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bA}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aM}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bn}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" });"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" };"}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-529b21{color:#A5D6FF}.ct-6e8360{color:#79C0FF}.ct-86c70f{color:#79C0FF}.ct-a8c405{color:#FFA657}.ct-d14a0c{color:#79C0FF}.ct-ad26cc{color:#C9D1D9}.ct-0c48f8{color:#8B949E}.ct-d2ac08{color:#FFA657}.ct-b4fcca{color:#FF7B72}.ct-448587{color:#D2A8FF}.ct-a52df4{color:#79C0FF}.ct-1b1d52{color:#79C0FF}.ct-9b0fbf{color:#FF7B72}.ct-ccde27{color:#FFA657}.ct-e3bda2{color:#C9D1D9}.ct-fffc71{color:#D2A8FF}.ct-5f37b9{color:#FF7B72}.ct-1fdfa4{color:#C9D1D9}.ct-882cc3{color:#FF7B72}.light .ct-882cc3{color:#859900}.light .ct-1fdfa4{color:#657B83}.light .ct-5f37b9{color:#073642}.light .ct-fffc71{color:#268BD2}.light .ct-e3bda2{color:#657B83}.light .ct-ccde27{color:#657B83}.light .ct-9b0fbf{color:#859900}.light .ct-1b1d52{color:#859900}.light .ct-a52df4{color:#859900}.light .ct-448587{color:#268BD2}.light .ct-b4fcca{color:#073642}.light .ct-d2ac08{color:#268BD2}.light .ct-0c48f8{color:#93A1A1}.light .ct-ad26cc{color:#268BD2}.light .ct-d14a0c{color:#B58900}.light .ct-a8c405{color:#268BD2}.light .ct-86c70f{color:#D33682}.light .ct-6e8360{color:#268BD2}.light .ct-529b21{color:#2AA198}"}]}],toc:{title:Y,searchDepth:bB,depth:bB,links:[]}},_type:"markdown",_id:"content:GraphQL:Refresh token in Apollo client.md",_source:"content",_file:"GraphQL\u002FRefresh token in Apollo client.md",_extension:"md"}},prerenderedAt:1703695531198}}("element","span","text","ct-1fdfa4","line"," ","ct-e3bda2","ct-882cc3","ct-ad26cc","ct-fffc71","ct-5f37b9","=\u003E","(","ct-9b0fbf",":","ct-0c48f8"," ","ct-ccde27","ct-b4fcca"," {","string","=",","," "," (","ct-1b1d52"," ",".","options","return","code"," ","ct-a52df4"," ","const","async"," ","...","refreshingPromise","\u003C","headers",";","ct-a8c405"," () ","ct-448587","refreshToken","Promise",") ","new","ct-d14a0c","","isRefreshRequestOptions","errors","ct-6e8360",");","ct-529b21","!","||","json"," ","p","typescript","pre","code-inline","hasUnauthorizedError","logout",", ","null","catch","uri","if","newAccessToken","resolve",false,"If your GraphQL api needs token refresh option, you can pass custom fetch function for Apollo Client.","export const createApolloClient = (\n url: string,\n logout: () =\u003E void,\n getAuthorizationData: () =\u003E { authorization: string },\n refreshToken: () =\u003E Promise\u003C\n { accessToken: string; refreshToken: string } | undefined\n \u003E,\n) =\u003E\n new ApolloClientBase({\n \u002F\u002F ...other options\n link: ApolloLink.from([\n \u002F\u002F ...other options\n setContext(async (_, { headers }) =\u003E {\n return {\n headers: {\n ...headers,\n ...getAuthorizationData(),\n },\n };\n }),\n new HttpLink({\n uri: url,\n fetch: fetchWithTokenRefresh(logout, refreshToken),\n }),\n ]),\n });\n","\u002F** Global singleton for refreshing promise *\u002F\nlet refreshingPromise: Promise\u003Cstring\u003E | null = null;\n\n\u002F** Checks if GraphQl errors has unauthenticated error *\u002F\nconst hasUnauthorizedError = (errors: Array\u003C{ code?: ErrorCode }\u003E): boolean =\u003E\n Array.isArray(errors) &&\n errors.some(error =\u003E {\n return error.status === 401; \u002F\u002F Distinguish unauthorized error here\n });\n\n\u002F** Detects if customFetch is sending refresh request *\u002F\nconst isRefreshRequestOptions = (options: RequestInit) =\u003E {\n try {\n const body = JSON.parse(options?.body as string);\n return body.operationName === 'RefreshToken';\n } catch (e) {\n return false;\n }\n};\n\n\u002F** fetchWithTokenRefresh is a custom fetch function with token refresh for apollo *\u002F\nexport const fetchWithTokenRefresh =\n (\n logout: () =\u003E void,\n refreshToken: () =\u003E Promise\u003C\n { accessToken: string; refreshToken: string } | undefined\n \u003E,\n ) =\u003E\n async (uri: string, options: RequestInit): Promise\u003CResponse\u003E =\u003E {\n \u002F\u002F already refreshing token, wait for it and then use refreshed token\n \u002F\u002F or use empty authorization if refreshing failed\n if (\n !isRefreshRequestOptions(options) &&\n refreshingPromise &&\n (options.headers as Record\u003Cstring, string\u003E)?.authorization\n ) {\n const newAccessToken = await refreshingPromise\n .catch(() =\u003E {\n \u002F\u002F refreshing token from other request failed, retry without authorization\n return '';\n });\n \n options.headers = {\n ...(options.headers || {}),\n authorization: newAccessToken,\n };\n }\n\n return fetch(uri, options).then(async response =\u003E {\n const text = await response.text();\n const json = JSON.parse(text);\n\n \u002F\u002F check for unauthorized errors, if not present, just return result\n if (\n isRefreshRequestOptions(options) ||\n !json?.errors ||\n !Array.isArray(json.errors) ||\n !hasUnauthorizedError(json.errors)\n ) {\n return {\n ...response,\n ok: true,\n json: async () =\u003E\n new Promise\u003Cunknown\u003E(resolve =\u003E {\n resolve(json);\n }),\n text: async () =\u003E\n new Promise\u003Cstring\u003E(resolve =\u003E {\n resolve(text);\n }),\n };\n }\n\n \u002F\u002F If unauthorized, refresh token and try again\n if (!refreshingPromise) {\n refreshingPromise = refreshToken()\n .then(async (tokens): Promise\u003Cstring\u003E =\u003E {\n refreshingPromise = null;\n\n if (!tokens?.accessToken) {\n throw new Error('Session expired');\n }\n\n return tokens?.accessToken;\n })\n .catch(() =\u003E {\n refreshingPromise = null;\n\n \u002F\u002F can't refresh token. logging out\n logout();\n throw new Error('Session expired');\n });\n }\n\n \u002F\u002F success or any non-auth error\n return refreshingPromise\n .then(async (newAccessToken: string) =\u003E {\n \u002F\u002F wait for other request's refreshing query to finish, when retry\n\n return fetch(uri, {\n ...options,\n headers: {\n ...(options.headers || {}),\n authorization: newAccessToken,\n },\n });\n })\n .catch(async () =\u003E {\n \u002F\u002F refreshing token from other request failed, retry without authorization\n\n return fetch(uri, {\n ...options,\n headers: {\n ...(options.headers || {}),\n authorization: '',\n },\n });\n });\n });\n };\n\n","ct-d2ac08","accessToken","; ","|","\u003E ","&&",") {",": ",")"," ."," {}),","fetch","then","?.","tokens"," });","Refresh Token In Apollo Client","\u002Fgraphql\u002Frefresh-token-in-apollo-client","root","Custom fetch function for this request. You should tune "," and\n"," to match your api.","export","url","void","getAuthorizationData","authorization"," } ","undefined","({","\u002F\u002F ...other options"," };"," }),","fetchWithTokenRefresh"," });","Array","===","RequestInit","body",": () ","await","(() ","\u002F\u002F refreshing token from other request failed, retry without authorization","''"," });","response","();","\u003E("," }),"," }"," .","throw","Error","'Session expired'",", {"," headers: {"," authorization: "," },",2))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av,aw,ax,ay,az,aA,aB,aC,aD,aE,aF,aG,aH,aI,aJ,aK,aL,aM,aN,aO,aP,aQ,aR,aS,aT,aU,aV,aW,aX,aY,aZ,a_,a$,ba,bb,bc,bd,be,bf,bg,bh,bi,bj,bk,bl,bm,bn,bo,bp,bq,br,bs,bt,bu,bv,bw,bx,by,bz,bA,bB){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:aN,_path:aO}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-4TVlzFXfLi":{_path:aO,_dir:"graphql",_draft:at,_partial:at,_locale:"en",_empty:at,title:aN,description:au,excerpt:{type:aP,children:[{type:a,tag:ag,props:{},children:[{type:c,value:au}]},{type:a,tag:E,props:{code:av,language:ah},children:[{type:a,tag:ai,props:{},children:[{type:a,tag:E,props:{__ignoreMap:Y},children:[{type:c,value:av}]}]}]},{type:a,tag:ag,props:{},children:[{type:c,value:aQ},{type:a,tag:aj,props:{},children:[{type:c,value:ak}]},{type:c,value:aR},{type:a,tag:aj,props:{},children:[{type:c,value:Z}]},{type:c,value:aS}]},{type:a,tag:E,props:{code:aw,language:ah},children:[{type:a,tag:ai,props:{},children:[{type:a,tag:E,props:{__ignoreMap:Y},children:[{type:c,value:aw}]}]}]}]},body:{type:aP,children:[{type:a,tag:ag,props:{},children:[{type:c,value:au}]},{type:a,tag:E,props:{code:av,language:ah},children:[{type:a,tag:ai,props:{},children:[{type:a,tag:E,props:{__ignoreMap:Y},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:aT}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"createApolloClient"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:aU}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:al}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:G},children:[{type:c,value:aV}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:S},children:[{type:c,value:aW}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:" { "}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:aX}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:" },"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:ax},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:N}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:" { "}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:ay}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:az}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aY}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:aA}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:aZ}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" \u003E,"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:l}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"ApolloClientBase"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:a_}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:a$}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" link: "}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"ApolloLink"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"from"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"(["}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:a$}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:S},children:[{type:c,value:"setContext"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:"_"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:", { "}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:" }) "}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" headers: {"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aW}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"(),"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" },"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ba}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bb}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"HttpLink"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:a_}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" uri: "}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:aU}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" fetch: "}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:bc}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:al}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:am}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"),"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bb}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" ]),"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bd}]}]}]}]}]},{type:a,tag:ag,props:{},children:[{type:c,value:aQ},{type:a,tag:aj,props:{},children:[{type:c,value:ak}]},{type:c,value:aR},{type:a,tag:aj,props:{},children:[{type:c,value:Z}]},{type:c,value:aS}]},{type:a,tag:E,props:{code:aw,language:ah},children:[{type:a,tag:ai,props:{},children:[{type:a,tag:E,props:{__ignoreMap:Y},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F** Global singleton for refreshing promise *\u002F"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:k},children:[{type:c,value:"let"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:ax},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:G},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aB}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:aA}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:G},children:[{type:c,value:an}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:X},children:[{type:c,value:an}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:P}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F** Checks if GraphQl errors has unauthenticated error *\u002F"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:s},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:S},children:[{type:c,value:ak}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:Q},children:[{type:c,value:be}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\u003C{ "}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"?:"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:Q},children:[{type:c,value:"ErrorCode"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:" }\u003E)"}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:l}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:G},children:[{type:c,value:be}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"isArray"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:aC}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"some"}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"error"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"status"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:bf}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:"ct-dd29d5"},children:[{type:c,value:"401"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:az}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F Distinguish unauthorized error here"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bd}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F** Detects if customFetch is sending refresh request *\u002F"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:s},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:S},children:[{type:c,value:Z}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:Q},children:[{type:c,value:bg}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"try"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:$},children:[{type:c,value:bh}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:G},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aa}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:bh}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"operationName"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:bf}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:ab},children:[{type:c,value:"'RefreshToken'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:P}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" } "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ao}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"e"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aD}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:X},children:[{type:c,value:"false"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:P}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"};"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F** fetchWithTokenRefresh is a custom fetch function with token refresh for apollo *\u002F"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:aT}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:$},children:[{type:c,value:bc}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:v}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" ("}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:al}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bi}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:aV}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bi}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" { accessToken: "}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:az}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aE}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aY}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:aA}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:X},children:[{type:c,value:aZ}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"\u003E"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" ) "}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:l}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:ap}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:am}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:Q},children:[{type:c,value:bg}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aF}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:Q},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:Q},children:[{type:c,value:"Response"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aB}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F already refreshing token, wait for it and then use refreshed token"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F or use empty authorization if refreshing failed"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:Z}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:aC}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:aC}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" ("}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"as"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:ax},children:[{type:c,value:"Record"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:G},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:am}]},{type:a,tag:b,props:{class:G},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"\u003E)?."}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:aX}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" ) {"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:$},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:bj}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:M}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aG}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ao}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bk}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:bl}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:ab},children:[{type:c,value:bm}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:P}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bn}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aH}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" authorization: "}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" };"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aI}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ap}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:am}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:")."}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aJ}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:J}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:$},children:[{type:c,value:c}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:bj}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:bo}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:c}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bp}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:$},children:[{type:c,value:ae}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:v}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F check for unauthorized errors, if not present, just return result"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:Z}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ad}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ae}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aK}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ad}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ak}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ae}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aF}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" ) {"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:bo}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" ok: "}]},{type:a,tag:b,props:{class:X},children:[{type:c,value:"true"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ae}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aE}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:l}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:"unknown"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bq}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:as}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:af}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:as}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ae}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aa}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:br}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:c}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aE}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:l}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:bq}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:as}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:af}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:as}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:c}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aa}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:br}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ba}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bs}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F If unauthorized, refresh token and try again"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aD}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"()"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:bt}]},{type:a,tag:b,props:{class:S},children:[{type:c,value:aJ}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:aL}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aF}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:Q},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aB}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:X},children:[{type:c,value:an}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:P}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:aL}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aK}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ay}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aD}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:af}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:bu}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:G},children:[{type:c,value:bv}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:ab},children:[{type:c,value:bw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aa}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" }"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:aL}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aK}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ay}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:P}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" })"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bt}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ao}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bk}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:X},children:[{type:c,value:an}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:P}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F can't refresh token. logging out"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:al}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bp}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:bu}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:G},children:[{type:c,value:bv}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:ab},children:[{type:c,value:bw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aa}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aM}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bs}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F success or any non-auth error"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:M}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:aG}]},{type:a,tag:b,props:{class:S},children:[{type:c,value:aJ}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F wait for other request's refreshing query to finish, when retry"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aI}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ap}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bx}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:by}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:af}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aH}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bz}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bA}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aM}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" })"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aG}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ao}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:bl}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aI}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ap}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bx}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:by}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:af}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aH}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bz}]},{type:a,tag:b,props:{class:ab},children:[{type:c,value:bm}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bA}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aM}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bn}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" });"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" };"}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-1451a3{color:#A5D6FF}.ct-53ce96{color:#79C0FF}.ct-dd29d5{color:#79C0FF}.ct-998e75{color:#FFA657}.ct-c909fd{color:#79C0FF}.ct-e74100{color:#C9D1D9}.ct-b7707f{color:#8B949E}.ct-21f98f{color:#FFA657}.ct-74652a{color:#FF7B72}.ct-95749a{color:#D2A8FF}.ct-b5b795{color:#79C0FF}.ct-51c055{color:#79C0FF}.ct-75053d{color:#FF7B72}.ct-8a16f8{color:#FFA657}.ct-009fff{color:#C9D1D9}.ct-c3df2f{color:#D2A8FF}.ct-341544{color:#FF7B72}.ct-43d640{color:#C9D1D9}.ct-3b9dab{color:#FF7B72}.light .ct-3b9dab{color:#859900}.light .ct-43d640{color:#657B83}.light .ct-341544{color:#073642}.light .ct-c3df2f{color:#268BD2}.light .ct-009fff{color:#657B83}.light .ct-8a16f8{color:#657B83}.light .ct-75053d{color:#859900}.light .ct-51c055{color:#859900}.light .ct-b5b795{color:#859900}.light .ct-95749a{color:#268BD2}.light .ct-74652a{color:#073642}.light .ct-21f98f{color:#268BD2}.light .ct-b7707f{color:#93A1A1}.light .ct-e74100{color:#268BD2}.light .ct-c909fd{color:#B58900}.light .ct-998e75{color:#268BD2}.light .ct-dd29d5{color:#D33682}.light .ct-53ce96{color:#268BD2}.light .ct-1451a3{color:#2AA198}"}]}],toc:{title:Y,searchDepth:bB,depth:bB,links:[]}},_type:"markdown",_id:"content:GraphQL:Refresh token in Apollo client.md",_source:"content",_file:"GraphQL\u002FRefresh token in Apollo client.md",_extension:"md"}},prerenderedAt:1703697992640}}("element","span","text","ct-43d640","line"," ","ct-009fff","ct-3b9dab","ct-e74100","ct-c3df2f","ct-341544","=\u003E","(","ct-75053d",":","ct-b7707f"," ","ct-8a16f8","ct-74652a"," {","string","=",","," "," (","ct-51c055"," ",".","options","return","code"," ","ct-b5b795"," ","const","async"," ","...","refreshingPromise","\u003C","headers",";","ct-998e75"," () ","ct-95749a","refreshToken","Promise",") ","new","ct-c909fd","","isRefreshRequestOptions","errors","ct-53ce96",");","ct-1451a3","!","||","json"," ","p","typescript","pre","code-inline","hasUnauthorizedError","logout",", ","null","catch","uri","if","newAccessToken","resolve",false,"If your GraphQL api needs token refresh option, you can pass custom fetch function for Apollo Client.","export const createApolloClient = (\n url: string,\n logout: () =\u003E void,\n getAuthorizationData: () =\u003E { authorization: string },\n refreshToken: () =\u003E Promise\u003C\n { accessToken: string; refreshToken: string } | undefined\n \u003E,\n) =\u003E\n new ApolloClientBase({\n \u002F\u002F ...other options\n link: ApolloLink.from([\n \u002F\u002F ...other options\n setContext(async (_, { headers }) =\u003E {\n return {\n headers: {\n ...headers,\n ...getAuthorizationData(),\n },\n };\n }),\n new HttpLink({\n uri: url,\n fetch: fetchWithTokenRefresh(logout, refreshToken),\n }),\n ]),\n });\n","\u002F** Global singleton for refreshing promise *\u002F\nlet refreshingPromise: Promise\u003Cstring\u003E | null = null;\n\n\u002F** Checks if GraphQl errors has unauthenticated error *\u002F\nconst hasUnauthorizedError = (errors: Array\u003C{ code?: ErrorCode }\u003E): boolean =\u003E\n Array.isArray(errors) &&\n errors.some(error =\u003E {\n return error.status === 401; \u002F\u002F Distinguish unauthorized error here\n });\n\n\u002F** Detects if customFetch is sending refresh request *\u002F\nconst isRefreshRequestOptions = (options: RequestInit) =\u003E {\n try {\n const body = JSON.parse(options?.body as string);\n return body.operationName === 'RefreshToken';\n } catch (e) {\n return false;\n }\n};\n\n\u002F** fetchWithTokenRefresh is a custom fetch function with token refresh for apollo *\u002F\nexport const fetchWithTokenRefresh =\n (\n logout: () =\u003E void,\n refreshToken: () =\u003E Promise\u003C\n { accessToken: string; refreshToken: string } | undefined\n \u003E,\n ) =\u003E\n async (uri: string, options: RequestInit): Promise\u003CResponse\u003E =\u003E {\n \u002F\u002F already refreshing token, wait for it and then use refreshed token\n \u002F\u002F or use empty authorization if refreshing failed\n if (\n !isRefreshRequestOptions(options) &&\n refreshingPromise &&\n (options.headers as Record\u003Cstring, string\u003E)?.authorization\n ) {\n const newAccessToken = await refreshingPromise\n .catch(() =\u003E {\n \u002F\u002F refreshing token from other request failed, retry without authorization\n return '';\n });\n \n options.headers = {\n ...(options.headers || {}),\n authorization: newAccessToken,\n };\n }\n\n return fetch(uri, options).then(async response =\u003E {\n const text = await response.text();\n const json = JSON.parse(text);\n\n \u002F\u002F check for unauthorized errors, if not present, just return result\n if (\n isRefreshRequestOptions(options) ||\n !json?.errors ||\n !Array.isArray(json.errors) ||\n !hasUnauthorizedError(json.errors)\n ) {\n return {\n ...response,\n ok: true,\n json: async () =\u003E\n new Promise\u003Cunknown\u003E(resolve =\u003E {\n resolve(json);\n }),\n text: async () =\u003E\n new Promise\u003Cstring\u003E(resolve =\u003E {\n resolve(text);\n }),\n };\n }\n\n \u002F\u002F If unauthorized, refresh token and try again\n if (!refreshingPromise) {\n refreshingPromise = refreshToken()\n .then(async (tokens): Promise\u003Cstring\u003E =\u003E {\n refreshingPromise = null;\n\n if (!tokens?.accessToken) {\n throw new Error('Session expired');\n }\n\n return tokens?.accessToken;\n })\n .catch(() =\u003E {\n refreshingPromise = null;\n\n \u002F\u002F can't refresh token. logging out\n logout();\n throw new Error('Session expired');\n });\n }\n\n \u002F\u002F success or any non-auth error\n return refreshingPromise\n .then(async (newAccessToken: string) =\u003E {\n \u002F\u002F wait for other request's refreshing query to finish, when retry\n\n return fetch(uri, {\n ...options,\n headers: {\n ...(options.headers || {}),\n authorization: newAccessToken,\n },\n });\n })\n .catch(async () =\u003E {\n \u002F\u002F refreshing token from other request failed, retry without authorization\n\n return fetch(uri, {\n ...options,\n headers: {\n ...(options.headers || {}),\n authorization: '',\n },\n });\n });\n });\n };\n\n","ct-21f98f","accessToken","; ","|","\u003E ","&&",") {",": ",")"," ."," {}),","fetch","then","?.","tokens"," });","Refresh Token In Apollo Client","\u002Fgraphql\u002Frefresh-token-in-apollo-client","root","Custom fetch function for this request. You should tune "," and\n"," to match your api.","export","url","void","getAuthorizationData","authorization"," } ","undefined","({","\u002F\u002F ...other options"," };"," }),","fetchWithTokenRefresh"," });","Array","===","RequestInit","body",": () ","await","(() ","\u002F\u002F refreshing token from other request failed, retry without authorization","''"," });","response","();","\u003E("," }),"," }"," .","throw","Error","'Session expired'",", {"," headers: {"," authorization: "," },",2))
\ No newline at end of file
diff --git a/docs/graphql/refresh-token-in-apollo-client/index.html b/docs/graphql/refresh-token-in-apollo-client/index.html
index fa83d09..4ebf7bf 100644
--- a/docs/graphql/refresh-token-in-apollo-client/index.html
+++ b/docs/graphql/refresh-token-in-apollo-client/index.html
@@ -2,6 +2,6 @@
<html data-head-attrs="">
<head><title>Refresh Token In Apollo Client • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="If your GraphQL api needs token refresh option, you can pass custom fetch function for Apollo Client."><meta name="head:count" content="3"><link rel="modulepreload" href="/graphql/refresh-token-in-apollo-client/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCodeInline.d9bcf614.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a aria-current="page" href="/graphql/refresh-token-in-apollo-client" class="router-link-active _active_192pu_81 _link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Refresh Token In Apollo Client</h1><article><div><p><!--[-->If your GraphQL api needs token refresh option, you can pass custom fetch function for Apollo Client.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-882cc3">export</span><span class="ct-1fdfa4"> </span><span class="ct-5f37b9">const</span><span class="ct-1fdfa4"> </span><span class="ct-fffc71">createApolloClient</span><span class="ct-1fdfa4"> </span><span class="ct-882cc3">=</span><span class="ct-1fdfa4"> (</span></span><span class="line"><span class="ct-e3bda2"> </span><span class="ct-ccde27">url</span><span class="ct-9b0fbf">:</span><span class="ct-e3bda2"> </span><span class="ct-1b1d52">string</span><span class="ct-e3bda2">,</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-fffc71">logout</span><span class="ct-882cc3">:</span><span class="ct-1fdfa4"> () </span><span class="ct-5f37b9">=></span><span class="ct-1fdfa4"> </span><span class="ct-a52df4">void</span><span class="ct-1fdfa4">,</span></span><span class="line"><span class="ct-e3bda2"> </span><span class="ct-448587">getAuthorizationData</span><span class="ct-9b0fbf">:</span><span class="ct-e3bda2"> () </span><span class="ct-b4fcca">=></span><span class="ct-e3bda2"> { </span><span class="ct-ccde27">authorization</span><span class="ct-9b0fbf">:</span><span class="ct-e3bda2"> </span><span class="ct-1b1d52">string</span><span class="ct-e3bda2"> },</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-fffc71">refreshToken</span><span class="ct-882cc3">:</span><span class="ct-1fdfa4"> () </span><span class="ct-5f37b9">=></span><span class="ct-1fdfa4"> </span><span class="ct-d2ac08">Promise</span><span class="ct-1fdfa4"><</span></span><span class="line"><span class="ct-e3bda2"> { </span><span class="ct-ccde27">accessToken</span><span class="ct-9b0fbf">:</span><span class="ct-e3bda2"> </span><span class="ct-1b1d52">string</span><span class="ct-e3bda2">; </span><span class="ct-ccde27">refreshToken</span><span class="ct-9b0fbf">:</span><span class="ct-e3bda2"> </span><span class="ct-1b1d52">string</span><span class="ct-e3bda2"> } </span><span class="ct-9b0fbf">|</span><span class="ct-e3bda2"> </span><span class="ct-1b1d52">undefined</span></span><span class="line"><span class="ct-1fdfa4"> >,</span></span><span class="line"><span class="ct-1fdfa4">) </span><span class="ct-5f37b9">=></span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-882cc3">new</span><span class="ct-1fdfa4"> </span><span class="ct-fffc71">ApolloClientBase</span><span class="ct-1fdfa4">({</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-0c48f8">// ...other options</span></span><span class="line"><span class="ct-1fdfa4"> link: </span><span class="ct-ad26cc">ApolloLink</span><span class="ct-1fdfa4">.</span><span class="ct-fffc71">from</span><span class="ct-1fdfa4">([</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-0c48f8">// ...other options</span></span><span class="line"><span class="ct-e3bda2"> </span><span class="ct-448587">setContext</span><span class="ct-e3bda2">(</span><span class="ct-b4fcca">async</span><span class="ct-e3bda2"> (</span><span class="ct-ccde27">_</span><span class="ct-e3bda2">, { </span><span class="ct-ccde27">headers</span><span class="ct-e3bda2"> }) </span><span class="ct-b4fcca">=></span><span class="ct-e3bda2"> {</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-882cc3">return</span><span class="ct-1fdfa4"> {</span></span><span class="line"><span class="ct-1fdfa4"> headers: {</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-882cc3">...</span><span class="ct-ad26cc">headers</span><span class="ct-1fdfa4">,</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-882cc3">...</span><span class="ct-fffc71">getAuthorizationData</span><span class="ct-1fdfa4">(),</span></span><span class="line"><span class="ct-1fdfa4"> },</span></span><span class="line"><span class="ct-1fdfa4"> };</span></span><span class="line"><span class="ct-1fdfa4"> }),</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-882cc3">new</span><span class="ct-1fdfa4"> </span><span class="ct-fffc71">HttpLink</span><span class="ct-1fdfa4">({</span></span><span class="line"><span class="ct-1fdfa4"> uri: </span><span class="ct-ad26cc">url</span><span class="ct-1fdfa4">,</span></span><span class="line"><span class="ct-1fdfa4"> fetch: </span><span class="ct-fffc71">fetchWithTokenRefresh</span><span class="ct-1fdfa4">(</span><span class="ct-ad26cc">logout</span><span class="ct-1fdfa4">, </span><span class="ct-ad26cc">refreshToken</span><span class="ct-1fdfa4">),</span></span><span class="line"><span class="ct-1fdfa4"> }),</span></span><span class="line"><span class="ct-1fdfa4"> ]),</span></span><span class="line"><span class="ct-1fdfa4"> });</span></span></code></pre><!--]--></div><p><!--[-->Custom fetch function for this request. You should tune <code><!--[-->hasUnauthorizedError<!--]--></code> and
-<code><!--[-->isRefreshRequestOptions<!--]--></code> to match your api.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-0c48f8">/** Global singleton for refreshing promise */</span></span><span class="line"><span class="ct-5f37b9">let</span><span class="ct-1fdfa4"> </span><span class="ct-ad26cc">refreshingPromise</span><span class="ct-882cc3">:</span><span class="ct-1fdfa4"> </span><span class="ct-d2ac08">Promise</span><span class="ct-1fdfa4"><</span><span class="ct-a52df4">string</span><span class="ct-1fdfa4">> </span><span class="ct-882cc3">|</span><span class="ct-1fdfa4"> </span><span class="ct-a52df4">null</span><span class="ct-1fdfa4"> </span><span class="ct-882cc3">=</span><span class="ct-1fdfa4"> </span><span class="ct-d14a0c">null</span><span class="ct-1fdfa4">;</span></span><span class="line"></span><span class="line"><span class="ct-0c48f8">/** Checks if GraphQl errors has unauthenticated error */</span></span><span class="line"><span class="ct-b4fcca">const</span><span class="ct-e3bda2"> </span><span class="ct-448587">hasUnauthorizedError</span><span class="ct-e3bda2"> </span><span class="ct-9b0fbf">=</span><span class="ct-e3bda2"> (</span><span class="ct-ccde27">errors</span><span class="ct-9b0fbf">:</span><span class="ct-e3bda2"> </span><span class="ct-a8c405">Array</span><span class="ct-e3bda2"><{ </span><span class="ct-ccde27">code</span><span class="ct-9b0fbf">?:</span><span class="ct-e3bda2"> </span><span class="ct-a8c405">ErrorCode</span><span class="ct-e3bda2"> }>)</span><span class="ct-9b0fbf">:</span><span class="ct-e3bda2"> </span><span class="ct-b4fcca">=></span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-a52df4">Array</span><span class="ct-1fdfa4">.</span><span class="ct-fffc71">isArray</span><span class="ct-1fdfa4">(</span><span class="ct-ad26cc">errors</span><span class="ct-1fdfa4">) </span><span class="ct-882cc3">&&</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-ad26cc">errors</span><span class="ct-1fdfa4">.</span><span class="ct-fffc71">some</span><span class="ct-5f37b9">=></span><span class="ct-1fdfa4"> {</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-882cc3">return</span><span class="ct-1fdfa4"> </span><span class="ct-ad26cc">error</span><span class="ct-1fdfa4">.</span><span class="ct-ad26cc">status</span><span class="ct-1fdfa4"> </span><span class="ct-882cc3">===</span><span class="ct-1fdfa4"> </span><span class="ct-86c70f">401</span><span class="ct-1fdfa4">; </span><span class="ct-0c48f8">// Distinguish unauthorized error here</span></span><span class="line"><span class="ct-1fdfa4"> });</span></span><span class="line"></span><span class="line"><span class="ct-0c48f8">/** Detects if customFetch is sending refresh request */</span></span><span class="line"><span class="ct-b4fcca">const</span><span class="ct-e3bda2"> </span><span class="ct-448587">isRefreshRequestOptions</span><span class="ct-e3bda2"> </span><span class="ct-9b0fbf">=</span><span class="ct-e3bda2"> (</span><span class="ct-ccde27">options</span><span class="ct-9b0fbf">:</span><span class="ct-e3bda2"> </span><span class="ct-a8c405">RequestInit</span><span class="ct-e3bda2">) </span><span class="ct-b4fcca">=></span><span class="ct-e3bda2"> {</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-882cc3">try</span><span class="ct-1fdfa4"> {</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-5f37b9">const</span><span class="ct-1fdfa4"> </span><span class="ct-6e8360">body</span><span class="ct-1fdfa4"> </span><span class="ct-882cc3">=</span><span class="ct-1fdfa4"> </span><span class="ct-a52df4">string</span><span class="ct-1fdfa4">);</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-882cc3">return</span><span class="ct-1fdfa4"> </span><span class="ct-ad26cc">body</span><span class="ct-1fdfa4">.</span><span class="ct-ad26cc">operationName</span><span class="ct-1fdfa4"> </span><span class="ct-882cc3">===</span><span class="ct-1fdfa4"> </span><span class="ct-529b21">'RefreshToken'</span><span class="ct-1fdfa4">;</span></span><span class="line"><span class="ct-1fdfa4"> } </span><span class="ct-882cc3">catch</span><span class="ct-1fdfa4"> (</span><span class="ct-ad26cc">e</span><span class="ct-1fdfa4">) {</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-882cc3">return</span><span class="ct-1fdfa4"> </span><span class="ct-d14a0c">false</span><span class="ct-1fdfa4">;</span></span><span class="line"><span class="ct-1fdfa4"> }</span></span><span class="line"><span class="ct-1fdfa4">};</span></span><span class="line"></span><span class="line"><span class="ct-0c48f8">/** fetchWithTokenRefresh is a custom fetch function with token refresh for apollo */</span></span><span class="line"><span class="ct-882cc3">export</span><span class="ct-1fdfa4"> </span><span class="ct-5f37b9">const</span><span class="ct-1fdfa4"> </span><span class="ct-6e8360">fetchWithTokenRefresh</span><span class="ct-1fdfa4"> </span><span class="ct-882cc3">=</span></span><span class="line"><span class="ct-1fdfa4"> (</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-ad26cc">logout</span><span class="ct-1fdfa4">: () </span><span class="ct-5f37b9">=></span><span class="ct-1fdfa4"> </span><span class="ct-882cc3">void</span><span class="ct-1fdfa4">,</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-ad26cc">refreshToken</span><span class="ct-1fdfa4">: () </span><span class="ct-5f37b9">=></span><span class="ct-1fdfa4"> </span></span><span class="line"><span class="ct-1fdfa4"> { accessToken: </span><span class="ct-ad26cc">string</span><span class="ct-1fdfa4">; </span><span class="ct-ad26cc">refreshToken</span><span class="ct-1fdfa4">: </span><span class="ct-ad26cc">string</span><span class="ct-1fdfa4"> } </span><span class="ct-882cc3">|</span><span class="ct-1fdfa4"> </span><span class="ct-d14a0c">undefined</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-882cc3">></span><span class="ct-1fdfa4">,</span></span><span class="line"><span class="ct-1fdfa4"> ) </span><span class="ct-5f37b9">=></span></span><span class="line"><span class="ct-e3bda2"> </span><span class="ct-b4fcca">async</span><span class="ct-e3bda2"> (</span><span class="ct-ccde27">uri</span><span class="ct-9b0fbf">:</span><span class="ct-e3bda2"> </span><span class="ct-1b1d52">string</span><span class="ct-e3bda2">, </span><span class="ct-ccde27">options</span><span class="ct-9b0fbf">:</span><span class="ct-e3bda2"> </span><span class="ct-a8c405">RequestInit</span><span class="ct-e3bda2">)</span><span class="ct-9b0fbf">:</span><span class="ct-e3bda2"> </span><span class="ct-a8c405">Promise</span><span class="ct-e3bda2"><</span><span class="ct-a8c405">Response</span><span class="ct-e3bda2">> </span><span class="ct-b4fcca">=></span><span class="ct-e3bda2"> {</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-0c48f8">// already refreshing token, wait for it and then use refreshed token</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-0c48f8">// or use empty authorization if refreshing failed</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-882cc3">if</span><span class="ct-1fdfa4"> (</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-882cc3">!</span><span class="ct-fffc71">isRefreshRequestOptions</span><span class="ct-1fdfa4">(</span><span class="ct-ad26cc">options</span><span class="ct-1fdfa4">) </span><span class="ct-882cc3">&&</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-ad26cc">refreshingPromise</span><span class="ct-1fdfa4"> </span><span class="ct-882cc3">&&</span></span><span class="line"><span class="ct-1fdfa4"> (</span><span class="ct-ad26cc">options</span><span class="ct-1fdfa4">.</span><span class="ct-ad26cc">headers</span><span class="ct-1fdfa4"> </span><span class="ct-882cc3">as</span><span class="ct-1fdfa4"> </span><span class="ct-d2ac08">Record</span><span class="ct-1fdfa4"><</span><span class="ct-a52df4">string</span><span class="ct-1fdfa4">, </span><span class="ct-a52df4">string</span><span class="ct-1fdfa4">>)?.</span><span class="ct-ad26cc">authorization</span></span><span class="line"><span class="ct-1fdfa4"> ) {</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-5f37b9">const</span><span class="ct-1fdfa4"> </span><span class="ct-6e8360">newAccessToken</span><span class="ct-1fdfa4"> </span><span class="ct-882cc3">=</span><span class="ct-1fdfa4"> </span><span class="ct-882cc3">await</span><span class="ct-1fdfa4"> </span><span class="ct-ad26cc">refreshingPromise</span></span><span class="line"><span class="ct-1fdfa4"> .</span><span class="ct-fffc71">catch</span><span class="ct-1fdfa4">(() </span><span class="ct-5f37b9">=></span><span class="ct-1fdfa4"> {</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-0c48f8">// refreshing token from other request failed, retry without authorization</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-882cc3">return</span><span class="ct-1fdfa4"> </span><span class="ct-529b21">''</span><span class="ct-1fdfa4">;</span></span><span class="line"><span class="ct-1fdfa4"> });</span></span><span class="line"><span class="ct-1fdfa4"> </span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-ad26cc">options</span><span class="ct-1fdfa4">.</span><span class="ct-ad26cc">headers</span><span class="ct-1fdfa4"> </span><span class="ct-882cc3">=</span><span class="ct-1fdfa4"> {</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-882cc3">...</span><span class="ct-1fdfa4">(</span><span class="ct-ad26cc">options</span><span class="ct-1fdfa4">.</span><span class="ct-ad26cc">headers</span><span class="ct-1fdfa4"> </span><span class="ct-882cc3">||</span><span class="ct-1fdfa4"> {}),</span></span><span class="line"><span class="ct-1fdfa4"> authorization: </span><span class="ct-ad26cc">newAccessToken</span><span class="ct-1fdfa4">,</span></span><span class="line"><span class="ct-1fdfa4"> };</span></span><span class="line"><span class="ct-1fdfa4"> }</span></span><span class="line"></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-882cc3">return</span><span class="ct-1fdfa4"> </span><span class="ct-fffc71">fetch</span><span class="ct-1fdfa4">(</span><span class="ct-ad26cc">uri</span><span class="ct-1fdfa4">, </span><span class="ct-ad26cc">options</span><span class="ct-1fdfa4">).</span><span class="ct-fffc71">then</span><span class="ct-1fdfa4">(</span><span class="ct-5f37b9">async</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-5f37b9">const</span><span class="ct-1fdfa4"> </span><span class="ct-6e8360">text</span><span class="ct-1fdfa4"> </span><span class="ct-882cc3">=</span><span class="ct-1fdfa4"> </span><span class="ct-882cc3">await</span><span class="ct-1fdfa4"> </span><span class="ct-ad26cc">response</span><span class="ct-1fdfa4">.</span><span class="ct-fffc71">text</span><span class="ct-1fdfa4">();</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-5f37b9">const</span><span class="ct-1fdfa4"> </span><span class="ct-6e8360">json</span><span class="ct-1fdfa4"> </span><span class="ct-882cc3">=</span></span><span class="line"></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-0c48f8">// check for unauthorized errors, if not present, just return result</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-882cc3">if</span><span class="ct-1fdfa4"> (</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-fffc71">isRefreshRequestOptions</span><span class="ct-1fdfa4">(</span><span class="ct-ad26cc">options</span><span class="ct-1fdfa4">) </span><span class="ct-882cc3">||</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-882cc3">!</span><span class="ct-ad26cc">json</span><span class="ct-1fdfa4">?.</span><span class="ct-ad26cc">errors</span><span class="ct-1fdfa4"> </span><span class="ct-882cc3">||</span></span><span class="line"><span class="ct-1fdfa4"> </span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-882cc3">!</span><span class="ct-fffc71">hasUnauthorizedError</span><span class="ct-1fdfa4">(</span><span class="ct-ad26cc">json</span><span class="ct-1fdfa4">.</span><span class="ct-ad26cc">errors</span><span class="ct-1fdfa4">)</span></span><span class="line"><span class="ct-1fdfa4"> ) {</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-882cc3">return</span><span class="ct-1fdfa4"> {</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-882cc3">...</span><span class="ct-ad26cc">response</span><span class="ct-1fdfa4">,</span></span><span class="line"><span class="ct-1fdfa4"> ok: </span><span class="ct-d14a0c">true</span><span class="ct-1fdfa4">,</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-fffc71">json</span><span class="ct-1fdfa4">: </span><span class="ct-5f37b9">async</span><span class="ct-1fdfa4"> () </span><span class="ct-5f37b9">=></span></span><span class="line"><span class="ct-e3bda2"> </span><span class="ct-9b0fbf">new</span><span class="ct-e3bda2"> </span><span class="ct-1b1d52">Promise</span><span class="ct-e3bda2"><</span><span class="ct-1b1d52">unknown</span><span class="ct-e3bda2">>(</span><span class="ct-ccde27">resolve</span><span class="ct-e3bda2"> </span><span class="ct-b4fcca">=></span><span class="ct-e3bda2"> {</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-fffc71">resolve</span><span class="ct-1fdfa4">(</span><span class="ct-ad26cc">json</span><span class="ct-1fdfa4">);</span></span><span class="line"><span class="ct-1fdfa4"> }),</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-fffc71">text</span><span class="ct-1fdfa4">: </span><span class="ct-5f37b9">async</span><span class="ct-1fdfa4"> () </span><span class="ct-5f37b9">=></span></span><span class="line"><span class="ct-e3bda2"> </span><span class="ct-9b0fbf">new</span><span class="ct-e3bda2"> </span><span class="ct-1b1d52">Promise</span><span class="ct-e3bda2"><</span><span class="ct-1b1d52">string</span><span class="ct-e3bda2">>(</span><span class="ct-ccde27">resolve</span><span class="ct-e3bda2"> </span><span class="ct-b4fcca">=></span><span class="ct-e3bda2"> {</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-fffc71">resolve</span><span class="ct-1fdfa4">(</span><span class="ct-ad26cc">text</span><span class="ct-1fdfa4">);</span></span><span class="line"><span class="ct-1fdfa4"> }),</span></span><span class="line"><span class="ct-1fdfa4"> };</span></span><span class="line"><span class="ct-1fdfa4"> }</span></span><span class="line"></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-0c48f8">// If unauthorized, refresh token and try again</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-882cc3">if</span><span class="ct-1fdfa4"> (</span><span class="ct-882cc3">!</span><span class="ct-ad26cc">refreshingPromise</span><span class="ct-1fdfa4">) {</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-ad26cc">refreshingPromise</span><span class="ct-1fdfa4"> </span><span class="ct-882cc3">=</span><span class="ct-1fdfa4"> </span><span class="ct-fffc71">refreshToken</span><span class="ct-1fdfa4">()</span></span><span class="line"><span class="ct-e3bda2"> .</span><span class="ct-448587">then</span><span class="ct-e3bda2">(</span><span class="ct-b4fcca">async</span><span class="ct-e3bda2"> (</span><span class="ct-ccde27">tokens</span><span class="ct-e3bda2">)</span><span class="ct-9b0fbf">:</span><span class="ct-e3bda2"> </span><span class="ct-a8c405">Promise</span><span class="ct-e3bda2"><</span><span class="ct-1b1d52">string</span><span class="ct-e3bda2">> </span><span class="ct-b4fcca">=></span><span class="ct-e3bda2"> {</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-ad26cc">refreshingPromise</span><span class="ct-1fdfa4"> </span><span class="ct-882cc3">=</span><span class="ct-1fdfa4"> </span><span class="ct-d14a0c">null</span><span class="ct-1fdfa4">;</span></span><span class="line"></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-882cc3">if</span><span class="ct-1fdfa4"> (</span><span class="ct-882cc3">!</span><span class="ct-ad26cc">tokens</span><span class="ct-1fdfa4">?.</span><span class="ct-ad26cc">accessToken</span><span class="ct-1fdfa4">) {</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-882cc3">throw</span><span class="ct-1fdfa4"> </span><span class="ct-882cc3">new</span><span class="ct-1fdfa4"> </span><span class="ct-a52df4">Error</span><span class="ct-1fdfa4">(</span><span class="ct-529b21">'Session expired'</span><span class="ct-1fdfa4">);</span></span><span class="line"><span class="ct-1fdfa4"> }</span></span><span class="line"></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-882cc3">return</span><span class="ct-1fdfa4"> </span><span class="ct-ad26cc">tokens</span><span class="ct-1fdfa4">?.</span><span class="ct-ad26cc">accessToken</span><span class="ct-1fdfa4">;</span></span><span class="line"><span class="ct-1fdfa4"> })</span></span><span class="line"><span class="ct-1fdfa4"> .</span><span class="ct-fffc71">catch</span><span class="ct-1fdfa4">(() </span><span class="ct-5f37b9">=></span><span class="ct-1fdfa4"> {</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-ad26cc">refreshingPromise</span><span class="ct-1fdfa4"> </span><span class="ct-882cc3">=</span><span class="ct-1fdfa4"> </span><span class="ct-d14a0c">null</span><span class="ct-1fdfa4">;</span></span><span class="line"></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-0c48f8">// can't refresh token. logging out</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-fffc71">logout</span><span class="ct-1fdfa4">();</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-882cc3">throw</span><span class="ct-1fdfa4"> </span><span class="ct-882cc3">new</span><span class="ct-1fdfa4"> </span><span class="ct-a52df4">Error</span><span class="ct-1fdfa4">(</span><span class="ct-529b21">'Session expired'</span><span class="ct-1fdfa4">);</span></span><span class="line"><span class="ct-1fdfa4"> });</span></span><span class="line"><span class="ct-1fdfa4"> }</span></span><span class="line"></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-0c48f8">// success or any non-auth error</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-882cc3">return</span><span class="ct-1fdfa4"> </span><span class="ct-ad26cc">refreshingPromise</span></span><span class="line"><span class="ct-e3bda2"> .</span><span class="ct-448587">then</span><span class="ct-e3bda2">(</span><span class="ct-b4fcca">async</span><span class="ct-e3bda2"> (</span><span class="ct-ccde27">newAccessToken</span><span class="ct-9b0fbf">:</span><span class="ct-e3bda2"> </span><span class="ct-1b1d52">string</span><span class="ct-e3bda2">) </span><span class="ct-b4fcca">=></span><span class="ct-e3bda2"> {</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-0c48f8">// wait for other request's refreshing query to finish, when retry</span></span><span class="line"></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-882cc3">return</span><span class="ct-1fdfa4"> </span><span class="ct-fffc71">fetch</span><span class="ct-1fdfa4">(</span><span class="ct-ad26cc">uri</span><span class="ct-1fdfa4">, {</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-882cc3">...</span><span class="ct-ad26cc">options</span><span class="ct-1fdfa4">,</span></span><span class="line"><span class="ct-1fdfa4"> headers: {</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-882cc3">...</span><span class="ct-1fdfa4">(</span><span class="ct-ad26cc">options</span><span class="ct-1fdfa4">.</span><span class="ct-ad26cc">headers</span><span class="ct-1fdfa4"> </span><span class="ct-882cc3">||</span><span class="ct-1fdfa4"> {}),</span></span><span class="line"><span class="ct-1fdfa4"> authorization: </span><span class="ct-ad26cc">newAccessToken</span><span class="ct-1fdfa4">,</span></span><span class="line"><span class="ct-1fdfa4"> },</span></span><span class="line"><span class="ct-1fdfa4"> });</span></span><span class="line"><span class="ct-1fdfa4"> })</span></span><span class="line"><span class="ct-1fdfa4"> .</span><span class="ct-fffc71">catch</span><span class="ct-1fdfa4">(</span><span class="ct-5f37b9">async</span><span class="ct-1fdfa4"> () </span><span class="ct-5f37b9">=></span><span class="ct-1fdfa4"> {</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-0c48f8">// refreshing token from other request failed, retry without authorization</span></span><span class="line"></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-882cc3">return</span><span class="ct-1fdfa4"> </span><span class="ct-fffc71">fetch</span><span class="ct-1fdfa4">(</span><span class="ct-ad26cc">uri</span><span class="ct-1fdfa4">, {</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-882cc3">...</span><span class="ct-ad26cc">options</span><span class="ct-1fdfa4">,</span></span><span class="line"><span class="ct-1fdfa4"> headers: {</span></span><span class="line"><span class="ct-1fdfa4"> </span><span class="ct-882cc3">...</span><span class="ct-1fdfa4">(</span><span class="ct-ad26cc">options</span><span class="ct-1fdfa4">.</span><span class="ct-ad26cc">headers</span><span class="ct-1fdfa4"> </span><span class="ct-882cc3">||</span><span class="ct-1fdfa4"> {}),</span></span><span class="line"><span class="ct-1fdfa4"> authorization: </span><span class="ct-529b21">''</span><span class="ct-1fdfa4">,</span></span><span class="line"><span class="ct-1fdfa4"> },</span></span><span class="line"><span class="ct-1fdfa4"> });</span></span><span class="line"><span class="ct-1fdfa4"> });</span></span><span class="line"><span class="ct-1fdfa4"> });</span></span><span class="line"><span class="ct-1fdfa4"> };</span></span></code></pre><!--]--></div><style>.ct-529b21{color:#A5D6FF}.ct-6e8360{color:#79C0FF}.ct-86c70f{color:#79C0FF}.ct-a8c405{color:#FFA657}.ct-d14a0c{color:#79C0FF}.ct-ad26cc{color:#C9D1D9}.ct-0c48f8{color:#8B949E}.ct-d2ac08{color:#FFA657}.ct-b4fcca{color:#FF7B72}.ct-448587{color:#D2A8FF}.ct-a52df4{color:#79C0FF}.ct-1b1d52{color:#79C0FF}.ct-9b0fbf{color:#FF7B72}.ct-ccde27{color:#FFA657}.ct-e3bda2{color:#C9D1D9}.ct-fffc71{color:#D2A8FF}.ct-5f37b9{color:#FF7B72}.ct-1fdfa4{color:#C9D1D9}.ct-882cc3{color:#FF7B72}.light .ct-882cc3{color:#859900}.light .ct-1fdfa4{color:#657B83}.light .ct-5f37b9{color:#073642}.light .ct-fffc71{color:#268BD2}.light .ct-e3bda2{color:#657B83}.light .ct-ccde27{color:#657B83}.light .ct-9b0fbf{color:#859900}.light .ct-1b1d52{color:#859900}.light .ct-a52df4{color:#859900}.light .ct-448587{color:#268BD2}.light .ct-b4fcca{color:#073642}.light .ct-d2ac08{color:#268BD2}.light .ct-0c48f8{color:#93A1A1}.light .ct-ad26cc{color:#268BD2}.light .ct-d14a0c{color:#B58900}.light .ct-a8c405{color:#268BD2}.light .ct-86c70f{color:#D33682}.light .ct-6e8360{color:#268BD2}.light .ct-529b21{color:#2AA198}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/graphql/refresh-token-in-apollo-client/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695531198}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a aria-current="page" href="/graphql/refresh-token-in-apollo-client" class="router-link-active _active_192pu_81 _link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Refresh Token In Apollo Client</h1><article><div><p><!--[-->If your GraphQL api needs token refresh option, you can pass custom fetch function for Apollo Client.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-3b9dab">export</span><span class="ct-43d640"> </span><span class="ct-341544">const</span><span class="ct-43d640"> </span><span class="ct-c3df2f">createApolloClient</span><span class="ct-43d640"> </span><span class="ct-3b9dab">=</span><span class="ct-43d640"> (</span></span><span class="line"><span class="ct-009fff"> </span><span class="ct-8a16f8">url</span><span class="ct-75053d">:</span><span class="ct-009fff"> </span><span class="ct-51c055">string</span><span class="ct-009fff">,</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-c3df2f">logout</span><span class="ct-3b9dab">:</span><span class="ct-43d640"> () </span><span class="ct-341544">=></span><span class="ct-43d640"> </span><span class="ct-b5b795">void</span><span class="ct-43d640">,</span></span><span class="line"><span class="ct-009fff"> </span><span class="ct-95749a">getAuthorizationData</span><span class="ct-75053d">:</span><span class="ct-009fff"> () </span><span class="ct-74652a">=></span><span class="ct-009fff"> { </span><span class="ct-8a16f8">authorization</span><span class="ct-75053d">:</span><span class="ct-009fff"> </span><span class="ct-51c055">string</span><span class="ct-009fff"> },</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-c3df2f">refreshToken</span><span class="ct-3b9dab">:</span><span class="ct-43d640"> () </span><span class="ct-341544">=></span><span class="ct-43d640"> </span><span class="ct-21f98f">Promise</span><span class="ct-43d640"><</span></span><span class="line"><span class="ct-009fff"> { </span><span class="ct-8a16f8">accessToken</span><span class="ct-75053d">:</span><span class="ct-009fff"> </span><span class="ct-51c055">string</span><span class="ct-009fff">; </span><span class="ct-8a16f8">refreshToken</span><span class="ct-75053d">:</span><span class="ct-009fff"> </span><span class="ct-51c055">string</span><span class="ct-009fff"> } </span><span class="ct-75053d">|</span><span class="ct-009fff"> </span><span class="ct-51c055">undefined</span></span><span class="line"><span class="ct-43d640"> >,</span></span><span class="line"><span class="ct-43d640">) </span><span class="ct-341544">=></span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-3b9dab">new</span><span class="ct-43d640"> </span><span class="ct-c3df2f">ApolloClientBase</span><span class="ct-43d640">({</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-b7707f">// ...other options</span></span><span class="line"><span class="ct-43d640"> link: </span><span class="ct-e74100">ApolloLink</span><span class="ct-43d640">.</span><span class="ct-c3df2f">from</span><span class="ct-43d640">([</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-b7707f">// ...other options</span></span><span class="line"><span class="ct-009fff"> </span><span class="ct-95749a">setContext</span><span class="ct-009fff">(</span><span class="ct-74652a">async</span><span class="ct-009fff"> (</span><span class="ct-8a16f8">_</span><span class="ct-009fff">, { </span><span class="ct-8a16f8">headers</span><span class="ct-009fff"> }) </span><span class="ct-74652a">=></span><span class="ct-009fff"> {</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-3b9dab">return</span><span class="ct-43d640"> {</span></span><span class="line"><span class="ct-43d640"> headers: {</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-3b9dab">...</span><span class="ct-e74100">headers</span><span class="ct-43d640">,</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-3b9dab">...</span><span class="ct-c3df2f">getAuthorizationData</span><span class="ct-43d640">(),</span></span><span class="line"><span class="ct-43d640"> },</span></span><span class="line"><span class="ct-43d640"> };</span></span><span class="line"><span class="ct-43d640"> }),</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-3b9dab">new</span><span class="ct-43d640"> </span><span class="ct-c3df2f">HttpLink</span><span class="ct-43d640">({</span></span><span class="line"><span class="ct-43d640"> uri: </span><span class="ct-e74100">url</span><span class="ct-43d640">,</span></span><span class="line"><span class="ct-43d640"> fetch: </span><span class="ct-c3df2f">fetchWithTokenRefresh</span><span class="ct-43d640">(</span><span class="ct-e74100">logout</span><span class="ct-43d640">, </span><span class="ct-e74100">refreshToken</span><span class="ct-43d640">),</span></span><span class="line"><span class="ct-43d640"> }),</span></span><span class="line"><span class="ct-43d640"> ]),</span></span><span class="line"><span class="ct-43d640"> });</span></span></code></pre><!--]--></div><p><!--[-->Custom fetch function for this request. You should tune <code><!--[-->hasUnauthorizedError<!--]--></code> and
+<code><!--[-->isRefreshRequestOptions<!--]--></code> to match your api.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-b7707f">/** Global singleton for refreshing promise */</span></span><span class="line"><span class="ct-341544">let</span><span class="ct-43d640"> </span><span class="ct-e74100">refreshingPromise</span><span class="ct-3b9dab">:</span><span class="ct-43d640"> </span><span class="ct-21f98f">Promise</span><span class="ct-43d640"><</span><span class="ct-b5b795">string</span><span class="ct-43d640">> </span><span class="ct-3b9dab">|</span><span class="ct-43d640"> </span><span class="ct-b5b795">null</span><span class="ct-43d640"> </span><span class="ct-3b9dab">=</span><span class="ct-43d640"> </span><span class="ct-c909fd">null</span><span class="ct-43d640">;</span></span><span class="line"></span><span class="line"><span class="ct-b7707f">/** Checks if GraphQl errors has unauthenticated error */</span></span><span class="line"><span class="ct-74652a">const</span><span class="ct-009fff"> </span><span class="ct-95749a">hasUnauthorizedError</span><span class="ct-009fff"> </span><span class="ct-75053d">=</span><span class="ct-009fff"> (</span><span class="ct-8a16f8">errors</span><span class="ct-75053d">:</span><span class="ct-009fff"> </span><span class="ct-998e75">Array</span><span class="ct-009fff"><{ </span><span class="ct-8a16f8">code</span><span class="ct-75053d">?:</span><span class="ct-009fff"> </span><span class="ct-998e75">ErrorCode</span><span class="ct-009fff"> }>)</span><span class="ct-75053d">:</span><span class="ct-009fff"> </span><span class="ct-74652a">=></span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-b5b795">Array</span><span class="ct-43d640">.</span><span class="ct-c3df2f">isArray</span><span class="ct-43d640">(</span><span class="ct-e74100">errors</span><span class="ct-43d640">) </span><span class="ct-3b9dab">&&</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-e74100">errors</span><span class="ct-43d640">.</span><span class="ct-c3df2f">some</span><span class="ct-341544">=></span><span class="ct-43d640"> {</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-3b9dab">return</span><span class="ct-43d640"> </span><span class="ct-e74100">error</span><span class="ct-43d640">.</span><span class="ct-e74100">status</span><span class="ct-43d640"> </span><span class="ct-3b9dab">===</span><span class="ct-43d640"> </span><span class="ct-dd29d5">401</span><span class="ct-43d640">; </span><span class="ct-b7707f">// Distinguish unauthorized error here</span></span><span class="line"><span class="ct-43d640"> });</span></span><span class="line"></span><span class="line"><span class="ct-b7707f">/** Detects if customFetch is sending refresh request */</span></span><span class="line"><span class="ct-74652a">const</span><span class="ct-009fff"> </span><span class="ct-95749a">isRefreshRequestOptions</span><span class="ct-009fff"> </span><span class="ct-75053d">=</span><span class="ct-009fff"> (</span><span class="ct-8a16f8">options</span><span class="ct-75053d">:</span><span class="ct-009fff"> </span><span class="ct-998e75">RequestInit</span><span class="ct-009fff">) </span><span class="ct-74652a">=></span><span class="ct-009fff"> {</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-3b9dab">try</span><span class="ct-43d640"> {</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-341544">const</span><span class="ct-43d640"> </span><span class="ct-53ce96">body</span><span class="ct-43d640"> </span><span class="ct-3b9dab">=</span><span class="ct-43d640"> </span><span class="ct-b5b795">string</span><span class="ct-43d640">);</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-3b9dab">return</span><span class="ct-43d640"> </span><span class="ct-e74100">body</span><span class="ct-43d640">.</span><span class="ct-e74100">operationName</span><span class="ct-43d640"> </span><span class="ct-3b9dab">===</span><span class="ct-43d640"> </span><span class="ct-1451a3">'RefreshToken'</span><span class="ct-43d640">;</span></span><span class="line"><span class="ct-43d640"> } </span><span class="ct-3b9dab">catch</span><span class="ct-43d640"> (</span><span class="ct-e74100">e</span><span class="ct-43d640">) {</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-3b9dab">return</span><span class="ct-43d640"> </span><span class="ct-c909fd">false</span><span class="ct-43d640">;</span></span><span class="line"><span class="ct-43d640"> }</span></span><span class="line"><span class="ct-43d640">};</span></span><span class="line"></span><span class="line"><span class="ct-b7707f">/** fetchWithTokenRefresh is a custom fetch function with token refresh for apollo */</span></span><span class="line"><span class="ct-3b9dab">export</span><span class="ct-43d640"> </span><span class="ct-341544">const</span><span class="ct-43d640"> </span><span class="ct-53ce96">fetchWithTokenRefresh</span><span class="ct-43d640"> </span><span class="ct-3b9dab">=</span></span><span class="line"><span class="ct-43d640"> (</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-e74100">logout</span><span class="ct-43d640">: () </span><span class="ct-341544">=></span><span class="ct-43d640"> </span><span class="ct-3b9dab">void</span><span class="ct-43d640">,</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-e74100">refreshToken</span><span class="ct-43d640">: () </span><span class="ct-341544">=></span><span class="ct-43d640"> </span></span><span class="line"><span class="ct-43d640"> { accessToken: </span><span class="ct-e74100">string</span><span class="ct-43d640">; </span><span class="ct-e74100">refreshToken</span><span class="ct-43d640">: </span><span class="ct-e74100">string</span><span class="ct-43d640"> } </span><span class="ct-3b9dab">|</span><span class="ct-43d640"> </span><span class="ct-c909fd">undefined</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-3b9dab">></span><span class="ct-43d640">,</span></span><span class="line"><span class="ct-43d640"> ) </span><span class="ct-341544">=></span></span><span class="line"><span class="ct-009fff"> </span><span class="ct-74652a">async</span><span class="ct-009fff"> (</span><span class="ct-8a16f8">uri</span><span class="ct-75053d">:</span><span class="ct-009fff"> </span><span class="ct-51c055">string</span><span class="ct-009fff">, </span><span class="ct-8a16f8">options</span><span class="ct-75053d">:</span><span class="ct-009fff"> </span><span class="ct-998e75">RequestInit</span><span class="ct-009fff">)</span><span class="ct-75053d">:</span><span class="ct-009fff"> </span><span class="ct-998e75">Promise</span><span class="ct-009fff"><</span><span class="ct-998e75">Response</span><span class="ct-009fff">> </span><span class="ct-74652a">=></span><span class="ct-009fff"> {</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-b7707f">// already refreshing token, wait for it and then use refreshed token</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-b7707f">// or use empty authorization if refreshing failed</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-3b9dab">if</span><span class="ct-43d640"> (</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-3b9dab">!</span><span class="ct-c3df2f">isRefreshRequestOptions</span><span class="ct-43d640">(</span><span class="ct-e74100">options</span><span class="ct-43d640">) </span><span class="ct-3b9dab">&&</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-e74100">refreshingPromise</span><span class="ct-43d640"> </span><span class="ct-3b9dab">&&</span></span><span class="line"><span class="ct-43d640"> (</span><span class="ct-e74100">options</span><span class="ct-43d640">.</span><span class="ct-e74100">headers</span><span class="ct-43d640"> </span><span class="ct-3b9dab">as</span><span class="ct-43d640"> </span><span class="ct-21f98f">Record</span><span class="ct-43d640"><</span><span class="ct-b5b795">string</span><span class="ct-43d640">, </span><span class="ct-b5b795">string</span><span class="ct-43d640">>)?.</span><span class="ct-e74100">authorization</span></span><span class="line"><span class="ct-43d640"> ) {</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-341544">const</span><span class="ct-43d640"> </span><span class="ct-53ce96">newAccessToken</span><span class="ct-43d640"> </span><span class="ct-3b9dab">=</span><span class="ct-43d640"> </span><span class="ct-3b9dab">await</span><span class="ct-43d640"> </span><span class="ct-e74100">refreshingPromise</span></span><span class="line"><span class="ct-43d640"> .</span><span class="ct-c3df2f">catch</span><span class="ct-43d640">(() </span><span class="ct-341544">=></span><span class="ct-43d640"> {</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-b7707f">// refreshing token from other request failed, retry without authorization</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-3b9dab">return</span><span class="ct-43d640"> </span><span class="ct-1451a3">''</span><span class="ct-43d640">;</span></span><span class="line"><span class="ct-43d640"> });</span></span><span class="line"><span class="ct-43d640"> </span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-e74100">options</span><span class="ct-43d640">.</span><span class="ct-e74100">headers</span><span class="ct-43d640"> </span><span class="ct-3b9dab">=</span><span class="ct-43d640"> {</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-3b9dab">...</span><span class="ct-43d640">(</span><span class="ct-e74100">options</span><span class="ct-43d640">.</span><span class="ct-e74100">headers</span><span class="ct-43d640"> </span><span class="ct-3b9dab">||</span><span class="ct-43d640"> {}),</span></span><span class="line"><span class="ct-43d640"> authorization: </span><span class="ct-e74100">newAccessToken</span><span class="ct-43d640">,</span></span><span class="line"><span class="ct-43d640"> };</span></span><span class="line"><span class="ct-43d640"> }</span></span><span class="line"></span><span class="line"><span class="ct-43d640"> </span><span class="ct-3b9dab">return</span><span class="ct-43d640"> </span><span class="ct-c3df2f">fetch</span><span class="ct-43d640">(</span><span class="ct-e74100">uri</span><span class="ct-43d640">, </span><span class="ct-e74100">options</span><span class="ct-43d640">).</span><span class="ct-c3df2f">then</span><span class="ct-43d640">(</span><span class="ct-341544">async</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-341544">const</span><span class="ct-43d640"> </span><span class="ct-53ce96">text</span><span class="ct-43d640"> </span><span class="ct-3b9dab">=</span><span class="ct-43d640"> </span><span class="ct-3b9dab">await</span><span class="ct-43d640"> </span><span class="ct-e74100">response</span><span class="ct-43d640">.</span><span class="ct-c3df2f">text</span><span class="ct-43d640">();</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-341544">const</span><span class="ct-43d640"> </span><span class="ct-53ce96">json</span><span class="ct-43d640"> </span><span class="ct-3b9dab">=</span></span><span class="line"></span><span class="line"><span class="ct-43d640"> </span><span class="ct-b7707f">// check for unauthorized errors, if not present, just return result</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-3b9dab">if</span><span class="ct-43d640"> (</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-c3df2f">isRefreshRequestOptions</span><span class="ct-43d640">(</span><span class="ct-e74100">options</span><span class="ct-43d640">) </span><span class="ct-3b9dab">||</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-3b9dab">!</span><span class="ct-e74100">json</span><span class="ct-43d640">?.</span><span class="ct-e74100">errors</span><span class="ct-43d640"> </span><span class="ct-3b9dab">||</span></span><span class="line"><span class="ct-43d640"> </span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-3b9dab">!</span><span class="ct-c3df2f">hasUnauthorizedError</span><span class="ct-43d640">(</span><span class="ct-e74100">json</span><span class="ct-43d640">.</span><span class="ct-e74100">errors</span><span class="ct-43d640">)</span></span><span class="line"><span class="ct-43d640"> ) {</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-3b9dab">return</span><span class="ct-43d640"> {</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-3b9dab">...</span><span class="ct-e74100">response</span><span class="ct-43d640">,</span></span><span class="line"><span class="ct-43d640"> ok: </span><span class="ct-c909fd">true</span><span class="ct-43d640">,</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-c3df2f">json</span><span class="ct-43d640">: </span><span class="ct-341544">async</span><span class="ct-43d640"> () </span><span class="ct-341544">=></span></span><span class="line"><span class="ct-009fff"> </span><span class="ct-75053d">new</span><span class="ct-009fff"> </span><span class="ct-51c055">Promise</span><span class="ct-009fff"><</span><span class="ct-51c055">unknown</span><span class="ct-009fff">>(</span><span class="ct-8a16f8">resolve</span><span class="ct-009fff"> </span><span class="ct-74652a">=></span><span class="ct-009fff"> {</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-c3df2f">resolve</span><span class="ct-43d640">(</span><span class="ct-e74100">json</span><span class="ct-43d640">);</span></span><span class="line"><span class="ct-43d640"> }),</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-c3df2f">text</span><span class="ct-43d640">: </span><span class="ct-341544">async</span><span class="ct-43d640"> () </span><span class="ct-341544">=></span></span><span class="line"><span class="ct-009fff"> </span><span class="ct-75053d">new</span><span class="ct-009fff"> </span><span class="ct-51c055">Promise</span><span class="ct-009fff"><</span><span class="ct-51c055">string</span><span class="ct-009fff">>(</span><span class="ct-8a16f8">resolve</span><span class="ct-009fff"> </span><span class="ct-74652a">=></span><span class="ct-009fff"> {</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-c3df2f">resolve</span><span class="ct-43d640">(</span><span class="ct-e74100">text</span><span class="ct-43d640">);</span></span><span class="line"><span class="ct-43d640"> }),</span></span><span class="line"><span class="ct-43d640"> };</span></span><span class="line"><span class="ct-43d640"> }</span></span><span class="line"></span><span class="line"><span class="ct-43d640"> </span><span class="ct-b7707f">// If unauthorized, refresh token and try again</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-3b9dab">if</span><span class="ct-43d640"> (</span><span class="ct-3b9dab">!</span><span class="ct-e74100">refreshingPromise</span><span class="ct-43d640">) {</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-e74100">refreshingPromise</span><span class="ct-43d640"> </span><span class="ct-3b9dab">=</span><span class="ct-43d640"> </span><span class="ct-c3df2f">refreshToken</span><span class="ct-43d640">()</span></span><span class="line"><span class="ct-009fff"> .</span><span class="ct-95749a">then</span><span class="ct-009fff">(</span><span class="ct-74652a">async</span><span class="ct-009fff"> (</span><span class="ct-8a16f8">tokens</span><span class="ct-009fff">)</span><span class="ct-75053d">:</span><span class="ct-009fff"> </span><span class="ct-998e75">Promise</span><span class="ct-009fff"><</span><span class="ct-51c055">string</span><span class="ct-009fff">> </span><span class="ct-74652a">=></span><span class="ct-009fff"> {</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-e74100">refreshingPromise</span><span class="ct-43d640"> </span><span class="ct-3b9dab">=</span><span class="ct-43d640"> </span><span class="ct-c909fd">null</span><span class="ct-43d640">;</span></span><span class="line"></span><span class="line"><span class="ct-43d640"> </span><span class="ct-3b9dab">if</span><span class="ct-43d640"> (</span><span class="ct-3b9dab">!</span><span class="ct-e74100">tokens</span><span class="ct-43d640">?.</span><span class="ct-e74100">accessToken</span><span class="ct-43d640">) {</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-3b9dab">throw</span><span class="ct-43d640"> </span><span class="ct-3b9dab">new</span><span class="ct-43d640"> </span><span class="ct-b5b795">Error</span><span class="ct-43d640">(</span><span class="ct-1451a3">'Session expired'</span><span class="ct-43d640">);</span></span><span class="line"><span class="ct-43d640"> }</span></span><span class="line"></span><span class="line"><span class="ct-43d640"> </span><span class="ct-3b9dab">return</span><span class="ct-43d640"> </span><span class="ct-e74100">tokens</span><span class="ct-43d640">?.</span><span class="ct-e74100">accessToken</span><span class="ct-43d640">;</span></span><span class="line"><span class="ct-43d640"> })</span></span><span class="line"><span class="ct-43d640"> .</span><span class="ct-c3df2f">catch</span><span class="ct-43d640">(() </span><span class="ct-341544">=></span><span class="ct-43d640"> {</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-e74100">refreshingPromise</span><span class="ct-43d640"> </span><span class="ct-3b9dab">=</span><span class="ct-43d640"> </span><span class="ct-c909fd">null</span><span class="ct-43d640">;</span></span><span class="line"></span><span class="line"><span class="ct-43d640"> </span><span class="ct-b7707f">// can't refresh token. logging out</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-c3df2f">logout</span><span class="ct-43d640">();</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-3b9dab">throw</span><span class="ct-43d640"> </span><span class="ct-3b9dab">new</span><span class="ct-43d640"> </span><span class="ct-b5b795">Error</span><span class="ct-43d640">(</span><span class="ct-1451a3">'Session expired'</span><span class="ct-43d640">);</span></span><span class="line"><span class="ct-43d640"> });</span></span><span class="line"><span class="ct-43d640"> }</span></span><span class="line"></span><span class="line"><span class="ct-43d640"> </span><span class="ct-b7707f">// success or any non-auth error</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-3b9dab">return</span><span class="ct-43d640"> </span><span class="ct-e74100">refreshingPromise</span></span><span class="line"><span class="ct-009fff"> .</span><span class="ct-95749a">then</span><span class="ct-009fff">(</span><span class="ct-74652a">async</span><span class="ct-009fff"> (</span><span class="ct-8a16f8">newAccessToken</span><span class="ct-75053d">:</span><span class="ct-009fff"> </span><span class="ct-51c055">string</span><span class="ct-009fff">) </span><span class="ct-74652a">=></span><span class="ct-009fff"> {</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-b7707f">// wait for other request's refreshing query to finish, when retry</span></span><span class="line"></span><span class="line"><span class="ct-43d640"> </span><span class="ct-3b9dab">return</span><span class="ct-43d640"> </span><span class="ct-c3df2f">fetch</span><span class="ct-43d640">(</span><span class="ct-e74100">uri</span><span class="ct-43d640">, {</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-3b9dab">...</span><span class="ct-e74100">options</span><span class="ct-43d640">,</span></span><span class="line"><span class="ct-43d640"> headers: {</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-3b9dab">...</span><span class="ct-43d640">(</span><span class="ct-e74100">options</span><span class="ct-43d640">.</span><span class="ct-e74100">headers</span><span class="ct-43d640"> </span><span class="ct-3b9dab">||</span><span class="ct-43d640"> {}),</span></span><span class="line"><span class="ct-43d640"> authorization: </span><span class="ct-e74100">newAccessToken</span><span class="ct-43d640">,</span></span><span class="line"><span class="ct-43d640"> },</span></span><span class="line"><span class="ct-43d640"> });</span></span><span class="line"><span class="ct-43d640"> })</span></span><span class="line"><span class="ct-43d640"> .</span><span class="ct-c3df2f">catch</span><span class="ct-43d640">(</span><span class="ct-341544">async</span><span class="ct-43d640"> () </span><span class="ct-341544">=></span><span class="ct-43d640"> {</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-b7707f">// refreshing token from other request failed, retry without authorization</span></span><span class="line"></span><span class="line"><span class="ct-43d640"> </span><span class="ct-3b9dab">return</span><span class="ct-43d640"> </span><span class="ct-c3df2f">fetch</span><span class="ct-43d640">(</span><span class="ct-e74100">uri</span><span class="ct-43d640">, {</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-3b9dab">...</span><span class="ct-e74100">options</span><span class="ct-43d640">,</span></span><span class="line"><span class="ct-43d640"> headers: {</span></span><span class="line"><span class="ct-43d640"> </span><span class="ct-3b9dab">...</span><span class="ct-43d640">(</span><span class="ct-e74100">options</span><span class="ct-43d640">.</span><span class="ct-e74100">headers</span><span class="ct-43d640"> </span><span class="ct-3b9dab">||</span><span class="ct-43d640"> {}),</span></span><span class="line"><span class="ct-43d640"> authorization: </span><span class="ct-1451a3">''</span><span class="ct-43d640">,</span></span><span class="line"><span class="ct-43d640"> },</span></span><span class="line"><span class="ct-43d640"> });</span></span><span class="line"><span class="ct-43d640"> });</span></span><span class="line"><span class="ct-43d640"> });</span></span><span class="line"><span class="ct-43d640"> };</span></span></code></pre><!--]--></div><style>.ct-1451a3{color:#A5D6FF}.ct-53ce96{color:#79C0FF}.ct-dd29d5{color:#79C0FF}.ct-998e75{color:#FFA657}.ct-c909fd{color:#79C0FF}.ct-e74100{color:#C9D1D9}.ct-b7707f{color:#8B949E}.ct-21f98f{color:#FFA657}.ct-74652a{color:#FF7B72}.ct-95749a{color:#D2A8FF}.ct-b5b795{color:#79C0FF}.ct-51c055{color:#79C0FF}.ct-75053d{color:#FF7B72}.ct-8a16f8{color:#FFA657}.ct-009fff{color:#C9D1D9}.ct-c3df2f{color:#D2A8FF}.ct-341544{color:#FF7B72}.ct-43d640{color:#C9D1D9}.ct-3b9dab{color:#FF7B72}.light .ct-3b9dab{color:#859900}.light .ct-43d640{color:#657B83}.light .ct-341544{color:#073642}.light .ct-c3df2f{color:#268BD2}.light .ct-009fff{color:#657B83}.light .ct-8a16f8{color:#657B83}.light .ct-75053d{color:#859900}.light .ct-51c055{color:#859900}.light .ct-b5b795{color:#859900}.light .ct-95749a{color:#268BD2}.light .ct-74652a{color:#073642}.light .ct-21f98f{color:#268BD2}.light .ct-b7707f{color:#93A1A1}.light .ct-e74100{color:#268BD2}.light .ct-c909fd{color:#B58900}.light .ct-998e75{color:#268BD2}.light .ct-dd29d5{color:#D33682}.light .ct-53ce96{color:#268BD2}.light .ct-1451a3{color:#2AA198}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/graphql/refresh-token-in-apollo-client/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697992640}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 6b383fe..d7c1b81 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="head:count" content="2"><link rel="modulepreload" href="/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="preload" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/index.99c1fdcf.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeHeader.56547773.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/IconsSend.7a402237.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiActionButton.25935799.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/IconsBook.89f61b8b.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiButtonGroup.0c17ae03.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeContentList.e8fdd6c9.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="prefetch" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/obsidian.8dc2a844.svg"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/desk.91eb5d74.svg"><link rel="stylesheet" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><style>._wrapper_1qq06_1{display:flex;flex-direction:column;height:100%;min-height:100vh}._header_container_1qq06_8{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);position:sticky;top:0;z-index:10}._header_container_1qq06_8:before{background:var(--top-gradient);content:" ";height:4px;left:0;position:absolute;right:0;top:0;z-index:2}._header_container_1qq06_8:after{background:var(--color-background);content:"";inset:0;opacity:.95;position:absolute;z-index:0}@supports ((-webkit-backdrop-filter:blur(5px)) or (backdrop-filter:blur(5px))){._header_container_1qq06_8:after{opacity:.85}}._header_content_1qq06_38{margin:auto;max-width:min(1280px,100vw);padding:0 40px;position:relative;z-index:1}@media (max-width:1024px){._header_content_1qq06_38{padding:0 40px}}@media (max-width:768px){._header_content_1qq06_38{padding:0 20px}}</style><style>._header_t5iqp_1{padding:22px 0 20px;text-align:left}._header_t5iqp_1 a{color:var(--color-text);padding:0 25px 0 0;position:relative;text-decoration:none}._header_t5iqp_1 a._active_t5iqp_11{color:var(--color-link)}._header_t5iqp_1 a._active_t5iqp_11:after{background:var(--color-link);left:3px;right:28px}._header_t5iqp_1 a:after{background:var(--color-text);bottom:-6px;content:"";height:2px;left:50%;position:absolute;right:50%;transition:all .25s}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._main_su98q_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._main_su98q_1{padding:0 40px}}@media (max-width:768px){._main_su98q_1{padding:0 20px;padding-top:0}}._reference_su98q_22{padding-top:20px}._grid_su98q_26{margin:40px 5px 0}</style><style>._grid_1s2ro_1{border-bottom:2px solid var(--color-line);-moz-column-gap:50px;column-gap:50px;display:grid;grid-template-columns:17fr 10fr}@media (max-width:1024px){._grid_1s2ro_1{border-bottom:none;-moz-column-gap:20px;column-gap:20px;grid-template-columns:1fr;grid-template-rows:auto auto}}._image_1s2ro_16{align-items:flex-end;display:flex}@media (max-width:1024px){._image_1s2ro_16{border-bottom:2px solid var(--color-line);justify-content:center}}._title_1s2ro_27{margin:.8rem 0}._subtitle_1s2ro_31{color:var(--color-text-secondary);max-width:600px}@media (max-width:1024px){._subtitle_1s2ro_31{max-width:100%}}._text_1s2ro_41{display:flex;flex-direction:column;justify-content:center;padding-bottom:60px}._text_1s2ro_41 b{color:var(--color-text)}@media (max-width:768px){._text_1s2ro_41{max-width:100%;padding-bottom:40px;padding-top:0;text-align:center;width:100%}}._desk_1s2ro_60{max-width:80vw}@media (max-width:1024px){._desk_1s2ro_60{max-height:50vh}}._buttons_1s2ro_69{margin-top:40px}@media (max-width:768px){._buttons_1s2ro_69{justify-content:center;margin-top:20px}}</style><style>@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@600&family=Roboto:wght@400;700&display=swap");._page-enter-active_1ss95_2,._page-leave-active_1ss95_3{transition:all .4s}._page-enter-from_1ss95_7,._page-leave-to_1ss95_8{opacity:0;transform:translateY(50px)}body,html{background:var(--color-background);color:var(--color-text);font-family:var(--family-texts);margin:0;padding:0}*{box-sizing:border-box;transition:color .25s}a{color:var(--color-link)}h1>a,h2>a,h3>a,h4>a,h5>a{color:var(--color-header);text-decoration:none}pre{border-radius:10px;line-height:1.5em;overflow:scroll;padding:10px;width:100%}:not(pre)>code,pre{background-color:var(--color-code-background)}:not(pre)>code{border-radius:4px;color:var(--color-code-inline);padding:0 5px}h1,h2,h3,h4,h5{color:var(--color-header);font-family:var(--family-headings);font-weight:700}h1{color:var(--color-heading-primary);font-size:2.6rem;margin-bottom:1.5rem}h1:not(:first-child){margin-top:3rem}@media (max-width:560px){h1{font-size:2rem;line-height:2.4rem}}h2{color:var(--color-heading-secondary);font-size:2rem}h2:not(:first-child){margin-top:2rem}h3,h4,h5{color:var(--color-heading-tertiary)}li,p{line-height:1.5em}li img,p img{max-inline-size:100%}li:not(:last-child){margin-bottom:.25em}button{background:none;padding:0}button,button:focus{border:none}table{border:2px solid var(--color-line);border-collapse:collapse}table td,table th{border:1px solid var(--color-line);padding:5px 10px;text-align:left}table thead{background:var(--color-table-head);border-bottom:2px solid var(--color-line)}blockquote{border-left:3px solid var(--color-primary);color:var(--color-text);margin:0 10px;padding:0 20px}blockquote ol,blockquote ul{padding-left:15px}._highlight_1ss95_138{background-color:var(--color-highlight-background);border-radius:3px;color:var(--color-highlight-color);padding:0 1px}:root{--family-headings:"Roboto Slab","Segoe UI",Tahoma,Geneva,Verdana,sans-serif;--family-texts:"Roboto","Segoe UI",Tahoma,Geneva,Verdana,sans-serif;--size-phone:$phone;--size-tablet:$size-tablet;--size-desktop:$size-desktop;--color-primary:#e84a72;--color-primary-contrast:#fff;--color-background:#16161c;--color-menu-background:#1a1c23;--color-line:#2d2f36;--color-menu-overlay-background:rgba(22,22,28,.9);--color-code-background:#1a1c23;--color-code-language-background:#23252f;--color-code-language-name:#1eaeae;--color-text:#fdf0ed;--color-text-secondary:#a3a4a7;--color-link:#e84a72;--color-code-inline:#1eb980;--color-heading-primary:#fff;--color-heading-secondary:#f9cbbe;--color-heading-tertiary:#f9cec3;--color-menu-title:#fadad1;--color-menu-link:#fab28e;--color-menu-link-active:#e84a72;--color-menu-line:#2e303e;--color-table-head:#2f212b;--color-rating-0:#333;--color-rating-1:#ded187;--color-rating-2:#dbde87;--color-rating-3:#bade87;--color-rating-4:#9cde87;--color-rating-5:#87deaa;--color-highlight-color:var(--color-text);--color-highlight-background:#254e50;--top-gradient:linear-gradient(90deg,#a93a58,#58a93a,#3a58a9)}:root._light_1ss95_192{--color-primary:#e84a72;--color-primary-contrast:#fff;--color-background:#fce9e4;--color-menu-background:#fbe2db;--color-line:#d9c5c5;--color-menu-overlay-background:rgba(22,22,28,.9);--color-code-background:#fbe2db;--color-code-language-background:#23252f;--color-code-language-name:#1eaeae;--color-text:#5a5d68;--color-text-secondary:#7b7d86;--color-link:#e84a72;--color-code-inline:#8931b9;--color-heading-primary:#4c5161;--color-heading-secondary:#6bb8b4;--color-heading-tertiary:#6bb8b4;--color-menu-title:#6bb8b4;--color-menu-link:#eb6481;--color-menu-link-active:#e84a72;--color-menu-line:#f9cbbe;--color-table-head:#f8ccc8;--color-rating-0:#cecece;--color-rating-1:#e4b882;--color-rating-2:#e4a882;--color-rating-3:#e49782;--color-rating-4:#e48782;--color-rating-5:#e4828d;--color-highlight-color:var(--color-text);--color-highlight-background:#fab795;--top-gradient:linear-gradient(90deg,#ee7a94,#94ee7a,#7a94ee)}._buttons_1ss95_230{align-items:flex-start;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(180px,auto));justify-content:flex-start}</style><style>._button_15t7y_1{align-items:center;border-radius:8px;color:#fff;display:inline-flex;justify-content:center;text-decoration:none}._button_15t7y_1._variant-primary_15t7y_9{background-color:var(--color-primary)}._button_15t7y_1._variant-outline_15t7y_12{box-shadow:var(--color-text) 0 0 0 1px;color:var(--color-text);overflow:hidden;position:relative;transition:all .25s}._button_15t7y_1._variant-outline_15t7y_12:after{background:var(--color-primary);border-radius:8px;content:" ";inset:0;opacity:0;position:absolute;transform:scale(0);transition:all .25s;z-index:0}._button_15t7y_1._variant-outline_15t7y_12:hover{box-shadow:var(--color-background) 0 0 0 1px;color:var(--color-primary-contrast)}._button_15t7y_1._variant-outline_15t7y_12:hover:after{opacity:1;transform:scale(1)}._button_15t7y_1._size-md_15t7y_38{height:40px;padding:0 30px}._button_15t7y_1._size-md_15t7y_38._prefixed_15t7y_42,._button_15t7y_1._size-md_15t7y_38._suffixed_15t7y_42{padding:0 10px 0 20px}._button_15t7y_1._size-md_15t7y_38._suffixed_15t7y_42{padding-right:0 20px 0 10px}._title_15t7y_49{flex:1;position:relative;text-align:center;z-index:1}._size-md_15t7y_38._prefixed_15t7y_42 ._title_15t7y_49{padding-left:10px}._size-md_15t7y_38._suffixed_15t7y_42 ._title_15t7y_49{padding-right:10px}._prefix_15t7y_42,._suffix_15t7y_42{display:inline-flex;position:relative;z-index:2}</style><style>._row_1ufrv_1{margin-bottom:10px}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_wrapper_1qq06_1" hastransition="true"><div class="_header_container_1qq06_8"><div class="_header_content_1qq06_38"><header class="_header_t5iqp_1"><a aria-current="page" href="/" class="_active_t5iqp_11 router-link-exact-active">Home</a><a href="/about" class="">About</a><a href="/contacts" class="">Contacts</a></header></div></div><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_main_su98q_1"><section><div class="_grid_1s2ro_1"><div class="_text_1s2ro_41"><h1 class="_title_1s2ro_27">Welcome to my Obsidian Garden</h1><div class="_subtitle_1s2ro_31"><p><img src="/nuxt/obsidian.8dc2a844.svg" alt="" width="14" height="14"><a href="https://obsidian.md" rel="noopener noreferrer" target="_blank">Obsidian</a> is a note-taking app, that I use to store <b>chunks of code</b> and <b>technical documentation</b>. Here's the frontend for my notebook. </p><p>There's also my Curriculum Vitae and contact info here.</p></div><div class="_buttons_1s2ro_69 _buttons_1ss95_230 _buttons_1s2ro_69"><!--[--><a href="/contacts" class="_button_15t7y_1 _variant-primary_15t7y_9 _size-md_15t7y_38 _suffixed_15t7y_42"><!----><span class="_title_15t7y_49"><!--[--> Contact me <!--]--></span><span class="_suffix_15t7y_42"><!--[--><svg xmlns="http://www.w3.org/2000/svg" height="22" width="22" viewbox="0 0 48 48" fill="currentColor"><path xmlns="http://www.w3.org/2000/svg" d="M7 34.05Q5.85 33.8 4.925 33 4 32.2 4 31.05V13.9q0-.6.25-1.125t.95-.875l16-7.9 15.35 7.9q.45.35.9 1.025.45.675.6 1.225h-3.7L21.2 7.35 7 14.4ZM11.5 42q-1.2 0-2.1-.925-.9-.925-.9-2.075V18.65q0-1.15.9-2.075.9-.925 2.1-.925H41q1.15 0 2.075.925Q44 17.5 44 18.65V39q0 1.15-.925 2.075Q42.15 42 41 42Zm14.75-12.9L11.5 21.85V39H41V21.85Zm0-3.35 14.45-7.1H11.8ZM41 18.65H11.5 41Z"></path></svg><!--]--></span></a><a href="/about" class="_button_15t7y_1 _variant-outline_15t7y_12 _size-md_15t7y_38 _suffixed_15t7y_42"><!----><span class="_title_15t7y_49"><!--[--> View Portfolio <!--]--></span><span class="_suffix_15t7y_42"><!--[--><svg xmlns="http://www.w3.org/2000/svg" height="22" width="22" viewbox="1 -2 50 50" fill="currentColor"><path xmlns="http://www.w3.org/2000/svg" d="M12.4 33q2.7 0 5.225.625 2.525.625 4.975 1.875V14.15q-2.25-1.5-4.875-2.325Q15.1 11 12.4 11q-1.9 0-3.725.475Q6.85 11.95 5 12.65v21.7q1.55-.7 3.525-1.025Q10.5 33 12.4 33Zm13.2 2.5q2.5-1.25 4.9-1.875Q32.9 33 35.6 33q1.9 0 3.925.3t3.475.8V12.65q-1.7-.85-3.6-1.25-1.9-.4-3.8-.4-2.7 0-5.225.825-2.525.825-4.775 2.325ZM24.1 40q-2.55-1.9-5.55-2.925T12.4 36.05q-1.85 0-3.6.45t-3.5 1.1q-1.15.55-2.225-.15Q2 36.75 2 35.45V12.3q0-.75.35-1.375T3.4 9.95q2.1-1 4.375-1.475Q10.05 8 12.4 8q3.15 0 6.125.85t5.575 2.6q2.55-1.75 5.475-2.6Q32.5 8 35.6 8q2.35 0 4.6.475 2.25.475 4.35 1.475.7.35 1.075.975T46 12.3v23.15q0 1.4-1.125 2.125-1.125.725-2.225.025-1.7-.7-3.45-1.125-1.75-.425-3.6-.425-3.15 0-6.05 1.05T24.1 40ZM13.8 23.55Z"></path></svg><!--]--></span></a><!--]--></div></div><div class="_image_1s2ro_16"><img src="/nuxt/desk.91eb5d74.svg" class="_desk_1s2ro_60" alt="It's me, muerwre"></div></div></section><div class="_reference_su98q_22"><h1>Cheatsheet</h1><div class="_grid_su98q_26"><div class="masonry-wall" style="display:flex;gap:10px;"><!--[--><div class="masonry-column" data-index="0" style="display:flex;flex-basis:0px;flex-direction:column;flex-grow:1;gap:10px;"><!--[--><div class="masonry-item"><!--[--><div class="_row_1ufrv_1"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><!--]--></div><div class="masonry-item"><!--[--><div class="_row_1ufrv_1"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><!--]--></div><div class="masonry-item"><!--[--><div class="_row_1ufrv_1"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><!--]--></div><div class="masonry-item"><!--[--><div class="_row_1ufrv_1"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><!--]--></div><div class="masonry-item"><!--[--><div class="_row_1ufrv_1"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><!--]--></div><div class="masonry-item"><!--[--><div class="_row_1ufrv_1"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><!--]--></div><div class="masonry-item"><!--[--><div class="_row_1ufrv_1"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><!--]--></div><div class="masonry-item"><!--[--><div class="_row_1ufrv_1"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><!--]--></div><div class="masonry-item"><!--[--><div class="_row_1ufrv_1"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><!--]--></div><div class="masonry-item"><!--[--><div class="_row_1ufrv_1"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><!--]--></div><div class="masonry-item"><!--[--><div class="_row_1ufrv_1"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></div><!--]--></div><!--]--></div></div></div></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div><script type="module">import p from "/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695523404}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/landing.ff1ac866.js" crossorigin></script><script type="module" src="/nuxt/LayoutHeader.76a50cb0.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/index.99c1fdcf.js" crossorigin></script><script type="module" src="/nuxt/HomeHeader.56547773.js" crossorigin></script><script type="module" src="/nuxt/UiButtonGroup.0c17ae03.js" crossorigin></script><script type="module" src="/nuxt/UiActionButton.25935799.js" crossorigin></script><script type="module" src="/nuxt/IconsSend.7a402237.js" crossorigin></script><script type="module" src="/nuxt/IconsBook.89f61b8b.js" crossorigin></script><script type="module" src="/nuxt/HomeContentList.e8fdd6c9.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_wrapper_1qq06_1" hastransition="true"><div class="_header_container_1qq06_8"><div class="_header_content_1qq06_38"><header class="_header_t5iqp_1"><a aria-current="page" href="/" class="_active_t5iqp_11 router-link-exact-active">Home</a><a href="/about" class="">About</a><a href="/contacts" class="">Contacts</a></header></div></div><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_main_su98q_1"><section><div class="_grid_1s2ro_1"><div class="_text_1s2ro_41"><h1 class="_title_1s2ro_27">Welcome to my Obsidian Garden</h1><div class="_subtitle_1s2ro_31"><p><img src="/nuxt/obsidian.8dc2a844.svg" alt="" width="14" height="14"><a href="https://obsidian.md" rel="noopener noreferrer" target="_blank">Obsidian</a> is a note-taking app, that I use to store <b>chunks of code</b> and <b>technical documentation</b>. Here's the frontend for my notebook. </p><p>There's also my Curriculum Vitae and contact info here.</p></div><div class="_buttons_1s2ro_69 _buttons_1ss95_230 _buttons_1s2ro_69"><!--[--><a href="/contacts" class="_button_15t7y_1 _variant-primary_15t7y_9 _size-md_15t7y_38 _suffixed_15t7y_42"><!----><span class="_title_15t7y_49"><!--[--> Contact me <!--]--></span><span class="_suffix_15t7y_42"><!--[--><svg xmlns="http://www.w3.org/2000/svg" height="22" width="22" viewbox="0 0 48 48" fill="currentColor"><path xmlns="http://www.w3.org/2000/svg" d="M7 34.05Q5.85 33.8 4.925 33 4 32.2 4 31.05V13.9q0-.6.25-1.125t.95-.875l16-7.9 15.35 7.9q.45.35.9 1.025.45.675.6 1.225h-3.7L21.2 7.35 7 14.4ZM11.5 42q-1.2 0-2.1-.925-.9-.925-.9-2.075V18.65q0-1.15.9-2.075.9-.925 2.1-.925H41q1.15 0 2.075.925Q44 17.5 44 18.65V39q0 1.15-.925 2.075Q42.15 42 41 42Zm14.75-12.9L11.5 21.85V39H41V21.85Zm0-3.35 14.45-7.1H11.8ZM41 18.65H11.5 41Z"></path></svg><!--]--></span></a><a href="/about" class="_button_15t7y_1 _variant-outline_15t7y_12 _size-md_15t7y_38 _suffixed_15t7y_42"><!----><span class="_title_15t7y_49"><!--[--> View Portfolio <!--]--></span><span class="_suffix_15t7y_42"><!--[--><svg xmlns="http://www.w3.org/2000/svg" height="22" width="22" viewbox="1 -2 50 50" fill="currentColor"><path xmlns="http://www.w3.org/2000/svg" d="M12.4 33q2.7 0 5.225.625 2.525.625 4.975 1.875V14.15q-2.25-1.5-4.875-2.325Q15.1 11 12.4 11q-1.9 0-3.725.475Q6.85 11.95 5 12.65v21.7q1.55-.7 3.525-1.025Q10.5 33 12.4 33Zm13.2 2.5q2.5-1.25 4.9-1.875Q32.9 33 35.6 33q1.9 0 3.925.3t3.475.8V12.65q-1.7-.85-3.6-1.25-1.9-.4-3.8-.4-2.7 0-5.225.825-2.525.825-4.775 2.325ZM24.1 40q-2.55-1.9-5.55-2.925T12.4 36.05q-1.85 0-3.6.45t-3.5 1.1q-1.15.55-2.225-.15Q2 36.75 2 35.45V12.3q0-.75.35-1.375T3.4 9.95q2.1-1 4.375-1.475Q10.05 8 12.4 8q3.15 0 6.125.85t5.575 2.6q2.55-1.75 5.475-2.6Q32.5 8 35.6 8q2.35 0 4.6.475 2.25.475 4.35 1.475.7.35 1.075.975T46 12.3v23.15q0 1.4-1.125 2.125-1.125.725-2.225.025-1.7-.7-3.45-1.125-1.75-.425-3.6-.425-3.15 0-6.05 1.05T24.1 40ZM13.8 23.55Z"></path></svg><!--]--></span></a><!--]--></div></div><div class="_image_1s2ro_16"><img src="/nuxt/desk.91eb5d74.svg" class="_desk_1s2ro_60" alt="It's me, muerwre"></div></div></section><div class="_reference_su98q_22"><h1>Cheatsheet</h1><div class="_grid_su98q_26"><div class="masonry-wall" style="display:flex;gap:10px;"><!--[--><div class="masonry-column" data-index="0" style="display:flex;flex-basis:0px;flex-direction:column;flex-grow:1;gap:10px;"><!--[--><div class="masonry-item"><!--[--><div class="_row_1ufrv_1"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><!--]--></div><div class="masonry-item"><!--[--><div class="_row_1ufrv_1"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><!--]--></div><div class="masonry-item"><!--[--><div class="_row_1ufrv_1"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><!--]--></div><div class="masonry-item"><!--[--><div class="_row_1ufrv_1"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><!--]--></div><div class="masonry-item"><!--[--><div class="_row_1ufrv_1"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><!--]--></div><div class="masonry-item"><!--[--><div class="_row_1ufrv_1"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><!--]--></div><div class="masonry-item"><!--[--><div class="_row_1ufrv_1"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><!--]--></div><div class="masonry-item"><!--[--><div class="_row_1ufrv_1"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><!--]--></div><div class="masonry-item"><!--[--><div class="_row_1ufrv_1"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><!--]--></div><div class="masonry-item"><!--[--><div class="_row_1ufrv_1"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><!--]--></div><div class="masonry-item"><!--[--><div class="_row_1ufrv_1"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></div><!--]--></div><!--]--></div></div></div></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div><script type="module">import p from "/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697982038}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/landing.ff1ac866.js" crossorigin></script><script type="module" src="/nuxt/LayoutHeader.76a50cb0.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/index.99c1fdcf.js" crossorigin></script><script type="module" src="/nuxt/HomeHeader.56547773.js" crossorigin></script><script type="module" src="/nuxt/UiButtonGroup.0c17ae03.js" crossorigin></script><script type="module" src="/nuxt/UiActionButton.25935799.js" crossorigin></script><script type="module" src="/nuxt/IconsSend.7a402237.js" crossorigin></script><script type="module" src="/nuxt/IconsBook.89f61b8b.js" crossorigin></script><script type="module" src="/nuxt/HomeContentList.e8fdd6c9.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/linux/find-out-who-uses-swap/_payload.js b/docs/linux/find-out-who-uses-swap/_payload.js
index 8a393f1..dc424be 100644
--- a/docs/linux/find-out-who-uses-swap/_payload.js
+++ b/docs/linux/find-out-who-uses-swap/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:k,_path:l},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-wEk0a2qvIe":{_path:l,_dir:"linux",_draft:i,_partial:i,_locale:"en",_empty:i,title:k,description:g,excerpt:{type:m,children:[{type:a,tag:h,props:{code:j,language:n},children:[{type:a,tag:o,props:{},children:[{type:a,tag:h,props:{__ignoreMap:g},children:[{type:b,value:j}]}]}]}]},body:{type:m,children:[{type:a,tag:h,props:{code:j,language:n},children:[{type:a,tag:o,props:{},children:[{type:a,tag:h,props:{__ignoreMap:g},children:[{type:a,tag:c,props:{class:"line"},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:"for"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:"ct-8ee681"},children:[{type:b,value:"file"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:"in"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" \u002Fproc\u002F"}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:"*"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"\u002Fstatus "}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:";"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:"do"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" awk "}]},{type:a,tag:c,props:{class:"ct-1d7396"},children:[{type:b,value:"'\u002FVmSwap|Name\u002F{printf $2 \" \" $3}END{ print \"\"}'"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:"done"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" sort -k 2 -n -r "}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" less"}]}]}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-1d7396{color:#A5D6FF}.ct-8ee681{color:#C9D1D9}.ct-bbbdc4{color:#C9D1D9}.ct-b91087{color:#FF7B72}.light .ct-b91087{color:#859900}.light .ct-bbbdc4{color:#657B83}.light .ct-8ee681{color:#268BD2}.light .ct-1d7396{color:#2AA198}"}]}],toc:{title:g,searchDepth:q,depth:q,links:[]}},_type:"markdown",_id:"content:Linux:Find out who uses swap.md",_source:"content",_file:"Linux\u002FFind out who uses swap.md",_extension:"md"}},prerenderedAt:1703695531308}}("element","text","span","ct-bbbdc4","ct-b91087"," ","","code",false,"for file in \u002Fproc\u002F*\u002Fstatus ; do awk '\u002FVmSwap|Name\u002F{printf $2 \" \" $3}END{ print \"\"}' $file; done | sort -k 2 -n -r | less\n","Find Out Who Uses Swap","\u002Flinux\u002Ffind-out-who-uses-swap","root","shell","pre","|",2))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:k,_path:l},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-wEk0a2qvIe":{_path:l,_dir:"linux",_draft:i,_partial:i,_locale:"en",_empty:i,title:k,description:g,excerpt:{type:m,children:[{type:a,tag:h,props:{code:j,language:n},children:[{type:a,tag:o,props:{},children:[{type:a,tag:h,props:{__ignoreMap:g},children:[{type:b,value:j}]}]}]}]},body:{type:m,children:[{type:a,tag:h,props:{code:j,language:n},children:[{type:a,tag:o,props:{},children:[{type:a,tag:h,props:{__ignoreMap:g},children:[{type:a,tag:c,props:{class:"line"},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:"for"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:"ct-a91e4d"},children:[{type:b,value:"file"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:"in"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" \u002Fproc\u002F"}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:"*"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"\u002Fstatus "}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:";"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:"do"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" awk "}]},{type:a,tag:c,props:{class:"ct-812a0c"},children:[{type:b,value:"'\u002FVmSwap|Name\u002F{printf $2 \" \" $3}END{ print \"\"}'"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:"done"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:f}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" sort -k 2 -n -r "}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" less"}]}]}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-812a0c{color:#A5D6FF}.ct-a91e4d{color:#C9D1D9}.ct-30c242{color:#C9D1D9}.ct-0eb2c3{color:#FF7B72}.light .ct-0eb2c3{color:#859900}.light .ct-30c242{color:#657B83}.light .ct-a91e4d{color:#268BD2}.light .ct-812a0c{color:#2AA198}"}]}],toc:{title:g,searchDepth:q,depth:q,links:[]}},_type:"markdown",_id:"content:Linux:Find out who uses swap.md",_source:"content",_file:"Linux\u002FFind out who uses swap.md",_extension:"md"}},prerenderedAt:1703697992766}}("element","text","span","ct-30c242","ct-0eb2c3"," ","","code",false,"for file in \u002Fproc\u002F*\u002Fstatus ; do awk '\u002FVmSwap|Name\u002F{printf $2 \" \" $3}END{ print \"\"}' $file; done | sort -k 2 -n -r | less\n","Find Out Who Uses Swap","\u002Flinux\u002Ffind-out-who-uses-swap","root","shell","pre","|",2))
\ No newline at end of file
diff --git a/docs/linux/find-out-who-uses-swap/index.html b/docs/linux/find-out-who-uses-swap/index.html
index 53aa408..77107fe 100644
--- a/docs/linux/find-out-who-uses-swap/index.html
+++ b/docs/linux/find-out-who-uses-swap/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Find Out Who Uses Swap • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="head:count" content="2"><link rel="modulepreload" href="/linux/find-out-who-uses-swap/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a aria-current="page" href="/linux/find-out-who-uses-swap" class="router-link-active _active_192pu_81 _link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Find Out Who Uses Swap</h1><article><div><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-b91087">for</span><span class="ct-bbbdc4"> </span><span class="ct-8ee681">file</span><span class="ct-bbbdc4"> </span><span class="ct-b91087">in</span><span class="ct-bbbdc4"> /proc/</span><span class="ct-b91087">*</span><span class="ct-bbbdc4">/status </span><span class="ct-b91087">;</span><span class="ct-bbbdc4"> </span><span class="ct-b91087">do</span><span class="ct-bbbdc4"> awk </span><span class="ct-1d7396">'/VmSwap|Name/{printf $2 " " $3}END{ print ""}'</span><span class="ct-bbbdc4"> </span><span class="ct-b91087">done</span><span class="ct-bbbdc4"> </span><span class="ct-b91087">|</span><span class="ct-bbbdc4"> sort -k 2 -n -r </span><span class="ct-b91087">|</span><span class="ct-bbbdc4"> less</span></span></code></pre><!--]--></div><style>.ct-1d7396{color:#A5D6FF}.ct-8ee681{color:#C9D1D9}.ct-bbbdc4{color:#C9D1D9}.ct-b91087{color:#FF7B72}.light .ct-b91087{color:#859900}.light .ct-bbbdc4{color:#657B83}.light .ct-8ee681{color:#268BD2}.light .ct-1d7396{color:#2AA198}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/linux/find-out-who-uses-swap/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695531308}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a aria-current="page" href="/linux/find-out-who-uses-swap" class="router-link-active _active_192pu_81 _link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Find Out Who Uses Swap</h1><article><div><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-0eb2c3">for</span><span class="ct-30c242"> </span><span class="ct-a91e4d">file</span><span class="ct-30c242"> </span><span class="ct-0eb2c3">in</span><span class="ct-30c242"> /proc/</span><span class="ct-0eb2c3">*</span><span class="ct-30c242">/status </span><span class="ct-0eb2c3">;</span><span class="ct-30c242"> </span><span class="ct-0eb2c3">do</span><span class="ct-30c242"> awk </span><span class="ct-812a0c">'/VmSwap|Name/{printf $2 " " $3}END{ print ""}'</span><span class="ct-30c242"> </span><span class="ct-0eb2c3">done</span><span class="ct-30c242"> </span><span class="ct-0eb2c3">|</span><span class="ct-30c242"> sort -k 2 -n -r </span><span class="ct-0eb2c3">|</span><span class="ct-30c242"> less</span></span></code></pre><!--]--></div><style>.ct-812a0c{color:#A5D6FF}.ct-a91e4d{color:#C9D1D9}.ct-30c242{color:#C9D1D9}.ct-0eb2c3{color:#FF7B72}.light .ct-0eb2c3{color:#859900}.light .ct-30c242{color:#657B83}.light .ct-a91e4d{color:#268BD2}.light .ct-812a0c{color:#2AA198}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/linux/find-out-who-uses-swap/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697992766}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/linux/fixing-lagging-usb-headphones/_payload.js b/docs/linux/fixing-lagging-usb-headphones/_payload.js
index 288f7c5..f4826be 100644
--- a/docs/linux/fixing-lagging-usb-headphones/_payload.js
+++ b/docs/linux/fixing-lagging-usb-headphones/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:C,_path:D},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-WBdE8kMsNc":{_path:D,_dir:"linux",_draft:s,_partial:s,_locale:"en",_empty:s,title:C,description:t,excerpt:{type:E,children:[{type:a,tag:i,props:{},children:[{type:b,value:t}]},{type:a,tag:d,props:{code:u,language:j},children:[{type:a,tag:k,props:{},children:[{type:a,tag:d,props:{__ignoreMap:h},children:[{type:b,value:u}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:F},{type:a,tag:m,props:{},children:[{type:b,value:G}]},{type:b,value:H}]},{type:a,tag:d,props:{code:v,language:j},children:[{type:a,tag:k,props:{},children:[{type:a,tag:d,props:{__ignoreMap:h},children:[{type:b,value:v}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:I}]},{type:a,tag:d,props:{code:w,language:j},children:[{type:a,tag:k,props:{},children:[{type:a,tag:d,props:{__ignoreMap:h},children:[{type:b,value:w}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:J}]},{type:a,tag:d,props:{code:x,language:j},children:[{type:a,tag:k,props:{},children:[{type:a,tag:d,props:{__ignoreMap:h},children:[{type:b,value:x}]}]}]},{type:a,tag:o,props:{id:y},children:[{type:b,value:z}]},{type:a,tag:p,props:{},children:[{type:a,tag:e,props:{},children:[{type:b,value:K},{type:a,tag:m,props:{},children:[{type:b,value:L}]},{type:b,value:M},{type:a,tag:m,props:{},children:[{type:b,value:N}]}]},{type:a,tag:e,props:{},children:[{type:b,value:O}]},{type:a,tag:e,props:{},children:[{type:b,value:P},{type:a,tag:f,props:{href:q,rel:[g]},children:[{type:b,value:Q}]},{type:b,value:R}]}]},{type:a,tag:o,props:{id:A},children:[{type:b,value:B}]},{type:a,tag:p,props:{},children:[{type:a,tag:e,props:{},children:[{type:a,tag:f,props:{href:S,rel:[g]},children:[{type:b,value:T}]}]},{type:a,tag:e,props:{},children:[{type:a,tag:f,props:{href:U,rel:[g]},children:[{type:b,value:V}]}]},{type:a,tag:e,props:{},children:[{type:a,tag:f,props:{href:W,rel:[g]},children:[{type:b,value:X}]}]},{type:a,tag:e,props:{},children:[{type:a,tag:f,props:{href:q,rel:[g]},children:[{type:b,value:Y}]}]}]}]},body:{type:E,children:[{type:a,tag:i,props:{},children:[{type:b,value:t}]},{type:a,tag:d,props:{code:u,language:j},children:[{type:a,tag:k,props:{},children:[{type:a,tag:d,props:{__ignoreMap:h},children:[{type:a,tag:c,props:{class:n},children:[{type:a,tag:c,props:{class:l},children:[{type:b,value:"Bluetooth: hci0: ACL packet "}]},{type:a,tag:c,props:{class:Z},children:[{type:b,value:"for"}]},{type:a,tag:c,props:{class:l},children:[{type:b,value:" unknown connection handle 256"}]}]}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:F},{type:a,tag:m,props:{},children:[{type:b,value:G}]},{type:b,value:H}]},{type:a,tag:d,props:{code:v,language:j},children:[{type:a,tag:k,props:{},children:[{type:a,tag:d,props:{__ignoreMap:h},children:[{type:a,tag:c,props:{class:n},children:[{type:a,tag:c,props:{class:_},children:[{type:b,value:"# Disable autosuspend for btusb to make the bluetooth keyboard work again"}]}]},{type:a,tag:c,props:{class:n},children:[{type:a,tag:c,props:{class:l},children:[{type:b,value:"options btusb enable_autosuspend=n"}]}]}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:I}]},{type:a,tag:d,props:{code:w,language:j},children:[{type:a,tag:k,props:{},children:[{type:a,tag:d,props:{__ignoreMap:h},children:[{type:a,tag:c,props:{class:n},children:[{type:a,tag:c,props:{class:l},children:[{type:b,value:"mkinitcpio -P"}]}]}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:J}]},{type:a,tag:d,props:{code:x,language:j},children:[{type:a,tag:k,props:{},children:[{type:a,tag:d,props:{__ignoreMap:h},children:[{type:a,tag:c,props:{class:n},children:[{type:a,tag:c,props:{class:l},children:[{type:b,value:"$ systool -v -m btusb "}]},{type:a,tag:c,props:{class:Z},children:[{type:b,value:"|"}]},{type:a,tag:c,props:{class:l},children:[{type:b,value:" grep autosuspend"}]}]},{type:a,tag:c,props:{class:n},children:[{type:a,tag:c,props:{class:l},children:[{type:b,value:" enable_autosuspend = "}]},{type:a,tag:c,props:{class:"ct-7b78b9"},children:[{type:b,value:"\"N\""}]},{type:a,tag:c,props:{class:l},children:[{type:b,value:" "}]},{type:a,tag:c,props:{class:_},children:[{type:b,value:"# should be \"N\""}]}]}]}]}]},{type:a,tag:o,props:{id:y},children:[{type:b,value:z}]},{type:a,tag:p,props:{},children:[{type:a,tag:e,props:{},children:[{type:b,value:K},{type:a,tag:m,props:{},children:[{type:b,value:L}]},{type:b,value:M},{type:a,tag:m,props:{},children:[{type:b,value:N}]}]},{type:a,tag:e,props:{},children:[{type:b,value:O}]},{type:a,tag:e,props:{},children:[{type:b,value:P},{type:a,tag:f,props:{href:q,rel:[g]},children:[{type:b,value:Q}]},{type:b,value:R}]}]},{type:a,tag:o,props:{id:A},children:[{type:b,value:B}]},{type:a,tag:p,props:{},children:[{type:a,tag:e,props:{},children:[{type:a,tag:f,props:{href:S,rel:[g]},children:[{type:b,value:T}]}]},{type:a,tag:e,props:{},children:[{type:a,tag:f,props:{href:U,rel:[g]},children:[{type:b,value:V}]}]},{type:a,tag:e,props:{},children:[{type:a,tag:f,props:{href:W,rel:[g]},children:[{type:b,value:X}]}]},{type:a,tag:e,props:{},children:[{type:a,tag:f,props:{href:q,rel:[g]},children:[{type:b,value:Y}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-7b78b9{color:#A5D6FF}.ct-bbfceb{color:#8B949E}.ct-538076{color:#FF7B72}.ct-44b0c7{color:#C9D1D9}.light .ct-44b0c7{color:#657B83}.light .ct-538076{color:#859900}.light .ct-bbfceb{color:#93A1A1}.light .ct-7b78b9{color:#2AA198}"}]}],toc:{title:h,searchDepth:r,depth:r,links:[{id:y,depth:r,text:z},{id:A,depth:r,text:B}]}},_type:"markdown",_id:"content:Linux:Fixing lagging USB Headphones.md",_source:"content",_file:"Linux\u002FFixing lagging USB Headphones.md",_extension:"md"}},prerenderedAt:1703695531331}}("element","text","span","code","li","a","nofollow","","p","shell","pre","ct-44b0c7","code-inline","line","h2","ul","https:\u002F\u002Fubuntuforums.org\u002Fshowthread.php?t=2159645&page=6&p=12926730#post12926730",2,false,"When receiving messages like this:","Bluetooth: hci0: ACL packet for unknown connection handle 256\n","# Disable autosuspend for btusb to make the bluetooth keyboard work again\noptions btusb enable_autosuspend=n\n","mkinitcpio -P\n","$ systool -v -m btusb | grep autosuspend\n enable_autosuspend = \"N\" # should be \"N\"\n","also","Also","refs","Refs","Fixing Lagging USB Headphones","\u002Flinux\u002Ffixing-lagging-usb-headphones","root","Create ","\u002Fetc\u002Fmodprobe.d\u002Fdisable_btusb_autosuspend.conf"," with following content:","Then run","Reboot and debug with","That could be either ","btusb.enable_autosuspend=n"," or ","usbcore.autosuspend=-1","TLP has settings for BTUSB, check it to exclude your device from autosuspend","There's a guy on ubuntuforums, who wrote ","solution",", which disables autosuspend manually","https:\u002F\u002Fbbs.archlinux.org\u002Fviewtopic.php?id=236479","Bluetooth keyboard disconnects randomly","https:\u002F\u002Fbbs.archlinux.org\u002Fviewtopic.php?id=275962","Bluetooth keeps turning off","https:\u002F\u002Fwiki.archlinux.org\u002Ftitle\u002FBluetooth#Device_connects,_then_disconnects_after_a_few_moments","ArchWiki: Device connects, then disconnects after a few moments","Said solution with a script in rc.local","ct-538076","ct-bbfceb"))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:C,_path:D},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-WBdE8kMsNc":{_path:D,_dir:"linux",_draft:s,_partial:s,_locale:"en",_empty:s,title:C,description:t,excerpt:{type:E,children:[{type:a,tag:i,props:{},children:[{type:b,value:t}]},{type:a,tag:d,props:{code:u,language:j},children:[{type:a,tag:k,props:{},children:[{type:a,tag:d,props:{__ignoreMap:h},children:[{type:b,value:u}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:F},{type:a,tag:m,props:{},children:[{type:b,value:G}]},{type:b,value:H}]},{type:a,tag:d,props:{code:v,language:j},children:[{type:a,tag:k,props:{},children:[{type:a,tag:d,props:{__ignoreMap:h},children:[{type:b,value:v}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:I}]},{type:a,tag:d,props:{code:w,language:j},children:[{type:a,tag:k,props:{},children:[{type:a,tag:d,props:{__ignoreMap:h},children:[{type:b,value:w}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:J}]},{type:a,tag:d,props:{code:x,language:j},children:[{type:a,tag:k,props:{},children:[{type:a,tag:d,props:{__ignoreMap:h},children:[{type:b,value:x}]}]}]},{type:a,tag:o,props:{id:y},children:[{type:b,value:z}]},{type:a,tag:p,props:{},children:[{type:a,tag:e,props:{},children:[{type:b,value:K},{type:a,tag:m,props:{},children:[{type:b,value:L}]},{type:b,value:M},{type:a,tag:m,props:{},children:[{type:b,value:N}]}]},{type:a,tag:e,props:{},children:[{type:b,value:O}]},{type:a,tag:e,props:{},children:[{type:b,value:P},{type:a,tag:f,props:{href:q,rel:[g]},children:[{type:b,value:Q}]},{type:b,value:R}]}]},{type:a,tag:o,props:{id:A},children:[{type:b,value:B}]},{type:a,tag:p,props:{},children:[{type:a,tag:e,props:{},children:[{type:a,tag:f,props:{href:S,rel:[g]},children:[{type:b,value:T}]}]},{type:a,tag:e,props:{},children:[{type:a,tag:f,props:{href:U,rel:[g]},children:[{type:b,value:V}]}]},{type:a,tag:e,props:{},children:[{type:a,tag:f,props:{href:W,rel:[g]},children:[{type:b,value:X}]}]},{type:a,tag:e,props:{},children:[{type:a,tag:f,props:{href:q,rel:[g]},children:[{type:b,value:Y}]}]}]}]},body:{type:E,children:[{type:a,tag:i,props:{},children:[{type:b,value:t}]},{type:a,tag:d,props:{code:u,language:j},children:[{type:a,tag:k,props:{},children:[{type:a,tag:d,props:{__ignoreMap:h},children:[{type:a,tag:c,props:{class:n},children:[{type:a,tag:c,props:{class:l},children:[{type:b,value:"Bluetooth: hci0: ACL packet "}]},{type:a,tag:c,props:{class:Z},children:[{type:b,value:"for"}]},{type:a,tag:c,props:{class:l},children:[{type:b,value:" unknown connection handle 256"}]}]}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:F},{type:a,tag:m,props:{},children:[{type:b,value:G}]},{type:b,value:H}]},{type:a,tag:d,props:{code:v,language:j},children:[{type:a,tag:k,props:{},children:[{type:a,tag:d,props:{__ignoreMap:h},children:[{type:a,tag:c,props:{class:n},children:[{type:a,tag:c,props:{class:_},children:[{type:b,value:"# Disable autosuspend for btusb to make the bluetooth keyboard work again"}]}]},{type:a,tag:c,props:{class:n},children:[{type:a,tag:c,props:{class:l},children:[{type:b,value:"options btusb enable_autosuspend=n"}]}]}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:I}]},{type:a,tag:d,props:{code:w,language:j},children:[{type:a,tag:k,props:{},children:[{type:a,tag:d,props:{__ignoreMap:h},children:[{type:a,tag:c,props:{class:n},children:[{type:a,tag:c,props:{class:l},children:[{type:b,value:"mkinitcpio -P"}]}]}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:J}]},{type:a,tag:d,props:{code:x,language:j},children:[{type:a,tag:k,props:{},children:[{type:a,tag:d,props:{__ignoreMap:h},children:[{type:a,tag:c,props:{class:n},children:[{type:a,tag:c,props:{class:l},children:[{type:b,value:"$ systool -v -m btusb "}]},{type:a,tag:c,props:{class:Z},children:[{type:b,value:"|"}]},{type:a,tag:c,props:{class:l},children:[{type:b,value:" grep autosuspend"}]}]},{type:a,tag:c,props:{class:n},children:[{type:a,tag:c,props:{class:l},children:[{type:b,value:" enable_autosuspend = "}]},{type:a,tag:c,props:{class:"ct-511c36"},children:[{type:b,value:"\"N\""}]},{type:a,tag:c,props:{class:l},children:[{type:b,value:" "}]},{type:a,tag:c,props:{class:_},children:[{type:b,value:"# should be \"N\""}]}]}]}]}]},{type:a,tag:o,props:{id:y},children:[{type:b,value:z}]},{type:a,tag:p,props:{},children:[{type:a,tag:e,props:{},children:[{type:b,value:K},{type:a,tag:m,props:{},children:[{type:b,value:L}]},{type:b,value:M},{type:a,tag:m,props:{},children:[{type:b,value:N}]}]},{type:a,tag:e,props:{},children:[{type:b,value:O}]},{type:a,tag:e,props:{},children:[{type:b,value:P},{type:a,tag:f,props:{href:q,rel:[g]},children:[{type:b,value:Q}]},{type:b,value:R}]}]},{type:a,tag:o,props:{id:A},children:[{type:b,value:B}]},{type:a,tag:p,props:{},children:[{type:a,tag:e,props:{},children:[{type:a,tag:f,props:{href:S,rel:[g]},children:[{type:b,value:T}]}]},{type:a,tag:e,props:{},children:[{type:a,tag:f,props:{href:U,rel:[g]},children:[{type:b,value:V}]}]},{type:a,tag:e,props:{},children:[{type:a,tag:f,props:{href:W,rel:[g]},children:[{type:b,value:X}]}]},{type:a,tag:e,props:{},children:[{type:a,tag:f,props:{href:q,rel:[g]},children:[{type:b,value:Y}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-511c36{color:#A5D6FF}.ct-83708b{color:#8B949E}.ct-e92459{color:#FF7B72}.ct-8e14c6{color:#C9D1D9}.light .ct-8e14c6{color:#657B83}.light .ct-e92459{color:#859900}.light .ct-83708b{color:#93A1A1}.light .ct-511c36{color:#2AA198}"}]}],toc:{title:h,searchDepth:r,depth:r,links:[{id:y,depth:r,text:z},{id:A,depth:r,text:B}]}},_type:"markdown",_id:"content:Linux:Fixing lagging USB Headphones.md",_source:"content",_file:"Linux\u002FFixing lagging USB Headphones.md",_extension:"md"}},prerenderedAt:1703697992796}}("element","text","span","code","li","a","nofollow","","p","shell","pre","ct-8e14c6","code-inline","line","h2","ul","https:\u002F\u002Fubuntuforums.org\u002Fshowthread.php?t=2159645&page=6&p=12926730#post12926730",2,false,"When receiving messages like this:","Bluetooth: hci0: ACL packet for unknown connection handle 256\n","# Disable autosuspend for btusb to make the bluetooth keyboard work again\noptions btusb enable_autosuspend=n\n","mkinitcpio -P\n","$ systool -v -m btusb | grep autosuspend\n enable_autosuspend = \"N\" # should be \"N\"\n","also","Also","refs","Refs","Fixing Lagging USB Headphones","\u002Flinux\u002Ffixing-lagging-usb-headphones","root","Create ","\u002Fetc\u002Fmodprobe.d\u002Fdisable_btusb_autosuspend.conf"," with following content:","Then run","Reboot and debug with","That could be either ","btusb.enable_autosuspend=n"," or ","usbcore.autosuspend=-1","TLP has settings for BTUSB, check it to exclude your device from autosuspend","There's a guy on ubuntuforums, who wrote ","solution",", which disables autosuspend manually","https:\u002F\u002Fbbs.archlinux.org\u002Fviewtopic.php?id=236479","Bluetooth keyboard disconnects randomly","https:\u002F\u002Fbbs.archlinux.org\u002Fviewtopic.php?id=275962","Bluetooth keeps turning off","https:\u002F\u002Fwiki.archlinux.org\u002Ftitle\u002FBluetooth#Device_connects,_then_disconnects_after_a_few_moments","ArchWiki: Device connects, then disconnects after a few moments","Said solution with a script in rc.local","ct-e92459","ct-83708b"))
\ No newline at end of file
diff --git a/docs/linux/fixing-lagging-usb-headphones/index.html b/docs/linux/fixing-lagging-usb-headphones/index.html
index fb04164..3f17a07 100644
--- a/docs/linux/fixing-lagging-usb-headphones/index.html
+++ b/docs/linux/fixing-lagging-usb-headphones/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Fixing Lagging USB Headphones • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="When receiving messages like this:"><meta name="head:count" content="3"><link rel="modulepreload" href="/linux/fixing-lagging-usb-headphones/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseUl.b892d423.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseLi.a224f663.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseA.c52e44f8.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseH2.d950f051.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCodeInline.d9bcf614.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a aria-current="page" href="/linux/fixing-lagging-usb-headphones" class="router-link-active _active_192pu_81 _link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Fixing Lagging USB Headphones</h1><article><div><p><!--[-->When receiving messages like this:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-44b0c7">Bluetooth: hci0: ACL packet </span><span class="ct-538076">for</span><span class="ct-44b0c7"> unknown connection handle 256</span></span></code></pre><!--]--></div><p><!--[-->Create <code><!--[-->/etc/modprobe.d/disable_btusb_autosuspend.conf<!--]--></code> with following content:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-bbfceb"># Disable autosuspend for btusb to make the bluetooth keyboard work again</span></span><span class="line"><span class="ct-44b0c7">options btusb enable_autosuspend=n</span></span></code></pre><!--]--></div><p><!--[-->Then run<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-44b0c7">mkinitcpio -P</span></span></code></pre><!--]--></div><p><!--[-->Reboot and debug with<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-44b0c7">$ systool -v -m btusb </span><span class="ct-538076">|</span><span class="ct-44b0c7"> grep autosuspend</span></span><span class="line"><span class="ct-44b0c7"> enable_autosuspend = </span><span class="ct-7b78b9">"N"</span><span class="ct-44b0c7"> </span><span class="ct-bbfceb"># should be "N"</span></span></code></pre><!--]--></div><h2 id="also"><a href="#also"><!--[-->Also<!--]--></a></h2><ul><!--[--><li><!--[-->That could be either <code><!--[-->btusb.enable_autosuspend=n<!--]--></code> or <code><!--[-->usbcore.autosuspend=-1<!--]--></code><!--]--></li><li><!--[-->TLP has settings for BTUSB, check it to exclude your device from autosuspend<!--]--></li><li><!--[-->There's a guy on ubuntuforums, who wrote <a href="https://ubuntuforums.org/showthread.php?t=2159645&page=6&p=12926730#post12926730" rel="nofollow" target="_blank"><!--[-->solution<!--]--></a>, which disables autosuspend manually<!--]--></li><!--]--></ul><h2 id="refs"><a href="#refs"><!--[-->Refs<!--]--></a></h2><ul><!--[--><li><!--[--><a href="https://bbs.archlinux.org/viewtopic.php?id=236479" rel="nofollow" target="_blank"><!--[-->Bluetooth keyboard disconnects randomly<!--]--></a><!--]--></li><li><!--[--><a href="https://bbs.archlinux.org/viewtopic.php?id=275962" rel="nofollow" target="_blank"><!--[-->Bluetooth keeps turning off<!--]--></a><!--]--></li><li><!--[--><a href="https://wiki.archlinux.org/title/Bluetooth#Device_connects,_then_disconnects_after_a_few_moments" rel="nofollow" target="_blank"><!--[-->ArchWiki: Device connects, then disconnects after a few moments<!--]--></a><!--]--></li><li><!--[--><a href="https://ubuntuforums.org/showthread.php?t=2159645&page=6&p=12926730#post12926730" rel="nofollow" target="_blank"><!--[-->Said solution with a script in rc.local<!--]--></a><!--]--></li><!--]--></ul><style>.ct-7b78b9{color:#A5D6FF}.ct-bbfceb{color:#8B949E}.ct-538076{color:#FF7B72}.ct-44b0c7{color:#C9D1D9}.light .ct-44b0c7{color:#657B83}.light .ct-538076{color:#859900}.light .ct-bbfceb{color:#93A1A1}.light .ct-7b78b9{color:#2AA198}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/linux/fixing-lagging-usb-headphones/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695531331}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseUl.b892d423.js" crossorigin></script><script type="module" src="/nuxt/ProseLi.a224f663.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a aria-current="page" href="/linux/fixing-lagging-usb-headphones" class="router-link-active _active_192pu_81 _link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Fixing Lagging USB Headphones</h1><article><div><p><!--[-->When receiving messages like this:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-8e14c6">Bluetooth: hci0: ACL packet </span><span class="ct-e92459">for</span><span class="ct-8e14c6"> unknown connection handle 256</span></span></code></pre><!--]--></div><p><!--[-->Create <code><!--[-->/etc/modprobe.d/disable_btusb_autosuspend.conf<!--]--></code> with following content:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-83708b"># Disable autosuspend for btusb to make the bluetooth keyboard work again</span></span><span class="line"><span class="ct-8e14c6">options btusb enable_autosuspend=n</span></span></code></pre><!--]--></div><p><!--[-->Then run<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-8e14c6">mkinitcpio -P</span></span></code></pre><!--]--></div><p><!--[-->Reboot and debug with<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-8e14c6">$ systool -v -m btusb </span><span class="ct-e92459">|</span><span class="ct-8e14c6"> grep autosuspend</span></span><span class="line"><span class="ct-8e14c6"> enable_autosuspend = </span><span class="ct-511c36">"N"</span><span class="ct-8e14c6"> </span><span class="ct-83708b"># should be "N"</span></span></code></pre><!--]--></div><h2 id="also"><a href="#also"><!--[-->Also<!--]--></a></h2><ul><!--[--><li><!--[-->That could be either <code><!--[-->btusb.enable_autosuspend=n<!--]--></code> or <code><!--[-->usbcore.autosuspend=-1<!--]--></code><!--]--></li><li><!--[-->TLP has settings for BTUSB, check it to exclude your device from autosuspend<!--]--></li><li><!--[-->There's a guy on ubuntuforums, who wrote <a href="https://ubuntuforums.org/showthread.php?t=2159645&page=6&p=12926730#post12926730" rel="nofollow" target="_blank"><!--[-->solution<!--]--></a>, which disables autosuspend manually<!--]--></li><!--]--></ul><h2 id="refs"><a href="#refs"><!--[-->Refs<!--]--></a></h2><ul><!--[--><li><!--[--><a href="https://bbs.archlinux.org/viewtopic.php?id=236479" rel="nofollow" target="_blank"><!--[-->Bluetooth keyboard disconnects randomly<!--]--></a><!--]--></li><li><!--[--><a href="https://bbs.archlinux.org/viewtopic.php?id=275962" rel="nofollow" target="_blank"><!--[-->Bluetooth keeps turning off<!--]--></a><!--]--></li><li><!--[--><a href="https://wiki.archlinux.org/title/Bluetooth#Device_connects,_then_disconnects_after_a_few_moments" rel="nofollow" target="_blank"><!--[-->ArchWiki: Device connects, then disconnects after a few moments<!--]--></a><!--]--></li><li><!--[--><a href="https://ubuntuforums.org/showthread.php?t=2159645&page=6&p=12926730#post12926730" rel="nofollow" target="_blank"><!--[-->Said solution with a script in rc.local<!--]--></a><!--]--></li><!--]--></ul><style>.ct-511c36{color:#A5D6FF}.ct-83708b{color:#8B949E}.ct-e92459{color:#FF7B72}.ct-8e14c6{color:#C9D1D9}.light .ct-8e14c6{color:#657B83}.light .ct-e92459{color:#859900}.light .ct-83708b{color:#93A1A1}.light .ct-511c36{color:#2AA198}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/linux/fixing-lagging-usb-headphones/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697992796}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseUl.b892d423.js" crossorigin></script><script type="module" src="/nuxt/ProseLi.a224f663.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/linux/gitea-for-git-hosting/_payload.js b/docs/linux/gitea-for-git-hosting/_payload.js
index 7bf1351..c09426c 100644
--- a/docs/linux/gitea-for-git-hosting/_payload.js
+++ b/docs/linux/gitea-for-git-hosting/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:t,_path:u},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-t1CslyFV8V":{_path:u,_dir:"linux",_draft:n,_partial:n,_locale:"en",_empty:n,title:t,description:"Self-hosted #git repositories with gitea and #docker.",excerpt:{type:v,children:[{type:a,tag:w,props:{},children:[{type:c,value:x},{type:a,tag:y,props:{href:z,rel:[A]},children:[{type:c,value:k}]},{type:c,value:B}]},{type:a,tag:C,props:{id:o},children:[{type:c,value:p}]},{type:a,tag:m,props:{code:q,language:D},children:[{type:a,tag:E,props:{},children:[{type:a,tag:m,props:{__ignoreMap:r},children:[{type:c,value:q}]}]}]}]},body:{type:v,children:[{type:a,tag:w,props:{},children:[{type:c,value:x},{type:a,tag:y,props:{href:z,rel:[A]},children:[{type:c,value:k}]},{type:c,value:B}]},{type:a,tag:C,props:{id:o},children:[{type:c,value:p}]},{type:a,tag:m,props:{code:q,language:D},children:[{type:a,tag:E,props:{},children:[{type:a,tag:m,props:{__ignoreMap:r},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:f},children:[{type:c,value:"version"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\"3\""}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:f},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"external"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:"ct-c29822"},children:[{type:c,value:"false"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:f},children:[{type:c,value:"services"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"server"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"image"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"gitea\u002Fgitea:latest"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"container_name"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"environment"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"USER_UID=1000"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"USER_GID=1000"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"restart"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"always"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"volumes"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:".\u002Fvar\u002Flib\u002Fgitea:\u002Fdata"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:".\u002Fetc\u002Fgitea:\u002Fetc\u002Fgitea"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\u002Fetc\u002Ftimezone:\u002Fetc\u002Ftimezone:ro"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\u002Fetc\u002Flocaltime:\u002Fetc\u002Flocaltime:ro"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"ports"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\"3000:3000\""}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\"222:22\""}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-c29822{color:#79C0FF}.ct-ec9e62{color:#A5D6FF}.ct-32bc1d{color:#C9D1D9}.ct-a3922c{color:#7EE787}.light .ct-a3922c{color:#268BD2}.light .ct-32bc1d{color:#657B83}.light .ct-ec9e62{color:#2AA198}.light .ct-c29822{color:#B58900}"}]}],toc:{title:r,searchDepth:s,depth:s,links:[{id:o,depth:s,text:p}]}},_type:"markdown",_id:"content:Linux:Gitea for git hosting.md",_source:"content",_file:"Linux\u002FGitea for git hosting.md",_extension:"md"}},prerenderedAt:1703695531359}}("element","span","text","ct-32bc1d","line","ct-a3922c","ct-ec9e62"," - ",":"," ","gitea",": ","code",false,"setting-up-with-docker-compose","Setting up with docker-compose","version: \"3\"\n\nnetworks:\n gitea:\n external: false\nservices:\n server:\n image: gitea\u002Fgitea:latest\n container_name: gitea\n environment:\n - USER_UID=1000\n - USER_GID=1000\n restart: always\n networks:\n - gitea\n volumes:\n - .\u002Fvar\u002Flib\u002Fgitea:\u002Fdata\n - .\u002Fetc\u002Fgitea:\u002Fetc\u002Fgitea\n - \u002Fetc\u002Ftimezone:\u002Fetc\u002Ftimezone:ro\n - \u002Fetc\u002Flocaltime:\u002Fetc\u002Flocaltime:ro\n ports:\n - \"3000:3000\"\n - \"222:22\"\n","",2,"Gitea For Git Hosting","\u002Flinux\u002Fgitea-for-git-hosting","root","p","Self-hosted #git repositories with ","a","https:\u002F\u002Fgitea.io\u002Fru-ru\u002F","nofollow"," and #docker.","h2","yaml","pre","networks"," "))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:t,_path:u},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-t1CslyFV8V":{_path:u,_dir:"linux",_draft:n,_partial:n,_locale:"en",_empty:n,title:t,description:"Self-hosted #git repositories with gitea and #docker.",excerpt:{type:v,children:[{type:a,tag:w,props:{},children:[{type:c,value:x},{type:a,tag:y,props:{href:z,rel:[A]},children:[{type:c,value:k}]},{type:c,value:B}]},{type:a,tag:C,props:{id:o},children:[{type:c,value:p}]},{type:a,tag:m,props:{code:q,language:D},children:[{type:a,tag:E,props:{},children:[{type:a,tag:m,props:{__ignoreMap:r},children:[{type:c,value:q}]}]}]}]},body:{type:v,children:[{type:a,tag:w,props:{},children:[{type:c,value:x},{type:a,tag:y,props:{href:z,rel:[A]},children:[{type:c,value:k}]},{type:c,value:B}]},{type:a,tag:C,props:{id:o},children:[{type:c,value:p}]},{type:a,tag:m,props:{code:q,language:D},children:[{type:a,tag:E,props:{},children:[{type:a,tag:m,props:{__ignoreMap:r},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:f},children:[{type:c,value:"version"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\"3\""}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:f},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"external"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:"ct-d30e7c"},children:[{type:c,value:"false"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:f},children:[{type:c,value:"services"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"server"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"image"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"gitea\u002Fgitea:latest"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"container_name"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"environment"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"USER_UID=1000"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"USER_GID=1000"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"restart"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"always"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"volumes"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:".\u002Fvar\u002Flib\u002Fgitea:\u002Fdata"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:".\u002Fetc\u002Fgitea:\u002Fetc\u002Fgitea"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\u002Fetc\u002Ftimezone:\u002Fetc\u002Ftimezone:ro"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\u002Fetc\u002Flocaltime:\u002Fetc\u002Flocaltime:ro"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"ports"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\"3000:3000\""}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\"222:22\""}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-d30e7c{color:#79C0FF}.ct-376b56{color:#A5D6FF}.ct-fe8fa5{color:#C9D1D9}.ct-ef8381{color:#7EE787}.light .ct-ef8381{color:#268BD2}.light .ct-fe8fa5{color:#657B83}.light .ct-376b56{color:#2AA198}.light .ct-d30e7c{color:#B58900}"}]}],toc:{title:r,searchDepth:s,depth:s,links:[{id:o,depth:s,text:p}]}},_type:"markdown",_id:"content:Linux:Gitea for git hosting.md",_source:"content",_file:"Linux\u002FGitea for git hosting.md",_extension:"md"}},prerenderedAt:1703697992837}}("element","span","text","ct-fe8fa5","line","ct-ef8381","ct-376b56"," - ",":"," ","gitea",": ","code",false,"setting-up-with-docker-compose","Setting up with docker-compose","version: \"3\"\n\nnetworks:\n gitea:\n external: false\nservices:\n server:\n image: gitea\u002Fgitea:latest\n container_name: gitea\n environment:\n - USER_UID=1000\n - USER_GID=1000\n restart: always\n networks:\n - gitea\n volumes:\n - .\u002Fvar\u002Flib\u002Fgitea:\u002Fdata\n - .\u002Fetc\u002Fgitea:\u002Fetc\u002Fgitea\n - \u002Fetc\u002Ftimezone:\u002Fetc\u002Ftimezone:ro\n - \u002Fetc\u002Flocaltime:\u002Fetc\u002Flocaltime:ro\n ports:\n - \"3000:3000\"\n - \"222:22\"\n","",2,"Gitea For Git Hosting","\u002Flinux\u002Fgitea-for-git-hosting","root","p","Self-hosted #git repositories with ","a","https:\u002F\u002Fgitea.io\u002Fru-ru\u002F","nofollow"," and #docker.","h2","yaml","pre","networks"," "))
\ No newline at end of file
diff --git a/docs/linux/gitea-for-git-hosting/index.html b/docs/linux/gitea-for-git-hosting/index.html
index b4aa5fd..90e0b0a 100644
--- a/docs/linux/gitea-for-git-hosting/index.html
+++ b/docs/linux/gitea-for-git-hosting/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Gitea For Git Hosting • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Self-hosted #git repositories with gitea and #docker."><meta name="head:count" content="3"><link rel="modulepreload" href="/linux/gitea-for-git-hosting/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseH2.d950f051.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseA.c52e44f8.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a aria-current="page" href="/linux/gitea-for-git-hosting" class="router-link-active _active_192pu_81 _link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Gitea For Git Hosting</h1><article><div><p><!--[-->Self-hosted #git repositories with <a href="https://gitea.io/ru-ru/" rel="nofollow" target="_blank"><!--[-->gitea<!--]--></a> and #docker.<!--]--></p><h2 id="setting-up-with-docker-compose"><a href="#setting-up-with-docker-compose"><!--[-->Setting up with docker-compose<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>yaml</span></button><!--[--><pre><code><span class="line"><span class="ct-a3922c">version</span><span class="ct-32bc1d">: </span><span class="ct-ec9e62">"3"</span></span><span class="line"></span><span class="line"><span class="ct-a3922c">networks</span><span class="ct-32bc1d">:</span></span><span class="line"><span class="ct-32bc1d"> </span><span class="ct-a3922c">gitea</span><span class="ct-32bc1d">:</span></span><span class="line"><span class="ct-32bc1d"> </span><span class="ct-a3922c">external</span><span class="ct-32bc1d">: </span><span class="ct-c29822">false</span></span><span class="line"><span class="ct-a3922c">services</span><span class="ct-32bc1d">:</span></span><span class="line"><span class="ct-32bc1d"> </span><span class="ct-a3922c">server</span><span class="ct-32bc1d">:</span></span><span class="line"><span class="ct-32bc1d"> </span><span class="ct-a3922c">image</span><span class="ct-32bc1d">: </span><span class="ct-ec9e62">gitea/gitea:latest</span></span><span class="line"><span class="ct-32bc1d"> </span><span class="ct-a3922c">container_name</span><span class="ct-32bc1d">: </span><span class="ct-ec9e62">gitea</span></span><span class="line"><span class="ct-32bc1d"> </span><span class="ct-a3922c">environment</span><span class="ct-32bc1d">:</span></span><span class="line"><span class="ct-32bc1d"> - </span><span class="ct-ec9e62">USER_UID=1000</span></span><span class="line"><span class="ct-32bc1d"> - </span><span class="ct-ec9e62">USER_GID=1000</span></span><span class="line"><span class="ct-32bc1d"> </span><span class="ct-a3922c">restart</span><span class="ct-32bc1d">: </span><span class="ct-ec9e62">always</span></span><span class="line"><span class="ct-32bc1d"> </span><span class="ct-a3922c">networks</span><span class="ct-32bc1d">:</span></span><span class="line"><span class="ct-32bc1d"> - </span><span class="ct-ec9e62">gitea</span></span><span class="line"><span class="ct-32bc1d"> </span><span class="ct-a3922c">volumes</span><span class="ct-32bc1d">:</span></span><span class="line"><span class="ct-32bc1d"> - </span><span class="ct-ec9e62">./var/lib/gitea:/data</span></span><span class="line"><span class="ct-32bc1d"> - </span><span class="ct-ec9e62">./etc/gitea:/etc/gitea</span></span><span class="line"><span class="ct-32bc1d"> - </span><span class="ct-ec9e62">/etc/timezone:/etc/timezone:ro</span></span><span class="line"><span class="ct-32bc1d"> - </span><span class="ct-ec9e62">/etc/localtime:/etc/localtime:ro</span></span><span class="line"><span class="ct-32bc1d"> </span><span class="ct-a3922c">ports</span><span class="ct-32bc1d">:</span></span><span class="line"><span class="ct-32bc1d"> - </span><span class="ct-ec9e62">"3000:3000"</span></span><span class="line"><span class="ct-32bc1d"> - </span><span class="ct-ec9e62">"222:22"</span></span></code></pre><!--]--></div><style>.ct-c29822{color:#79C0FF}.ct-ec9e62{color:#A5D6FF}.ct-32bc1d{color:#C9D1D9}.ct-a3922c{color:#7EE787}.light .ct-a3922c{color:#268BD2}.light .ct-32bc1d{color:#657B83}.light .ct-ec9e62{color:#2AA198}.light .ct-c29822{color:#B58900}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/linux/gitea-for-git-hosting/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695531359}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a aria-current="page" href="/linux/gitea-for-git-hosting" class="router-link-active _active_192pu_81 _link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Gitea For Git Hosting</h1><article><div><p><!--[-->Self-hosted #git repositories with <a href="https://gitea.io/ru-ru/" rel="nofollow" target="_blank"><!--[-->gitea<!--]--></a> and #docker.<!--]--></p><h2 id="setting-up-with-docker-compose"><a href="#setting-up-with-docker-compose"><!--[-->Setting up with docker-compose<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>yaml</span></button><!--[--><pre><code><span class="line"><span class="ct-ef8381">version</span><span class="ct-fe8fa5">: </span><span class="ct-376b56">"3"</span></span><span class="line"></span><span class="line"><span class="ct-ef8381">networks</span><span class="ct-fe8fa5">:</span></span><span class="line"><span class="ct-fe8fa5"> </span><span class="ct-ef8381">gitea</span><span class="ct-fe8fa5">:</span></span><span class="line"><span class="ct-fe8fa5"> </span><span class="ct-ef8381">external</span><span class="ct-fe8fa5">: </span><span class="ct-d30e7c">false</span></span><span class="line"><span class="ct-ef8381">services</span><span class="ct-fe8fa5">:</span></span><span class="line"><span class="ct-fe8fa5"> </span><span class="ct-ef8381">server</span><span class="ct-fe8fa5">:</span></span><span class="line"><span class="ct-fe8fa5"> </span><span class="ct-ef8381">image</span><span class="ct-fe8fa5">: </span><span class="ct-376b56">gitea/gitea:latest</span></span><span class="line"><span class="ct-fe8fa5"> </span><span class="ct-ef8381">container_name</span><span class="ct-fe8fa5">: </span><span class="ct-376b56">gitea</span></span><span class="line"><span class="ct-fe8fa5"> </span><span class="ct-ef8381">environment</span><span class="ct-fe8fa5">:</span></span><span class="line"><span class="ct-fe8fa5"> - </span><span class="ct-376b56">USER_UID=1000</span></span><span class="line"><span class="ct-fe8fa5"> - </span><span class="ct-376b56">USER_GID=1000</span></span><span class="line"><span class="ct-fe8fa5"> </span><span class="ct-ef8381">restart</span><span class="ct-fe8fa5">: </span><span class="ct-376b56">always</span></span><span class="line"><span class="ct-fe8fa5"> </span><span class="ct-ef8381">networks</span><span class="ct-fe8fa5">:</span></span><span class="line"><span class="ct-fe8fa5"> - </span><span class="ct-376b56">gitea</span></span><span class="line"><span class="ct-fe8fa5"> </span><span class="ct-ef8381">volumes</span><span class="ct-fe8fa5">:</span></span><span class="line"><span class="ct-fe8fa5"> - </span><span class="ct-376b56">./var/lib/gitea:/data</span></span><span class="line"><span class="ct-fe8fa5"> - </span><span class="ct-376b56">./etc/gitea:/etc/gitea</span></span><span class="line"><span class="ct-fe8fa5"> - </span><span class="ct-376b56">/etc/timezone:/etc/timezone:ro</span></span><span class="line"><span class="ct-fe8fa5"> - </span><span class="ct-376b56">/etc/localtime:/etc/localtime:ro</span></span><span class="line"><span class="ct-fe8fa5"> </span><span class="ct-ef8381">ports</span><span class="ct-fe8fa5">:</span></span><span class="line"><span class="ct-fe8fa5"> - </span><span class="ct-376b56">"3000:3000"</span></span><span class="line"><span class="ct-fe8fa5"> - </span><span class="ct-376b56">"222:22"</span></span></code></pre><!--]--></div><style>.ct-d30e7c{color:#79C0FF}.ct-376b56{color:#A5D6FF}.ct-fe8fa5{color:#C9D1D9}.ct-ef8381{color:#7EE787}.light .ct-ef8381{color:#268BD2}.light .ct-fe8fa5{color:#657B83}.light .ct-376b56{color:#2AA198}.light .ct-d30e7c{color:#B58900}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/linux/gitea-for-git-hosting/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697992837}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/linux/google-photos-alternative-with-photoprism/_payload.js b/docs/linux/google-photos-alternative-with-photoprism/_payload.js
index 85bf520..8170235 100644
--- a/docs/linux/google-photos-alternative-with-photoprism/_payload.js
+++ b/docs/linux/google-photos-alternative-with-photoprism/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:C,_path:D},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-N7FETNtB3c":{_path:D,_dir:"linux",_draft:v,_partial:v,_locale:"en",_empty:v,title:C,description:"Photo Prism is a free alternative to Google photos, can be set up with #docker.",excerpt:{type:E,children:[{type:a,tag:r,props:{},children:[{type:a,tag:n,props:{href:F,rel:[o]},children:[{type:c,value:G}]},{type:c,value:H}]},{type:a,tag:I,props:{id:w},children:[{type:c,value:x}]},{type:a,tag:r,props:{},children:[{type:c,value:J},{type:a,tag:n,props:{href:K,rel:[o]},children:[{type:c,value:L}]},{type:c,value:M},{type:a,tag:n,props:{href:N,rel:[o]},children:[{type:c,value:O}]},{type:c,value:P}]},{type:a,tag:s,props:{code:y,language:Q},children:[{type:a,tag:R,props:{},children:[{type:a,tag:s,props:{__ignoreMap:z},children:[{type:c,value:y}]}]}]}]},body:{type:E,children:[{type:a,tag:r,props:{},children:[{type:a,tag:n,props:{href:F,rel:[o]},children:[{type:c,value:G}]},{type:c,value:H}]},{type:a,tag:I,props:{id:w},children:[{type:c,value:x}]},{type:a,tag:r,props:{},children:[{type:c,value:J},{type:a,tag:n,props:{href:K,rel:[o]},children:[{type:c,value:L}]},{type:c,value:M},{type:a,tag:n,props:{href:N,rel:[o]},children:[{type:c,value:O}]},{type:c,value:P}]},{type:a,tag:s,props:{code:y,language:Q},children:[{type:a,tag:R,props:{},children:[{type:a,tag:s,props:{__ignoreMap:z},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:f},children:[{type:c,value:"version"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"'3.5'"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:f},children:[{type:c,value:"services"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" "}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"photoprism__app"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"photoprism\u002Fphotoprism:latest"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"depends_on"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:U}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:W}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:Y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:Z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"ports"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"2342:2342"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:_},children:[{type:c,value:"# HTTP port (host:container)"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_ADMIN_PASSWORD"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\"password\""}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_SITE_URL"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\"https:\u002F\u002Fservice.url\u002F\""}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_ORIGINALS_LIMIT"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:"ct-6faff2"},children:[{type:c,value:"5000"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_HTTP_COMPRESSION"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\"gzip\""}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_DEBUG"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_PUBLIC"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_READONLY"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_EXPERIMENTAL"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_DISABLE_CHOWN"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_DISABLE_WEBDAV"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_DISABLE_SETTINGS"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_DISABLE_TENSORFLOW"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_DISABLE_FACES"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aa}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_DISABLE_CLASSIFICATION"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_DARKTABLE_PRESETS"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aa}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_DETECT_NSFW"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_UPLOAD_NSFW"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\"true\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_DATABASE_DRIVER"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\"mysql\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_DATABASE_SERVER"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\"mariadb:3306\""}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_DATABASE_NAME"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\"photoprism\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_DATABASE_USER"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\"root\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_DATABASE_PASSWORD"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\"insecure\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_SITE_TITLE"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\"PhotoPrism\""}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_SITE_CAPTION"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\"Browse Your Life\""}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_SITE_DESCRIPTION"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ab}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_SITE_AUTHOR"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ab}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"HOME"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ac}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"working_dir"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ac}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\".\u002Fdata\u002Foriginals:\u002Fphotoprism\u002Foriginals\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\".\u002Fdata\u002Fimports:\u002Fphotoprism\u002Fimport\""}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\".\u002Fdata\u002Fstorage:\u002Fphotoprism\u002Fstorage\""}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" "}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"photoprism__db"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:W}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"mariadb:10.6"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:Y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:Z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"command"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"mysqld --innodb-buffer-pool-size=128M --transaction-isolation=READ-COMMITTED --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci --max-connections=512 --innodb-rollback-on-timeout=OFF --innodb-lock-wait-timeout=120"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\".\u002Fdatabase:\u002Fvar\u002Flib\u002Fmysql\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:_},children:[{type:c,value:"# Important, don't remove"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"MYSQL_ROOT_PASSWORD"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ae}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"MYSQL_DATABASE"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:A}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"MYSQL_USER"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:A}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"MYSQL_PASSWORD"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ae}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-6faff2{color:#79C0FF}.ct-4ca57e{color:#8B949E}.ct-762dce{color:#A5D6FF}.ct-02f0b9{color:#C9D1D9}.ct-611b86{color:#7EE787}.light .ct-611b86{color:#268BD2}.light .ct-02f0b9{color:#657B83}.light .ct-762dce{color:#2AA198}.light .ct-4ca57e{color:#93A1A1}.light .ct-6faff2{color:#D33682}"}]}],toc:{title:z,searchDepth:B,depth:B,links:[{id:w,depth:B,text:x}]}},_type:"markdown",_id:"content:Linux:Google photos alternative with Photoprism.md",_source:"content",_file:"Linux\u002FGoogle photos alternative with Photoprism.md",_extension:"md"}},prerenderedAt:1703695531396}}("element","span","text","ct-02f0b9","line","ct-611b86","ct-762dce",": "," ","\"false\"",":"," "," ","a","nofollow"," "," - ","p","code"," - "," ",false,"docker-compose-file-to-run-it","Docker compose file to run it","version: '3.5'\n\nservices:\n photoprism:\n container_name: photoprism__app\n image: photoprism\u002Fphotoprism:latest\n depends_on:\n - mariadb\n restart: unless-stopped\n security_opt:\n - seccomp:unconfined\n - apparmor:unconfined\n ports:\n - 2342:2342 # HTTP port (host:container)\n environment:\n PHOTOPRISM_ADMIN_PASSWORD: \"password\"\n PHOTOPRISM_SITE_URL: \"https:\u002F\u002Fservice.url\u002F\"\n PHOTOPRISM_ORIGINALS_LIMIT: 5000\n PHOTOPRISM_HTTP_COMPRESSION: \"gzip\"\n PHOTOPRISM_DEBUG: \"false\" \n PHOTOPRISM_PUBLIC: \"false\" \n PHOTOPRISM_READONLY: \"false\" \n PHOTOPRISM_EXPERIMENTAL: \"false\"\n PHOTOPRISM_DISABLE_CHOWN: \"false\"\n PHOTOPRISM_DISABLE_WEBDAV: \"false\" \n PHOTOPRISM_DISABLE_SETTINGS: \"false\"\n PHOTOPRISM_DISABLE_TENSORFLOW: \"false\"\n PHOTOPRISM_DISABLE_FACES: \"false\" \n PHOTOPRISM_DISABLE_CLASSIFICATION: \"false\"\n PHOTOPRISM_DARKTABLE_PRESETS: \"false\" \n PHOTOPRISM_DETECT_NSFW: \"false\" \n PHOTOPRISM_UPLOAD_NSFW: \"true\" \n PHOTOPRISM_DATABASE_DRIVER: \"mysql\" \n PHOTOPRISM_DATABASE_SERVER: \"mariadb:3306\"\n PHOTOPRISM_DATABASE_NAME: \"photoprism\" \n PHOTOPRISM_DATABASE_USER: \"root\" \n PHOTOPRISM_DATABASE_PASSWORD: \"insecure\" \n PHOTOPRISM_SITE_TITLE: \"PhotoPrism\"\n PHOTOPRISM_SITE_CAPTION: \"Browse Your Life\"\n PHOTOPRISM_SITE_DESCRIPTION: \"\"\n PHOTOPRISM_SITE_AUTHOR: \"\"\n HOME: \"\u002Fphotoprism\"\n working_dir: \"\u002Fphotoprism\"\n volumes:\n - \".\u002Fdata\u002Foriginals:\u002Fphotoprism\u002Foriginals\" \n - \".\u002Fdata\u002Fimports:\u002Fphotoprism\u002Fimport\"\n - \".\u002Fdata\u002Fstorage:\u002Fphotoprism\u002Fstorage\"\n mariadb:\n container_name: photoprism__db\n restart: unless-stopped\n image: mariadb:10.6\n security_opt:\n - seccomp:unconfined\n - apparmor:unconfined\n command: mysqld --innodb-buffer-pool-size=128M --transaction-isolation=READ-COMMITTED --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci --max-connections=512 --innodb-rollback-on-timeout=OFF --innodb-lock-wait-timeout=120\n volumes:\n - \".\u002Fdatabase:\u002Fvar\u002Flib\u002Fmysql\" # Important, don't remove\n environment:\n MYSQL_ROOT_PASSWORD: insecure\n MYSQL_DATABASE: photoprism\n MYSQL_USER: photoprism\n MYSQL_PASSWORD: insecure\n","","photoprism",2,"Google Photos Alternative With Photoprism","\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism","root","https:\u002F\u002Fphotoprism.app\u002F","Photo Prism"," is a free alternative to Google photos, can be set up with #docker.","h2","Check out current ","https:\u002F\u002Fdl.photoprism.app\u002Fdocker\u002Fdocker-compose.yml","example"," at photoprism's ","https:\u002F\u002Fdocs.photoprism.app\u002Fgetting-started\u002Fdocker-compose\u002F","documentation",".","yaml","pre","container_name","image","mariadb","restart","unless-stopped","security_opt","seccomp:unconfined","apparmor:unconfined","ct-4ca57e","environment"," ","\"\"","\"\u002Fphotoprism\"","volumes","insecure"))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:C,_path:D},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-N7FETNtB3c":{_path:D,_dir:"linux",_draft:v,_partial:v,_locale:"en",_empty:v,title:C,description:"Photo Prism is a free alternative to Google photos, can be set up with #docker.",excerpt:{type:E,children:[{type:a,tag:r,props:{},children:[{type:a,tag:n,props:{href:F,rel:[o]},children:[{type:c,value:G}]},{type:c,value:H}]},{type:a,tag:I,props:{id:w},children:[{type:c,value:x}]},{type:a,tag:r,props:{},children:[{type:c,value:J},{type:a,tag:n,props:{href:K,rel:[o]},children:[{type:c,value:L}]},{type:c,value:M},{type:a,tag:n,props:{href:N,rel:[o]},children:[{type:c,value:O}]},{type:c,value:P}]},{type:a,tag:s,props:{code:y,language:Q},children:[{type:a,tag:R,props:{},children:[{type:a,tag:s,props:{__ignoreMap:z},children:[{type:c,value:y}]}]}]}]},body:{type:E,children:[{type:a,tag:r,props:{},children:[{type:a,tag:n,props:{href:F,rel:[o]},children:[{type:c,value:G}]},{type:c,value:H}]},{type:a,tag:I,props:{id:w},children:[{type:c,value:x}]},{type:a,tag:r,props:{},children:[{type:c,value:J},{type:a,tag:n,props:{href:K,rel:[o]},children:[{type:c,value:L}]},{type:c,value:M},{type:a,tag:n,props:{href:N,rel:[o]},children:[{type:c,value:O}]},{type:c,value:P}]},{type:a,tag:s,props:{code:y,language:Q},children:[{type:a,tag:R,props:{},children:[{type:a,tag:s,props:{__ignoreMap:z},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:f},children:[{type:c,value:"version"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"'3.5'"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:f},children:[{type:c,value:"services"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" "}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"photoprism__app"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"photoprism\u002Fphotoprism:latest"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"depends_on"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:U}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:W}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:Y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:Z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"ports"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"2342:2342"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:_},children:[{type:c,value:"# HTTP port (host:container)"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_ADMIN_PASSWORD"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\"password\""}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_SITE_URL"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\"https:\u002F\u002Fservice.url\u002F\""}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_ORIGINALS_LIMIT"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:"ct-700af9"},children:[{type:c,value:"5000"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_HTTP_COMPRESSION"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\"gzip\""}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_DEBUG"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_PUBLIC"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_READONLY"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_EXPERIMENTAL"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_DISABLE_CHOWN"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_DISABLE_WEBDAV"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_DISABLE_SETTINGS"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_DISABLE_TENSORFLOW"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_DISABLE_FACES"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aa}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_DISABLE_CLASSIFICATION"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_DARKTABLE_PRESETS"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aa}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_DETECT_NSFW"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_UPLOAD_NSFW"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\"true\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_DATABASE_DRIVER"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\"mysql\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_DATABASE_SERVER"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\"mariadb:3306\""}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_DATABASE_NAME"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\"photoprism\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_DATABASE_USER"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\"root\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_DATABASE_PASSWORD"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\"insecure\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_SITE_TITLE"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\"PhotoPrism\""}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_SITE_CAPTION"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\"Browse Your Life\""}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_SITE_DESCRIPTION"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ab}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"PHOTOPRISM_SITE_AUTHOR"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ab}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"HOME"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ac}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"working_dir"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ac}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\".\u002Fdata\u002Foriginals:\u002Fphotoprism\u002Foriginals\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\".\u002Fdata\u002Fimports:\u002Fphotoprism\u002Fimport\""}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\".\u002Fdata\u002Fstorage:\u002Fphotoprism\u002Fstorage\""}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:" "}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"photoprism__db"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:W}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"mariadb:10.6"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:Y}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:Z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"command"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"mysqld --innodb-buffer-pool-size=128M --transaction-isolation=READ-COMMITTED --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci --max-connections=512 --innodb-rollback-on-timeout=OFF --innodb-lock-wait-timeout=120"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"\".\u002Fdatabase:\u002Fvar\u002Flib\u002Fmysql\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:_},children:[{type:c,value:"# Important, don't remove"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"MYSQL_ROOT_PASSWORD"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ae}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"MYSQL_DATABASE"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:A}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"MYSQL_USER"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:A}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"MYSQL_PASSWORD"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ae}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-700af9{color:#79C0FF}.ct-16272c{color:#8B949E}.ct-afc238{color:#A5D6FF}.ct-a7ea58{color:#C9D1D9}.ct-085d59{color:#7EE787}.light .ct-085d59{color:#268BD2}.light .ct-a7ea58{color:#657B83}.light .ct-afc238{color:#2AA198}.light .ct-16272c{color:#93A1A1}.light .ct-700af9{color:#D33682}"}]}],toc:{title:z,searchDepth:B,depth:B,links:[{id:w,depth:B,text:x}]}},_type:"markdown",_id:"content:Linux:Google photos alternative with Photoprism.md",_source:"content",_file:"Linux\u002FGoogle photos alternative with Photoprism.md",_extension:"md"}},prerenderedAt:1703697992883}}("element","span","text","ct-a7ea58","line","ct-085d59","ct-afc238",": "," ","\"false\"",":"," "," ","a","nofollow"," "," - ","p","code"," - "," ",false,"docker-compose-file-to-run-it","Docker compose file to run it","version: '3.5'\n\nservices:\n photoprism:\n container_name: photoprism__app\n image: photoprism\u002Fphotoprism:latest\n depends_on:\n - mariadb\n restart: unless-stopped\n security_opt:\n - seccomp:unconfined\n - apparmor:unconfined\n ports:\n - 2342:2342 # HTTP port (host:container)\n environment:\n PHOTOPRISM_ADMIN_PASSWORD: \"password\"\n PHOTOPRISM_SITE_URL: \"https:\u002F\u002Fservice.url\u002F\"\n PHOTOPRISM_ORIGINALS_LIMIT: 5000\n PHOTOPRISM_HTTP_COMPRESSION: \"gzip\"\n PHOTOPRISM_DEBUG: \"false\" \n PHOTOPRISM_PUBLIC: \"false\" \n PHOTOPRISM_READONLY: \"false\" \n PHOTOPRISM_EXPERIMENTAL: \"false\"\n PHOTOPRISM_DISABLE_CHOWN: \"false\"\n PHOTOPRISM_DISABLE_WEBDAV: \"false\" \n PHOTOPRISM_DISABLE_SETTINGS: \"false\"\n PHOTOPRISM_DISABLE_TENSORFLOW: \"false\"\n PHOTOPRISM_DISABLE_FACES: \"false\" \n PHOTOPRISM_DISABLE_CLASSIFICATION: \"false\"\n PHOTOPRISM_DARKTABLE_PRESETS: \"false\" \n PHOTOPRISM_DETECT_NSFW: \"false\" \n PHOTOPRISM_UPLOAD_NSFW: \"true\" \n PHOTOPRISM_DATABASE_DRIVER: \"mysql\" \n PHOTOPRISM_DATABASE_SERVER: \"mariadb:3306\"\n PHOTOPRISM_DATABASE_NAME: \"photoprism\" \n PHOTOPRISM_DATABASE_USER: \"root\" \n PHOTOPRISM_DATABASE_PASSWORD: \"insecure\" \n PHOTOPRISM_SITE_TITLE: \"PhotoPrism\"\n PHOTOPRISM_SITE_CAPTION: \"Browse Your Life\"\n PHOTOPRISM_SITE_DESCRIPTION: \"\"\n PHOTOPRISM_SITE_AUTHOR: \"\"\n HOME: \"\u002Fphotoprism\"\n working_dir: \"\u002Fphotoprism\"\n volumes:\n - \".\u002Fdata\u002Foriginals:\u002Fphotoprism\u002Foriginals\" \n - \".\u002Fdata\u002Fimports:\u002Fphotoprism\u002Fimport\"\n - \".\u002Fdata\u002Fstorage:\u002Fphotoprism\u002Fstorage\"\n mariadb:\n container_name: photoprism__db\n restart: unless-stopped\n image: mariadb:10.6\n security_opt:\n - seccomp:unconfined\n - apparmor:unconfined\n command: mysqld --innodb-buffer-pool-size=128M --transaction-isolation=READ-COMMITTED --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci --max-connections=512 --innodb-rollback-on-timeout=OFF --innodb-lock-wait-timeout=120\n volumes:\n - \".\u002Fdatabase:\u002Fvar\u002Flib\u002Fmysql\" # Important, don't remove\n environment:\n MYSQL_ROOT_PASSWORD: insecure\n MYSQL_DATABASE: photoprism\n MYSQL_USER: photoprism\n MYSQL_PASSWORD: insecure\n","","photoprism",2,"Google Photos Alternative With Photoprism","\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism","root","https:\u002F\u002Fphotoprism.app\u002F","Photo Prism"," is a free alternative to Google photos, can be set up with #docker.","h2","Check out current ","https:\u002F\u002Fdl.photoprism.app\u002Fdocker\u002Fdocker-compose.yml","example"," at photoprism's ","https:\u002F\u002Fdocs.photoprism.app\u002Fgetting-started\u002Fdocker-compose\u002F","documentation",".","yaml","pre","container_name","image","mariadb","restart","unless-stopped","security_opt","seccomp:unconfined","apparmor:unconfined","ct-16272c","environment"," ","\"\"","\"\u002Fphotoprism\"","volumes","insecure"))
\ No newline at end of file
diff --git a/docs/linux/google-photos-alternative-with-photoprism/index.html b/docs/linux/google-photos-alternative-with-photoprism/index.html
index 61b0885..f36ac49 100644
--- a/docs/linux/google-photos-alternative-with-photoprism/index.html
+++ b/docs/linux/google-photos-alternative-with-photoprism/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Google Photos Alternative With Photoprism • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Photo Prism is a free alternative to Google photos, can be set up with #docker."><meta name="head:count" content="3"><link rel="modulepreload" href="/linux/google-photos-alternative-with-photoprism/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseH2.d950f051.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseA.c52e44f8.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a aria-current="page" href="/linux/google-photos-alternative-with-photoprism" class="router-link-active _active_192pu_81 _link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Google Photos Alternative With Photoprism</h1><article><div><p><!--[--><a href="https://photoprism.app/" rel="nofollow" target="_blank"><!--[-->Photo Prism<!--]--></a> is a free alternative to Google photos, can be set up with #docker.<!--]--></p><h2 id="docker-compose-file-to-run-it"><a href="#docker-compose-file-to-run-it"><!--[-->Docker compose file to run it<!--]--></a></h2><p><!--[-->Check out current <a href="https://dl.photoprism.app/docker/docker-compose.yml" rel="nofollow" target="_blank"><!--[-->example<!--]--></a> at photoprism's <a href="https://docs.photoprism.app/getting-started/docker-compose/" rel="nofollow" target="_blank"><!--[-->documentation<!--]--></a>.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>yaml</span></button><!--[--><pre><code><span class="line"><span class="ct-611b86">version</span><span class="ct-02f0b9">: </span><span class="ct-762dce">'3.5'</span></span><span class="line"></span><span class="line"><span class="ct-611b86">services</span><span class="ct-02f0b9">:</span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">photoprism</span><span class="ct-02f0b9">:</span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">container_name</span><span class="ct-02f0b9">: </span><span class="ct-762dce">photoprism__app</span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">image</span><span class="ct-02f0b9">: </span><span class="ct-762dce">photoprism/photoprism:latest</span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">depends_on</span><span class="ct-02f0b9">:</span></span><span class="line"><span class="ct-02f0b9"> - </span><span class="ct-762dce">mariadb</span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">restart</span><span class="ct-02f0b9">: </span><span class="ct-762dce">unless-stopped</span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">security_opt</span><span class="ct-02f0b9">:</span></span><span class="line"><span class="ct-02f0b9"> - </span><span class="ct-762dce">seccomp:unconfined</span></span><span class="line"><span class="ct-02f0b9"> - </span><span class="ct-762dce">apparmor:unconfined</span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">ports</span><span class="ct-02f0b9">:</span></span><span class="line"><span class="ct-02f0b9"> - </span><span class="ct-762dce">2342:2342</span><span class="ct-02f0b9"> </span><span class="ct-4ca57e"># HTTP port (host:container)</span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">environment</span><span class="ct-02f0b9">:</span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">PHOTOPRISM_ADMIN_PASSWORD</span><span class="ct-02f0b9">: </span><span class="ct-762dce">"password"</span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">PHOTOPRISM_SITE_URL</span><span class="ct-02f0b9">: </span><span class="ct-762dce">"https://service.url/"</span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">PHOTOPRISM_ORIGINALS_LIMIT</span><span class="ct-02f0b9">: </span><span class="ct-6faff2">5000</span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">PHOTOPRISM_HTTP_COMPRESSION</span><span class="ct-02f0b9">: </span><span class="ct-762dce">"gzip"</span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">PHOTOPRISM_DEBUG</span><span class="ct-02f0b9">: </span><span class="ct-762dce">"false"</span><span class="ct-02f0b9"> </span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">PHOTOPRISM_PUBLIC</span><span class="ct-02f0b9">: </span><span class="ct-762dce">"false"</span><span class="ct-02f0b9"> </span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">PHOTOPRISM_READONLY</span><span class="ct-02f0b9">: </span><span class="ct-762dce">"false"</span><span class="ct-02f0b9"> </span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">PHOTOPRISM_EXPERIMENTAL</span><span class="ct-02f0b9">: </span><span class="ct-762dce">"false"</span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">PHOTOPRISM_DISABLE_CHOWN</span><span class="ct-02f0b9">: </span><span class="ct-762dce">"false"</span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">PHOTOPRISM_DISABLE_WEBDAV</span><span class="ct-02f0b9">: </span><span class="ct-762dce">"false"</span><span class="ct-02f0b9"> </span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">PHOTOPRISM_DISABLE_SETTINGS</span><span class="ct-02f0b9">: </span><span class="ct-762dce">"false"</span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">PHOTOPRISM_DISABLE_TENSORFLOW</span><span class="ct-02f0b9">: </span><span class="ct-762dce">"false"</span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">PHOTOPRISM_DISABLE_FACES</span><span class="ct-02f0b9">: </span><span class="ct-762dce">"false"</span><span class="ct-02f0b9"> </span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">PHOTOPRISM_DISABLE_CLASSIFICATION</span><span class="ct-02f0b9">: </span><span class="ct-762dce">"false"</span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">PHOTOPRISM_DARKTABLE_PRESETS</span><span class="ct-02f0b9">: </span><span class="ct-762dce">"false"</span><span class="ct-02f0b9"> </span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">PHOTOPRISM_DETECT_NSFW</span><span class="ct-02f0b9">: </span><span class="ct-762dce">"false"</span><span class="ct-02f0b9"> </span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">PHOTOPRISM_UPLOAD_NSFW</span><span class="ct-02f0b9">: </span><span class="ct-762dce">"true"</span><span class="ct-02f0b9"> </span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">PHOTOPRISM_DATABASE_DRIVER</span><span class="ct-02f0b9">: </span><span class="ct-762dce">"mysql"</span><span class="ct-02f0b9"> </span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">PHOTOPRISM_DATABASE_SERVER</span><span class="ct-02f0b9">: </span><span class="ct-762dce">"mariadb:3306"</span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">PHOTOPRISM_DATABASE_NAME</span><span class="ct-02f0b9">: </span><span class="ct-762dce">"photoprism"</span><span class="ct-02f0b9"> </span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">PHOTOPRISM_DATABASE_USER</span><span class="ct-02f0b9">: </span><span class="ct-762dce">"root"</span><span class="ct-02f0b9"> </span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">PHOTOPRISM_DATABASE_PASSWORD</span><span class="ct-02f0b9">: </span><span class="ct-762dce">"insecure"</span><span class="ct-02f0b9"> </span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">PHOTOPRISM_SITE_TITLE</span><span class="ct-02f0b9">: </span><span class="ct-762dce">"PhotoPrism"</span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">PHOTOPRISM_SITE_CAPTION</span><span class="ct-02f0b9">: </span><span class="ct-762dce">"Browse Your Life"</span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">PHOTOPRISM_SITE_DESCRIPTION</span><span class="ct-02f0b9">: </span><span class="ct-762dce">""</span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">PHOTOPRISM_SITE_AUTHOR</span><span class="ct-02f0b9">: </span><span class="ct-762dce">""</span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">HOME</span><span class="ct-02f0b9">: </span><span class="ct-762dce">"/photoprism"</span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">working_dir</span><span class="ct-02f0b9">: </span><span class="ct-762dce">"/photoprism"</span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">volumes</span><span class="ct-02f0b9">:</span></span><span class="line"><span class="ct-02f0b9"> - </span><span class="ct-762dce">"./data/originals:/photoprism/originals"</span><span class="ct-02f0b9"> </span></span><span class="line"><span class="ct-02f0b9"> - </span><span class="ct-762dce">"./data/imports:/photoprism/import"</span></span><span class="line"><span class="ct-02f0b9"> - </span><span class="ct-762dce">"./data/storage:/photoprism/storage"</span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">mariadb</span><span class="ct-02f0b9">:</span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">container_name</span><span class="ct-02f0b9">: </span><span class="ct-762dce">photoprism__db</span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">restart</span><span class="ct-02f0b9">: </span><span class="ct-762dce">unless-stopped</span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">image</span><span class="ct-02f0b9">: </span><span class="ct-762dce">mariadb:10.6</span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">security_opt</span><span class="ct-02f0b9">:</span></span><span class="line"><span class="ct-02f0b9"> - </span><span class="ct-762dce">seccomp:unconfined</span></span><span class="line"><span class="ct-02f0b9"> - </span><span class="ct-762dce">apparmor:unconfined</span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">command</span><span class="ct-02f0b9">: </span><span class="ct-762dce">mysqld --innodb-buffer-pool-size=128M --transaction-isolation=READ-COMMITTED --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci --max-connections=512 --innodb-rollback-on-timeout=OFF --innodb-lock-wait-timeout=120</span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">volumes</span><span class="ct-02f0b9">:</span></span><span class="line"><span class="ct-02f0b9"> - </span><span class="ct-762dce">"./database:/var/lib/mysql"</span><span class="ct-02f0b9"> </span><span class="ct-4ca57e"># Important, don't remove</span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">environment</span><span class="ct-02f0b9">:</span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">MYSQL_ROOT_PASSWORD</span><span class="ct-02f0b9">: </span><span class="ct-762dce">insecure</span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">MYSQL_DATABASE</span><span class="ct-02f0b9">: </span><span class="ct-762dce">photoprism</span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">MYSQL_USER</span><span class="ct-02f0b9">: </span><span class="ct-762dce">photoprism</span></span><span class="line"><span class="ct-02f0b9"> </span><span class="ct-611b86">MYSQL_PASSWORD</span><span class="ct-02f0b9">: </span><span class="ct-762dce">insecure</span></span></code></pre><!--]--></div><style>.ct-6faff2{color:#79C0FF}.ct-4ca57e{color:#8B949E}.ct-762dce{color:#A5D6FF}.ct-02f0b9{color:#C9D1D9}.ct-611b86{color:#7EE787}.light .ct-611b86{color:#268BD2}.light .ct-02f0b9{color:#657B83}.light .ct-762dce{color:#2AA198}.light .ct-4ca57e{color:#93A1A1}.light .ct-6faff2{color:#D33682}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/linux/google-photos-alternative-with-photoprism/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695531396}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a aria-current="page" href="/linux/google-photos-alternative-with-photoprism" class="router-link-active _active_192pu_81 _link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Google Photos Alternative With Photoprism</h1><article><div><p><!--[--><a href="https://photoprism.app/" rel="nofollow" target="_blank"><!--[-->Photo Prism<!--]--></a> is a free alternative to Google photos, can be set up with #docker.<!--]--></p><h2 id="docker-compose-file-to-run-it"><a href="#docker-compose-file-to-run-it"><!--[-->Docker compose file to run it<!--]--></a></h2><p><!--[-->Check out current <a href="https://dl.photoprism.app/docker/docker-compose.yml" rel="nofollow" target="_blank"><!--[-->example<!--]--></a> at photoprism's <a href="https://docs.photoprism.app/getting-started/docker-compose/" rel="nofollow" target="_blank"><!--[-->documentation<!--]--></a>.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>yaml</span></button><!--[--><pre><code><span class="line"><span class="ct-085d59">version</span><span class="ct-a7ea58">: </span><span class="ct-afc238">'3.5'</span></span><span class="line"></span><span class="line"><span class="ct-085d59">services</span><span class="ct-a7ea58">:</span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">photoprism</span><span class="ct-a7ea58">:</span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">container_name</span><span class="ct-a7ea58">: </span><span class="ct-afc238">photoprism__app</span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">image</span><span class="ct-a7ea58">: </span><span class="ct-afc238">photoprism/photoprism:latest</span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">depends_on</span><span class="ct-a7ea58">:</span></span><span class="line"><span class="ct-a7ea58"> - </span><span class="ct-afc238">mariadb</span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">restart</span><span class="ct-a7ea58">: </span><span class="ct-afc238">unless-stopped</span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">security_opt</span><span class="ct-a7ea58">:</span></span><span class="line"><span class="ct-a7ea58"> - </span><span class="ct-afc238">seccomp:unconfined</span></span><span class="line"><span class="ct-a7ea58"> - </span><span class="ct-afc238">apparmor:unconfined</span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">ports</span><span class="ct-a7ea58">:</span></span><span class="line"><span class="ct-a7ea58"> - </span><span class="ct-afc238">2342:2342</span><span class="ct-a7ea58"> </span><span class="ct-16272c"># HTTP port (host:container)</span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">environment</span><span class="ct-a7ea58">:</span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">PHOTOPRISM_ADMIN_PASSWORD</span><span class="ct-a7ea58">: </span><span class="ct-afc238">"password"</span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">PHOTOPRISM_SITE_URL</span><span class="ct-a7ea58">: </span><span class="ct-afc238">"https://service.url/"</span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">PHOTOPRISM_ORIGINALS_LIMIT</span><span class="ct-a7ea58">: </span><span class="ct-700af9">5000</span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">PHOTOPRISM_HTTP_COMPRESSION</span><span class="ct-a7ea58">: </span><span class="ct-afc238">"gzip"</span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">PHOTOPRISM_DEBUG</span><span class="ct-a7ea58">: </span><span class="ct-afc238">"false"</span><span class="ct-a7ea58"> </span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">PHOTOPRISM_PUBLIC</span><span class="ct-a7ea58">: </span><span class="ct-afc238">"false"</span><span class="ct-a7ea58"> </span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">PHOTOPRISM_READONLY</span><span class="ct-a7ea58">: </span><span class="ct-afc238">"false"</span><span class="ct-a7ea58"> </span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">PHOTOPRISM_EXPERIMENTAL</span><span class="ct-a7ea58">: </span><span class="ct-afc238">"false"</span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">PHOTOPRISM_DISABLE_CHOWN</span><span class="ct-a7ea58">: </span><span class="ct-afc238">"false"</span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">PHOTOPRISM_DISABLE_WEBDAV</span><span class="ct-a7ea58">: </span><span class="ct-afc238">"false"</span><span class="ct-a7ea58"> </span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">PHOTOPRISM_DISABLE_SETTINGS</span><span class="ct-a7ea58">: </span><span class="ct-afc238">"false"</span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">PHOTOPRISM_DISABLE_TENSORFLOW</span><span class="ct-a7ea58">: </span><span class="ct-afc238">"false"</span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">PHOTOPRISM_DISABLE_FACES</span><span class="ct-a7ea58">: </span><span class="ct-afc238">"false"</span><span class="ct-a7ea58"> </span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">PHOTOPRISM_DISABLE_CLASSIFICATION</span><span class="ct-a7ea58">: </span><span class="ct-afc238">"false"</span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">PHOTOPRISM_DARKTABLE_PRESETS</span><span class="ct-a7ea58">: </span><span class="ct-afc238">"false"</span><span class="ct-a7ea58"> </span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">PHOTOPRISM_DETECT_NSFW</span><span class="ct-a7ea58">: </span><span class="ct-afc238">"false"</span><span class="ct-a7ea58"> </span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">PHOTOPRISM_UPLOAD_NSFW</span><span class="ct-a7ea58">: </span><span class="ct-afc238">"true"</span><span class="ct-a7ea58"> </span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">PHOTOPRISM_DATABASE_DRIVER</span><span class="ct-a7ea58">: </span><span class="ct-afc238">"mysql"</span><span class="ct-a7ea58"> </span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">PHOTOPRISM_DATABASE_SERVER</span><span class="ct-a7ea58">: </span><span class="ct-afc238">"mariadb:3306"</span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">PHOTOPRISM_DATABASE_NAME</span><span class="ct-a7ea58">: </span><span class="ct-afc238">"photoprism"</span><span class="ct-a7ea58"> </span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">PHOTOPRISM_DATABASE_USER</span><span class="ct-a7ea58">: </span><span class="ct-afc238">"root"</span><span class="ct-a7ea58"> </span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">PHOTOPRISM_DATABASE_PASSWORD</span><span class="ct-a7ea58">: </span><span class="ct-afc238">"insecure"</span><span class="ct-a7ea58"> </span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">PHOTOPRISM_SITE_TITLE</span><span class="ct-a7ea58">: </span><span class="ct-afc238">"PhotoPrism"</span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">PHOTOPRISM_SITE_CAPTION</span><span class="ct-a7ea58">: </span><span class="ct-afc238">"Browse Your Life"</span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">PHOTOPRISM_SITE_DESCRIPTION</span><span class="ct-a7ea58">: </span><span class="ct-afc238">""</span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">PHOTOPRISM_SITE_AUTHOR</span><span class="ct-a7ea58">: </span><span class="ct-afc238">""</span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">HOME</span><span class="ct-a7ea58">: </span><span class="ct-afc238">"/photoprism"</span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">working_dir</span><span class="ct-a7ea58">: </span><span class="ct-afc238">"/photoprism"</span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">volumes</span><span class="ct-a7ea58">:</span></span><span class="line"><span class="ct-a7ea58"> - </span><span class="ct-afc238">"./data/originals:/photoprism/originals"</span><span class="ct-a7ea58"> </span></span><span class="line"><span class="ct-a7ea58"> - </span><span class="ct-afc238">"./data/imports:/photoprism/import"</span></span><span class="line"><span class="ct-a7ea58"> - </span><span class="ct-afc238">"./data/storage:/photoprism/storage"</span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">mariadb</span><span class="ct-a7ea58">:</span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">container_name</span><span class="ct-a7ea58">: </span><span class="ct-afc238">photoprism__db</span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">restart</span><span class="ct-a7ea58">: </span><span class="ct-afc238">unless-stopped</span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">image</span><span class="ct-a7ea58">: </span><span class="ct-afc238">mariadb:10.6</span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">security_opt</span><span class="ct-a7ea58">:</span></span><span class="line"><span class="ct-a7ea58"> - </span><span class="ct-afc238">seccomp:unconfined</span></span><span class="line"><span class="ct-a7ea58"> - </span><span class="ct-afc238">apparmor:unconfined</span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">command</span><span class="ct-a7ea58">: </span><span class="ct-afc238">mysqld --innodb-buffer-pool-size=128M --transaction-isolation=READ-COMMITTED --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci --max-connections=512 --innodb-rollback-on-timeout=OFF --innodb-lock-wait-timeout=120</span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">volumes</span><span class="ct-a7ea58">:</span></span><span class="line"><span class="ct-a7ea58"> - </span><span class="ct-afc238">"./database:/var/lib/mysql"</span><span class="ct-a7ea58"> </span><span class="ct-16272c"># Important, don't remove</span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">environment</span><span class="ct-a7ea58">:</span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">MYSQL_ROOT_PASSWORD</span><span class="ct-a7ea58">: </span><span class="ct-afc238">insecure</span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">MYSQL_DATABASE</span><span class="ct-a7ea58">: </span><span class="ct-afc238">photoprism</span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">MYSQL_USER</span><span class="ct-a7ea58">: </span><span class="ct-afc238">photoprism</span></span><span class="line"><span class="ct-a7ea58"> </span><span class="ct-085d59">MYSQL_PASSWORD</span><span class="ct-a7ea58">: </span><span class="ct-afc238">insecure</span></span></code></pre><!--]--></div><style>.ct-700af9{color:#79C0FF}.ct-16272c{color:#8B949E}.ct-afc238{color:#A5D6FF}.ct-a7ea58{color:#C9D1D9}.ct-085d59{color:#7EE787}.light .ct-085d59{color:#268BD2}.light .ct-a7ea58{color:#657B83}.light .ct-afc238{color:#2AA198}.light .ct-16272c{color:#93A1A1}.light .ct-700af9{color:#D33682}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/linux/google-photos-alternative-with-photoprism/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697992883}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/linux/linux-on-asus-zenbook-um3402-ya/_payload.js b/docs/linux/linux-on-asus-zenbook-um3402-ya/_payload.js
index eeb7aaa..26794c8 100644
--- a/docs/linux/linux-on-asus-zenbook-um3402-ya/_payload.js
+++ b/docs/linux/linux-on-asus-zenbook-um3402-ya/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:t,_path:u},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-fA8a6w5U1s":{_path:u,_dir:"linux",_draft:m,_partial:m,_locale:"en",_empty:m,title:t,description:v,excerpt:{type:w,children:[{type:b,tag:f,props:{id:n},children:[{type:a,value:o}]},{type:b,tag:g,props:{},children:[{type:b,tag:c,props:{},children:[{type:b,tag:d,props:{href:x,rel:[e]},children:[{type:a,value:y}]},{type:a,value:z}]},{type:b,tag:c,props:{},children:[{type:b,tag:d,props:{href:A,rel:[e]},children:[{type:a,value:B}]}]},{type:b,tag:c,props:{},children:[{type:a,value:C},{type:b,tag:g,props:{},children:[{type:b,tag:c,props:{},children:[{type:a,value:D}]},{type:b,tag:c,props:{},children:[{type:a,value:E}]},{type:b,tag:c,props:{},children:[{type:a,value:F}]},{type:b,tag:c,props:{},children:[{type:a,value:G}]}]}]},{type:b,tag:c,props:{},children:[{type:a,value:H}]},{type:b,tag:c,props:{},children:[{type:a,value:I},{type:b,tag:d,props:{href:J,rel:[e]},children:[{type:a,value:K}]},{type:a,value:L}]}]},{type:b,tag:f,props:{id:p},children:[{type:a,value:q}]},{type:b,tag:h,props:{},children:[{type:b,tag:M,props:{},children:[{type:a,value:N}]},{type:a,value:O}]},{type:b,tag:h,props:{},children:[{type:a,value:P},{type:b,tag:d,props:{href:Q,rel:[e]},children:[{type:a,value:R}]},{type:a,value:S},{type:b,tag:j,props:{className:[k]},children:[{type:a,value:T}]},{type:a,value:U}]},{type:b,tag:h,props:{},children:[{type:a,value:V},{type:b,tag:j,props:{className:[k]},children:[{type:a,value:W}]},{type:a,value:X}]},{type:b,tag:f,props:{id:r},children:[{type:a,value:s}]},{type:b,tag:g,props:{},children:[{type:b,tag:c,props:{},children:[{type:a,value:Y},{type:b,tag:l,props:{},children:[{type:a,value:Z}]},{type:a,value:_},{type:b,tag:l,props:{},children:[{type:a,value:$}]}]}]}]},body:{type:w,children:[{type:b,tag:f,props:{id:n},children:[{type:a,value:o}]},{type:b,tag:g,props:{},children:[{type:b,tag:c,props:{},children:[{type:b,tag:d,props:{href:x,rel:[e]},children:[{type:a,value:y}]},{type:a,value:z}]},{type:b,tag:c,props:{},children:[{type:b,tag:d,props:{href:A,rel:[e]},children:[{type:a,value:B}]}]},{type:b,tag:c,props:{},children:[{type:a,value:C},{type:b,tag:g,props:{},children:[{type:b,tag:c,props:{},children:[{type:a,value:D}]},{type:b,tag:c,props:{},children:[{type:a,value:E}]},{type:b,tag:c,props:{},children:[{type:a,value:F}]},{type:b,tag:c,props:{},children:[{type:a,value:G}]}]}]},{type:b,tag:c,props:{},children:[{type:a,value:H}]},{type:b,tag:c,props:{},children:[{type:a,value:I},{type:b,tag:d,props:{href:J,rel:[e]},children:[{type:a,value:K}]},{type:a,value:L}]}]},{type:b,tag:f,props:{id:p},children:[{type:a,value:q}]},{type:b,tag:h,props:{},children:[{type:b,tag:M,props:{},children:[{type:a,value:N}]},{type:a,value:O}]},{type:b,tag:h,props:{},children:[{type:a,value:P},{type:b,tag:d,props:{href:Q,rel:[e]},children:[{type:a,value:R}]},{type:a,value:S},{type:b,tag:j,props:{className:[k]},children:[{type:a,value:T}]},{type:a,value:U}]},{type:b,tag:h,props:{},children:[{type:a,value:V},{type:b,tag:j,props:{className:[k]},children:[{type:a,value:W}]},{type:a,value:X}]},{type:b,tag:f,props:{id:r},children:[{type:a,value:s}]},{type:b,tag:g,props:{},children:[{type:b,tag:c,props:{},children:[{type:a,value:Y},{type:b,tag:l,props:{},children:[{type:a,value:Z}]},{type:a,value:_},{type:b,tag:l,props:{},children:[{type:a,value:$}]}]}]}],toc:{title:v,searchDepth:i,depth:i,links:[{id:n,depth:i,text:o},{id:p,depth:i,text:q},{id:r,depth:i,text:s}]}},_type:"markdown",_id:"content:Linux:Linux on Asus Zenbook UM3402-YA.md",_source:"content",_file:"Linux\u002FLinux on Asus Zenbook UM3402-YA.md",_extension:"md"}},prerenderedAt:1703695531462}}("text","element","li","a","nofollow","h2","ul","p",2,"span","highlight","code-inline",false,"installing-linux-with-dualboot-alongside-windows-11","Installing Linux with DualBoot alongside Windows 11","getting-bluetooth-working-with-mediatek-7921e","Getting bluetooth working with Mediatek 7921e","power-usage-optimizations","Power usage optimizations","Linux On Asus Zenbook UM3402 YA","\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya","","root","https:\u002F\u002Fwww.asus.com\u002Fsupport\u002FFAQ\u002F1047461\u002F","Disable BitLocker in Windows",", don't forget to backup your key","https:\u002F\u002Fwww.asus.com\u002Fme-en\u002Fsupport\u002FFAQ\u002F1044688\u002F#Win11","Shrink system partition","Disable Secure Boot in Bios:","Pressing F2 while booting","Then F7 in bios","Select \"Security\" -\u003E \"Secure Boot\" -\u003E Disable.","Press F10 to save and reboot","Boot in windows, check that everything's wotking","Burn image with ","https:\u002F\u002Frufus.ie\u002F","rufus",", reboot, press F2, choose your USB drive as first boot option","strong","Problem",": WiFi is working on Zenbook UM3402-YA, but bluetooth doesn't.","According to this ","https:\u002F\u002Fwww.linux.org\u002Fthreads\u002Fsolved-wifi-adaptator-not-found-mediatek-wi-fi-6-mt7921-wireless-lan-card.37699\u002Fpage-2#post-143291","answer"," you should just turn your laptop off, disconnect power supply and ","hold power key for 60 seconds",".","After that press Power key again and wait for about 10-20sec for asus logo to appear. Then ","press F2 and disable secure boot again",", that's the necessary part.","Install ","tlp"," and enable it with ","systemctl enable --now tlp"))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:t,_path:u},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-fA8a6w5U1s":{_path:u,_dir:"linux",_draft:m,_partial:m,_locale:"en",_empty:m,title:t,description:v,excerpt:{type:w,children:[{type:b,tag:f,props:{id:n},children:[{type:a,value:o}]},{type:b,tag:g,props:{},children:[{type:b,tag:c,props:{},children:[{type:b,tag:d,props:{href:x,rel:[e]},children:[{type:a,value:y}]},{type:a,value:z}]},{type:b,tag:c,props:{},children:[{type:b,tag:d,props:{href:A,rel:[e]},children:[{type:a,value:B}]}]},{type:b,tag:c,props:{},children:[{type:a,value:C},{type:b,tag:g,props:{},children:[{type:b,tag:c,props:{},children:[{type:a,value:D}]},{type:b,tag:c,props:{},children:[{type:a,value:E}]},{type:b,tag:c,props:{},children:[{type:a,value:F}]},{type:b,tag:c,props:{},children:[{type:a,value:G}]}]}]},{type:b,tag:c,props:{},children:[{type:a,value:H}]},{type:b,tag:c,props:{},children:[{type:a,value:I},{type:b,tag:d,props:{href:J,rel:[e]},children:[{type:a,value:K}]},{type:a,value:L}]}]},{type:b,tag:f,props:{id:p},children:[{type:a,value:q}]},{type:b,tag:h,props:{},children:[{type:b,tag:M,props:{},children:[{type:a,value:N}]},{type:a,value:O}]},{type:b,tag:h,props:{},children:[{type:a,value:P},{type:b,tag:d,props:{href:Q,rel:[e]},children:[{type:a,value:R}]},{type:a,value:S},{type:b,tag:j,props:{className:[k]},children:[{type:a,value:T}]},{type:a,value:U}]},{type:b,tag:h,props:{},children:[{type:a,value:V},{type:b,tag:j,props:{className:[k]},children:[{type:a,value:W}]},{type:a,value:X}]},{type:b,tag:f,props:{id:r},children:[{type:a,value:s}]},{type:b,tag:g,props:{},children:[{type:b,tag:c,props:{},children:[{type:a,value:Y},{type:b,tag:l,props:{},children:[{type:a,value:Z}]},{type:a,value:_},{type:b,tag:l,props:{},children:[{type:a,value:$}]}]}]}]},body:{type:w,children:[{type:b,tag:f,props:{id:n},children:[{type:a,value:o}]},{type:b,tag:g,props:{},children:[{type:b,tag:c,props:{},children:[{type:b,tag:d,props:{href:x,rel:[e]},children:[{type:a,value:y}]},{type:a,value:z}]},{type:b,tag:c,props:{},children:[{type:b,tag:d,props:{href:A,rel:[e]},children:[{type:a,value:B}]}]},{type:b,tag:c,props:{},children:[{type:a,value:C},{type:b,tag:g,props:{},children:[{type:b,tag:c,props:{},children:[{type:a,value:D}]},{type:b,tag:c,props:{},children:[{type:a,value:E}]},{type:b,tag:c,props:{},children:[{type:a,value:F}]},{type:b,tag:c,props:{},children:[{type:a,value:G}]}]}]},{type:b,tag:c,props:{},children:[{type:a,value:H}]},{type:b,tag:c,props:{},children:[{type:a,value:I},{type:b,tag:d,props:{href:J,rel:[e]},children:[{type:a,value:K}]},{type:a,value:L}]}]},{type:b,tag:f,props:{id:p},children:[{type:a,value:q}]},{type:b,tag:h,props:{},children:[{type:b,tag:M,props:{},children:[{type:a,value:N}]},{type:a,value:O}]},{type:b,tag:h,props:{},children:[{type:a,value:P},{type:b,tag:d,props:{href:Q,rel:[e]},children:[{type:a,value:R}]},{type:a,value:S},{type:b,tag:j,props:{className:[k]},children:[{type:a,value:T}]},{type:a,value:U}]},{type:b,tag:h,props:{},children:[{type:a,value:V},{type:b,tag:j,props:{className:[k]},children:[{type:a,value:W}]},{type:a,value:X}]},{type:b,tag:f,props:{id:r},children:[{type:a,value:s}]},{type:b,tag:g,props:{},children:[{type:b,tag:c,props:{},children:[{type:a,value:Y},{type:b,tag:l,props:{},children:[{type:a,value:Z}]},{type:a,value:_},{type:b,tag:l,props:{},children:[{type:a,value:$}]}]}]}],toc:{title:v,searchDepth:i,depth:i,links:[{id:n,depth:i,text:o},{id:p,depth:i,text:q},{id:r,depth:i,text:s}]}},_type:"markdown",_id:"content:Linux:Linux on Asus Zenbook UM3402-YA.md",_source:"content",_file:"Linux\u002FLinux on Asus Zenbook UM3402-YA.md",_extension:"md"}},prerenderedAt:1703697992939}}("text","element","li","a","nofollow","h2","ul","p",2,"span","highlight","code-inline",false,"installing-linux-with-dualboot-alongside-windows-11","Installing Linux with DualBoot alongside Windows 11","getting-bluetooth-working-with-mediatek-7921e","Getting bluetooth working with Mediatek 7921e","power-usage-optimizations","Power usage optimizations","Linux On Asus Zenbook UM3402 YA","\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya","","root","https:\u002F\u002Fwww.asus.com\u002Fsupport\u002FFAQ\u002F1047461\u002F","Disable BitLocker in Windows",", don't forget to backup your key","https:\u002F\u002Fwww.asus.com\u002Fme-en\u002Fsupport\u002FFAQ\u002F1044688\u002F#Win11","Shrink system partition","Disable Secure Boot in Bios:","Pressing F2 while booting","Then F7 in bios","Select \"Security\" -\u003E \"Secure Boot\" -\u003E Disable.","Press F10 to save and reboot","Boot in windows, check that everything's wotking","Burn image with ","https:\u002F\u002Frufus.ie\u002F","rufus",", reboot, press F2, choose your USB drive as first boot option","strong","Problem",": WiFi is working on Zenbook UM3402-YA, but bluetooth doesn't.","According to this ","https:\u002F\u002Fwww.linux.org\u002Fthreads\u002Fsolved-wifi-adaptator-not-found-mediatek-wi-fi-6-mt7921-wireless-lan-card.37699\u002Fpage-2#post-143291","answer"," you should just turn your laptop off, disconnect power supply and ","hold power key for 60 seconds",".","After that press Power key again and wait for about 10-20sec for asus logo to appear. Then ","press F2 and disable secure boot again",", that's the necessary part.","Install ","tlp"," and enable it with ","systemctl enable --now tlp"))
\ No newline at end of file
diff --git a/docs/linux/linux-on-asus-zenbook-um3402-ya/index.html b/docs/linux/linux-on-asus-zenbook-um3402-ya/index.html
index 94e906e..1f8b42f 100644
--- a/docs/linux/linux-on-asus-zenbook-um3402-ya/index.html
+++ b/docs/linux/linux-on-asus-zenbook-um3402-ya/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Linux On Asus Zenbook UM3402 YA • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="head:count" content="2"><link rel="modulepreload" href="/linux/linux-on-asus-zenbook-um3402-ya/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseH2.d950f051.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseUl.b892d423.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseLi.a224f663.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseA.c52e44f8.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseStrong.e968ffe9.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCodeInline.d9bcf614.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a aria-current="page" href="/linux/linux-on-asus-zenbook-um3402-ya" class="router-link-active _active_192pu_81 _link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Linux On Asus Zenbook UM3402 YA</h1><article><div><h2 id="installing-linux-with-dualboot-alongside-windows-11"><a href="#installing-linux-with-dualboot-alongside-windows-11"><!--[-->Installing Linux with DualBoot alongside Windows 11<!--]--></a></h2><ul><!--[--><li><!--[--><a href="https://www.asus.com/support/FAQ/1047461/" rel="nofollow" target="_blank"><!--[-->Disable BitLocker in Windows<!--]--></a>, don't forget to backup your key<!--]--></li><li><!--[--><a href="https://www.asus.com/me-en/support/FAQ/1044688/#Win11" rel="nofollow" target="_blank"><!--[-->Shrink system partition<!--]--></a><!--]--></li><li><!--[-->Disable Secure Boot in Bios:<ul><!--[--><li><!--[-->Pressing F2 while booting<!--]--></li><li><!--[-->Then F7 in bios<!--]--></li><li><!--[-->Select "Security" -> "Secure Boot" -> Disable.<!--]--></li><li><!--[-->Press F10 to save and reboot<!--]--></li><!--]--></ul><!--]--></li><li><!--[-->Boot in windows, check that everything's wotking<!--]--></li><li><!--[-->Burn image with <a href="https://rufus.ie/" rel="nofollow" target="_blank"><!--[-->rufus<!--]--></a>, reboot, press F2, choose your USB drive as first boot option<!--]--></li><!--]--></ul><h2 id="getting-bluetooth-working-with-mediatek-7921e"><a href="#getting-bluetooth-working-with-mediatek-7921e"><!--[-->Getting bluetooth working with Mediatek 7921e<!--]--></a></h2><p><!--[--><strong><!--[-->Problem<!--]--></strong>: WiFi is working on Zenbook UM3402-YA, but bluetooth doesn't.<!--]--></p><p><!--[-->According to this <a href="https://www.linux.org/threads/solved-wifi-adaptator-not-found-mediatek-wi-fi-6-mt7921-wireless-lan-card.37699/page-2#post-143291" rel="nofollow" target="_blank"><!--[-->answer<!--]--></a> you should just turn your laptop off, disconnect power supply and <span class="highlight">hold power key for 60 seconds</span>.<!--]--></p><p><!--[-->After that press Power key again and wait for about 10-20sec for asus logo to appear. Then <span class="highlight">press F2 and disable secure boot again</span>, that's the necessary part.<!--]--></p><h2 id="power-usage-optimizations"><a href="#power-usage-optimizations"><!--[-->Power usage optimizations<!--]--></a></h2><ul><!--[--><li><!--[-->Install <code><!--[-->tlp<!--]--></code> and enable it with <code><!--[-->systemctl enable --now tlp<!--]--></code><!--]--></li><!--]--></ul></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/linux/linux-on-asus-zenbook-um3402-ya/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695531462}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseUl.b892d423.js" crossorigin></script><script type="module" src="/nuxt/ProseLi.a224f663.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseStrong.e968ffe9.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a aria-current="page" href="/linux/linux-on-asus-zenbook-um3402-ya" class="router-link-active _active_192pu_81 _link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Linux On Asus Zenbook UM3402 YA</h1><article><div><h2 id="installing-linux-with-dualboot-alongside-windows-11"><a href="#installing-linux-with-dualboot-alongside-windows-11"><!--[-->Installing Linux with DualBoot alongside Windows 11<!--]--></a></h2><ul><!--[--><li><!--[--><a href="https://www.asus.com/support/FAQ/1047461/" rel="nofollow" target="_blank"><!--[-->Disable BitLocker in Windows<!--]--></a>, don't forget to backup your key<!--]--></li><li><!--[--><a href="https://www.asus.com/me-en/support/FAQ/1044688/#Win11" rel="nofollow" target="_blank"><!--[-->Shrink system partition<!--]--></a><!--]--></li><li><!--[-->Disable Secure Boot in Bios:<ul><!--[--><li><!--[-->Pressing F2 while booting<!--]--></li><li><!--[-->Then F7 in bios<!--]--></li><li><!--[-->Select "Security" -> "Secure Boot" -> Disable.<!--]--></li><li><!--[-->Press F10 to save and reboot<!--]--></li><!--]--></ul><!--]--></li><li><!--[-->Boot in windows, check that everything's wotking<!--]--></li><li><!--[-->Burn image with <a href="https://rufus.ie/" rel="nofollow" target="_blank"><!--[-->rufus<!--]--></a>, reboot, press F2, choose your USB drive as first boot option<!--]--></li><!--]--></ul><h2 id="getting-bluetooth-working-with-mediatek-7921e"><a href="#getting-bluetooth-working-with-mediatek-7921e"><!--[-->Getting bluetooth working with Mediatek 7921e<!--]--></a></h2><p><!--[--><strong><!--[-->Problem<!--]--></strong>: WiFi is working on Zenbook UM3402-YA, but bluetooth doesn't.<!--]--></p><p><!--[-->According to this <a href="https://www.linux.org/threads/solved-wifi-adaptator-not-found-mediatek-wi-fi-6-mt7921-wireless-lan-card.37699/page-2#post-143291" rel="nofollow" target="_blank"><!--[-->answer<!--]--></a> you should just turn your laptop off, disconnect power supply and <span class="highlight">hold power key for 60 seconds</span>.<!--]--></p><p><!--[-->After that press Power key again and wait for about 10-20sec for asus logo to appear. Then <span class="highlight">press F2 and disable secure boot again</span>, that's the necessary part.<!--]--></p><h2 id="power-usage-optimizations"><a href="#power-usage-optimizations"><!--[-->Power usage optimizations<!--]--></a></h2><ul><!--[--><li><!--[-->Install <code><!--[-->tlp<!--]--></code> and enable it with <code><!--[-->systemctl enable --now tlp<!--]--></code><!--]--></li><!--]--></ul></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/linux/linux-on-asus-zenbook-um3402-ya/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697992939}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseUl.b892d423.js" crossorigin></script><script type="module" src="/nuxt/ProseLi.a224f663.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseStrong.e968ffe9.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/linux/resume-or-start-screen-session/_payload.js b/docs/linux/resume-or-start-screen-session/_payload.js
index 028385f..6184373 100644
--- a/docs/linux/resume-or-start-screen-session/_payload.js
+++ b/docs/linux/resume-or-start-screen-session/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:j,_path:k},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-KZPaWw5ajQ":{_path:k,_dir:"linux",_draft:f,_partial:f,_locale:"en",_empty:f,title:j,description:"Running this script will enter currently running screen session or will start new one.",excerpt:{type:l,children:[{type:a,tag:m,props:{},children:[{type:b,value:n},{type:a,tag:o,props:{},children:[{type:b,value:p}]},{type:b,value:q}]},{type:a,tag:d,props:{code:g,language:r},children:[{type:a,tag:s,props:{},children:[{type:a,tag:d,props:{__ignoreMap:h},children:[{type:b,value:g}]}]}]}]},body:{type:l,children:[{type:a,tag:m,props:{},children:[{type:b,value:n},{type:a,tag:o,props:{},children:[{type:b,value:p}]},{type:b,value:q}]},{type:a,tag:d,props:{code:g,language:r},children:[{type:a,tag:s,props:{},children:[{type:a,tag:d,props:{__ignoreMap:h},children:[{type:a,tag:c,props:{class:"line"},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:"( screen -r bash "}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:t}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:" ( screen -d bash "}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:"&&"}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:" screen -r bash "}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:t}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:" screen -SAm bash bash ) )"}]}]}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-ef58d3{color:#FF7B72}.ct-4eae5e{color:#C9D1D9}.light .ct-4eae5e{color:#657B83}.light .ct-ef58d3{color:#859900}"}]}],toc:{title:h,searchDepth:u,depth:u,links:[]}},_type:"markdown",_id:"content:Linux:Resume or start screen session.md",_source:"content",_file:"Linux\u002FResume or start screen session.md",_extension:"md"}},prerenderedAt:1703695531490}}("element","text","span","code","ct-4eae5e",false,"( screen -r bash || ( screen -d bash && screen -r bash || screen -SAm bash bash ) )\n","","ct-ef58d3","Resume Or Start Screen Session","\u002Flinux\u002Fresume-or-start-screen-session","root","p","Running this script will enter currently running ","code-inline","screen"," session or will start new one.","shell","pre","||",2))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:j,_path:k},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-KZPaWw5ajQ":{_path:k,_dir:"linux",_draft:f,_partial:f,_locale:"en",_empty:f,title:j,description:"Running this script will enter currently running screen session or will start new one.",excerpt:{type:l,children:[{type:a,tag:m,props:{},children:[{type:b,value:n},{type:a,tag:o,props:{},children:[{type:b,value:p}]},{type:b,value:q}]},{type:a,tag:d,props:{code:g,language:r},children:[{type:a,tag:s,props:{},children:[{type:a,tag:d,props:{__ignoreMap:h},children:[{type:b,value:g}]}]}]}]},body:{type:l,children:[{type:a,tag:m,props:{},children:[{type:b,value:n},{type:a,tag:o,props:{},children:[{type:b,value:p}]},{type:b,value:q}]},{type:a,tag:d,props:{code:g,language:r},children:[{type:a,tag:s,props:{},children:[{type:a,tag:d,props:{__ignoreMap:h},children:[{type:a,tag:c,props:{class:"line"},children:[{type:a,tag:c,props:{class:e},children:[{type:b,value:"( screen -r bash "}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:t}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:" ( screen -d bash "}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:"&&"}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:" screen -r bash "}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:t}]},{type:a,tag:c,props:{class:e},children:[{type:b,value:" screen -SAm bash bash ) )"}]}]}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-322045{color:#FF7B72}.ct-daaae9{color:#C9D1D9}.light .ct-daaae9{color:#657B83}.light .ct-322045{color:#859900}"}]}],toc:{title:h,searchDepth:u,depth:u,links:[]}},_type:"markdown",_id:"content:Linux:Resume or start screen session.md",_source:"content",_file:"Linux\u002FResume or start screen session.md",_extension:"md"}},prerenderedAt:1703697992981}}("element","text","span","code","ct-daaae9",false,"( screen -r bash || ( screen -d bash && screen -r bash || screen -SAm bash bash ) )\n","","ct-322045","Resume Or Start Screen Session","\u002Flinux\u002Fresume-or-start-screen-session","root","p","Running this script will enter currently running ","code-inline","screen"," session or will start new one.","shell","pre","||",2))
\ No newline at end of file
diff --git a/docs/linux/resume-or-start-screen-session/index.html b/docs/linux/resume-or-start-screen-session/index.html
index 947a2cc..2f6c39e 100644
--- a/docs/linux/resume-or-start-screen-session/index.html
+++ b/docs/linux/resume-or-start-screen-session/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Resume Or Start Screen Session • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Running this script will enter currently running screen session or will start new one."><meta name="head:count" content="3"><link rel="modulepreload" href="/linux/resume-or-start-screen-session/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCodeInline.d9bcf614.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a aria-current="page" href="/linux/resume-or-start-screen-session" class="router-link-active _active_192pu_81 _link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Resume Or Start Screen Session</h1><article><div><p><!--[-->Running this script will enter currently running <code><!--[-->screen<!--]--></code> session or will start new one.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-4eae5e">( screen -r bash </span><span class="ct-ef58d3">||</span><span class="ct-4eae5e"> ( screen -d bash </span><span class="ct-ef58d3">&&</span><span class="ct-4eae5e"> screen -r bash </span><span class="ct-ef58d3">||</span><span class="ct-4eae5e"> screen -SAm bash bash ) )</span></span></code></pre><!--]--></div><style>.ct-ef58d3{color:#FF7B72}.ct-4eae5e{color:#C9D1D9}.light .ct-4eae5e{color:#657B83}.light .ct-ef58d3{color:#859900}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/linux/resume-or-start-screen-session/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695531490}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a aria-current="page" href="/linux/resume-or-start-screen-session" class="router-link-active _active_192pu_81 _link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Resume Or Start Screen Session</h1><article><div><p><!--[-->Running this script will enter currently running <code><!--[-->screen<!--]--></code> session or will start new one.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-daaae9">( screen -r bash </span><span class="ct-322045">||</span><span class="ct-daaae9"> ( screen -d bash </span><span class="ct-322045">&&</span><span class="ct-daaae9"> screen -r bash </span><span class="ct-322045">||</span><span class="ct-daaae9"> screen -SAm bash bash ) )</span></span></code></pre><!--]--></div><style>.ct-322045{color:#FF7B72}.ct-daaae9{color:#C9D1D9}.light .ct-daaae9{color:#657B83}.light .ct-322045{color:#859900}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/linux/resume-or-start-screen-session/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697992981}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/linux/rsync-file-with-ssh/_payload.js b/docs/linux/rsync-file-with-ssh/_payload.js
index 9e42213..2ea9636 100644
--- a/docs/linux/rsync-file-with-ssh/_payload.js
+++ b/docs/linux/rsync-file-with-ssh/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:p,_path:q},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-3kXgAF354y":{_path:q,_dir:"linux",_draft:l,_partial:l,_locale:"en",_empty:l,title:p,description:m,excerpt:{type:r,children:[{type:a,tag:s,props:{},children:[{type:c,value:m}]},{type:a,tag:k,props:{code:n,language:t},children:[{type:a,tag:u,props:{},children:[{type:a,tag:k,props:{__ignoreMap:o},children:[{type:c,value:n}]}]}]}]},body:{type:r,children:[{type:a,tag:s,props:{},children:[{type:c,value:m}]},{type:a,tag:k,props:{code:n,language:t},children:[{type:a,tag:u,props:{},children:[{type:a,tag:k,props:{__ignoreMap:o},children:[{type:a,tag:b,props:{class:d},children:[{type:a,tag:b,props:{class:"ct-c320ca"},children:[{type:c,value:"#!\u002Fbin\u002Fbash"}]}]},{type:a,tag:b,props:{class:d},children:[]},{type:a,tag:b,props:{class:d},children:[{type:a,tag:b,props:{class:e},children:[{type:c,value:"PORT=22"}]}]},{type:a,tag:b,props:{class:d},children:[{type:a,tag:b,props:{class:e},children:[{type:c,value:"USER=user"}]}]},{type:a,tag:b,props:{class:d},children:[{type:a,tag:b,props:{class:e},children:[{type:c,value:"HOST=example.com"}]}]},{type:a,tag:b,props:{class:d},children:[{type:a,tag:b,props:{class:e},children:[{type:c,value:"REMOTE_PATH=\u002Ftmp"}]}]},{type:a,tag:b,props:{class:d},children:[{type:a,tag:b,props:{class:e},children:[{type:c,value:"REMOTE_FILE=sample.text"}]}]},{type:a,tag:b,props:{class:d},children:[{type:a,tag:b,props:{class:e},children:[{type:c,value:"DEST_PATH=.\u002F"}]}]},{type:a,tag:b,props:{class:d},children:[]},{type:a,tag:b,props:{class:d},children:[{type:a,tag:b,props:{class:e},children:[{type:c,value:"rsync -a -e "}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"\"ssh -p "}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"PORT"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:e},children:[{type:c,value:" -P -v \\"}]}]},{type:a,tag:b,props:{class:d},children:[{type:a,tag:b,props:{class:e},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"USER"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"@"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"HOST"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:":"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"REMOTE_PATH"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"\u002F"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"REMOTE_FILE"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:e},children:[{type:c,value:" \\"}]}]},{type:a,tag:b,props:{class:d},children:[{type:a,tag:b,props:{class:e},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"DEST_PATH"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-aea61c{color:#C9D1D9}.ct-5cf3ba{color:#C9D1D9}.ct-905a71{color:#A5D6FF}.ct-8ef0bb{color:#C9D1D9}.ct-c320ca{color:#8B949E}.light .ct-c320ca{color:#93A1A1}.light .ct-8ef0bb{color:#657B83}.light .ct-905a71{color:#2AA198}.light .ct-5cf3ba{color:#859900}.light .ct-aea61c{color:#268BD2}"}]}],toc:{title:o,searchDepth:w,depth:w,links:[]}},_type:"markdown",_id:"content:Linux:Rsync file with SSH.md",_source:"content",_file:"Linux\u002FRsync file with SSH.md",_extension:"md"}},prerenderedAt:1703695531512}}("element","span","text","line","ct-8ef0bb","ct-905a71","ct-5cf3ba","$","ct-aea61c","\"","code",false,"Downloads file from #SSH with rsync and puts it in current folder.","#!\u002Fbin\u002Fbash\n\nPORT=22\nUSER=user\nHOST=example.com\nREMOTE_PATH=\u002Ftmp\nREMOTE_FILE=sample.text\nDEST_PATH=.\u002F\n\nrsync -a -e \"ssh -p $PORT\" -P -v \\\n \"$USER@$HOST:$REMOTE_PATH\u002F$REMOTE_FILE\" \\\n \"$DEST_PATH\"\n","","Rsync File With SSH","\u002Flinux\u002Frsync-file-with-ssh","root","p","bash","pre"," ",2))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:p,_path:q},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-3kXgAF354y":{_path:q,_dir:"linux",_draft:l,_partial:l,_locale:"en",_empty:l,title:p,description:m,excerpt:{type:r,children:[{type:a,tag:s,props:{},children:[{type:c,value:m}]},{type:a,tag:k,props:{code:n,language:t},children:[{type:a,tag:u,props:{},children:[{type:a,tag:k,props:{__ignoreMap:o},children:[{type:c,value:n}]}]}]}]},body:{type:r,children:[{type:a,tag:s,props:{},children:[{type:c,value:m}]},{type:a,tag:k,props:{code:n,language:t},children:[{type:a,tag:u,props:{},children:[{type:a,tag:k,props:{__ignoreMap:o},children:[{type:a,tag:b,props:{class:d},children:[{type:a,tag:b,props:{class:"ct-369d9f"},children:[{type:c,value:"#!\u002Fbin\u002Fbash"}]}]},{type:a,tag:b,props:{class:d},children:[]},{type:a,tag:b,props:{class:d},children:[{type:a,tag:b,props:{class:e},children:[{type:c,value:"PORT=22"}]}]},{type:a,tag:b,props:{class:d},children:[{type:a,tag:b,props:{class:e},children:[{type:c,value:"USER=user"}]}]},{type:a,tag:b,props:{class:d},children:[{type:a,tag:b,props:{class:e},children:[{type:c,value:"HOST=example.com"}]}]},{type:a,tag:b,props:{class:d},children:[{type:a,tag:b,props:{class:e},children:[{type:c,value:"REMOTE_PATH=\u002Ftmp"}]}]},{type:a,tag:b,props:{class:d},children:[{type:a,tag:b,props:{class:e},children:[{type:c,value:"REMOTE_FILE=sample.text"}]}]},{type:a,tag:b,props:{class:d},children:[{type:a,tag:b,props:{class:e},children:[{type:c,value:"DEST_PATH=.\u002F"}]}]},{type:a,tag:b,props:{class:d},children:[]},{type:a,tag:b,props:{class:d},children:[{type:a,tag:b,props:{class:e},children:[{type:c,value:"rsync -a -e "}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"\"ssh -p "}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"PORT"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:e},children:[{type:c,value:" -P -v \\"}]}]},{type:a,tag:b,props:{class:d},children:[{type:a,tag:b,props:{class:e},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"USER"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"@"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"HOST"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:":"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"REMOTE_PATH"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"\u002F"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"REMOTE_FILE"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:e},children:[{type:c,value:" \\"}]}]},{type:a,tag:b,props:{class:d},children:[{type:a,tag:b,props:{class:e},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"DEST_PATH"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-14b85e{color:#C9D1D9}.ct-49032f{color:#C9D1D9}.ct-2e2f05{color:#A5D6FF}.ct-dcb3db{color:#C9D1D9}.ct-369d9f{color:#8B949E}.light .ct-369d9f{color:#93A1A1}.light .ct-dcb3db{color:#657B83}.light .ct-2e2f05{color:#2AA198}.light .ct-49032f{color:#859900}.light .ct-14b85e{color:#268BD2}"}]}],toc:{title:o,searchDepth:w,depth:w,links:[]}},_type:"markdown",_id:"content:Linux:Rsync file with SSH.md",_source:"content",_file:"Linux\u002FRsync file with SSH.md",_extension:"md"}},prerenderedAt:1703697993013}}("element","span","text","line","ct-dcb3db","ct-2e2f05","ct-49032f","$","ct-14b85e","\"","code",false,"Downloads file from #SSH with rsync and puts it in current folder.","#!\u002Fbin\u002Fbash\n\nPORT=22\nUSER=user\nHOST=example.com\nREMOTE_PATH=\u002Ftmp\nREMOTE_FILE=sample.text\nDEST_PATH=.\u002F\n\nrsync -a -e \"ssh -p $PORT\" -P -v \\\n \"$USER@$HOST:$REMOTE_PATH\u002F$REMOTE_FILE\" \\\n \"$DEST_PATH\"\n","","Rsync File With SSH","\u002Flinux\u002Frsync-file-with-ssh","root","p","bash","pre"," ",2))
\ No newline at end of file
diff --git a/docs/linux/rsync-file-with-ssh/index.html b/docs/linux/rsync-file-with-ssh/index.html
index aa4fccd..e61d166 100644
--- a/docs/linux/rsync-file-with-ssh/index.html
+++ b/docs/linux/rsync-file-with-ssh/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Rsync File With SSH • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Downloads file from #SSH with rsync and puts it in current folder."><meta name="head:count" content="3"><link rel="modulepreload" href="/linux/rsync-file-with-ssh/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a aria-current="page" href="/linux/rsync-file-with-ssh" class="router-link-active _active_192pu_81 _link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Rsync File With SSH</h1><article><div><p><!--[-->Downloads file from #SSH with rsync and puts it in current folder.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>bash</span></button><!--[--><pre><code><span class="line"><span class="ct-c320ca">#!/bin/bash</span></span><span class="line"></span><span class="line"><span class="ct-8ef0bb">PORT=22</span></span><span class="line"><span class="ct-8ef0bb">USER=user</span></span><span class="line"><span class="ct-8ef0bb">HOST=example.com</span></span><span class="line"><span class="ct-8ef0bb">REMOTE_PATH=/tmp</span></span><span class="line"><span class="ct-8ef0bb">REMOTE_FILE=sample.text</span></span><span class="line"><span class="ct-8ef0bb">DEST_PATH=./</span></span><span class="line"></span><span class="line"><span class="ct-8ef0bb">rsync -a -e </span><span class="ct-905a71">"ssh -p </span><span class="ct-5cf3ba">$</span><span class="ct-aea61c">PORT</span><span class="ct-905a71">"</span><span class="ct-8ef0bb"> -P -v \</span></span><span class="line"><span class="ct-8ef0bb"> </span><span class="ct-905a71">"</span><span class="ct-5cf3ba">$</span><span class="ct-aea61c">USER</span><span class="ct-905a71">@</span><span class="ct-5cf3ba">$</span><span class="ct-aea61c">HOST</span><span class="ct-905a71">:</span><span class="ct-5cf3ba">$</span><span class="ct-aea61c">REMOTE_PATH</span><span class="ct-905a71">/</span><span class="ct-5cf3ba">$</span><span class="ct-aea61c">REMOTE_FILE</span><span class="ct-905a71">"</span><span class="ct-8ef0bb"> \</span></span><span class="line"><span class="ct-8ef0bb"> </span><span class="ct-905a71">"</span><span class="ct-5cf3ba">$</span><span class="ct-aea61c">DEST_PATH</span><span class="ct-905a71">"</span></span></code></pre><!--]--></div><style>.ct-aea61c{color:#C9D1D9}.ct-5cf3ba{color:#C9D1D9}.ct-905a71{color:#A5D6FF}.ct-8ef0bb{color:#C9D1D9}.ct-c320ca{color:#8B949E}.light .ct-c320ca{color:#93A1A1}.light .ct-8ef0bb{color:#657B83}.light .ct-905a71{color:#2AA198}.light .ct-5cf3ba{color:#859900}.light .ct-aea61c{color:#268BD2}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/linux/rsync-file-with-ssh/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695531512}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a aria-current="page" href="/linux/rsync-file-with-ssh" class="router-link-active _active_192pu_81 _link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Rsync File With SSH</h1><article><div><p><!--[-->Downloads file from #SSH with rsync and puts it in current folder.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>bash</span></button><!--[--><pre><code><span class="line"><span class="ct-369d9f">#!/bin/bash</span></span><span class="line"></span><span class="line"><span class="ct-dcb3db">PORT=22</span></span><span class="line"><span class="ct-dcb3db">USER=user</span></span><span class="line"><span class="ct-dcb3db">HOST=example.com</span></span><span class="line"><span class="ct-dcb3db">REMOTE_PATH=/tmp</span></span><span class="line"><span class="ct-dcb3db">REMOTE_FILE=sample.text</span></span><span class="line"><span class="ct-dcb3db">DEST_PATH=./</span></span><span class="line"></span><span class="line"><span class="ct-dcb3db">rsync -a -e </span><span class="ct-2e2f05">"ssh -p </span><span class="ct-49032f">$</span><span class="ct-14b85e">PORT</span><span class="ct-2e2f05">"</span><span class="ct-dcb3db"> -P -v \</span></span><span class="line"><span class="ct-dcb3db"> </span><span class="ct-2e2f05">"</span><span class="ct-49032f">$</span><span class="ct-14b85e">USER</span><span class="ct-2e2f05">@</span><span class="ct-49032f">$</span><span class="ct-14b85e">HOST</span><span class="ct-2e2f05">:</span><span class="ct-49032f">$</span><span class="ct-14b85e">REMOTE_PATH</span><span class="ct-2e2f05">/</span><span class="ct-49032f">$</span><span class="ct-14b85e">REMOTE_FILE</span><span class="ct-2e2f05">"</span><span class="ct-dcb3db"> \</span></span><span class="line"><span class="ct-dcb3db"> </span><span class="ct-2e2f05">"</span><span class="ct-49032f">$</span><span class="ct-14b85e">DEST_PATH</span><span class="ct-2e2f05">"</span></span></code></pre><!--]--></div><style>.ct-14b85e{color:#C9D1D9}.ct-49032f{color:#C9D1D9}.ct-2e2f05{color:#A5D6FF}.ct-dcb3db{color:#C9D1D9}.ct-369d9f{color:#8B949E}.light .ct-369d9f{color:#93A1A1}.light .ct-dcb3db{color:#657B83}.light .ct-2e2f05{color:#2AA198}.light .ct-49032f{color:#859900}.light .ct-14b85e{color:#268BD2}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/linux/rsync-file-with-ssh/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697993013}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/linux/setting-up-nginx/_payload.js b/docs/linux/setting-up-nginx/_payload.js
index 4d358dc..2a622ce 100644
--- a/docs/linux/setting-up-nginx/_payload.js
+++ b/docs/linux/setting-up-nginx/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:P,_path:Q},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-jVEFIZPtgx":{_path:Q,_dir:"linux",_draft:C,_partial:C,_locale:"en",_empty:C,title:P,description:j,excerpt:{type:R,children:[{type:a,tag:l,props:{id:D},children:[{type:c,value:E}]},{type:a,tag:h,props:{code:F,language:m},children:[{type:a,tag:n,props:{},children:[{type:a,tag:h,props:{__ignoreMap:j},children:[{type:c,value:F}]}]}]},{type:a,tag:l,props:{id:G},children:[{type:c,value:H}]},{type:a,tag:h,props:{code:I,language:m},children:[{type:a,tag:n,props:{},children:[{type:a,tag:h,props:{__ignoreMap:j},children:[{type:c,value:I}]}]}]},{type:a,tag:l,props:{id:J},children:[{type:c,value:K}]},{type:a,tag:S,props:{},children:[{type:c,value:T},{type:a,tag:o,props:{},children:[{type:c,value:U}]},{type:c,value:V},{type:a,tag:o,props:{},children:[{type:c,value:W}]},{type:c,value:X},{type:a,tag:o,props:{},children:[{type:c,value:Y}]},{type:c,value:Z},{type:a,tag:_,props:{href:s,rel:[$]},children:[{type:c,value:s}]},{type:c,value:aa}]},{type:a,tag:h,props:{code:L,language:m},children:[{type:a,tag:n,props:{},children:[{type:a,tag:h,props:{__ignoreMap:j},children:[{type:c,value:L}]}]}]}]},body:{type:R,children:[{type:a,tag:l,props:{id:D},children:[{type:c,value:E}]},{type:a,tag:h,props:{code:F,language:m},children:[{type:a,tag:n,props:{},children:[{type:a,tag:h,props:{__ignoreMap:j},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:t},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:p},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:ab},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:ad},children:[{type:c,value:ae}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:af}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"# First attempt to serve request as file, then"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"# as directory, then fall back to displaying a 404."}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:"ct-bab19a"},children:[{type:c,value:g}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ag}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]}]}]}]}]},{type:a,tag:l,props:{id:G},children:[{type:c,value:H}]},{type:a,tag:h,props:{code:I,language:m},children:[{type:a,tag:n,props:{},children:[{type:a,tag:h,props:{__ignoreMap:j},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:t},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:" client_max_body_size "}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"200M;"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]}]}]}]}]},{type:a,tag:l,props:{id:J},children:[{type:c,value:K}]},{type:a,tag:S,props:{},children:[{type:c,value:T},{type:a,tag:o,props:{},children:[{type:c,value:U}]},{type:c,value:V},{type:a,tag:o,props:{},children:[{type:c,value:W}]},{type:c,value:X},{type:a,tag:o,props:{},children:[{type:c,value:Y}]},{type:c,value:Z},{type:a,tag:_,props:{href:s,rel:[$]},children:[{type:c,value:s}]},{type:c,value:aa}]},{type:a,tag:h,props:{code:L,language:m},children:[{type:a,tag:n,props:{},children:[{type:a,tag:h,props:{__ignoreMap:j},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:t},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"80;"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ah}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ai}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"return"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:"ct-a505ca"},children:[{type:c,value:"301"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" https:\u002F\u002Fnext.vault48.org"}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:A},children:[{type:c,value:"request_uri"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:t},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"443 ssl http2;"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"[::]:443 ssl http2;"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"# managed by Certbot"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:" ssl_certificate "}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"\u002Fetc\u002Fletsencrypt\u002Flive\u002Fvault48.org\u002Ffullchain.pem; "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:" ssl_certificate_key "}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"\u002Fetc\u002Fletsencrypt\u002Flive\u002Fvault48.org\u002Fprivkey.pem; "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:" ssl_trusted_certificate "}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"\u002Fetc\u002Fletsencrypt\u002Flive\u002Fvault48.org\u002Fchain.pem;"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ah}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ai}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:p},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:ab},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:ad},children:[{type:c,value:ae}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:af}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:" proxy_redirect "}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"off;"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"Host "}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:A},children:[{type:c,value:"host"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"X-Real-IP "}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:A},children:[{type:c,value:"remote_addr"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"X-Forwarded-For "}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:A},children:[{type:c,value:"proxy_add_x_forwarded_for"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:M}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:" proxy_pass "}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"http:\u002F\u002F127.0.0.1:8080;"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ag}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-f93802{color:#C9D1D9}.ct-07bbf5{color:#C9D1D9}.ct-a505ca{color:#79C0FF}.ct-26cf0f{color:#FF7B72}.ct-bab19a{color:#FF7B72}.ct-7fc9b0{color:#FFA657}.ct-ce83bc{color:#FF7B72}.ct-f6f5a8{color:#C9D1D9}.ct-31233e{color:#8B949E}.ct-92caed{color:#C9D1D9}.ct-fa5e82{color:#FF7B72}.light .ct-fa5e82{color:#073642}.light .ct-92caed{color:#657B83}.light .ct-31233e{color:#93A1A1}.light .ct-f6f5a8{color:#657B83}.light .ct-ce83bc{color:#073642}.light .ct-7fc9b0{color:#657B83}.light .ct-bab19a{color:#657B83}.light .ct-26cf0f{color:#859900}.light .ct-a505ca{color:#D33682}.light .ct-07bbf5{color:#859900}.light .ct-f93802{color:#268BD2}"}]}],toc:{title:j,searchDepth:r,depth:r,links:[{id:D,depth:r,text:E},{id:G,depth:r,text:H},{id:J,depth:r,text:K}]}},_type:"markdown",_id:"content:Linux:Setting up NGINX.md",_source:"content",_file:"Linux\u002FSetting up NGINX.md",_extension:"md"}},prerenderedAt:1703695531537}}("element","span","text","ct-92caed","line","ct-26cf0f"," ","code"," ","","ct-31233e","h2","nginx","pre","code-inline","ct-f6f5a8"," ",2,"https:\u002F\u002Fnext.vault48.org","ct-fa5e82","server"," {","# ...","}","ct-07bbf5","$","ct-f93802",";",false,"fallback-url-for-spa-s","Fallback url for SPA-s","server {\n # ...\n location \u002F {\n # First attempt to serve request as file, then\n # as directory, then fall back to displaying a 404.\n try_files $uri $uri\u002F =404;\n }\n # ...\n}\n","set-up-for-uploads","Set up for uploads","server {\n # ...\n client_max_body_size 200M;\n # ...\n}\n","reverse-proxy-for-https","Reverse proxy for https","server {\n listen 80;\n server_name next.vault48.org;\n return 301 https:\u002F\u002Fnext.vault48.org$request_uri;\n}\n\nserver {\n listen 443 ssl http2;\n listen [::]:443 ssl http2;\n \n # managed by Certbot\n ssl_certificate \u002Fetc\u002Fletsencrypt\u002Flive\u002Fvault48.org\u002Ffullchain.pem; \n ssl_certificate_key \u002Fetc\u002Fletsencrypt\u002Flive\u002Fvault48.org\u002Fprivkey.pem; \n ssl_trusted_certificate \u002Fetc\u002Fletsencrypt\u002Flive\u002Fvault48.org\u002Fchain.pem;\n \n server_name next.vault48.org;\n \n location \u002F {\n proxy_redirect off;\n proxy_set_header Host $host;\n proxy_set_header X-Real-IP $remote_addr;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n \n proxy_pass http:\u002F\u002F127.0.0.1:8080;\n }\n}\n"," "," listen "," proxy_set_header ","Setting Up NGINX","\u002Flinux\u002Fsetting-up-nginx","root","p","Given config forwards ","https"," traffic to ","http"," on port ","8080"," for ","a","nofollow","\nwith http2 support if possible.","ct-ce83bc","location","ct-7fc9b0","\u002F ","{"," }"," server_name ","next.vault48.org;"))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:P,_path:Q},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-jVEFIZPtgx":{_path:Q,_dir:"linux",_draft:C,_partial:C,_locale:"en",_empty:C,title:P,description:j,excerpt:{type:R,children:[{type:a,tag:l,props:{id:D},children:[{type:c,value:E}]},{type:a,tag:h,props:{code:F,language:m},children:[{type:a,tag:n,props:{},children:[{type:a,tag:h,props:{__ignoreMap:j},children:[{type:c,value:F}]}]}]},{type:a,tag:l,props:{id:G},children:[{type:c,value:H}]},{type:a,tag:h,props:{code:I,language:m},children:[{type:a,tag:n,props:{},children:[{type:a,tag:h,props:{__ignoreMap:j},children:[{type:c,value:I}]}]}]},{type:a,tag:l,props:{id:J},children:[{type:c,value:K}]},{type:a,tag:S,props:{},children:[{type:c,value:T},{type:a,tag:o,props:{},children:[{type:c,value:U}]},{type:c,value:V},{type:a,tag:o,props:{},children:[{type:c,value:W}]},{type:c,value:X},{type:a,tag:o,props:{},children:[{type:c,value:Y}]},{type:c,value:Z},{type:a,tag:_,props:{href:s,rel:[$]},children:[{type:c,value:s}]},{type:c,value:aa}]},{type:a,tag:h,props:{code:L,language:m},children:[{type:a,tag:n,props:{},children:[{type:a,tag:h,props:{__ignoreMap:j},children:[{type:c,value:L}]}]}]}]},body:{type:R,children:[{type:a,tag:l,props:{id:D},children:[{type:c,value:E}]},{type:a,tag:h,props:{code:F,language:m},children:[{type:a,tag:n,props:{},children:[{type:a,tag:h,props:{__ignoreMap:j},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:t},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:p},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:ab},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:ad},children:[{type:c,value:ae}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:af}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"# First attempt to serve request as file, then"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"# as directory, then fall back to displaying a 404."}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:"ct-2277dc"},children:[{type:c,value:g}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ag}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]}]}]}]}]},{type:a,tag:l,props:{id:G},children:[{type:c,value:H}]},{type:a,tag:h,props:{code:I,language:m},children:[{type:a,tag:n,props:{},children:[{type:a,tag:h,props:{__ignoreMap:j},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:t},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:" client_max_body_size "}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"200M;"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:w}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]}]}]}]}]},{type:a,tag:l,props:{id:J},children:[{type:c,value:K}]},{type:a,tag:S,props:{},children:[{type:c,value:T},{type:a,tag:o,props:{},children:[{type:c,value:U}]},{type:c,value:V},{type:a,tag:o,props:{},children:[{type:c,value:W}]},{type:c,value:X},{type:a,tag:o,props:{},children:[{type:c,value:Y}]},{type:c,value:Z},{type:a,tag:_,props:{href:s,rel:[$]},children:[{type:c,value:s}]},{type:c,value:aa}]},{type:a,tag:h,props:{code:L,language:m},children:[{type:a,tag:n,props:{},children:[{type:a,tag:h,props:{__ignoreMap:j},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:t},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"80;"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ah}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ai}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"return"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:"ct-77ae0e"},children:[{type:c,value:"301"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" https:\u002F\u002Fnext.vault48.org"}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:A},children:[{type:c,value:"request_uri"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:t},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"443 ssl http2;"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"[::]:443 ssl http2;"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"# managed by Certbot"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:" ssl_certificate "}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"\u002Fetc\u002Fletsencrypt\u002Flive\u002Fvault48.org\u002Ffullchain.pem; "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:" ssl_certificate_key "}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"\u002Fetc\u002Fletsencrypt\u002Flive\u002Fvault48.org\u002Fprivkey.pem; "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:" ssl_trusted_certificate "}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"\u002Fetc\u002Fletsencrypt\u002Flive\u002Fvault48.org\u002Fchain.pem;"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ah}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ai}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:p},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:ab},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:ad},children:[{type:c,value:ae}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:af}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:" proxy_redirect "}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"off;"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"Host "}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:A},children:[{type:c,value:"host"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"X-Real-IP "}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:A},children:[{type:c,value:"remote_addr"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"X-Forwarded-For "}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:A},children:[{type:c,value:"proxy_add_x_forwarded_for"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:M}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:" proxy_pass "}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"http:\u002F\u002F127.0.0.1:8080;"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ag}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-52e8a3{color:#C9D1D9}.ct-969cf7{color:#C9D1D9}.ct-77ae0e{color:#79C0FF}.ct-1e0762{color:#FF7B72}.ct-2277dc{color:#FF7B72}.ct-32f766{color:#FFA657}.ct-14e2f1{color:#FF7B72}.ct-1f5ead{color:#C9D1D9}.ct-9e3ec0{color:#8B949E}.ct-6e3323{color:#C9D1D9}.ct-ce1709{color:#FF7B72}.light .ct-ce1709{color:#073642}.light .ct-6e3323{color:#657B83}.light .ct-9e3ec0{color:#93A1A1}.light .ct-1f5ead{color:#657B83}.light .ct-14e2f1{color:#073642}.light .ct-32f766{color:#657B83}.light .ct-2277dc{color:#657B83}.light .ct-1e0762{color:#859900}.light .ct-77ae0e{color:#D33682}.light .ct-969cf7{color:#859900}.light .ct-52e8a3{color:#268BD2}"}]}],toc:{title:j,searchDepth:r,depth:r,links:[{id:D,depth:r,text:E},{id:G,depth:r,text:H},{id:J,depth:r,text:K}]}},_type:"markdown",_id:"content:Linux:Setting up NGINX.md",_source:"content",_file:"Linux\u002FSetting up NGINX.md",_extension:"md"}},prerenderedAt:1703697993046}}("element","span","text","ct-6e3323","line","ct-1e0762"," ","code"," ","","ct-9e3ec0","h2","nginx","pre","code-inline","ct-1f5ead"," ",2,"https:\u002F\u002Fnext.vault48.org","ct-ce1709","server"," {","# ...","}","ct-969cf7","$","ct-52e8a3",";",false,"fallback-url-for-spa-s","Fallback url for SPA-s","server {\n # ...\n location \u002F {\n # First attempt to serve request as file, then\n # as directory, then fall back to displaying a 404.\n try_files $uri $uri\u002F =404;\n }\n # ...\n}\n","set-up-for-uploads","Set up for uploads","server {\n # ...\n client_max_body_size 200M;\n # ...\n}\n","reverse-proxy-for-https","Reverse proxy for https","server {\n listen 80;\n server_name next.vault48.org;\n return 301 https:\u002F\u002Fnext.vault48.org$request_uri;\n}\n\nserver {\n listen 443 ssl http2;\n listen [::]:443 ssl http2;\n \n # managed by Certbot\n ssl_certificate \u002Fetc\u002Fletsencrypt\u002Flive\u002Fvault48.org\u002Ffullchain.pem; \n ssl_certificate_key \u002Fetc\u002Fletsencrypt\u002Flive\u002Fvault48.org\u002Fprivkey.pem; \n ssl_trusted_certificate \u002Fetc\u002Fletsencrypt\u002Flive\u002Fvault48.org\u002Fchain.pem;\n \n server_name next.vault48.org;\n \n location \u002F {\n proxy_redirect off;\n proxy_set_header Host $host;\n proxy_set_header X-Real-IP $remote_addr;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n \n proxy_pass http:\u002F\u002F127.0.0.1:8080;\n }\n}\n"," "," listen "," proxy_set_header ","Setting Up NGINX","\u002Flinux\u002Fsetting-up-nginx","root","p","Given config forwards ","https"," traffic to ","http"," on port ","8080"," for ","a","nofollow","\nwith http2 support if possible.","ct-14e2f1","location","ct-32f766","\u002F ","{"," }"," server_name ","next.vault48.org;"))
\ No newline at end of file
diff --git a/docs/linux/setting-up-nginx/index.html b/docs/linux/setting-up-nginx/index.html
index d4876b0..da81b7b 100644
--- a/docs/linux/setting-up-nginx/index.html
+++ b/docs/linux/setting-up-nginx/index.html
@@ -2,6 +2,6 @@
<html data-head-attrs="">
<head><title>Setting Up NGINX • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="head:count" content="2"><link rel="modulepreload" href="/linux/setting-up-nginx/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseH2.d950f051.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCodeInline.d9bcf614.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseA.c52e44f8.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a aria-current="page" href="/linux/setting-up-nginx" class="router-link-active _active_192pu_81 _link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Setting Up NGINX</h1><article><div><h2 id="fallback-url-for-spa-s"><a href="#fallback-url-for-spa-s"><!--[-->Fallback url for SPA-s<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>nginx</span></button><!--[--><pre><code><span class="line"><span class="ct-fa5e82">server</span><span class="ct-92caed"> {</span></span><span class="line"><span class="ct-92caed"> </span><span class="ct-31233e"># ...</span></span><span class="line"><span class="ct-f6f5a8"> </span><span class="ct-ce83bc">location</span><span class="ct-f6f5a8"> </span><span class="ct-7fc9b0">/ </span><span class="ct-f6f5a8">{</span></span><span class="line"><span class="ct-92caed"> </span><span class="ct-31233e"># First attempt to serve request as file, then</span></span><span class="line"><span class="ct-92caed"> </span><span class="ct-31233e"># as directory, then fall back to displaying a 404.</span></span><span class="line"><span class="ct-92caed"> </span><span class="ct-bab19a"> </span></span><span class="line"><span class="ct-92caed"> }</span></span><span class="line"><span class="ct-92caed"> </span><span class="ct-31233e"># ...</span></span><span class="line"><span class="ct-92caed">}</span></span></code></pre><!--]--></div><h2 id="set-up-for-uploads"><a href="#set-up-for-uploads"><!--[-->Set up for uploads<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>nginx</span></button><!--[--><pre><code><span class="line"><span class="ct-fa5e82">server</span><span class="ct-92caed"> {</span></span><span class="line"><span class="ct-92caed"> </span><span class="ct-31233e"># ...</span></span><span class="line"><span class="ct-92caed"> </span><span class="ct-26cf0f"> client_max_body_size </span><span class="ct-92caed">200M;</span></span><span class="line"><span class="ct-92caed"> </span><span class="ct-31233e"># ...</span></span><span class="line"><span class="ct-92caed">}</span></span></code></pre><!--]--></div><h2 id="reverse-proxy-for-https"><a href="#reverse-proxy-for-https"><!--[-->Reverse proxy for https<!--]--></a></h2><p><!--[-->Given config forwards <code><!--[-->https<!--]--></code> traffic to <code><!--[-->http<!--]--></code> on port <code><!--[-->8080<!--]--></code> for <a href="https://next.vault48.org" rel="nofollow" target="_blank"><!--[-->https://next.vault48.org<!--]--></a>
-with http2 support if possible.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>nginx</span></button><!--[--><pre><code><span class="line"><span class="ct-fa5e82">server</span><span class="ct-92caed"> {</span></span><span class="line"><span class="ct-92caed"> </span><span class="ct-26cf0f"> listen </span><span class="ct-92caed">80;</span></span><span class="line"><span class="ct-92caed"> </span><span class="ct-26cf0f"> server_name </span><span class="ct-92caed">next.vault48.org;</span></span><span class="line"><span class="ct-92caed"> </span><span class="ct-26cf0f">return</span><span class="ct-92caed"> </span><span class="ct-a505ca">301</span><span class="ct-92caed"> https://next.vault48.org</span><span class="ct-07bbf5">$</span><span class="ct-f93802">request_uri</span><span class="ct-92caed">;</span></span><span class="line"><span class="ct-92caed">}</span></span><span class="line"></span><span class="line"><span class="ct-fa5e82">server</span><span class="ct-92caed"> {</span></span><span class="line"><span class="ct-92caed"> </span><span class="ct-26cf0f"> listen </span><span class="ct-92caed">443 ssl http2;</span></span><span class="line"><span class="ct-92caed"> </span><span class="ct-26cf0f"> listen </span><span class="ct-92caed">[::]:443 ssl http2;</span></span><span class="line"><span class="ct-92caed"> </span></span><span class="line"><span class="ct-92caed"> </span><span class="ct-31233e"># managed by Certbot</span></span><span class="line"><span class="ct-92caed"> </span><span class="ct-26cf0f"> ssl_certificate </span><span class="ct-92caed">/etc/letsencrypt/live/vault48.org/fullchain.pem; </span></span><span class="line"><span class="ct-92caed"> </span><span class="ct-26cf0f"> ssl_certificate_key </span><span class="ct-92caed">/etc/letsencrypt/live/vault48.org/privkey.pem; </span></span><span class="line"><span class="ct-92caed"> </span><span class="ct-26cf0f"> ssl_trusted_certificate </span><span class="ct-92caed">/etc/letsencrypt/live/vault48.org/chain.pem;</span></span><span class="line"><span class="ct-92caed"> </span></span><span class="line"><span class="ct-92caed"> </span><span class="ct-26cf0f"> server_name </span><span class="ct-92caed">next.vault48.org;</span></span><span class="line"><span class="ct-92caed"> </span></span><span class="line"><span class="ct-f6f5a8"> </span><span class="ct-ce83bc">location</span><span class="ct-f6f5a8"> </span><span class="ct-7fc9b0">/ </span><span class="ct-f6f5a8">{</span></span><span class="line"><span class="ct-92caed"> </span><span class="ct-26cf0f"> proxy_redirect </span><span class="ct-92caed">off;</span></span><span class="line"><span class="ct-92caed"> </span><span class="ct-26cf0f"> proxy_set_header </span><span class="ct-92caed">Host </span><span class="ct-07bbf5">$</span><span class="ct-f93802">host</span><span class="ct-92caed">;</span></span><span class="line"><span class="ct-92caed"> </span><span class="ct-26cf0f"> proxy_set_header </span><span class="ct-92caed">X-Real-IP </span><span class="ct-07bbf5">$</span><span class="ct-f93802">remote_addr</span><span class="ct-92caed">;</span></span><span class="line"><span class="ct-92caed"> </span><span class="ct-26cf0f"> proxy_set_header </span><span class="ct-92caed">X-Forwarded-For </span><span class="ct-07bbf5">$</span><span class="ct-f93802">proxy_add_x_forwarded_for</span><span class="ct-92caed">;</span></span><span class="line"><span class="ct-92caed"> </span></span><span class="line"><span class="ct-92caed"> </span><span class="ct-26cf0f"> proxy_pass </span><span class="ct-92caed">http://127.0.0.1:8080;</span></span><span class="line"><span class="ct-92caed"> }</span></span><span class="line"><span class="ct-92caed">}</span></span></code></pre><!--]--></div><style>.ct-f93802{color:#C9D1D9}.ct-07bbf5{color:#C9D1D9}.ct-a505ca{color:#79C0FF}.ct-26cf0f{color:#FF7B72}.ct-bab19a{color:#FF7B72}.ct-7fc9b0{color:#FFA657}.ct-ce83bc{color:#FF7B72}.ct-f6f5a8{color:#C9D1D9}.ct-31233e{color:#8B949E}.ct-92caed{color:#C9D1D9}.ct-fa5e82{color:#FF7B72}.light .ct-fa5e82{color:#073642}.light .ct-92caed{color:#657B83}.light .ct-31233e{color:#93A1A1}.light .ct-f6f5a8{color:#657B83}.light .ct-ce83bc{color:#073642}.light .ct-7fc9b0{color:#657B83}.light .ct-bab19a{color:#657B83}.light .ct-26cf0f{color:#859900}.light .ct-a505ca{color:#D33682}.light .ct-07bbf5{color:#859900}.light .ct-f93802{color:#268BD2}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/linux/setting-up-nginx/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695531537}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a aria-current="page" href="/linux/setting-up-nginx" class="router-link-active _active_192pu_81 _link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Setting Up NGINX</h1><article><div><h2 id="fallback-url-for-spa-s"><a href="#fallback-url-for-spa-s"><!--[-->Fallback url for SPA-s<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>nginx</span></button><!--[--><pre><code><span class="line"><span class="ct-ce1709">server</span><span class="ct-6e3323"> {</span></span><span class="line"><span class="ct-6e3323"> </span><span class="ct-9e3ec0"># ...</span></span><span class="line"><span class="ct-1f5ead"> </span><span class="ct-14e2f1">location</span><span class="ct-1f5ead"> </span><span class="ct-32f766">/ </span><span class="ct-1f5ead">{</span></span><span class="line"><span class="ct-6e3323"> </span><span class="ct-9e3ec0"># First attempt to serve request as file, then</span></span><span class="line"><span class="ct-6e3323"> </span><span class="ct-9e3ec0"># as directory, then fall back to displaying a 404.</span></span><span class="line"><span class="ct-6e3323"> </span><span class="ct-2277dc"> </span></span><span class="line"><span class="ct-6e3323"> }</span></span><span class="line"><span class="ct-6e3323"> </span><span class="ct-9e3ec0"># ...</span></span><span class="line"><span class="ct-6e3323">}</span></span></code></pre><!--]--></div><h2 id="set-up-for-uploads"><a href="#set-up-for-uploads"><!--[-->Set up for uploads<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>nginx</span></button><!--[--><pre><code><span class="line"><span class="ct-ce1709">server</span><span class="ct-6e3323"> {</span></span><span class="line"><span class="ct-6e3323"> </span><span class="ct-9e3ec0"># ...</span></span><span class="line"><span class="ct-6e3323"> </span><span class="ct-1e0762"> client_max_body_size </span><span class="ct-6e3323">200M;</span></span><span class="line"><span class="ct-6e3323"> </span><span class="ct-9e3ec0"># ...</span></span><span class="line"><span class="ct-6e3323">}</span></span></code></pre><!--]--></div><h2 id="reverse-proxy-for-https"><a href="#reverse-proxy-for-https"><!--[-->Reverse proxy for https<!--]--></a></h2><p><!--[-->Given config forwards <code><!--[-->https<!--]--></code> traffic to <code><!--[-->http<!--]--></code> on port <code><!--[-->8080<!--]--></code> for <a href="https://next.vault48.org" rel="nofollow" target="_blank"><!--[-->https://next.vault48.org<!--]--></a>
+with http2 support if possible.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>nginx</span></button><!--[--><pre><code><span class="line"><span class="ct-ce1709">server</span><span class="ct-6e3323"> {</span></span><span class="line"><span class="ct-6e3323"> </span><span class="ct-1e0762"> listen </span><span class="ct-6e3323">80;</span></span><span class="line"><span class="ct-6e3323"> </span><span class="ct-1e0762"> server_name </span><span class="ct-6e3323">next.vault48.org;</span></span><span class="line"><span class="ct-6e3323"> </span><span class="ct-1e0762">return</span><span class="ct-6e3323"> </span><span class="ct-77ae0e">301</span><span class="ct-6e3323"> https://next.vault48.org</span><span class="ct-969cf7">$</span><span class="ct-52e8a3">request_uri</span><span class="ct-6e3323">;</span></span><span class="line"><span class="ct-6e3323">}</span></span><span class="line"></span><span class="line"><span class="ct-ce1709">server</span><span class="ct-6e3323"> {</span></span><span class="line"><span class="ct-6e3323"> </span><span class="ct-1e0762"> listen </span><span class="ct-6e3323">443 ssl http2;</span></span><span class="line"><span class="ct-6e3323"> </span><span class="ct-1e0762"> listen </span><span class="ct-6e3323">[::]:443 ssl http2;</span></span><span class="line"><span class="ct-6e3323"> </span></span><span class="line"><span class="ct-6e3323"> </span><span class="ct-9e3ec0"># managed by Certbot</span></span><span class="line"><span class="ct-6e3323"> </span><span class="ct-1e0762"> ssl_certificate </span><span class="ct-6e3323">/etc/letsencrypt/live/vault48.org/fullchain.pem; </span></span><span class="line"><span class="ct-6e3323"> </span><span class="ct-1e0762"> ssl_certificate_key </span><span class="ct-6e3323">/etc/letsencrypt/live/vault48.org/privkey.pem; </span></span><span class="line"><span class="ct-6e3323"> </span><span class="ct-1e0762"> ssl_trusted_certificate </span><span class="ct-6e3323">/etc/letsencrypt/live/vault48.org/chain.pem;</span></span><span class="line"><span class="ct-6e3323"> </span></span><span class="line"><span class="ct-6e3323"> </span><span class="ct-1e0762"> server_name </span><span class="ct-6e3323">next.vault48.org;</span></span><span class="line"><span class="ct-6e3323"> </span></span><span class="line"><span class="ct-1f5ead"> </span><span class="ct-14e2f1">location</span><span class="ct-1f5ead"> </span><span class="ct-32f766">/ </span><span class="ct-1f5ead">{</span></span><span class="line"><span class="ct-6e3323"> </span><span class="ct-1e0762"> proxy_redirect </span><span class="ct-6e3323">off;</span></span><span class="line"><span class="ct-6e3323"> </span><span class="ct-1e0762"> proxy_set_header </span><span class="ct-6e3323">Host </span><span class="ct-969cf7">$</span><span class="ct-52e8a3">host</span><span class="ct-6e3323">;</span></span><span class="line"><span class="ct-6e3323"> </span><span class="ct-1e0762"> proxy_set_header </span><span class="ct-6e3323">X-Real-IP </span><span class="ct-969cf7">$</span><span class="ct-52e8a3">remote_addr</span><span class="ct-6e3323">;</span></span><span class="line"><span class="ct-6e3323"> </span><span class="ct-1e0762"> proxy_set_header </span><span class="ct-6e3323">X-Forwarded-For </span><span class="ct-969cf7">$</span><span class="ct-52e8a3">proxy_add_x_forwarded_for</span><span class="ct-6e3323">;</span></span><span class="line"><span class="ct-6e3323"> </span></span><span class="line"><span class="ct-6e3323"> </span><span class="ct-1e0762"> proxy_pass </span><span class="ct-6e3323">http://127.0.0.1:8080;</span></span><span class="line"><span class="ct-6e3323"> }</span></span><span class="line"><span class="ct-6e3323">}</span></span></code></pre><!--]--></div><style>.ct-52e8a3{color:#C9D1D9}.ct-969cf7{color:#C9D1D9}.ct-77ae0e{color:#79C0FF}.ct-1e0762{color:#FF7B72}.ct-2277dc{color:#FF7B72}.ct-32f766{color:#FFA657}.ct-14e2f1{color:#FF7B72}.ct-1f5ead{color:#C9D1D9}.ct-9e3ec0{color:#8B949E}.ct-6e3323{color:#C9D1D9}.ct-ce1709{color:#FF7B72}.light .ct-ce1709{color:#073642}.light .ct-6e3323{color:#657B83}.light .ct-9e3ec0{color:#93A1A1}.light .ct-1f5ead{color:#657B83}.light .ct-14e2f1{color:#073642}.light .ct-32f766{color:#657B83}.light .ct-2277dc{color:#657B83}.light .ct-1e0762{color:#859900}.light .ct-77ae0e{color:#D33682}.light .ct-969cf7{color:#859900}.light .ct-52e8a3{color:#268BD2}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/linux/setting-up-nginx/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697993046}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/linux/ssh/_payload.js b/docs/linux/ssh/_payload.js
index 8b8036d..6757d2f 100644
--- a/docs/linux/ssh/_payload.js
+++ b/docs/linux/ssh/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:k,_path:l}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-501XFnutIe":{_path:l,_dir:"linux",_draft:f,_partial:f,_locale:"en",_empty:f,title:k,description:c,excerpt:{type:m,children:[{type:a,tag:n,props:{id:g},children:[{type:b,value:h}]},{type:a,tag:o,props:{},children:[{type:b,value:p},{type:a,tag:d,props:{},children:[{type:b,value:q}]},{type:b,value:r},{type:a,tag:d,props:{},children:[{type:b,value:s}]},{type:b,value:t}]},{type:a,tag:e,props:{code:i},children:[{type:a,tag:u,props:{},children:[{type:a,tag:e,props:{__ignoreMap:c},children:[{type:b,value:i}]}]}]}]},body:{type:m,children:[{type:a,tag:n,props:{id:g},children:[{type:b,value:h}]},{type:a,tag:o,props:{},children:[{type:b,value:p},{type:a,tag:d,props:{},children:[{type:b,value:q}]},{type:b,value:r},{type:a,tag:d,props:{},children:[{type:b,value:s}]},{type:b,value:t}]},{type:a,tag:e,props:{code:i},children:[{type:a,tag:u,props:{},children:[{type:a,tag:e,props:{__ignoreMap:c},children:[{type:a,tag:v,props:{class:"line"},children:[{type:a,tag:v,props:{},children:[{type:b,value:"Host router\n HostName 192.168.0.1\n IdentityFile ~\u002F.ssh\u002Fid_rsa\n User root\n Port 22522"}]}]}]}]}]}],toc:{title:c,searchDepth:j,depth:j,links:[{id:g,depth:j,text:h}]}},_type:"markdown",_id:"content:Linux:SSH.md",_source:"content",_file:"Linux\u002FSSH.md",_extension:"md"}},prerenderedAt:1703695531581}}("element","text","","code-inline","code",false,"config-aliases-for-ssh-hosts","Config aliases for #SSH hosts","Host router\n HostName 192.168.0.1\n IdentityFile ~\u002F.ssh\u002Fid_rsa\n User root\n Port 22522\n",2,"SSH","\u002Flinux\u002Fssh","root","h2","p","#SSH config can be used to made aliases for different hosts. Should be put at ","~\u002F.ssh\u002Fconfig",". To simply call ","ssh router"," without parameters, use this:","pre","span"))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:k,_path:l}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-501XFnutIe":{_path:l,_dir:"linux",_draft:f,_partial:f,_locale:"en",_empty:f,title:k,description:c,excerpt:{type:m,children:[{type:a,tag:n,props:{id:g},children:[{type:b,value:h}]},{type:a,tag:o,props:{},children:[{type:b,value:p},{type:a,tag:d,props:{},children:[{type:b,value:q}]},{type:b,value:r},{type:a,tag:d,props:{},children:[{type:b,value:s}]},{type:b,value:t}]},{type:a,tag:e,props:{code:i},children:[{type:a,tag:u,props:{},children:[{type:a,tag:e,props:{__ignoreMap:c},children:[{type:b,value:i}]}]}]}]},body:{type:m,children:[{type:a,tag:n,props:{id:g},children:[{type:b,value:h}]},{type:a,tag:o,props:{},children:[{type:b,value:p},{type:a,tag:d,props:{},children:[{type:b,value:q}]},{type:b,value:r},{type:a,tag:d,props:{},children:[{type:b,value:s}]},{type:b,value:t}]},{type:a,tag:e,props:{code:i},children:[{type:a,tag:u,props:{},children:[{type:a,tag:e,props:{__ignoreMap:c},children:[{type:a,tag:v,props:{class:"line"},children:[{type:a,tag:v,props:{},children:[{type:b,value:"Host router\n HostName 192.168.0.1\n IdentityFile ~\u002F.ssh\u002Fid_rsa\n User root\n Port 22522"}]}]}]}]}]}],toc:{title:c,searchDepth:j,depth:j,links:[{id:g,depth:j,text:h}]}},_type:"markdown",_id:"content:Linux:SSH.md",_source:"content",_file:"Linux\u002FSSH.md",_extension:"md"}},prerenderedAt:1703697993101}}("element","text","","code-inline","code",false,"config-aliases-for-ssh-hosts","Config aliases for #SSH hosts","Host router\n HostName 192.168.0.1\n IdentityFile ~\u002F.ssh\u002Fid_rsa\n User root\n Port 22522\n",2,"SSH","\u002Flinux\u002Fssh","root","h2","p","#SSH config can be used to made aliases for different hosts. Should be put at ","~\u002F.ssh\u002Fconfig",". To simply call ","ssh router"," without parameters, use this:","pre","span"))
\ No newline at end of file
diff --git a/docs/linux/ssh/index.html b/docs/linux/ssh/index.html
index acb336e..63df1c7 100644
--- a/docs/linux/ssh/index.html
+++ b/docs/linux/ssh/index.html
@@ -2,9 +2,9 @@
<html data-head-attrs="">
<head><title>SSH • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="head:count" content="2"><link rel="modulepreload" href="/linux/ssh/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseH2.d950f051.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCodeInline.d9bcf614.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a aria-current="page" href="/linux/ssh" class="router-link-active _active_192pu_81 _link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>SSH</h1><article><div><h2 id="config-aliases-for-ssh-hosts"><a href="#config-aliases-for-ssh-hosts"><!--[-->Config aliases for #SSH hosts<!--]--></a></h2><p><!--[-->#SSH config can be used to made aliases for different hosts. Should be put at <code><!--[-->~/.ssh/config<!--]--></code>. To simply call <code><!--[-->ssh router<!--]--></code> without parameters, use this:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><!----></button><!--[--><pre><code><span class="line"><span>Host router
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a aria-current="page" href="/linux/ssh" class="router-link-active _active_192pu_81 _link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>SSH</h1><article><div><h2 id="config-aliases-for-ssh-hosts"><a href="#config-aliases-for-ssh-hosts"><!--[-->Config aliases for #SSH hosts<!--]--></a></h2><p><!--[-->#SSH config can be used to made aliases for different hosts. Should be put at <code><!--[-->~/.ssh/config<!--]--></code>. To simply call <code><!--[-->ssh router<!--]--></code> without parameters, use this:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><!----></button><!--[--><pre><code><span class="line"><span>Host router
HostName 192.168.0.1
IdentityFile ~/.ssh/id_rsa
User root
- Port 22522</span></span></code></pre><!--]--></div></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/linux/ssh/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695531581}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
+ Port 22522</span></span></code></pre><!--]--></div></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/linux/ssh/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697993101}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/obsidian/self-hosted-obsidian-sync-with-couchdb/_payload.js b/docs/obsidian/self-hosted-obsidian-sync-with-couchdb/_payload.js
index e4c5875..d140ddb 100644
--- a/docs/obsidian/self-hosted-obsidian-sync-with-couchdb/_payload.js
+++ b/docs/obsidian/self-hosted-obsidian-sync-with-couchdb/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av,aw,ax,ay){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:O,_path:P}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-nAvv1RNs1x":{_path:P,_dir:"obsidian",_draft:D,_partial:D,_locale:"en",_empty:D,title:O,description:m,excerpt:{type:Q,children:[{type:a,tag:R,props:{},children:[{type:a,tag:h,props:{},children:[{type:a,tag:w,props:{href:S,rel:[x]},children:[{type:b,value:T}]}]},{type:a,tag:h,props:{},children:[{type:a,tag:w,props:{href:U,rel:[x]},children:[{type:b,value:V}]}]}]},{type:a,tag:y,props:{id:E},children:[{type:b,value:F}]},{type:a,tag:p,props:{},children:[{type:b,value:W},{type:a,tag:g,props:{},children:[{type:b,value:X}]},{type:b,value:Y}]},{type:a,tag:i,props:{code:G,language:Z},children:[{type:a,tag:q,props:{},children:[{type:a,tag:i,props:{__ignoreMap:m},children:[{type:b,value:G}]}]}]},{type:a,tag:p,props:{},children:[{type:b,value:_},{type:a,tag:g,props:{},children:[{type:b,value:$}]},{type:b,value:j}]},{type:a,tag:i,props:{code:H,language:aa},children:[{type:a,tag:q,props:{},children:[{type:a,tag:i,props:{__ignoreMap:m},children:[{type:b,value:H}]}]}]},{type:a,tag:p,props:{},children:[{type:b,value:ab},{type:a,tag:g,props:{},children:[{type:b,value:ac}]},{type:b,value:j}]},{type:a,tag:i,props:{code:I,language:ad},children:[{type:a,tag:q,props:{},children:[{type:a,tag:i,props:{__ignoreMap:m},children:[{type:b,value:I}]}]}]},{type:a,tag:y,props:{id:J},children:[{type:b,value:K}]},{type:a,tag:ae,props:{},children:[{type:a,tag:h,props:{},children:[{type:b,value:af},{type:a,tag:g,props:{},children:[{type:b,value:ag}]},{type:b,value:ah}]},{type:a,tag:h,props:{},children:[{type:b,value:ai},{type:a,tag:g,props:{},children:[{type:b,value:aj}]}]},{type:a,tag:h,props:{},children:[{type:b,value:ak}]},{type:a,tag:h,props:{},children:[{type:b,value:al},{type:a,tag:g,props:{},children:[{type:b,value:am}]},{type:b,value:an},{type:a,tag:g,props:{},children:[{type:b,value:ao}]}]}]}]},body:{type:Q,children:[{type:a,tag:R,props:{},children:[{type:a,tag:h,props:{},children:[{type:a,tag:w,props:{href:S,rel:[x]},children:[{type:b,value:T}]}]},{type:a,tag:h,props:{},children:[{type:a,tag:w,props:{href:U,rel:[x]},children:[{type:b,value:V}]}]}]},{type:a,tag:y,props:{id:E},children:[{type:b,value:F}]},{type:a,tag:p,props:{},children:[{type:b,value:W},{type:a,tag:g,props:{},children:[{type:b,value:X}]},{type:b,value:Y}]},{type:a,tag:i,props:{code:G,language:Z},children:[{type:a,tag:q,props:{},children:[{type:a,tag:i,props:{__ignoreMap:m},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:k},children:[{type:b,value:"version"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:z}]},{type:a,tag:c,props:{class:l},children:[{type:b,value:"'3'"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:k},children:[{type:b,value:"services"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" "}]},{type:a,tag:c,props:{class:k},children:[{type:b,value:"couchserver"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:n}]},{type:a,tag:c,props:{class:k},children:[{type:b,value:"container_name"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:z}]},{type:a,tag:c,props:{class:l},children:[{type:b,value:"obsidian__database"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:n}]},{type:a,tag:c,props:{class:k},children:[{type:b,value:"image"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:z}]},{type:a,tag:c,props:{class:l},children:[{type:b,value:"couchdb"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:n}]},{type:a,tag:c,props:{class:k},children:[{type:b,value:"restart"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:z}]},{type:a,tag:c,props:{class:l},children:[{type:b,value:"always"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:n}]},{type:a,tag:c,props:{class:k},children:[{type:b,value:"ports"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:l},children:[{type:b,value:"\"5984:5984\""}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:n}]},{type:a,tag:c,props:{class:k},children:[{type:b,value:"environment"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:l},children:[{type:b,value:"COUCHDB_USER=user"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:l},children:[{type:b,value:"COUCHDB_PASSWORD=somepassword"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:n}]},{type:a,tag:c,props:{class:k},children:[{type:b,value:"volumes"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:l},children:[{type:b,value:".\u002Fcouchdb\u002Fdbdata:\u002Fopt\u002Fcouchdb\u002Fdata"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:l},children:[{type:b,value:".\u002Fcouchdb\u002Flocal.ini:\u002Fopt\u002Fcouchdb\u002Fetc\u002Flocal.ini"}]}]}]}]}]},{type:a,tag:p,props:{},children:[{type:b,value:_},{type:a,tag:g,props:{},children:[{type:b,value:$}]},{type:b,value:j}]},{type:a,tag:i,props:{code:H,language:aa},children:[{type:a,tag:q,props:{},children:[{type:a,tag:i,props:{__ignoreMap:m},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{},children:[{type:b,value:"[couchdb]\nsingle_node=true\nmax_document_size=50000000\nmax_http_request_size=4294967296\n\n[chttpd]\nrequire_valid_user = true\n\n[chttpd_auth]\nrequire_valid_user = true\nauthentication_redirect = \u002F_utils\u002Fsession.html\n\n[httpd]\nWWW-Authenticate = Basic realm=\"couchdb\"\nenable_cors = true\n\n[cors]\norigins = app:\u002F\u002Fobsidian.md,capacitor:\u002F\u002Flocalhost,http:\u002F\u002Flocalhost\ncredentials = true\nheaders = accept, authorization, content-type, origin, referer\nmethods = GET, PUT, POST, HEAD, DELETE\nmax_age = 3600"}]}]}]}]}]},{type:a,tag:p,props:{},children:[{type:b,value:ab},{type:a,tag:g,props:{},children:[{type:b,value:ac}]},{type:b,value:j}]},{type:a,tag:i,props:{code:I,language:ad},children:[{type:a,tag:q,props:{},children:[{type:a,tag:i,props:{__ignoreMap:m},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:ap},children:[{type:b,value:aq}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:ar}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:L}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:A}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"80;"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:L}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:A}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"[::]:80;"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:L}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:as}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:at}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:n}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"return"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:au}]},{type:a,tag:c,props:{class:"ct-54acd4"},children:[{type:b,value:"301"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" https:\u002F\u002F"}]},{type:a,tag:c,props:{class:s},children:[{type:b,value:t}]},{type:a,tag:c,props:{class:u},children:[{type:b,value:av}]},{type:a,tag:c,props:{class:s},children:[{type:b,value:t}]},{type:a,tag:c,props:{class:u},children:[{type:b,value:"request_uri"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:B}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:aw}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:ap},children:[{type:b,value:aq}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:ar}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:A}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"443 ssl http2;"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:A}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"[::]:443 ssl http2;"}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:" ssl_certificate "}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"\u002Fetc\u002Fletsencrypt\u002Flive\u002Fyourhost.com\u002Ffullchain.pem; "}]},{type:a,tag:c,props:{class:ax},children:[{type:b,value:ay}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:" ssl_certificate_key "}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"\u002Fetc\u002Fletsencrypt\u002Flive\u002Fyourhost.com\u002Fprivkey.pem; "}]},{type:a,tag:c,props:{class:ax},children:[{type:b,value:ay}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:" ssl_trusted_certificate "}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"\u002Fetc\u002Fletsencrypt\u002Flive\u002Fyourhost.com\u002Fchain.pem;"}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:as}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:at}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:" client_max_body_size "}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"200M;"}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:M},children:[{type:b,value:" "}]},{type:a,tag:c,props:{class:"ct-0804f5"},children:[{type:b,value:"location"}]},{type:a,tag:c,props:{class:M},children:[{type:b,value:au}]},{type:a,tag:c,props:{class:"ct-0734bb"},children:[{type:b,value:"\u002F "}]},{type:a,tag:c,props:{class:M},children:[{type:b,value:"{"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:v}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:" proxy_redirect "}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"off;"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:v}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:N}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"Host "}]},{type:a,tag:c,props:{class:s},children:[{type:b,value:t}]},{type:a,tag:c,props:{class:u},children:[{type:b,value:av}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:B}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:v}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:N}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"X-Real-IP "}]},{type:a,tag:c,props:{class:s},children:[{type:b,value:t}]},{type:a,tag:c,props:{class:u},children:[{type:b,value:"remote_addr"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:B}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:v}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:N}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"X-Forwarded-For "}]},{type:a,tag:c,props:{class:s},children:[{type:b,value:t}]},{type:a,tag:c,props:{class:u},children:[{type:b,value:"proxy_add_x_forwarded_for"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:B}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:v}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:" proxy_pass "}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"http:\u002F\u002F127.0.0.1:5984;"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" }"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:aw}]}]}]}]}]},{type:a,tag:y,props:{id:J},children:[{type:b,value:K}]},{type:a,tag:ae,props:{},children:[{type:a,tag:h,props:{},children:[{type:b,value:af},{type:a,tag:g,props:{},children:[{type:b,value:ag}]},{type:b,value:ah}]},{type:a,tag:h,props:{},children:[{type:b,value:ai},{type:a,tag:g,props:{},children:[{type:b,value:aj}]}]},{type:a,tag:h,props:{},children:[{type:b,value:ak}]},{type:a,tag:h,props:{},children:[{type:b,value:al},{type:a,tag:g,props:{},children:[{type:b,value:am}]},{type:b,value:an},{type:a,tag:g,props:{},children:[{type:b,value:ao}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-0734bb{color:#FFA657}.ct-0804f5{color:#FF7B72}.ct-9e8f85{color:#C9D1D9}.ct-18e5d9{color:#8B949E}.ct-6433f1{color:#C9D1D9}.ct-f0f5d8{color:#C9D1D9}.ct-54acd4{color:#79C0FF}.ct-b38421{color:#FF7B72}.ct-e355da{color:#FF7B72}.ct-8c9f43{color:#A5D6FF}.ct-39845b{color:#C9D1D9}.ct-1391ae{color:#7EE787}.light .ct-1391ae{color:#268BD2}.light .ct-39845b{color:#657B83}.light .ct-8c9f43{color:#2AA198}.light .ct-e355da{color:#073642}.light .ct-b38421{color:#859900}.light .ct-54acd4{color:#D33682}.light .ct-f0f5d8{color:#859900}.light .ct-6433f1{color:#268BD2}.light .ct-18e5d9{color:#93A1A1}.light .ct-9e8f85{color:#657B83}.light .ct-0804f5{color:#073642}.light .ct-0734bb{color:#657B83}"}]}],toc:{title:m,searchDepth:C,depth:C,links:[{id:E,depth:C,text:F},{id:J,depth:C,text:K}]}},_type:"markdown",_id:"content:Obsidian:Self-hosted Obsidian sync with CouchDB.md",_source:"content",_file:"Obsidian\u002FSelf-hosted Obsidian sync with CouchDB.md",_extension:"md"}},prerenderedAt:1703695531602}}("element","text","span","ct-39845b","line","ct-b38421","code-inline","li","code",":","ct-1391ae","ct-8c9f43",""," "," ","p","pre"," - ","ct-f0f5d8","$","ct-6433f1"," ","a","nofollow","h2",": "," listen ",";",2,false,"setting-up-environment","Setting up environment","version: '3'\nservices:\n couchserver:\n container_name: obsidian__database\n image: couchdb\n restart: always\n ports:\n - \"5984:5984\"\n environment:\n - COUCHDB_USER=user\n - COUCHDB_PASSWORD=somepassword\n volumes:\n - .\u002Fcouchdb\u002Fdbdata:\u002Fopt\u002Fcouchdb\u002Fdata\n - .\u002Fcouchdb\u002Flocal.ini:\u002Fopt\u002Fcouchdb\u002Fetc\u002Flocal.ini\n","[couchdb]\nsingle_node=true\nmax_document_size=50000000\nmax_http_request_size=4294967296\n\n[chttpd]\nrequire_valid_user = true\n\n[chttpd_auth]\nrequire_valid_user = true\nauthentication_redirect = \u002F_utils\u002Fsession.html\n\n[httpd]\nWWW-Authenticate = Basic realm=\"couchdb\"\nenable_cors = true\n\n[cors]\norigins = app:\u002F\u002Fobsidian.md,capacitor:\u002F\u002Flocalhost,http:\u002F\u002Flocalhost\ncredentials = true\nheaders = accept, authorization, content-type, origin, referer\nmethods = GET, PUT, POST, HEAD, DELETE\nmax_age = 3600\n","server {\n listen 80;\n listen [::]:80;\n server_name couchdb.yourhost.com;\n return 301 https:\u002F\u002F$host$request_uri;\n}\n\nserver {\n listen 443 ssl http2;\n listen [::]:443 ssl http2;\n\n ssl_certificate \u002Fetc\u002Fletsencrypt\u002Flive\u002Fyourhost.com\u002Ffullchain.pem; # managed by Certbot\n ssl_certificate_key \u002Fetc\u002Fletsencrypt\u002Flive\u002Fyourhost.com\u002Fprivkey.pem; # managed by Certbot\n ssl_trusted_certificate \u002Fetc\u002Fletsencrypt\u002Flive\u002Fyourhost.com\u002Fchain.pem;\n\n server_name couchdb.yourhost.com;\n client_max_body_size 200M;\n\n location \u002F {\n proxy_redirect off;\n proxy_set_header Host $host;\n proxy_set_header X-Real-IP $remote_addr;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n\n proxy_pass http:\u002F\u002F127.0.0.1:5984;\n }\n}\n","setting-up-obsidian","Setting up Obsidian"," ","ct-9e8f85"," proxy_set_header ","Self Hosted Obsidian Sync With CouchDB","\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb","root","ul","https:\u002F\u002Fgithub.com\u002Fvrtmrz\u002Fobsidian-livesync","Main documentation","https:\u002F\u002Fgithub.com\u002Fvrtmrz\u002Fobsidian-livesync\u002Fblob\u002Fmain\u002Fdocs\u002Fsetup_own_server.md","Setting up couchdb","First, you should create ","docker-compose.yml"," with the following contents:","yaml","Then create initial config at ",".\u002Fcouchdb\u002Flocal.ini","ini","Then, in order to have sync on mobile devices, we will need a reverse proxy with nginx at ","\u002Fetc\u002Fnginx\u002Fsites-enabled\u002Fobsidian-couchdb","nginx","ol","Install ","Self-hosted LiveSync"," plugin","Change host to ","https:\u002F\u002Fyourhost.com","Specify username and password","Press ","test",", then ","fetch database","ct-e355da","server"," {"," server_name ","couchdb.yourhost.com;"," ","host","}","ct-18e5d9","# managed by Certbot"))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av,aw,ax,ay){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:O,_path:P}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-nAvv1RNs1x":{_path:P,_dir:"obsidian",_draft:D,_partial:D,_locale:"en",_empty:D,title:O,description:m,excerpt:{type:Q,children:[{type:a,tag:R,props:{},children:[{type:a,tag:h,props:{},children:[{type:a,tag:w,props:{href:S,rel:[x]},children:[{type:b,value:T}]}]},{type:a,tag:h,props:{},children:[{type:a,tag:w,props:{href:U,rel:[x]},children:[{type:b,value:V}]}]}]},{type:a,tag:y,props:{id:E},children:[{type:b,value:F}]},{type:a,tag:p,props:{},children:[{type:b,value:W},{type:a,tag:g,props:{},children:[{type:b,value:X}]},{type:b,value:Y}]},{type:a,tag:i,props:{code:G,language:Z},children:[{type:a,tag:q,props:{},children:[{type:a,tag:i,props:{__ignoreMap:m},children:[{type:b,value:G}]}]}]},{type:a,tag:p,props:{},children:[{type:b,value:_},{type:a,tag:g,props:{},children:[{type:b,value:$}]},{type:b,value:j}]},{type:a,tag:i,props:{code:H,language:aa},children:[{type:a,tag:q,props:{},children:[{type:a,tag:i,props:{__ignoreMap:m},children:[{type:b,value:H}]}]}]},{type:a,tag:p,props:{},children:[{type:b,value:ab},{type:a,tag:g,props:{},children:[{type:b,value:ac}]},{type:b,value:j}]},{type:a,tag:i,props:{code:I,language:ad},children:[{type:a,tag:q,props:{},children:[{type:a,tag:i,props:{__ignoreMap:m},children:[{type:b,value:I}]}]}]},{type:a,tag:y,props:{id:J},children:[{type:b,value:K}]},{type:a,tag:ae,props:{},children:[{type:a,tag:h,props:{},children:[{type:b,value:af},{type:a,tag:g,props:{},children:[{type:b,value:ag}]},{type:b,value:ah}]},{type:a,tag:h,props:{},children:[{type:b,value:ai},{type:a,tag:g,props:{},children:[{type:b,value:aj}]}]},{type:a,tag:h,props:{},children:[{type:b,value:ak}]},{type:a,tag:h,props:{},children:[{type:b,value:al},{type:a,tag:g,props:{},children:[{type:b,value:am}]},{type:b,value:an},{type:a,tag:g,props:{},children:[{type:b,value:ao}]}]}]}]},body:{type:Q,children:[{type:a,tag:R,props:{},children:[{type:a,tag:h,props:{},children:[{type:a,tag:w,props:{href:S,rel:[x]},children:[{type:b,value:T}]}]},{type:a,tag:h,props:{},children:[{type:a,tag:w,props:{href:U,rel:[x]},children:[{type:b,value:V}]}]}]},{type:a,tag:y,props:{id:E},children:[{type:b,value:F}]},{type:a,tag:p,props:{},children:[{type:b,value:W},{type:a,tag:g,props:{},children:[{type:b,value:X}]},{type:b,value:Y}]},{type:a,tag:i,props:{code:G,language:Z},children:[{type:a,tag:q,props:{},children:[{type:a,tag:i,props:{__ignoreMap:m},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:k},children:[{type:b,value:"version"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:z}]},{type:a,tag:c,props:{class:l},children:[{type:b,value:"'3'"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:k},children:[{type:b,value:"services"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" "}]},{type:a,tag:c,props:{class:k},children:[{type:b,value:"couchserver"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:n}]},{type:a,tag:c,props:{class:k},children:[{type:b,value:"container_name"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:z}]},{type:a,tag:c,props:{class:l},children:[{type:b,value:"obsidian__database"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:n}]},{type:a,tag:c,props:{class:k},children:[{type:b,value:"image"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:z}]},{type:a,tag:c,props:{class:l},children:[{type:b,value:"couchdb"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:n}]},{type:a,tag:c,props:{class:k},children:[{type:b,value:"restart"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:z}]},{type:a,tag:c,props:{class:l},children:[{type:b,value:"always"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:n}]},{type:a,tag:c,props:{class:k},children:[{type:b,value:"ports"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:l},children:[{type:b,value:"\"5984:5984\""}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:n}]},{type:a,tag:c,props:{class:k},children:[{type:b,value:"environment"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:l},children:[{type:b,value:"COUCHDB_USER=user"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:l},children:[{type:b,value:"COUCHDB_PASSWORD=somepassword"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:n}]},{type:a,tag:c,props:{class:k},children:[{type:b,value:"volumes"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:j}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:l},children:[{type:b,value:".\u002Fcouchdb\u002Fdbdata:\u002Fopt\u002Fcouchdb\u002Fdata"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]},{type:a,tag:c,props:{class:l},children:[{type:b,value:".\u002Fcouchdb\u002Flocal.ini:\u002Fopt\u002Fcouchdb\u002Fetc\u002Flocal.ini"}]}]}]}]}]},{type:a,tag:p,props:{},children:[{type:b,value:_},{type:a,tag:g,props:{},children:[{type:b,value:$}]},{type:b,value:j}]},{type:a,tag:i,props:{code:H,language:aa},children:[{type:a,tag:q,props:{},children:[{type:a,tag:i,props:{__ignoreMap:m},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{},children:[{type:b,value:"[couchdb]\nsingle_node=true\nmax_document_size=50000000\nmax_http_request_size=4294967296\n\n[chttpd]\nrequire_valid_user = true\n\n[chttpd_auth]\nrequire_valid_user = true\nauthentication_redirect = \u002F_utils\u002Fsession.html\n\n[httpd]\nWWW-Authenticate = Basic realm=\"couchdb\"\nenable_cors = true\n\n[cors]\norigins = app:\u002F\u002Fobsidian.md,capacitor:\u002F\u002Flocalhost,http:\u002F\u002Flocalhost\ncredentials = true\nheaders = accept, authorization, content-type, origin, referer\nmethods = GET, PUT, POST, HEAD, DELETE\nmax_age = 3600"}]}]}]}]}]},{type:a,tag:p,props:{},children:[{type:b,value:ab},{type:a,tag:g,props:{},children:[{type:b,value:ac}]},{type:b,value:j}]},{type:a,tag:i,props:{code:I,language:ad},children:[{type:a,tag:q,props:{},children:[{type:a,tag:i,props:{__ignoreMap:m},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:ap},children:[{type:b,value:aq}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:ar}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:L}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:A}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"80;"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:L}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:A}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"[::]:80;"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:L}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:as}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:at}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:n}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"return"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:au}]},{type:a,tag:c,props:{class:"ct-b56d52"},children:[{type:b,value:"301"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" https:\u002F\u002F"}]},{type:a,tag:c,props:{class:s},children:[{type:b,value:t}]},{type:a,tag:c,props:{class:u},children:[{type:b,value:av}]},{type:a,tag:c,props:{class:s},children:[{type:b,value:t}]},{type:a,tag:c,props:{class:u},children:[{type:b,value:"request_uri"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:B}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:aw}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:ap},children:[{type:b,value:aq}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:ar}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:A}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"443 ssl http2;"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:A}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"[::]:443 ssl http2;"}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:" ssl_certificate "}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"\u002Fetc\u002Fletsencrypt\u002Flive\u002Fyourhost.com\u002Ffullchain.pem; "}]},{type:a,tag:c,props:{class:ax},children:[{type:b,value:ay}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:" ssl_certificate_key "}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"\u002Fetc\u002Fletsencrypt\u002Flive\u002Fyourhost.com\u002Fprivkey.pem; "}]},{type:a,tag:c,props:{class:ax},children:[{type:b,value:ay}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:" ssl_trusted_certificate "}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"\u002Fetc\u002Fletsencrypt\u002Flive\u002Fyourhost.com\u002Fchain.pem;"}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:as}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:at}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:o}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:" client_max_body_size "}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"200M;"}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:M},children:[{type:b,value:" "}]},{type:a,tag:c,props:{class:"ct-18102e"},children:[{type:b,value:"location"}]},{type:a,tag:c,props:{class:M},children:[{type:b,value:au}]},{type:a,tag:c,props:{class:"ct-8b28bc"},children:[{type:b,value:"\u002F "}]},{type:a,tag:c,props:{class:M},children:[{type:b,value:"{"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:v}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:" proxy_redirect "}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"off;"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:v}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:N}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"Host "}]},{type:a,tag:c,props:{class:s},children:[{type:b,value:t}]},{type:a,tag:c,props:{class:u},children:[{type:b,value:av}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:B}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:v}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:N}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"X-Real-IP "}]},{type:a,tag:c,props:{class:s},children:[{type:b,value:t}]},{type:a,tag:c,props:{class:u},children:[{type:b,value:"remote_addr"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:B}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:v}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:N}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"X-Forwarded-For "}]},{type:a,tag:c,props:{class:s},children:[{type:b,value:t}]},{type:a,tag:c,props:{class:u},children:[{type:b,value:"proxy_add_x_forwarded_for"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:B}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:v}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:" proxy_pass "}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"http:\u002F\u002F127.0.0.1:5984;"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:" }"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:aw}]}]}]}]}]},{type:a,tag:y,props:{id:J},children:[{type:b,value:K}]},{type:a,tag:ae,props:{},children:[{type:a,tag:h,props:{},children:[{type:b,value:af},{type:a,tag:g,props:{},children:[{type:b,value:ag}]},{type:b,value:ah}]},{type:a,tag:h,props:{},children:[{type:b,value:ai},{type:a,tag:g,props:{},children:[{type:b,value:aj}]}]},{type:a,tag:h,props:{},children:[{type:b,value:ak}]},{type:a,tag:h,props:{},children:[{type:b,value:al},{type:a,tag:g,props:{},children:[{type:b,value:am}]},{type:b,value:an},{type:a,tag:g,props:{},children:[{type:b,value:ao}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-8b28bc{color:#FFA657}.ct-18102e{color:#FF7B72}.ct-b19092{color:#C9D1D9}.ct-930690{color:#8B949E}.ct-3b0c9a{color:#C9D1D9}.ct-9b4f35{color:#C9D1D9}.ct-b56d52{color:#79C0FF}.ct-ea52fd{color:#FF7B72}.ct-6e4ca3{color:#FF7B72}.ct-34a38e{color:#A5D6FF}.ct-c3c363{color:#C9D1D9}.ct-f0c7fc{color:#7EE787}.light .ct-f0c7fc{color:#268BD2}.light .ct-c3c363{color:#657B83}.light .ct-34a38e{color:#2AA198}.light .ct-6e4ca3{color:#073642}.light .ct-ea52fd{color:#859900}.light .ct-b56d52{color:#D33682}.light .ct-9b4f35{color:#859900}.light .ct-3b0c9a{color:#268BD2}.light .ct-930690{color:#93A1A1}.light .ct-b19092{color:#657B83}.light .ct-18102e{color:#073642}.light .ct-8b28bc{color:#657B83}"}]}],toc:{title:m,searchDepth:C,depth:C,links:[{id:E,depth:C,text:F},{id:J,depth:C,text:K}]}},_type:"markdown",_id:"content:Obsidian:Self-hosted Obsidian sync with CouchDB.md",_source:"content",_file:"Obsidian\u002FSelf-hosted Obsidian sync with CouchDB.md",_extension:"md"}},prerenderedAt:1703697993140}}("element","text","span","ct-c3c363","line","ct-ea52fd","code-inline","li","code",":","ct-f0c7fc","ct-34a38e",""," "," ","p","pre"," - ","ct-9b4f35","$","ct-3b0c9a"," ","a","nofollow","h2",": "," listen ",";",2,false,"setting-up-environment","Setting up environment","version: '3'\nservices:\n couchserver:\n container_name: obsidian__database\n image: couchdb\n restart: always\n ports:\n - \"5984:5984\"\n environment:\n - COUCHDB_USER=user\n - COUCHDB_PASSWORD=somepassword\n volumes:\n - .\u002Fcouchdb\u002Fdbdata:\u002Fopt\u002Fcouchdb\u002Fdata\n - .\u002Fcouchdb\u002Flocal.ini:\u002Fopt\u002Fcouchdb\u002Fetc\u002Flocal.ini\n","[couchdb]\nsingle_node=true\nmax_document_size=50000000\nmax_http_request_size=4294967296\n\n[chttpd]\nrequire_valid_user = true\n\n[chttpd_auth]\nrequire_valid_user = true\nauthentication_redirect = \u002F_utils\u002Fsession.html\n\n[httpd]\nWWW-Authenticate = Basic realm=\"couchdb\"\nenable_cors = true\n\n[cors]\norigins = app:\u002F\u002Fobsidian.md,capacitor:\u002F\u002Flocalhost,http:\u002F\u002Flocalhost\ncredentials = true\nheaders = accept, authorization, content-type, origin, referer\nmethods = GET, PUT, POST, HEAD, DELETE\nmax_age = 3600\n","server {\n listen 80;\n listen [::]:80;\n server_name couchdb.yourhost.com;\n return 301 https:\u002F\u002F$host$request_uri;\n}\n\nserver {\n listen 443 ssl http2;\n listen [::]:443 ssl http2;\n\n ssl_certificate \u002Fetc\u002Fletsencrypt\u002Flive\u002Fyourhost.com\u002Ffullchain.pem; # managed by Certbot\n ssl_certificate_key \u002Fetc\u002Fletsencrypt\u002Flive\u002Fyourhost.com\u002Fprivkey.pem; # managed by Certbot\n ssl_trusted_certificate \u002Fetc\u002Fletsencrypt\u002Flive\u002Fyourhost.com\u002Fchain.pem;\n\n server_name couchdb.yourhost.com;\n client_max_body_size 200M;\n\n location \u002F {\n proxy_redirect off;\n proxy_set_header Host $host;\n proxy_set_header X-Real-IP $remote_addr;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n\n proxy_pass http:\u002F\u002F127.0.0.1:5984;\n }\n}\n","setting-up-obsidian","Setting up Obsidian"," ","ct-b19092"," proxy_set_header ","Self Hosted Obsidian Sync With CouchDB","\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb","root","ul","https:\u002F\u002Fgithub.com\u002Fvrtmrz\u002Fobsidian-livesync","Main documentation","https:\u002F\u002Fgithub.com\u002Fvrtmrz\u002Fobsidian-livesync\u002Fblob\u002Fmain\u002Fdocs\u002Fsetup_own_server.md","Setting up couchdb","First, you should create ","docker-compose.yml"," with the following contents:","yaml","Then create initial config at ",".\u002Fcouchdb\u002Flocal.ini","ini","Then, in order to have sync on mobile devices, we will need a reverse proxy with nginx at ","\u002Fetc\u002Fnginx\u002Fsites-enabled\u002Fobsidian-couchdb","nginx","ol","Install ","Self-hosted LiveSync"," plugin","Change host to ","https:\u002F\u002Fyourhost.com","Specify username and password","Press ","test",", then ","fetch database","ct-6e4ca3","server"," {"," server_name ","couchdb.yourhost.com;"," ","host","}","ct-930690","# managed by Certbot"))
\ No newline at end of file
diff --git a/docs/obsidian/self-hosted-obsidian-sync-with-couchdb/index.html b/docs/obsidian/self-hosted-obsidian-sync-with-couchdb/index.html
index 19b465d..7ccf3aa 100644
--- a/docs/obsidian/self-hosted-obsidian-sync-with-couchdb/index.html
+++ b/docs/obsidian/self-hosted-obsidian-sync-with-couchdb/index.html
@@ -2,7 +2,7 @@
<html data-head-attrs="">
<head><title>Self Hosted Obsidian Sync With CouchDB • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="head:count" content="2"><link rel="modulepreload" href="/obsidian/self-hosted-obsidian-sync-with-couchdb/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseUl.b892d423.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseLi.a224f663.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseA.c52e44f8.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseH2.d950f051.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCodeInline.d9bcf614.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseOl.a67fc8c4.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a aria-current="page" href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="router-link-active _active_192pu_81 _link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Self Hosted Obsidian Sync With CouchDB</h1><article><div><ul><!--[--><li><!--[--><a href="https://github.com/vrtmrz/obsidian-livesync" rel="nofollow" target="_blank"><!--[-->Main documentation<!--]--></a><!--]--></li><li><!--[--><a href="https://github.com/vrtmrz/obsidian-livesync/blob/main/docs/setup_own_server.md" rel="nofollow" target="_blank"><!--[-->Setting up couchdb<!--]--></a><!--]--></li><!--]--></ul><h2 id="setting-up-environment"><a href="#setting-up-environment"><!--[-->Setting up environment<!--]--></a></h2><p><!--[-->First, you should create <code><!--[-->docker-compose.yml<!--]--></code> with the following contents:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>yaml</span></button><!--[--><pre><code><span class="line"><span class="ct-1391ae">version</span><span class="ct-39845b">: </span><span class="ct-8c9f43">'3'</span></span><span class="line"><span class="ct-1391ae">services</span><span class="ct-39845b">:</span></span><span class="line"><span class="ct-39845b"> </span><span class="ct-1391ae">couchserver</span><span class="ct-39845b">:</span></span><span class="line"><span class="ct-39845b"> </span><span class="ct-1391ae">container_name</span><span class="ct-39845b">: </span><span class="ct-8c9f43">obsidian__database</span></span><span class="line"><span class="ct-39845b"> </span><span class="ct-1391ae">image</span><span class="ct-39845b">: </span><span class="ct-8c9f43">couchdb</span></span><span class="line"><span class="ct-39845b"> </span><span class="ct-1391ae">restart</span><span class="ct-39845b">: </span><span class="ct-8c9f43">always</span></span><span class="line"><span class="ct-39845b"> </span><span class="ct-1391ae">ports</span><span class="ct-39845b">:</span></span><span class="line"><span class="ct-39845b"> - </span><span class="ct-8c9f43">"5984:5984"</span></span><span class="line"><span class="ct-39845b"> </span><span class="ct-1391ae">environment</span><span class="ct-39845b">:</span></span><span class="line"><span class="ct-39845b"> - </span><span class="ct-8c9f43">COUCHDB_USER=user</span></span><span class="line"><span class="ct-39845b"> - </span><span class="ct-8c9f43">COUCHDB_PASSWORD=somepassword</span></span><span class="line"><span class="ct-39845b"> </span><span class="ct-1391ae">volumes</span><span class="ct-39845b">:</span></span><span class="line"><span class="ct-39845b"> - </span><span class="ct-8c9f43">./couchdb/dbdata:/opt/couchdb/data</span></span><span class="line"><span class="ct-39845b"> - </span><span class="ct-8c9f43">./couchdb/local.ini:/opt/couchdb/etc/local.ini</span></span></code></pre><!--]--></div><p><!--[-->Then create initial config at <code><!--[-->./couchdb/local.ini<!--]--></code>:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>ini</span></button><!--[--><pre><code><span class="line"><span>[couchdb]
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a aria-current="page" href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="router-link-active _active_192pu_81 _link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Self Hosted Obsidian Sync With CouchDB</h1><article><div><ul><!--[--><li><!--[--><a href="https://github.com/vrtmrz/obsidian-livesync" rel="nofollow" target="_blank"><!--[-->Main documentation<!--]--></a><!--]--></li><li><!--[--><a href="https://github.com/vrtmrz/obsidian-livesync/blob/main/docs/setup_own_server.md" rel="nofollow" target="_blank"><!--[-->Setting up couchdb<!--]--></a><!--]--></li><!--]--></ul><h2 id="setting-up-environment"><a href="#setting-up-environment"><!--[-->Setting up environment<!--]--></a></h2><p><!--[-->First, you should create <code><!--[-->docker-compose.yml<!--]--></code> with the following contents:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>yaml</span></button><!--[--><pre><code><span class="line"><span class="ct-f0c7fc">version</span><span class="ct-c3c363">: </span><span class="ct-34a38e">'3'</span></span><span class="line"><span class="ct-f0c7fc">services</span><span class="ct-c3c363">:</span></span><span class="line"><span class="ct-c3c363"> </span><span class="ct-f0c7fc">couchserver</span><span class="ct-c3c363">:</span></span><span class="line"><span class="ct-c3c363"> </span><span class="ct-f0c7fc">container_name</span><span class="ct-c3c363">: </span><span class="ct-34a38e">obsidian__database</span></span><span class="line"><span class="ct-c3c363"> </span><span class="ct-f0c7fc">image</span><span class="ct-c3c363">: </span><span class="ct-34a38e">couchdb</span></span><span class="line"><span class="ct-c3c363"> </span><span class="ct-f0c7fc">restart</span><span class="ct-c3c363">: </span><span class="ct-34a38e">always</span></span><span class="line"><span class="ct-c3c363"> </span><span class="ct-f0c7fc">ports</span><span class="ct-c3c363">:</span></span><span class="line"><span class="ct-c3c363"> - </span><span class="ct-34a38e">"5984:5984"</span></span><span class="line"><span class="ct-c3c363"> </span><span class="ct-f0c7fc">environment</span><span class="ct-c3c363">:</span></span><span class="line"><span class="ct-c3c363"> - </span><span class="ct-34a38e">COUCHDB_USER=user</span></span><span class="line"><span class="ct-c3c363"> - </span><span class="ct-34a38e">COUCHDB_PASSWORD=somepassword</span></span><span class="line"><span class="ct-c3c363"> </span><span class="ct-f0c7fc">volumes</span><span class="ct-c3c363">:</span></span><span class="line"><span class="ct-c3c363"> - </span><span class="ct-34a38e">./couchdb/dbdata:/opt/couchdb/data</span></span><span class="line"><span class="ct-c3c363"> - </span><span class="ct-34a38e">./couchdb/local.ini:/opt/couchdb/etc/local.ini</span></span></code></pre><!--]--></div><p><!--[-->Then create initial config at <code><!--[-->./couchdb/local.ini<!--]--></code>:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>ini</span></button><!--[--><pre><code><span class="line"><span>[couchdb]
single_node=true
max_document_size=50000000
max_http_request_size=4294967296
@@ -23,5 +23,5 @@ origins = app://obsidian.md,capacitor://localhost,http://localhost
credentials = true
headers = accept, authorization, content-type, origin, referer
methods = GET, PUT, POST, HEAD, DELETE
-max_age = 3600</span></span></code></pre><!--]--></div><p><!--[-->Then, in order to have sync on mobile devices, we will need a reverse proxy with nginx at <code><!--[-->/etc/nginx/sites-enabled/obsidian-couchdb<!--]--></code>:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>nginx</span></button><!--[--><pre><code><span class="line"><span class="ct-e355da">server</span><span class="ct-39845b"> {</span></span><span class="line"><span class="ct-39845b"> </span><span class="ct-b38421"> listen </span><span class="ct-39845b">80;</span></span><span class="line"><span class="ct-39845b"> </span><span class="ct-b38421"> listen </span><span class="ct-39845b">[::]:80;</span></span><span class="line"><span class="ct-39845b"> </span><span class="ct-b38421"> server_name </span><span class="ct-39845b">couchdb.yourhost.com;</span></span><span class="line"><span class="ct-39845b"> </span><span class="ct-b38421">return</span><span class="ct-39845b"> </span><span class="ct-54acd4">301</span><span class="ct-39845b"> https://</span><span class="ct-f0f5d8">$</span><span class="ct-6433f1">host</span><span class="ct-f0f5d8">$</span><span class="ct-6433f1">request_uri</span><span class="ct-39845b">;</span></span><span class="line"><span class="ct-39845b">}</span></span><span class="line"></span><span class="line"><span class="ct-e355da">server</span><span class="ct-39845b"> {</span></span><span class="line"><span class="ct-39845b"> </span><span class="ct-b38421"> listen </span><span class="ct-39845b">443 ssl http2;</span></span><span class="line"><span class="ct-39845b"> </span><span class="ct-b38421"> listen </span><span class="ct-39845b">[::]:443 ssl http2;</span></span><span class="line"></span><span class="line"><span class="ct-39845b"> </span><span class="ct-b38421"> ssl_certificate </span><span class="ct-39845b">/etc/letsencrypt/live/yourhost.com/fullchain.pem; </span><span class="ct-18e5d9"># managed by Certbot</span></span><span class="line"><span class="ct-39845b"> </span><span class="ct-b38421"> ssl_certificate_key </span><span class="ct-39845b">/etc/letsencrypt/live/yourhost.com/privkey.pem; </span><span class="ct-18e5d9"># managed by Certbot</span></span><span class="line"><span class="ct-39845b"> </span><span class="ct-b38421"> ssl_trusted_certificate </span><span class="ct-39845b">/etc/letsencrypt/live/yourhost.com/chain.pem;</span></span><span class="line"></span><span class="line"><span class="ct-39845b"> </span><span class="ct-b38421"> server_name </span><span class="ct-39845b">couchdb.yourhost.com;</span></span><span class="line"><span class="ct-39845b"> </span><span class="ct-b38421"> client_max_body_size </span><span class="ct-39845b">200M;</span></span><span class="line"></span><span class="line"><span class="ct-9e8f85"> </span><span class="ct-0804f5">location</span><span class="ct-9e8f85"> </span><span class="ct-0734bb">/ </span><span class="ct-9e8f85">{</span></span><span class="line"><span class="ct-39845b"> </span><span class="ct-b38421"> proxy_redirect </span><span class="ct-39845b">off;</span></span><span class="line"><span class="ct-39845b"> </span><span class="ct-b38421"> proxy_set_header </span><span class="ct-39845b">Host </span><span class="ct-f0f5d8">$</span><span class="ct-6433f1">host</span><span class="ct-39845b">;</span></span><span class="line"><span class="ct-39845b"> </span><span class="ct-b38421"> proxy_set_header </span><span class="ct-39845b">X-Real-IP </span><span class="ct-f0f5d8">$</span><span class="ct-6433f1">remote_addr</span><span class="ct-39845b">;</span></span><span class="line"><span class="ct-39845b"> </span><span class="ct-b38421"> proxy_set_header </span><span class="ct-39845b">X-Forwarded-For </span><span class="ct-f0f5d8">$</span><span class="ct-6433f1">proxy_add_x_forwarded_for</span><span class="ct-39845b">;</span></span><span class="line"></span><span class="line"><span class="ct-39845b"> </span><span class="ct-b38421"> proxy_pass </span><span class="ct-39845b">http://127.0.0.1:5984;</span></span><span class="line"><span class="ct-39845b"> }</span></span><span class="line"><span class="ct-39845b">}</span></span></code></pre><!--]--></div><h2 id="setting-up-obsidian"><a href="#setting-up-obsidian"><!--[-->Setting up Obsidian<!--]--></a></h2><ol><!--[--><li><!--[-->Install <code><!--[-->Self-hosted LiveSync<!--]--></code> plugin<!--]--></li><li><!--[-->Change host to <code><!--[-->https://yourhost.com<!--]--></code><!--]--></li><li><!--[-->Specify username and password<!--]--></li><li><!--[-->Press <code><!--[-->test<!--]--></code>, then <code><!--[-->fetch database<!--]--></code><!--]--></li><!--]--></ol><style>.ct-0734bb{color:#FFA657}.ct-0804f5{color:#FF7B72}.ct-9e8f85{color:#C9D1D9}.ct-18e5d9{color:#8B949E}.ct-6433f1{color:#C9D1D9}.ct-f0f5d8{color:#C9D1D9}.ct-54acd4{color:#79C0FF}.ct-b38421{color:#FF7B72}.ct-e355da{color:#FF7B72}.ct-8c9f43{color:#A5D6FF}.ct-39845b{color:#C9D1D9}.ct-1391ae{color:#7EE787}.light .ct-1391ae{color:#268BD2}.light .ct-39845b{color:#657B83}.light .ct-8c9f43{color:#2AA198}.light .ct-e355da{color:#073642}.light .ct-b38421{color:#859900}.light .ct-54acd4{color:#D33682}.light .ct-f0f5d8{color:#859900}.light .ct-6433f1{color:#268BD2}.light .ct-18e5d9{color:#93A1A1}.light .ct-9e8f85{color:#657B83}.light .ct-0804f5{color:#073642}.light .ct-0734bb{color:#657B83}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/obsidian/self-hosted-obsidian-sync-with-couchdb/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695531602}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseUl.b892d423.js" crossorigin></script><script type="module" src="/nuxt/ProseLi.a224f663.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script><script type="module" src="/nuxt/ProseOl.a67fc8c4.js" crossorigin></script></body>
+max_age = 3600</span></span></code></pre><!--]--></div><p><!--[-->Then, in order to have sync on mobile devices, we will need a reverse proxy with nginx at <code><!--[-->/etc/nginx/sites-enabled/obsidian-couchdb<!--]--></code>:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>nginx</span></button><!--[--><pre><code><span class="line"><span class="ct-6e4ca3">server</span><span class="ct-c3c363"> {</span></span><span class="line"><span class="ct-c3c363"> </span><span class="ct-ea52fd"> listen </span><span class="ct-c3c363">80;</span></span><span class="line"><span class="ct-c3c363"> </span><span class="ct-ea52fd"> listen </span><span class="ct-c3c363">[::]:80;</span></span><span class="line"><span class="ct-c3c363"> </span><span class="ct-ea52fd"> server_name </span><span class="ct-c3c363">couchdb.yourhost.com;</span></span><span class="line"><span class="ct-c3c363"> </span><span class="ct-ea52fd">return</span><span class="ct-c3c363"> </span><span class="ct-b56d52">301</span><span class="ct-c3c363"> https://</span><span class="ct-9b4f35">$</span><span class="ct-3b0c9a">host</span><span class="ct-9b4f35">$</span><span class="ct-3b0c9a">request_uri</span><span class="ct-c3c363">;</span></span><span class="line"><span class="ct-c3c363">}</span></span><span class="line"></span><span class="line"><span class="ct-6e4ca3">server</span><span class="ct-c3c363"> {</span></span><span class="line"><span class="ct-c3c363"> </span><span class="ct-ea52fd"> listen </span><span class="ct-c3c363">443 ssl http2;</span></span><span class="line"><span class="ct-c3c363"> </span><span class="ct-ea52fd"> listen </span><span class="ct-c3c363">[::]:443 ssl http2;</span></span><span class="line"></span><span class="line"><span class="ct-c3c363"> </span><span class="ct-ea52fd"> ssl_certificate </span><span class="ct-c3c363">/etc/letsencrypt/live/yourhost.com/fullchain.pem; </span><span class="ct-930690"># managed by Certbot</span></span><span class="line"><span class="ct-c3c363"> </span><span class="ct-ea52fd"> ssl_certificate_key </span><span class="ct-c3c363">/etc/letsencrypt/live/yourhost.com/privkey.pem; </span><span class="ct-930690"># managed by Certbot</span></span><span class="line"><span class="ct-c3c363"> </span><span class="ct-ea52fd"> ssl_trusted_certificate </span><span class="ct-c3c363">/etc/letsencrypt/live/yourhost.com/chain.pem;</span></span><span class="line"></span><span class="line"><span class="ct-c3c363"> </span><span class="ct-ea52fd"> server_name </span><span class="ct-c3c363">couchdb.yourhost.com;</span></span><span class="line"><span class="ct-c3c363"> </span><span class="ct-ea52fd"> client_max_body_size </span><span class="ct-c3c363">200M;</span></span><span class="line"></span><span class="line"><span class="ct-b19092"> </span><span class="ct-18102e">location</span><span class="ct-b19092"> </span><span class="ct-8b28bc">/ </span><span class="ct-b19092">{</span></span><span class="line"><span class="ct-c3c363"> </span><span class="ct-ea52fd"> proxy_redirect </span><span class="ct-c3c363">off;</span></span><span class="line"><span class="ct-c3c363"> </span><span class="ct-ea52fd"> proxy_set_header </span><span class="ct-c3c363">Host </span><span class="ct-9b4f35">$</span><span class="ct-3b0c9a">host</span><span class="ct-c3c363">;</span></span><span class="line"><span class="ct-c3c363"> </span><span class="ct-ea52fd"> proxy_set_header </span><span class="ct-c3c363">X-Real-IP </span><span class="ct-9b4f35">$</span><span class="ct-3b0c9a">remote_addr</span><span class="ct-c3c363">;</span></span><span class="line"><span class="ct-c3c363"> </span><span class="ct-ea52fd"> proxy_set_header </span><span class="ct-c3c363">X-Forwarded-For </span><span class="ct-9b4f35">$</span><span class="ct-3b0c9a">proxy_add_x_forwarded_for</span><span class="ct-c3c363">;</span></span><span class="line"></span><span class="line"><span class="ct-c3c363"> </span><span class="ct-ea52fd"> proxy_pass </span><span class="ct-c3c363">http://127.0.0.1:5984;</span></span><span class="line"><span class="ct-c3c363"> }</span></span><span class="line"><span class="ct-c3c363">}</span></span></code></pre><!--]--></div><h2 id="setting-up-obsidian"><a href="#setting-up-obsidian"><!--[-->Setting up Obsidian<!--]--></a></h2><ol><!--[--><li><!--[-->Install <code><!--[-->Self-hosted LiveSync<!--]--></code> plugin<!--]--></li><li><!--[-->Change host to <code><!--[-->https://yourhost.com<!--]--></code><!--]--></li><li><!--[-->Specify username and password<!--]--></li><li><!--[-->Press <code><!--[-->test<!--]--></code>, then <code><!--[-->fetch database<!--]--></code><!--]--></li><!--]--></ol><style>.ct-8b28bc{color:#FFA657}.ct-18102e{color:#FF7B72}.ct-b19092{color:#C9D1D9}.ct-930690{color:#8B949E}.ct-3b0c9a{color:#C9D1D9}.ct-9b4f35{color:#C9D1D9}.ct-b56d52{color:#79C0FF}.ct-ea52fd{color:#FF7B72}.ct-6e4ca3{color:#FF7B72}.ct-34a38e{color:#A5D6FF}.ct-c3c363{color:#C9D1D9}.ct-f0c7fc{color:#7EE787}.light .ct-f0c7fc{color:#268BD2}.light .ct-c3c363{color:#657B83}.light .ct-34a38e{color:#2AA198}.light .ct-6e4ca3{color:#073642}.light .ct-ea52fd{color:#859900}.light .ct-b56d52{color:#D33682}.light .ct-9b4f35{color:#859900}.light .ct-3b0c9a{color:#268BD2}.light .ct-930690{color:#93A1A1}.light .ct-b19092{color:#657B83}.light .ct-18102e{color:#073642}.light .ct-8b28bc{color:#657B83}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/obsidian/self-hosted-obsidian-sync-with-couchdb/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697993140}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseUl.b892d423.js" crossorigin></script><script type="module" src="/nuxt/ProseLi.a224f663.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script><script type="module" src="/nuxt/ProseOl.a67fc8c4.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/sql/mysql-and-mariadb-setup/_payload.js b/docs/sql/mysql-and-mariadb-setup/_payload.js
index 95c189c..37f02fa 100644
--- a/docs/sql/mysql-and-mariadb-setup/_payload.js
+++ b/docs/sql/mysql-and-mariadb-setup/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:A,_path:B},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-H09FJYhNy5":{_path:B,_dir:"sql",_draft:o,_partial:o,_locale:"en",_empty:o,title:A,description:e,excerpt:{type:C,children:[{type:a,tag:k,props:{id:p},children:[{type:b,value:q}]},{type:a,tag:c,props:{code:r,language:D},children:[{type:a,tag:f,props:{},children:[{type:a,tag:c,props:{__ignoreMap:e},children:[{type:b,value:r}]}]}]},{type:a,tag:k,props:{id:s},children:[{type:b,value:t}]},{type:a,tag:E,props:{},children:[{type:b,value:F},{type:a,tag:g,props:{},children:[{type:b,value:G}]},{type:b,value:H},{type:a,tag:g,props:{},children:[{type:b,value:I}]},{type:b,value:J}]},{type:a,tag:c,props:{code:u,language:K},children:[{type:a,tag:f,props:{},children:[{type:a,tag:c,props:{__ignoreMap:e},children:[{type:b,value:u}]}]}]},{type:a,tag:k,props:{id:v},children:[{type:b,value:w}]},{type:a,tag:l,props:{},children:[{type:a,tag:m,props:{},children:[{type:b,value:L},{type:a,tag:g,props:{},children:[{type:b,value:M}]},{type:b,value:N},{type:a,tag:g,props:{},children:[{type:b,value:O}]},{type:b,value:P},{type:a,tag:g,props:{},children:[{type:b,value:Q}]},{type:b,value:R}]}]},{type:a,tag:c,props:{code:x,language:n},children:[{type:a,tag:f,props:{},children:[{type:a,tag:c,props:{__ignoreMap:e},children:[{type:b,value:x}]}]}]},{type:a,tag:l,props:{start:i},children:[{type:a,tag:m,props:{},children:[{type:b,value:S}]}]},{type:a,tag:c,props:{code:y,language:n},children:[{type:a,tag:f,props:{},children:[{type:a,tag:c,props:{__ignoreMap:e},children:[{type:b,value:y}]}]}]},{type:a,tag:l,props:{start:T},children:[{type:a,tag:m,props:{},children:[{type:b,value:U}]}]},{type:a,tag:c,props:{code:z,language:n},children:[{type:a,tag:f,props:{},children:[{type:a,tag:c,props:{__ignoreMap:e},children:[{type:b,value:z}]}]}]}]},body:{type:C,children:[{type:a,tag:k,props:{id:p},children:[{type:b,value:q}]},{type:a,tag:c,props:{code:r,language:D},children:[{type:a,tag:f,props:{},children:[{type:a,tag:c,props:{__ignoreMap:e},children:[{type:a,tag:d,props:{class:h},children:[{type:a,tag:d,props:{class:j},children:[{type:b,value:"sudo apt update"}]}]},{type:a,tag:d,props:{class:h},children:[{type:a,tag:d,props:{class:j},children:[{type:b,value:"sudo apt install mariadb-server"}]}]},{type:a,tag:d,props:{class:h},children:[{type:a,tag:d,props:{class:j},children:[{type:b,value:"sudo mysql_secure_installation"}]}]}]}]}]},{type:a,tag:k,props:{id:s},children:[{type:b,value:t}]},{type:a,tag:E,props:{},children:[{type:b,value:F},{type:a,tag:g,props:{},children:[{type:b,value:G}]},{type:b,value:H},{type:a,tag:g,props:{},children:[{type:b,value:I}]},{type:b,value:J}]},{type:a,tag:c,props:{code:u,language:K},children:[{type:a,tag:f,props:{},children:[{type:a,tag:c,props:{__ignoreMap:e},children:[{type:a,tag:d,props:{class:h},children:[{type:a,tag:d,props:{class:j},children:[{type:b,value:V}]}]},{type:a,tag:d,props:{class:h},children:[{type:a,tag:d,props:{class:j},children:[{type:b,value:"bind-"}]},{type:a,tag:d,props:{class:"ct-dc41b2"},children:[{type:b,value:"address"}]},{type:a,tag:d,props:{class:j},children:[{type:b,value:" = 0.0.0.0"}]}]},{type:a,tag:d,props:{class:h},children:[{type:a,tag:d,props:{class:j},children:[{type:b,value:V}]}]}]}]}]},{type:a,tag:k,props:{id:v},children:[{type:b,value:w}]},{type:a,tag:l,props:{},children:[{type:a,tag:m,props:{},children:[{type:b,value:L},{type:a,tag:g,props:{},children:[{type:b,value:M}]},{type:b,value:N},{type:a,tag:g,props:{},children:[{type:b,value:O}]},{type:b,value:P},{type:a,tag:g,props:{},children:[{type:b,value:Q}]},{type:b,value:R}]}]},{type:a,tag:c,props:{code:x,language:n},children:[{type:a,tag:f,props:{},children:[{type:a,tag:c,props:{__ignoreMap:e},children:[{type:a,tag:d,props:{class:h},children:[{type:a,tag:d,props:{},children:[{type:b,value:"CREATE USER 'newuser'@'localhost' IDENTIFIED BY 'password';"}]}]}]}]}]},{type:a,tag:l,props:{start:i},children:[{type:a,tag:m,props:{},children:[{type:b,value:S}]}]},{type:a,tag:c,props:{code:y,language:n},children:[{type:a,tag:f,props:{},children:[{type:a,tag:c,props:{__ignoreMap:e},children:[{type:a,tag:d,props:{class:h},children:[{type:a,tag:d,props:{},children:[{type:b,value:"GRANT ALL PRIVILEGES ON * . * TO 'newuser'@'localhost';"}]}]}]}]}]},{type:a,tag:l,props:{start:T},children:[{type:a,tag:m,props:{},children:[{type:b,value:U}]}]},{type:a,tag:c,props:{code:z,language:n},children:[{type:a,tag:f,props:{},children:[{type:a,tag:c,props:{__ignoreMap:e},children:[{type:a,tag:d,props:{class:h},children:[{type:a,tag:d,props:{},children:[{type:b,value:"FLUSH PRIVILEGES;"}]}]}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-dc41b2{color:#FF7B72}.ct-90435d{color:#C9D1D9}.light .ct-90435d{color:#657B83}.light .ct-dc41b2{color:#859900}"}]}],toc:{title:e,searchDepth:i,depth:i,links:[{id:p,depth:i,text:q},{id:s,depth:i,text:t},{id:v,depth:i,text:w}]}},_type:"markdown",_id:"content:SQL:MySQL and MariaDB setup.md",_source:"content",_file:"SQL\u002FMySQL and MariaDB setup.md",_extension:"md"}},prerenderedAt:1703695531666}}("element","text","code","span","","pre","code-inline","line",2,"ct-90435d","h2","ol","li","mysql",false,"install-mariadb-on-ubuntu-2004-lts","Install MariaDB on Ubuntu 20.04 LTS","sudo apt update\nsudo apt install mariadb-server\nsudo mysql_secure_installation\n","access-database-from-outside","Access Database from outside","...\nbind-address = 0.0.0.0\n...\n","create-administrative-user","Create Administrative User","CREATE USER 'newuser'@'localhost' IDENTIFIED BY 'password';\n","GRANT ALL PRIVILEGES ON * . * TO 'newuser'@'localhost';\n","FLUSH PRIVILEGES;\n","MySQL And MariaDB Setup","\u002Fsql\u002Fmysql-and-mariadb-setup","root","bash","p","Open ","\u002Fetc\u002Fmysql\u002Fmariadb.conf.d\u002F50-server.cnf"," and change the ","bind-address"," to:","nginx","Create a new user ","newuser"," for the host ","localhost"," with a new ","password",":","Grant all permissions to the new user",3,"Update permissions","..."))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:A,_path:B},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-H09FJYhNy5":{_path:B,_dir:"sql",_draft:o,_partial:o,_locale:"en",_empty:o,title:A,description:e,excerpt:{type:C,children:[{type:a,tag:k,props:{id:p},children:[{type:b,value:q}]},{type:a,tag:c,props:{code:r,language:D},children:[{type:a,tag:f,props:{},children:[{type:a,tag:c,props:{__ignoreMap:e},children:[{type:b,value:r}]}]}]},{type:a,tag:k,props:{id:s},children:[{type:b,value:t}]},{type:a,tag:E,props:{},children:[{type:b,value:F},{type:a,tag:g,props:{},children:[{type:b,value:G}]},{type:b,value:H},{type:a,tag:g,props:{},children:[{type:b,value:I}]},{type:b,value:J}]},{type:a,tag:c,props:{code:u,language:K},children:[{type:a,tag:f,props:{},children:[{type:a,tag:c,props:{__ignoreMap:e},children:[{type:b,value:u}]}]}]},{type:a,tag:k,props:{id:v},children:[{type:b,value:w}]},{type:a,tag:l,props:{},children:[{type:a,tag:m,props:{},children:[{type:b,value:L},{type:a,tag:g,props:{},children:[{type:b,value:M}]},{type:b,value:N},{type:a,tag:g,props:{},children:[{type:b,value:O}]},{type:b,value:P},{type:a,tag:g,props:{},children:[{type:b,value:Q}]},{type:b,value:R}]}]},{type:a,tag:c,props:{code:x,language:n},children:[{type:a,tag:f,props:{},children:[{type:a,tag:c,props:{__ignoreMap:e},children:[{type:b,value:x}]}]}]},{type:a,tag:l,props:{start:i},children:[{type:a,tag:m,props:{},children:[{type:b,value:S}]}]},{type:a,tag:c,props:{code:y,language:n},children:[{type:a,tag:f,props:{},children:[{type:a,tag:c,props:{__ignoreMap:e},children:[{type:b,value:y}]}]}]},{type:a,tag:l,props:{start:T},children:[{type:a,tag:m,props:{},children:[{type:b,value:U}]}]},{type:a,tag:c,props:{code:z,language:n},children:[{type:a,tag:f,props:{},children:[{type:a,tag:c,props:{__ignoreMap:e},children:[{type:b,value:z}]}]}]}]},body:{type:C,children:[{type:a,tag:k,props:{id:p},children:[{type:b,value:q}]},{type:a,tag:c,props:{code:r,language:D},children:[{type:a,tag:f,props:{},children:[{type:a,tag:c,props:{__ignoreMap:e},children:[{type:a,tag:d,props:{class:h},children:[{type:a,tag:d,props:{class:j},children:[{type:b,value:"sudo apt update"}]}]},{type:a,tag:d,props:{class:h},children:[{type:a,tag:d,props:{class:j},children:[{type:b,value:"sudo apt install mariadb-server"}]}]},{type:a,tag:d,props:{class:h},children:[{type:a,tag:d,props:{class:j},children:[{type:b,value:"sudo mysql_secure_installation"}]}]}]}]}]},{type:a,tag:k,props:{id:s},children:[{type:b,value:t}]},{type:a,tag:E,props:{},children:[{type:b,value:F},{type:a,tag:g,props:{},children:[{type:b,value:G}]},{type:b,value:H},{type:a,tag:g,props:{},children:[{type:b,value:I}]},{type:b,value:J}]},{type:a,tag:c,props:{code:u,language:K},children:[{type:a,tag:f,props:{},children:[{type:a,tag:c,props:{__ignoreMap:e},children:[{type:a,tag:d,props:{class:h},children:[{type:a,tag:d,props:{class:j},children:[{type:b,value:V}]}]},{type:a,tag:d,props:{class:h},children:[{type:a,tag:d,props:{class:j},children:[{type:b,value:"bind-"}]},{type:a,tag:d,props:{class:"ct-4287d3"},children:[{type:b,value:"address"}]},{type:a,tag:d,props:{class:j},children:[{type:b,value:" = 0.0.0.0"}]}]},{type:a,tag:d,props:{class:h},children:[{type:a,tag:d,props:{class:j},children:[{type:b,value:V}]}]}]}]}]},{type:a,tag:k,props:{id:v},children:[{type:b,value:w}]},{type:a,tag:l,props:{},children:[{type:a,tag:m,props:{},children:[{type:b,value:L},{type:a,tag:g,props:{},children:[{type:b,value:M}]},{type:b,value:N},{type:a,tag:g,props:{},children:[{type:b,value:O}]},{type:b,value:P},{type:a,tag:g,props:{},children:[{type:b,value:Q}]},{type:b,value:R}]}]},{type:a,tag:c,props:{code:x,language:n},children:[{type:a,tag:f,props:{},children:[{type:a,tag:c,props:{__ignoreMap:e},children:[{type:a,tag:d,props:{class:h},children:[{type:a,tag:d,props:{},children:[{type:b,value:"CREATE USER 'newuser'@'localhost' IDENTIFIED BY 'password';"}]}]}]}]}]},{type:a,tag:l,props:{start:i},children:[{type:a,tag:m,props:{},children:[{type:b,value:S}]}]},{type:a,tag:c,props:{code:y,language:n},children:[{type:a,tag:f,props:{},children:[{type:a,tag:c,props:{__ignoreMap:e},children:[{type:a,tag:d,props:{class:h},children:[{type:a,tag:d,props:{},children:[{type:b,value:"GRANT ALL PRIVILEGES ON * . * TO 'newuser'@'localhost';"}]}]}]}]}]},{type:a,tag:l,props:{start:T},children:[{type:a,tag:m,props:{},children:[{type:b,value:U}]}]},{type:a,tag:c,props:{code:z,language:n},children:[{type:a,tag:f,props:{},children:[{type:a,tag:c,props:{__ignoreMap:e},children:[{type:a,tag:d,props:{class:h},children:[{type:a,tag:d,props:{},children:[{type:b,value:"FLUSH PRIVILEGES;"}]}]}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-4287d3{color:#FF7B72}.ct-c1f08a{color:#C9D1D9}.light .ct-c1f08a{color:#657B83}.light .ct-4287d3{color:#859900}"}]}],toc:{title:e,searchDepth:i,depth:i,links:[{id:p,depth:i,text:q},{id:s,depth:i,text:t},{id:v,depth:i,text:w}]}},_type:"markdown",_id:"content:SQL:MySQL and MariaDB setup.md",_source:"content",_file:"SQL\u002FMySQL and MariaDB setup.md",_extension:"md"}},prerenderedAt:1703697993204}}("element","text","code","span","","pre","code-inline","line",2,"ct-c1f08a","h2","ol","li","mysql",false,"install-mariadb-on-ubuntu-2004-lts","Install MariaDB on Ubuntu 20.04 LTS","sudo apt update\nsudo apt install mariadb-server\nsudo mysql_secure_installation\n","access-database-from-outside","Access Database from outside","...\nbind-address = 0.0.0.0\n...\n","create-administrative-user","Create Administrative User","CREATE USER 'newuser'@'localhost' IDENTIFIED BY 'password';\n","GRANT ALL PRIVILEGES ON * . * TO 'newuser'@'localhost';\n","FLUSH PRIVILEGES;\n","MySQL And MariaDB Setup","\u002Fsql\u002Fmysql-and-mariadb-setup","root","bash","p","Open ","\u002Fetc\u002Fmysql\u002Fmariadb.conf.d\u002F50-server.cnf"," and change the ","bind-address"," to:","nginx","Create a new user ","newuser"," for the host ","localhost"," with a new ","password",":","Grant all permissions to the new user",3,"Update permissions","..."))
\ No newline at end of file
diff --git a/docs/sql/mysql-and-mariadb-setup/index.html b/docs/sql/mysql-and-mariadb-setup/index.html
index 4177bba..78d1997 100644
--- a/docs/sql/mysql-and-mariadb-setup/index.html
+++ b/docs/sql/mysql-and-mariadb-setup/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>MySQL And MariaDB Setup • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="head:count" content="2"><link rel="modulepreload" href="/sql/mysql-and-mariadb-setup/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseH2.d950f051.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCodeInline.d9bcf614.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseOl.a67fc8c4.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseLi.a224f663.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a aria-current="page" href="/sql/mysql-and-mariadb-setup" class="router-link-active _active_192pu_81 _link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>MySQL And MariaDB Setup</h1><article><div><h2 id="install-mariadb-on-ubuntu-2004-lts"><a href="#install-mariadb-on-ubuntu-2004-lts"><!--[-->Install MariaDB on Ubuntu 20.04 LTS<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>bash</span></button><!--[--><pre><code><span class="line"><span class="ct-90435d">sudo apt update</span></span><span class="line"><span class="ct-90435d">sudo apt install mariadb-server</span></span><span class="line"><span class="ct-90435d">sudo mysql_secure_installation</span></span></code></pre><!--]--></div><h2 id="access-database-from-outside"><a href="#access-database-from-outside"><!--[-->Access Database from outside<!--]--></a></h2><p><!--[-->Open <code><!--[-->/etc/mysql/mariadb.conf.d/50-server.cnf<!--]--></code> and change the <code><!--[-->bind-address<!--]--></code> to:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>nginx</span></button><!--[--><pre><code><span class="line"><span class="ct-90435d">...</span></span><span class="line"><span class="ct-90435d">bind-</span><span class="ct-dc41b2">address</span><span class="ct-90435d"> = 0.0.0.0</span></span><span class="line"><span class="ct-90435d">...</span></span></code></pre><!--]--></div><h2 id="create-administrative-user"><a href="#create-administrative-user"><!--[-->Create Administrative User<!--]--></a></h2><ol><!--[--><li><!--[-->Create a new user <code><!--[-->newuser<!--]--></code> for the host <code><!--[-->localhost<!--]--></code> with a new <code><!--[-->password<!--]--></code>:<!--]--></li><!--]--></ol><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>mysql</span></button><!--[--><pre><code><span class="line"><span>CREATE USER 'newuser'@'localhost' IDENTIFIED BY 'password';</span></span></code></pre><!--]--></div><ol start="2"><!--[--><li><!--[-->Grant all permissions to the new user<!--]--></li><!--]--></ol><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>mysql</span></button><!--[--><pre><code><span class="line"><span>GRANT ALL PRIVILEGES ON * . * TO 'newuser'@'localhost';</span></span></code></pre><!--]--></div><ol start="3"><!--[--><li><!--[-->Update permissions<!--]--></li><!--]--></ol><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>mysql</span></button><!--[--><pre><code><span class="line"><span>FLUSH PRIVILEGES;</span></span></code></pre><!--]--></div><style>.ct-dc41b2{color:#FF7B72}.ct-90435d{color:#C9D1D9}.light .ct-90435d{color:#657B83}.light .ct-dc41b2{color:#859900}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/sql/mysql-and-mariadb-setup/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695531666}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseOl.a67fc8c4.js" crossorigin></script><script type="module" src="/nuxt/ProseLi.a224f663.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a aria-current="page" href="/sql/mysql-and-mariadb-setup" class="router-link-active _active_192pu_81 _link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>MySQL And MariaDB Setup</h1><article><div><h2 id="install-mariadb-on-ubuntu-2004-lts"><a href="#install-mariadb-on-ubuntu-2004-lts"><!--[-->Install MariaDB on Ubuntu 20.04 LTS<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>bash</span></button><!--[--><pre><code><span class="line"><span class="ct-c1f08a">sudo apt update</span></span><span class="line"><span class="ct-c1f08a">sudo apt install mariadb-server</span></span><span class="line"><span class="ct-c1f08a">sudo mysql_secure_installation</span></span></code></pre><!--]--></div><h2 id="access-database-from-outside"><a href="#access-database-from-outside"><!--[-->Access Database from outside<!--]--></a></h2><p><!--[-->Open <code><!--[-->/etc/mysql/mariadb.conf.d/50-server.cnf<!--]--></code> and change the <code><!--[-->bind-address<!--]--></code> to:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>nginx</span></button><!--[--><pre><code><span class="line"><span class="ct-c1f08a">...</span></span><span class="line"><span class="ct-c1f08a">bind-</span><span class="ct-4287d3">address</span><span class="ct-c1f08a"> = 0.0.0.0</span></span><span class="line"><span class="ct-c1f08a">...</span></span></code></pre><!--]--></div><h2 id="create-administrative-user"><a href="#create-administrative-user"><!--[-->Create Administrative User<!--]--></a></h2><ol><!--[--><li><!--[-->Create a new user <code><!--[-->newuser<!--]--></code> for the host <code><!--[-->localhost<!--]--></code> with a new <code><!--[-->password<!--]--></code>:<!--]--></li><!--]--></ol><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>mysql</span></button><!--[--><pre><code><span class="line"><span>CREATE USER 'newuser'@'localhost' IDENTIFIED BY 'password';</span></span></code></pre><!--]--></div><ol start="2"><!--[--><li><!--[-->Grant all permissions to the new user<!--]--></li><!--]--></ol><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>mysql</span></button><!--[--><pre><code><span class="line"><span>GRANT ALL PRIVILEGES ON * . * TO 'newuser'@'localhost';</span></span></code></pre><!--]--></div><ol start="3"><!--[--><li><!--[-->Update permissions<!--]--></li><!--]--></ol><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>mysql</span></button><!--[--><pre><code><span class="line"><span>FLUSH PRIVILEGES;</span></span></code></pre><!--]--></div><style>.ct-4287d3{color:#FF7B72}.ct-c1f08a{color:#C9D1D9}.light .ct-c1f08a{color:#657B83}.light .ct-4287d3{color:#859900}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/sql/mysql-and-mariadb-setup/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697993204}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseOl.a67fc8c4.js" crossorigin></script><script type="module" src="/nuxt/ProseLi.a224f663.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/sql/postgress-setup/_payload.js b/docs/sql/postgress-setup/_payload.js
index 3acf2a9..c3451ff 100644
--- a/docs/sql/postgress-setup/_payload.js
+++ b/docs/sql/postgress-setup/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:N,_path:O}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-OeCNLqMRmJ":{_path:O,_dir:m,_draft:r,_partial:r,_locale:"en",_empty:r,title:N,description:f,excerpt:{type:P,children:[{type:a,tag:k,props:{id:s},children:[{type:b,value:t}]},{type:a,tag:d,props:{code:u,language:l},children:[{type:a,tag:i,props:{},children:[{type:a,tag:d,props:{__ignoreMap:f},children:[{type:b,value:u}]}]}]},{type:a,tag:k,props:{id:v},children:[{type:b,value:w}]},{type:a,tag:g,props:{},children:[{type:b,value:Q}]},{type:a,tag:d,props:{code:x,language:l},children:[{type:a,tag:i,props:{},children:[{type:a,tag:d,props:{__ignoreMap:f},children:[{type:b,value:x}]}]}]},{type:a,tag:k,props:{id:y},children:[{type:b,value:z}]},{type:a,tag:g,props:{},children:[{type:b,value:R},{type:a,tag:e,props:{},children:[{type:b,value:o}]},{type:b,value:S},{type:a,tag:e,props:{},children:[{type:b,value:T}]},{type:b,value:U},{type:a,tag:e,props:{},children:[{type:b,value:V}]},{type:b,value:W},{type:a,tag:e,props:{},children:[{type:b,value:o}]},{type:b,value:X},{type:a,tag:e,props:{},children:[{type:b,value:q}]},{type:b,value:p}]},{type:a,tag:Y,props:{id:A},children:[{type:b,value:B}]},{type:a,tag:g,props:{},children:[{type:b,value:Z},{type:a,tag:e,props:{},children:[{type:b,value:o}]},{type:b,value:_},{type:a,tag:e,props:{},children:[{type:b,value:q}]},{type:b,value:$},{type:a,tag:e,props:{},children:[{type:b,value:aa}]},{type:b,value:p}]},{type:a,tag:d,props:{code:C,language:ab},children:[{type:a,tag:i,props:{},children:[{type:a,tag:d,props:{__ignoreMap:f},children:[{type:b,value:C}]}]}]},{type:a,tag:g,props:{},children:[{type:b,value:ac},{type:a,tag:e,props:{},children:[{type:b,value:ad}]},{type:b,value:p}]},{type:a,tag:d,props:{code:D},children:[{type:a,tag:i,props:{},children:[{type:a,tag:d,props:{__ignoreMap:f},children:[{type:b,value:D}]}]}]},{type:a,tag:g,props:{},children:[{type:b,value:ae}]},{type:a,tag:d,props:{code:E,language:l},children:[{type:a,tag:i,props:{},children:[{type:a,tag:d,props:{__ignoreMap:f},children:[{type:b,value:E}]}]}]},{type:a,tag:g,props:{},children:[{type:b,value:af}]},{type:a,tag:d,props:{code:F,language:l},children:[{type:a,tag:i,props:{},children:[{type:a,tag:d,props:{__ignoreMap:f},children:[{type:b,value:F}]}]}]},{type:a,tag:k,props:{id:G},children:[{type:b,value:H}]},{type:a,tag:g,props:{},children:[{type:b,value:ag}]},{type:a,tag:d,props:{code:I,language:m},children:[{type:a,tag:i,props:{},children:[{type:a,tag:d,props:{__ignoreMap:f},children:[{type:b,value:I}]}]}]},{type:a,tag:k,props:{id:J},children:[{type:b,value:K}]},{type:a,tag:g,props:{},children:[{type:b,value:ah},{type:a,tag:e,props:{},children:[{type:b,value:ai}]},{type:b,value:aj}]},{type:a,tag:d,props:{code:L,language:m},children:[{type:a,tag:i,props:{},children:[{type:a,tag:d,props:{__ignoreMap:f},children:[{type:b,value:L}]}]}]},{type:a,tag:g,props:{},children:[{type:b,value:ak},{type:a,tag:e,props:{},children:[{type:b,value:al}]},{type:b,value:am}]},{type:a,tag:g,props:{},children:[{type:b,value:an}]},{type:a,tag:d,props:{code:M,language:m},children:[{type:a,tag:i,props:{},children:[{type:a,tag:d,props:{__ignoreMap:f},children:[{type:b,value:M}]}]}]}]},body:{type:P,children:[{type:a,tag:k,props:{id:s},children:[{type:b,value:t}]},{type:a,tag:d,props:{code:u,language:l},children:[{type:a,tag:i,props:{},children:[{type:a,tag:d,props:{__ignoreMap:f},children:[{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:j},children:[{type:b,value:"sudo apt update"}]}]},{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:j},children:[{type:b,value:"sudo apt install -y postgresql postgresql-contrib postgresql-client"}]}]},{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:j},children:[{type:b,value:"sudo systemctl status postgresql.service"}]}]}]}]}]},{type:a,tag:k,props:{id:v},children:[{type:b,value:w}]},{type:a,tag:g,props:{},children:[{type:b,value:Q}]},{type:a,tag:d,props:{code:x,language:l},children:[{type:a,tag:i,props:{},children:[{type:a,tag:d,props:{__ignoreMap:f},children:[{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:j},children:[{type:b,value:"sudo -u postgres psql"}]}]},{type:a,tag:c,props:{class:h},children:[]},{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:j},children:[{type:b,value:"psql (12.12 (Ubuntu 12.12-0ubuntu0.20.04.1))"}]}]},{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:j},children:[{type:b,value:"Type "}]},{type:a,tag:c,props:{class:"ct-3c3be0"},children:[{type:b,value:"\"help\""}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:" "}]},{type:a,tag:c,props:{class:"ct-99cc06"},children:[{type:b,value:"for"}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:" help."}]}]},{type:a,tag:c,props:{class:h},children:[]},{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:j},children:[{type:b,value:"postgres="}]},{type:a,tag:c,props:{class:"ct-6808e5"},children:[{type:b,value:"#"}]}]}]}]}]},{type:a,tag:k,props:{id:y},children:[{type:b,value:z}]},{type:a,tag:g,props:{},children:[{type:b,value:R},{type:a,tag:e,props:{},children:[{type:b,value:o}]},{type:b,value:S},{type:a,tag:e,props:{},children:[{type:b,value:T}]},{type:b,value:U},{type:a,tag:e,props:{},children:[{type:b,value:V}]},{type:b,value:W},{type:a,tag:e,props:{},children:[{type:b,value:o}]},{type:b,value:X},{type:a,tag:e,props:{},children:[{type:b,value:q}]},{type:b,value:p}]},{type:a,tag:Y,props:{id:A},children:[{type:b,value:B}]},{type:a,tag:g,props:{},children:[{type:b,value:Z},{type:a,tag:e,props:{},children:[{type:b,value:o}]},{type:b,value:_},{type:a,tag:e,props:{},children:[{type:b,value:q}]},{type:b,value:$},{type:a,tag:e,props:{},children:[{type:b,value:aa}]},{type:b,value:p}]},{type:a,tag:d,props:{code:C,language:ab},children:[{type:a,tag:i,props:{},children:[{type:a,tag:d,props:{__ignoreMap:f},children:[{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:j},children:[{type:b,value:"sudo vi \u002Fetc\u002Fpostgresql\u002F12\u002Fmain\u002Fpg_hba.conf"}]}]},{type:a,tag:c,props:{class:h},children:[]},{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:j},children:[{type:b,value:ao}]}]},{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:"ct-51dc37"},children:[{type:b,value:"local"}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:" all postgres peer"}]}]},{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:j},children:[{type:b,value:ao}]}]}]}]}]},{type:a,tag:g,props:{},children:[{type:b,value:ac},{type:a,tag:e,props:{},children:[{type:b,value:ad}]},{type:b,value:p}]},{type:a,tag:d,props:{code:D},children:[{type:a,tag:i,props:{},children:[{type:a,tag:d,props:{__ignoreMap:f},children:[{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{},children:[{type:b,value:"local all postgres md5"}]}]}]}]}]},{type:a,tag:g,props:{},children:[{type:b,value:ae}]},{type:a,tag:d,props:{code:E,language:l},children:[{type:a,tag:i,props:{},children:[{type:a,tag:d,props:{__ignoreMap:f},children:[{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:j},children:[{type:b,value:"sudo systemctl restart postgresql"}]}]}]}]}]},{type:a,tag:g,props:{},children:[{type:b,value:af}]},{type:a,tag:d,props:{code:F,language:l},children:[{type:a,tag:i,props:{},children:[{type:a,tag:d,props:{__ignoreMap:f},children:[{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:j},children:[{type:b,value:"psql -U postgres -d postgres -h databasehostname"}]}]}]}]}]},{type:a,tag:k,props:{id:G},children:[{type:b,value:H}]},{type:a,tag:g,props:{},children:[{type:b,value:ag}]},{type:a,tag:d,props:{code:I,language:m},children:[{type:a,tag:i,props:{},children:[{type:a,tag:d,props:{__ignoreMap:f},children:[{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{},children:[{type:b,value:"create user myuser with encrypted password 'Supersecret';\nCREATE ROLE\n\npostgres=# \\du\n List of roles\n Role name | Attributes | Member of\n-----------+------------------------------------------------------------+-----------\n myuser | | {}\n postgres | Superuser, Create role, Create DB, Replication, Bypass RLS | {}"}]}]}]}]}]},{type:a,tag:k,props:{id:J},children:[{type:b,value:K}]},{type:a,tag:g,props:{},children:[{type:b,value:ah},{type:a,tag:e,props:{},children:[{type:b,value:ai}]},{type:b,value:aj}]},{type:a,tag:d,props:{code:L,language:m},children:[{type:a,tag:i,props:{},children:[{type:a,tag:d,props:{__ignoreMap:f},children:[{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{},children:[{type:b,value:"CREATE DATABASE dbname OWNER myuser;\nCREATE DATABASE\n\npostgres=# \\l\n List of databases\n Name | Owner | Encoding | Collate | Ctype | Access privileges\n-----------+----------+----------+-------------+-------------+-----------------------\n dbname | myuser | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n postgres | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n template0 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c\u002Fpostgres +\n | | | | | postgres=CTc\u002Fpostgres\n template1 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c\u002Fpostgres +\n | | | | | postgres=CTc\u002Fpostgres"}]}]}]}]}]},{type:a,tag:g,props:{},children:[{type:b,value:ak},{type:a,tag:e,props:{},children:[{type:b,value:al}]},{type:b,value:am}]},{type:a,tag:g,props:{},children:[{type:b,value:an}]},{type:a,tag:d,props:{code:M,language:m},children:[{type:a,tag:i,props:{},children:[{type:a,tag:d,props:{__ignoreMap:f},children:[{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{},children:[{type:b,value:"postgres=# alter database dbname owner to myuser;\nALTER DATABASE"}]}]}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-51dc37{color:#FF7B72}.ct-6808e5{color:#8B949E}.ct-99cc06{color:#FF7B72}.ct-3c3be0{color:#A5D6FF}.ct-b382d3{color:#C9D1D9}.light .ct-b382d3{color:#657B83}.light .ct-3c3be0{color:#2AA198}.light .ct-99cc06{color:#859900}.light .ct-6808e5{color:#93A1A1}.light .ct-51dc37{color:#073642}"}]}],toc:{title:f,searchDepth:n,depth:n,links:[{id:s,depth:n,text:t},{id:v,depth:n,text:w},{id:y,depth:n,text:z,children:[{id:A,depth:3,text:B}]},{id:G,depth:n,text:H},{id:J,depth:n,text:K}]}},_type:"markdown",_id:"content:SQL:Postgress setup.md",_source:"content",_file:"SQL\u002FPostgress setup.md",_extension:"md"}},prerenderedAt:1703695531704}}("element","text","span","code","code-inline","","p","line","pre","ct-b382d3","h2","bash","sql",2,"postgres",".","pg_hba.conf",false,"install-postgresql-12-on-ubuntu-2004-lts","Install PostgreSQL 12 on Ubuntu 20.04 LTS","sudo apt update\nsudo apt install -y postgresql postgresql-contrib postgresql-client\nsudo systemctl status postgresql.service\n","initial-database-connection","Initial database connection","sudo -u postgres psql\n\npsql (12.12 (Ubuntu 12.12-0ubuntu0.20.04.1))\nType \"help\" for help.\n\npostgres=#\n","set-password-for-postgres-database-user","Set password for postgres database user","update-pg_hbaconf-to-allow-postgres-user-connections-with-password","Update pg_hba.conf to allow postgres user connections with password","sudo vi \u002Fetc\u002Fpostgresql\u002F12\u002Fmain\u002Fpg_hba.conf\n\n...\nlocal all postgres peer\n...\n","local all postgres md5\n","sudo systemctl restart postgresql\n","psql -U postgres -d postgres -h databasehostname\n","creation-of-additional-database-users","Creation of additional database users","create user myuser with encrypted password 'Supersecret';\nCREATE ROLE\n\npostgres=# \\du\n List of roles\n Role name | Attributes | Member of\n-----------+------------------------------------------------------------+-----------\n myuser | | {}\n postgres | Superuser, Create role, Create DB, Replication, Bypass RLS | {}\n","creation-of-additional-databases","Creation of additional databases","CREATE DATABASE dbname OWNER myuser;\nCREATE DATABASE\n\npostgres=# \\l\n List of databases\n Name | Owner | Encoding | Collate | Ctype | Access privileges\n-----------+----------+----------+-------------+-------------+-----------------------\n dbname | myuser | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n postgres | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n template0 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c\u002Fpostgres +\n | | | | | postgres=CTc\u002Fpostgres\n template1 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c\u002Fpostgres +\n | | | | | postgres=CTc\u002Fpostgres\n","postgres=# alter database dbname owner to myuser;\nALTER DATABASE\n","Postgress Setup","\u002Fsql\u002Fpostgress-setup","root","A local connection (from the database server) can be done by the following command:","The password for the "," database user can be set the the quick command ","\\password","\nor by ","alter user postgres password 'Supersecret'",". A connection using the "," user\nis still not possible from the \"outside\" hence to the default settings in the ","h3","In order to allow connections of the "," database user not using OS user\nauthentication, you have to update the "," which can be found under\n","\u002Fetc\u002Fpostgresql\u002F12\u002Fmain\u002Fpg_hba.conf","shell","Change the last section of the above line to ","md5","A restart is required in order to apply the new configuration:","Now a connection from outside the database host is possible e.g.","A database user can be created by the following command:","One can create new Postgres databases within an instance. Therefore you can use the ","psql","\ncommand to login (see above).","You can leave the ","OWNER"," section of the command, when doing so, the current user will become\nowner of the newly created database.","To change the owner of an existing database later, you can use the following command:","..."))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:N,_path:O}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-OeCNLqMRmJ":{_path:O,_dir:m,_draft:r,_partial:r,_locale:"en",_empty:r,title:N,description:f,excerpt:{type:P,children:[{type:a,tag:k,props:{id:s},children:[{type:b,value:t}]},{type:a,tag:d,props:{code:u,language:l},children:[{type:a,tag:i,props:{},children:[{type:a,tag:d,props:{__ignoreMap:f},children:[{type:b,value:u}]}]}]},{type:a,tag:k,props:{id:v},children:[{type:b,value:w}]},{type:a,tag:g,props:{},children:[{type:b,value:Q}]},{type:a,tag:d,props:{code:x,language:l},children:[{type:a,tag:i,props:{},children:[{type:a,tag:d,props:{__ignoreMap:f},children:[{type:b,value:x}]}]}]},{type:a,tag:k,props:{id:y},children:[{type:b,value:z}]},{type:a,tag:g,props:{},children:[{type:b,value:R},{type:a,tag:e,props:{},children:[{type:b,value:o}]},{type:b,value:S},{type:a,tag:e,props:{},children:[{type:b,value:T}]},{type:b,value:U},{type:a,tag:e,props:{},children:[{type:b,value:V}]},{type:b,value:W},{type:a,tag:e,props:{},children:[{type:b,value:o}]},{type:b,value:X},{type:a,tag:e,props:{},children:[{type:b,value:q}]},{type:b,value:p}]},{type:a,tag:Y,props:{id:A},children:[{type:b,value:B}]},{type:a,tag:g,props:{},children:[{type:b,value:Z},{type:a,tag:e,props:{},children:[{type:b,value:o}]},{type:b,value:_},{type:a,tag:e,props:{},children:[{type:b,value:q}]},{type:b,value:$},{type:a,tag:e,props:{},children:[{type:b,value:aa}]},{type:b,value:p}]},{type:a,tag:d,props:{code:C,language:ab},children:[{type:a,tag:i,props:{},children:[{type:a,tag:d,props:{__ignoreMap:f},children:[{type:b,value:C}]}]}]},{type:a,tag:g,props:{},children:[{type:b,value:ac},{type:a,tag:e,props:{},children:[{type:b,value:ad}]},{type:b,value:p}]},{type:a,tag:d,props:{code:D},children:[{type:a,tag:i,props:{},children:[{type:a,tag:d,props:{__ignoreMap:f},children:[{type:b,value:D}]}]}]},{type:a,tag:g,props:{},children:[{type:b,value:ae}]},{type:a,tag:d,props:{code:E,language:l},children:[{type:a,tag:i,props:{},children:[{type:a,tag:d,props:{__ignoreMap:f},children:[{type:b,value:E}]}]}]},{type:a,tag:g,props:{},children:[{type:b,value:af}]},{type:a,tag:d,props:{code:F,language:l},children:[{type:a,tag:i,props:{},children:[{type:a,tag:d,props:{__ignoreMap:f},children:[{type:b,value:F}]}]}]},{type:a,tag:k,props:{id:G},children:[{type:b,value:H}]},{type:a,tag:g,props:{},children:[{type:b,value:ag}]},{type:a,tag:d,props:{code:I,language:m},children:[{type:a,tag:i,props:{},children:[{type:a,tag:d,props:{__ignoreMap:f},children:[{type:b,value:I}]}]}]},{type:a,tag:k,props:{id:J},children:[{type:b,value:K}]},{type:a,tag:g,props:{},children:[{type:b,value:ah},{type:a,tag:e,props:{},children:[{type:b,value:ai}]},{type:b,value:aj}]},{type:a,tag:d,props:{code:L,language:m},children:[{type:a,tag:i,props:{},children:[{type:a,tag:d,props:{__ignoreMap:f},children:[{type:b,value:L}]}]}]},{type:a,tag:g,props:{},children:[{type:b,value:ak},{type:a,tag:e,props:{},children:[{type:b,value:al}]},{type:b,value:am}]},{type:a,tag:g,props:{},children:[{type:b,value:an}]},{type:a,tag:d,props:{code:M,language:m},children:[{type:a,tag:i,props:{},children:[{type:a,tag:d,props:{__ignoreMap:f},children:[{type:b,value:M}]}]}]}]},body:{type:P,children:[{type:a,tag:k,props:{id:s},children:[{type:b,value:t}]},{type:a,tag:d,props:{code:u,language:l},children:[{type:a,tag:i,props:{},children:[{type:a,tag:d,props:{__ignoreMap:f},children:[{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:j},children:[{type:b,value:"sudo apt update"}]}]},{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:j},children:[{type:b,value:"sudo apt install -y postgresql postgresql-contrib postgresql-client"}]}]},{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:j},children:[{type:b,value:"sudo systemctl status postgresql.service"}]}]}]}]}]},{type:a,tag:k,props:{id:v},children:[{type:b,value:w}]},{type:a,tag:g,props:{},children:[{type:b,value:Q}]},{type:a,tag:d,props:{code:x,language:l},children:[{type:a,tag:i,props:{},children:[{type:a,tag:d,props:{__ignoreMap:f},children:[{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:j},children:[{type:b,value:"sudo -u postgres psql"}]}]},{type:a,tag:c,props:{class:h},children:[]},{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:j},children:[{type:b,value:"psql (12.12 (Ubuntu 12.12-0ubuntu0.20.04.1))"}]}]},{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:j},children:[{type:b,value:"Type "}]},{type:a,tag:c,props:{class:"ct-cff873"},children:[{type:b,value:"\"help\""}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:" "}]},{type:a,tag:c,props:{class:"ct-18a817"},children:[{type:b,value:"for"}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:" help."}]}]},{type:a,tag:c,props:{class:h},children:[]},{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:j},children:[{type:b,value:"postgres="}]},{type:a,tag:c,props:{class:"ct-127309"},children:[{type:b,value:"#"}]}]}]}]}]},{type:a,tag:k,props:{id:y},children:[{type:b,value:z}]},{type:a,tag:g,props:{},children:[{type:b,value:R},{type:a,tag:e,props:{},children:[{type:b,value:o}]},{type:b,value:S},{type:a,tag:e,props:{},children:[{type:b,value:T}]},{type:b,value:U},{type:a,tag:e,props:{},children:[{type:b,value:V}]},{type:b,value:W},{type:a,tag:e,props:{},children:[{type:b,value:o}]},{type:b,value:X},{type:a,tag:e,props:{},children:[{type:b,value:q}]},{type:b,value:p}]},{type:a,tag:Y,props:{id:A},children:[{type:b,value:B}]},{type:a,tag:g,props:{},children:[{type:b,value:Z},{type:a,tag:e,props:{},children:[{type:b,value:o}]},{type:b,value:_},{type:a,tag:e,props:{},children:[{type:b,value:q}]},{type:b,value:$},{type:a,tag:e,props:{},children:[{type:b,value:aa}]},{type:b,value:p}]},{type:a,tag:d,props:{code:C,language:ab},children:[{type:a,tag:i,props:{},children:[{type:a,tag:d,props:{__ignoreMap:f},children:[{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:j},children:[{type:b,value:"sudo vi \u002Fetc\u002Fpostgresql\u002F12\u002Fmain\u002Fpg_hba.conf"}]}]},{type:a,tag:c,props:{class:h},children:[]},{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:j},children:[{type:b,value:ao}]}]},{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:"ct-b12528"},children:[{type:b,value:"local"}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:" all postgres peer"}]}]},{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:j},children:[{type:b,value:ao}]}]}]}]}]},{type:a,tag:g,props:{},children:[{type:b,value:ac},{type:a,tag:e,props:{},children:[{type:b,value:ad}]},{type:b,value:p}]},{type:a,tag:d,props:{code:D},children:[{type:a,tag:i,props:{},children:[{type:a,tag:d,props:{__ignoreMap:f},children:[{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{},children:[{type:b,value:"local all postgres md5"}]}]}]}]}]},{type:a,tag:g,props:{},children:[{type:b,value:ae}]},{type:a,tag:d,props:{code:E,language:l},children:[{type:a,tag:i,props:{},children:[{type:a,tag:d,props:{__ignoreMap:f},children:[{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:j},children:[{type:b,value:"sudo systemctl restart postgresql"}]}]}]}]}]},{type:a,tag:g,props:{},children:[{type:b,value:af}]},{type:a,tag:d,props:{code:F,language:l},children:[{type:a,tag:i,props:{},children:[{type:a,tag:d,props:{__ignoreMap:f},children:[{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{class:j},children:[{type:b,value:"psql -U postgres -d postgres -h databasehostname"}]}]}]}]}]},{type:a,tag:k,props:{id:G},children:[{type:b,value:H}]},{type:a,tag:g,props:{},children:[{type:b,value:ag}]},{type:a,tag:d,props:{code:I,language:m},children:[{type:a,tag:i,props:{},children:[{type:a,tag:d,props:{__ignoreMap:f},children:[{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{},children:[{type:b,value:"create user myuser with encrypted password 'Supersecret';\nCREATE ROLE\n\npostgres=# \\du\n List of roles\n Role name | Attributes | Member of\n-----------+------------------------------------------------------------+-----------\n myuser | | {}\n postgres | Superuser, Create role, Create DB, Replication, Bypass RLS | {}"}]}]}]}]}]},{type:a,tag:k,props:{id:J},children:[{type:b,value:K}]},{type:a,tag:g,props:{},children:[{type:b,value:ah},{type:a,tag:e,props:{},children:[{type:b,value:ai}]},{type:b,value:aj}]},{type:a,tag:d,props:{code:L,language:m},children:[{type:a,tag:i,props:{},children:[{type:a,tag:d,props:{__ignoreMap:f},children:[{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{},children:[{type:b,value:"CREATE DATABASE dbname OWNER myuser;\nCREATE DATABASE\n\npostgres=# \\l\n List of databases\n Name | Owner | Encoding | Collate | Ctype | Access privileges\n-----------+----------+----------+-------------+-------------+-----------------------\n dbname | myuser | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n postgres | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n template0 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c\u002Fpostgres +\n | | | | | postgres=CTc\u002Fpostgres\n template1 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c\u002Fpostgres +\n | | | | | postgres=CTc\u002Fpostgres"}]}]}]}]}]},{type:a,tag:g,props:{},children:[{type:b,value:ak},{type:a,tag:e,props:{},children:[{type:b,value:al}]},{type:b,value:am}]},{type:a,tag:g,props:{},children:[{type:b,value:an}]},{type:a,tag:d,props:{code:M,language:m},children:[{type:a,tag:i,props:{},children:[{type:a,tag:d,props:{__ignoreMap:f},children:[{type:a,tag:c,props:{class:h},children:[{type:a,tag:c,props:{},children:[{type:b,value:"postgres=# alter database dbname owner to myuser;\nALTER DATABASE"}]}]}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-b12528{color:#FF7B72}.ct-127309{color:#8B949E}.ct-18a817{color:#FF7B72}.ct-cff873{color:#A5D6FF}.ct-3c68ed{color:#C9D1D9}.light .ct-3c68ed{color:#657B83}.light .ct-cff873{color:#2AA198}.light .ct-18a817{color:#859900}.light .ct-127309{color:#93A1A1}.light .ct-b12528{color:#073642}"}]}],toc:{title:f,searchDepth:n,depth:n,links:[{id:s,depth:n,text:t},{id:v,depth:n,text:w},{id:y,depth:n,text:z,children:[{id:A,depth:3,text:B}]},{id:G,depth:n,text:H},{id:J,depth:n,text:K}]}},_type:"markdown",_id:"content:SQL:Postgress setup.md",_source:"content",_file:"SQL\u002FPostgress setup.md",_extension:"md"}},prerenderedAt:1703697993251}}("element","text","span","code","code-inline","","p","line","pre","ct-3c68ed","h2","bash","sql",2,"postgres",".","pg_hba.conf",false,"install-postgresql-12-on-ubuntu-2004-lts","Install PostgreSQL 12 on Ubuntu 20.04 LTS","sudo apt update\nsudo apt install -y postgresql postgresql-contrib postgresql-client\nsudo systemctl status postgresql.service\n","initial-database-connection","Initial database connection","sudo -u postgres psql\n\npsql (12.12 (Ubuntu 12.12-0ubuntu0.20.04.1))\nType \"help\" for help.\n\npostgres=#\n","set-password-for-postgres-database-user","Set password for postgres database user","update-pg_hbaconf-to-allow-postgres-user-connections-with-password","Update pg_hba.conf to allow postgres user connections with password","sudo vi \u002Fetc\u002Fpostgresql\u002F12\u002Fmain\u002Fpg_hba.conf\n\n...\nlocal all postgres peer\n...\n","local all postgres md5\n","sudo systemctl restart postgresql\n","psql -U postgres -d postgres -h databasehostname\n","creation-of-additional-database-users","Creation of additional database users","create user myuser with encrypted password 'Supersecret';\nCREATE ROLE\n\npostgres=# \\du\n List of roles\n Role name | Attributes | Member of\n-----------+------------------------------------------------------------+-----------\n myuser | | {}\n postgres | Superuser, Create role, Create DB, Replication, Bypass RLS | {}\n","creation-of-additional-databases","Creation of additional databases","CREATE DATABASE dbname OWNER myuser;\nCREATE DATABASE\n\npostgres=# \\l\n List of databases\n Name | Owner | Encoding | Collate | Ctype | Access privileges\n-----------+----------+----------+-------------+-------------+-----------------------\n dbname | myuser | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n postgres | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 |\n template0 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c\u002Fpostgres +\n | | | | | postgres=CTc\u002Fpostgres\n template1 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c\u002Fpostgres +\n | | | | | postgres=CTc\u002Fpostgres\n","postgres=# alter database dbname owner to myuser;\nALTER DATABASE\n","Postgress Setup","\u002Fsql\u002Fpostgress-setup","root","A local connection (from the database server) can be done by the following command:","The password for the "," database user can be set the the quick command ","\\password","\nor by ","alter user postgres password 'Supersecret'",". A connection using the "," user\nis still not possible from the \"outside\" hence to the default settings in the ","h3","In order to allow connections of the "," database user not using OS user\nauthentication, you have to update the "," which can be found under\n","\u002Fetc\u002Fpostgresql\u002F12\u002Fmain\u002Fpg_hba.conf","shell","Change the last section of the above line to ","md5","A restart is required in order to apply the new configuration:","Now a connection from outside the database host is possible e.g.","A database user can be created by the following command:","One can create new Postgres databases within an instance. Therefore you can use the ","psql","\ncommand to login (see above).","You can leave the ","OWNER"," section of the command, when doing so, the current user will become\nowner of the newly created database.","To change the owner of an existing database later, you can use the following command:","..."))
\ No newline at end of file
diff --git a/docs/sql/postgress-setup/index.html b/docs/sql/postgress-setup/index.html
index 49bb4d0..b14c87c 100644
--- a/docs/sql/postgress-setup/index.html
+++ b/docs/sql/postgress-setup/index.html
@@ -2,11 +2,11 @@
<html data-head-attrs="">
<head><title>Postgress Setup • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="head:count" content="2"><link rel="modulepreload" href="/sql/postgress-setup/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseH2.d950f051.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCodeInline.d9bcf614.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseH3.462e5228.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a aria-current="page" href="/sql/postgress-setup" class="router-link-active _active_192pu_81 _link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Postgress Setup</h1><article><div><h2 id="install-postgresql-12-on-ubuntu-2004-lts"><a href="#install-postgresql-12-on-ubuntu-2004-lts"><!--[-->Install PostgreSQL 12 on Ubuntu 20.04 LTS<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>bash</span></button><!--[--><pre><code><span class="line"><span class="ct-b382d3">sudo apt update</span></span><span class="line"><span class="ct-b382d3">sudo apt install -y postgresql postgresql-contrib postgresql-client</span></span><span class="line"><span class="ct-b382d3">sudo systemctl status postgresql.service</span></span></code></pre><!--]--></div><h2 id="initial-database-connection"><a href="#initial-database-connection"><!--[-->Initial database connection<!--]--></a></h2><p><!--[-->A local connection (from the database server) can be done by the following command:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>bash</span></button><!--[--><pre><code><span class="line"><span class="ct-b382d3">sudo -u postgres psql</span></span><span class="line"></span><span class="line"><span class="ct-b382d3">psql (12.12 (Ubuntu 12.12-0ubuntu0.20.04.1))</span></span><span class="line"><span class="ct-b382d3">Type </span><span class="ct-3c3be0">"help"</span><span class="ct-b382d3"> </span><span class="ct-99cc06">for</span><span class="ct-b382d3"> help.</span></span><span class="line"></span><span class="line"><span class="ct-b382d3">postgres=</span><span class="ct-6808e5">#</span></span></code></pre><!--]--></div><h2 id="set-password-for-postgres-database-user"><a href="#set-password-for-postgres-database-user"><!--[-->Set password for postgres database user<!--]--></a></h2><p><!--[-->The password for the <code><!--[-->postgres<!--]--></code> database user can be set the the quick command <code><!--[-->\password<!--]--></code>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a aria-current="page" href="/sql/postgress-setup" class="router-link-active _active_192pu_81 _link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Postgress Setup</h1><article><div><h2 id="install-postgresql-12-on-ubuntu-2004-lts"><a href="#install-postgresql-12-on-ubuntu-2004-lts"><!--[-->Install PostgreSQL 12 on Ubuntu 20.04 LTS<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>bash</span></button><!--[--><pre><code><span class="line"><span class="ct-3c68ed">sudo apt update</span></span><span class="line"><span class="ct-3c68ed">sudo apt install -y postgresql postgresql-contrib postgresql-client</span></span><span class="line"><span class="ct-3c68ed">sudo systemctl status postgresql.service</span></span></code></pre><!--]--></div><h2 id="initial-database-connection"><a href="#initial-database-connection"><!--[-->Initial database connection<!--]--></a></h2><p><!--[-->A local connection (from the database server) can be done by the following command:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>bash</span></button><!--[--><pre><code><span class="line"><span class="ct-3c68ed">sudo -u postgres psql</span></span><span class="line"></span><span class="line"><span class="ct-3c68ed">psql (12.12 (Ubuntu 12.12-0ubuntu0.20.04.1))</span></span><span class="line"><span class="ct-3c68ed">Type </span><span class="ct-cff873">"help"</span><span class="ct-3c68ed"> </span><span class="ct-18a817">for</span><span class="ct-3c68ed"> help.</span></span><span class="line"></span><span class="line"><span class="ct-3c68ed">postgres=</span><span class="ct-127309">#</span></span></code></pre><!--]--></div><h2 id="set-password-for-postgres-database-user"><a href="#set-password-for-postgres-database-user"><!--[-->Set password for postgres database user<!--]--></a></h2><p><!--[-->The password for the <code><!--[-->postgres<!--]--></code> database user can be set the the quick command <code><!--[-->\password<!--]--></code>
or by <code><!--[-->alter user postgres password 'Supersecret'<!--]--></code>. A connection using the <code><!--[-->postgres<!--]--></code> user
is still not possible from the "outside" hence to the default settings in the <code><!--[-->pg_hba.conf<!--]--></code>.<!--]--></p><h3 id="update-pg_hbaconf-to-allow-postgres-user-connections-with-password"><a href="#update-pg_hbaconf-to-allow-postgres-user-connections-with-password"><!--[-->Update pg_hba.conf to allow postgres user connections with password<!--]--></a></h3><p><!--[-->In order to allow connections of the <code><!--[-->postgres<!--]--></code> database user not using OS user
authentication, you have to update the <code><!--[-->pg_hba.conf<!--]--></code> which can be found under
-<code><!--[-->/etc/postgresql/12/main/pg_hba.conf<!--]--></code>.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-b382d3">sudo vi /etc/postgresql/12/main/pg_hba.conf</span></span><span class="line"></span><span class="line"><span class="ct-b382d3">...</span></span><span class="line"><span class="ct-51dc37">local</span><span class="ct-b382d3"> all postgres peer</span></span><span class="line"><span class="ct-b382d3">...</span></span></code></pre><!--]--></div><p><!--[-->Change the last section of the above line to <code><!--[-->md5<!--]--></code>.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><!----></button><!--[--><pre><code><span class="line"><span>local all postgres md5</span></span></code></pre><!--]--></div><p><!--[-->A restart is required in order to apply the new configuration:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>bash</span></button><!--[--><pre><code><span class="line"><span class="ct-b382d3">sudo systemctl restart postgresql</span></span></code></pre><!--]--></div><p><!--[-->Now a connection from outside the database host is possible e.g.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>bash</span></button><!--[--><pre><code><span class="line"><span class="ct-b382d3">psql -U postgres -d postgres -h databasehostname</span></span></code></pre><!--]--></div><h2 id="creation-of-additional-database-users"><a href="#creation-of-additional-database-users"><!--[-->Creation of additional database users<!--]--></a></h2><p><!--[-->A database user can be created by the following command:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>sql</span></button><!--[--><pre><code><span class="line"><span>create user myuser with encrypted password 'Supersecret';
+<code><!--[-->/etc/postgresql/12/main/pg_hba.conf<!--]--></code>.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>shell</span></button><!--[--><pre><code><span class="line"><span class="ct-3c68ed">sudo vi /etc/postgresql/12/main/pg_hba.conf</span></span><span class="line"></span><span class="line"><span class="ct-3c68ed">...</span></span><span class="line"><span class="ct-b12528">local</span><span class="ct-3c68ed"> all postgres peer</span></span><span class="line"><span class="ct-3c68ed">...</span></span></code></pre><!--]--></div><p><!--[-->Change the last section of the above line to <code><!--[-->md5<!--]--></code>.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><!----></button><!--[--><pre><code><span class="line"><span>local all postgres md5</span></span></code></pre><!--]--></div><p><!--[-->A restart is required in order to apply the new configuration:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>bash</span></button><!--[--><pre><code><span class="line"><span class="ct-3c68ed">sudo systemctl restart postgresql</span></span></code></pre><!--]--></div><p><!--[-->Now a connection from outside the database host is possible e.g.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>bash</span></button><!--[--><pre><code><span class="line"><span class="ct-3c68ed">psql -U postgres -d postgres -h databasehostname</span></span></code></pre><!--]--></div><h2 id="creation-of-additional-database-users"><a href="#creation-of-additional-database-users"><!--[-->Creation of additional database users<!--]--></a></h2><p><!--[-->A database user can be created by the following command:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>sql</span></button><!--[--><pre><code><span class="line"><span>create user myuser with encrypted password 'Supersecret';
CREATE ROLE
postgres=# \du
@@ -29,5 +29,5 @@ postgres=# \l
template1 | postgres | UTF8 | en_US.UTF-8 | en_US.UTF-8 | =c/postgres +
| | | | | postgres=CTc/postgres</span></span></code></pre><!--]--></div><p><!--[-->You can leave the <code><!--[-->OWNER<!--]--></code> section of the command, when doing so, the current user will become
owner of the newly created database.<!--]--></p><p><!--[-->To change the owner of an existing database later, you can use the following command:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>sql</span></button><!--[--><pre><code><span class="line"><span>postgres=# alter database dbname owner to myuser;
-ALTER DATABASE</span></span></code></pre><!--]--></div><style>.ct-51dc37{color:#FF7B72}.ct-6808e5{color:#8B949E}.ct-99cc06{color:#FF7B72}.ct-3c3be0{color:#A5D6FF}.ct-b382d3{color:#C9D1D9}.light .ct-b382d3{color:#657B83}.light .ct-3c3be0{color:#2AA198}.light .ct-99cc06{color:#859900}.light .ct-6808e5{color:#93A1A1}.light .ct-51dc37{color:#073642}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/sql/postgress-setup/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695531704}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseH3.462e5228.js" crossorigin></script></body>
+ALTER DATABASE</span></span></code></pre><!--]--></div><style>.ct-b12528{color:#FF7B72}.ct-127309{color:#8B949E}.ct-18a817{color:#FF7B72}.ct-cff873{color:#A5D6FF}.ct-3c68ed{color:#C9D1D9}.light .ct-3c68ed{color:#657B83}.light .ct-cff873{color:#2AA198}.light .ct-18a817{color:#859900}.light .ct-127309{color:#93A1A1}.light .ct-b12528{color:#073642}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/sql/postgress-setup/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697993251}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseH3.462e5228.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/typescript/add-global-variable-to-window/_payload.js b/docs/typescript/add-global-variable-to-window/_payload.js
index 531a23f..88173c6 100644
--- a/docs/typescript/add-global-variable-to-window/_payload.js
+++ b/docs/typescript/add-global-variable-to-window/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av,aw,ax,ay,az,aA,aB,aC,aD,aE,aF,aG,aH,aI,aJ){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:N,_path:O},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-Of3zHqmk1n":{_path:O,_dir:k,_draft:z,_partial:z,_locale:"en",_empty:z,title:N,description:"Sometimes you want to add global variable to your window. That thing's called global module augmentation.",excerpt:{type:P,children:[{type:a,tag:i,props:{},children:[{type:b,value:Q},{type:a,tag:f,props:{},children:[{type:b,value:s}]},{type:b,value:R},{type:a,tag:n,props:{href:S,rel:[t]},children:[{type:b,value:T}]},{type:b,value:A}]},{type:a,tag:i,props:{},children:[{type:b,value:U},{type:a,tag:f,props:{},children:[{type:b,value:V}]},{type:b,value:W},{type:a,tag:f,props:{},children:[{type:b,value:s}]},{type:b,value:X},{type:a,tag:f,props:{},children:[{type:b,value:Y}]},{type:b,value:Z}]},{type:a,tag:g,props:{code:B,language:k},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:b,value:B}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:_},{type:a,tag:f,props:{},children:[{type:b,value:$}]},{type:b,value:aa},{type:a,tag:f,props:{},children:[{type:b,value:ab}]},{type:b,value:ac},{type:a,tag:n,props:{href:ad},children:[{type:b,value:ae}]},{type:b,value:af}]},{type:a,tag:ag,props:{id:C},children:[{type:b,value:D}]},{type:a,tag:i,props:{},children:[{type:b,value:ah},{type:a,tag:f,props:{},children:[{type:b,value:p}]},{type:b,value:ai}]},{type:a,tag:g,props:{code:E,language:k},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:b,value:E}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:aj},{type:a,tag:f,props:{},children:[{type:b,value:ak}]},{type:b,value:al},{type:a,tag:n,props:{href:am,rel:[t]},children:[{type:b,value:an}]},{type:b,value:u}]},{type:a,tag:g,props:{code:F,language:k},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:b,value:F}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:ao},{type:a,tag:f,props:{},children:[{type:b,value:ap}]},{type:b,value:aq},{type:a,tag:f,props:{},children:[{type:b,value:ar}]},{type:b,value:as}]},{type:a,tag:g,props:{code:G,language:k},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:b,value:G}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:at},{type:a,tag:n,props:{href:au},children:[{type:b,value:av}]},{type:b,value:aw}]}]},body:{type:P,children:[{type:a,tag:i,props:{},children:[{type:b,value:Q},{type:a,tag:f,props:{},children:[{type:b,value:s}]},{type:b,value:R},{type:a,tag:n,props:{href:S,rel:[t]},children:[{type:b,value:T}]},{type:b,value:A}]},{type:a,tag:i,props:{},children:[{type:b,value:U},{type:a,tag:f,props:{},children:[{type:b,value:V}]},{type:b,value:W},{type:a,tag:f,props:{},children:[{type:b,value:s}]},{type:b,value:X},{type:a,tag:f,props:{},children:[{type:b,value:Y}]},{type:b,value:Z}]},{type:a,tag:g,props:{code:B,language:k},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:m},children:[{type:b,value:ax}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:h}]},{type:a,tag:c,props:{class:v},children:[{type:b,value:"global"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:q}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:H}]},{type:a,tag:c,props:{class:m},children:[{type:b,value:ay}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:h}]},{type:a,tag:c,props:{class:I},children:[{type:b,value:"Window"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:q}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:az}]},{type:a,tag:c,props:{class:w},children:[{type:b,value:J}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:u}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:aA}]},{type:a,tag:c,props:{class:m},children:[{type:b,value:aB}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:h}]},{type:a,tag:c,props:{class:aC},children:[{type:b,value:aD}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:aE}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:K}]}]}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:_},{type:a,tag:f,props:{},children:[{type:b,value:$}]},{type:b,value:aa},{type:a,tag:f,props:{},children:[{type:b,value:ab}]},{type:b,value:ac},{type:a,tag:n,props:{href:ad},children:[{type:b,value:ae}]},{type:b,value:af}]},{type:a,tag:ag,props:{id:C},children:[{type:b,value:D}]},{type:a,tag:i,props:{},children:[{type:b,value:ah},{type:a,tag:f,props:{},children:[{type:b,value:p}]},{type:b,value:ai}]},{type:a,tag:g,props:{code:E,language:k},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:x},children:[{type:b,value:"\u002F\u002F Sample.ts"}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:j},children:[{type:b,value:"export"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:h}]},{type:a,tag:c,props:{class:m},children:[{type:b,value:"class"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:h}]},{type:a,tag:c,props:{class:I},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:q}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:H}]},{type:a,tag:c,props:{class:x},children:[{type:b,value:"\u002F\u002F nothing :-)"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:K}]}]}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:aj},{type:a,tag:f,props:{},children:[{type:b,value:ak}]},{type:b,value:al},{type:a,tag:n,props:{href:am,rel:[t]},children:[{type:b,value:an}]},{type:b,value:u}]},{type:a,tag:g,props:{code:F,language:k},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:x},children:[{type:b,value:"\u002F\u002F fancyThings.ts"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:j},children:[{type:b,value:L}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:aF}]},{type:a,tag:c,props:{class:v},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:aG}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:aH}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:h}]},{type:a,tag:c,props:{class:y},children:[{type:b,value:aI}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:m},children:[{type:b,value:ax}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:h}]},{type:a,tag:c,props:{class:m},children:[{type:b,value:"module"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:h}]},{type:a,tag:c,props:{class:y},children:[{type:b,value:aI}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:q}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:H}]},{type:a,tag:c,props:{class:m},children:[{type:b,value:ay}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:h}]},{type:a,tag:c,props:{class:I},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:q}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:az}]},{type:a,tag:c,props:{class:w},children:[{type:b,value:J}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:u}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:aA}]},{type:a,tag:c,props:{class:m},children:[{type:b,value:aB}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:h}]},{type:a,tag:c,props:{class:aC},children:[{type:b,value:aD}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:aE}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:K}]}]}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:ao},{type:a,tag:f,props:{},children:[{type:b,value:ap}]},{type:b,value:aq},{type:a,tag:f,props:{},children:[{type:b,value:ar}]},{type:b,value:as}]},{type:a,tag:g,props:{code:G,language:k},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:j},children:[{type:b,value:L}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:aF}]},{type:a,tag:c,props:{class:v},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:aG}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:aH}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:h}]},{type:a,tag:c,props:{class:y},children:[{type:b,value:"\".\u002Fsample\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:j},children:[{type:b,value:L}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:h}]},{type:a,tag:c,props:{class:y},children:[{type:b,value:"\".\u002FfancyThings\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:m},children:[{type:b,value:"const"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:h}]},{type:a,tag:c,props:{class:"ct-f10d77"},children:[{type:b,value:aJ}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:h}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:"="}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:h}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:"new"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:h}]},{type:a,tag:c,props:{class:w},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"();"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:v},children:[{type:b,value:aJ}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:A}]},{type:a,tag:c,props:{class:w},children:[{type:b,value:J}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"(); "}]},{type:a,tag:c,props:{class:x},children:[{type:b,value:"\u002F\u002F ok"}]}]}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:at},{type:a,tag:n,props:{href:au},children:[{type:b,value:av}]},{type:b,value:aw}]},{type:a,tag:"style",children:[{type:b,value:".ct-f10d77{color:#79C0FF}.ct-d12e32{color:#A5D6FF}.ct-efa672{color:#8B949E}.ct-0b4a2b{color:#79C0FF}.ct-c7b69f{color:#FF7B72}.ct-233ec4{color:#D2A8FF}.ct-24d477{color:#FFA657}.ct-4278e1{color:#C9D1D9}.ct-b2c08f{color:#C9D1D9}.ct-05d7fc{color:#FF7B72}.light .ct-05d7fc{color:#073642}.light .ct-b2c08f{color:#657B83}.light .ct-4278e1{color:#268BD2}.light .ct-24d477{color:#268BD2}.light .ct-233ec4{color:#268BD2}.light .ct-c7b69f{color:#859900}.light .ct-0b4a2b{color:#859900}.light .ct-efa672{color:#93A1A1}.light .ct-d12e32{color:#2AA198}.light .ct-f10d77{color:#268BD2}"}]}],toc:{title:l,searchDepth:M,depth:M,links:[{id:C,depth:M,text:D}]}},_type:"markdown",_id:"content:Typescript:Add global variable to window.md",_source:"content",_file:"Typescript\u002FAdd global variable to window.md",_extension:"md"}},prerenderedAt:1703695531749}}("element","text","span","ct-b2c08f","line","code-inline","code"," ","p","ct-c7b69f","typescript","","ct-05d7fc","a","pre","Sample"," {",";","window","nofollow",":","ct-4278e1","ct-233ec4","ct-efa672","ct-d12e32",false,".","declare global {\n interface Window {\n doFancyThings: () =\u003E void;\n }\n}\n","augmenting-existing-interface","Augmenting existing interface","\u002F\u002F Sample.ts\n\nexport class Sample {\n \u002F\u002F nothing :-)\n}\n","\u002F\u002F fancyThings.ts\nimport { Sample } from \".\u002FSample\";\n\ndeclare module \".\u002FSample\" {\n interface Sample {\n doFancyThings: () =\u003E void;\n }\n}\n","import { Sample } from \".\u002Fsample\";\nimport \".\u002FfancyThings\";\n\nconst sample = new Sample();\nsample.doFancyThings(); \u002F\u002F ok\n"," ","ct-24d477","doFancyThings","}","import",2,"Add Global Variable To Window","\u002Ftypescript\u002Fadd-global-variable-to-window","root","Sometimes you want to add global variable to your ",". That thing's called ","https:\u002F\u002Fwww.typescriptlang.org\u002Fdocs\u002Fhandbook\u002Fdeclaration-merging.html#global-augmentation","global module augmentation","Say you need to call ","window.doFancyThings()",". For that you should augment global "," interface in ","*.d.ts"," file:","This is useful for declaring global ","window.ethereum"," (or ","window.web3",") in ","\u002Fblockchain\u002FCommon%20typescript%20examples","blockchain"," projects with typescript, which use wallet browser extensions.","h2","For example, you have class "," without any functionality:","Then you want extend it with ","doFancyThings()"," method. That can be achieved with said ","https:\u002F\u002Fwww.typescriptlang.org\u002Fdocs\u002Fhandbook\u002Fdeclaration-merging.html#module-augmentation","module augmentation","Now you can call ","sample.doFancyThings()"," by importing both ",".ts"," files:","This example is useful for ",".\u002FFrontend\u002FVue\u002FAdding%20global%20properties%20to%20component","adding global properties to component"," in vue.js.","declare","interface"," "," () ","=\u003E","ct-0b4a2b","void"," }"," { "," } ","from","\".\u002FSample\"","sample"))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av,aw,ax,ay,az,aA,aB,aC,aD,aE,aF,aG,aH,aI,aJ){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:N,_path:O},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-Of3zHqmk1n":{_path:O,_dir:k,_draft:z,_partial:z,_locale:"en",_empty:z,title:N,description:"Sometimes you want to add global variable to your window. That thing's called global module augmentation.",excerpt:{type:P,children:[{type:a,tag:i,props:{},children:[{type:b,value:Q},{type:a,tag:f,props:{},children:[{type:b,value:s}]},{type:b,value:R},{type:a,tag:n,props:{href:S,rel:[t]},children:[{type:b,value:T}]},{type:b,value:A}]},{type:a,tag:i,props:{},children:[{type:b,value:U},{type:a,tag:f,props:{},children:[{type:b,value:V}]},{type:b,value:W},{type:a,tag:f,props:{},children:[{type:b,value:s}]},{type:b,value:X},{type:a,tag:f,props:{},children:[{type:b,value:Y}]},{type:b,value:Z}]},{type:a,tag:g,props:{code:B,language:k},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:b,value:B}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:_},{type:a,tag:f,props:{},children:[{type:b,value:$}]},{type:b,value:aa},{type:a,tag:f,props:{},children:[{type:b,value:ab}]},{type:b,value:ac},{type:a,tag:n,props:{href:ad},children:[{type:b,value:ae}]},{type:b,value:af}]},{type:a,tag:ag,props:{id:C},children:[{type:b,value:D}]},{type:a,tag:i,props:{},children:[{type:b,value:ah},{type:a,tag:f,props:{},children:[{type:b,value:p}]},{type:b,value:ai}]},{type:a,tag:g,props:{code:E,language:k},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:b,value:E}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:aj},{type:a,tag:f,props:{},children:[{type:b,value:ak}]},{type:b,value:al},{type:a,tag:n,props:{href:am,rel:[t]},children:[{type:b,value:an}]},{type:b,value:u}]},{type:a,tag:g,props:{code:F,language:k},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:b,value:F}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:ao},{type:a,tag:f,props:{},children:[{type:b,value:ap}]},{type:b,value:aq},{type:a,tag:f,props:{},children:[{type:b,value:ar}]},{type:b,value:as}]},{type:a,tag:g,props:{code:G,language:k},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:b,value:G}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:at},{type:a,tag:n,props:{href:au},children:[{type:b,value:av}]},{type:b,value:aw}]}]},body:{type:P,children:[{type:a,tag:i,props:{},children:[{type:b,value:Q},{type:a,tag:f,props:{},children:[{type:b,value:s}]},{type:b,value:R},{type:a,tag:n,props:{href:S,rel:[t]},children:[{type:b,value:T}]},{type:b,value:A}]},{type:a,tag:i,props:{},children:[{type:b,value:U},{type:a,tag:f,props:{},children:[{type:b,value:V}]},{type:b,value:W},{type:a,tag:f,props:{},children:[{type:b,value:s}]},{type:b,value:X},{type:a,tag:f,props:{},children:[{type:b,value:Y}]},{type:b,value:Z}]},{type:a,tag:g,props:{code:B,language:k},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:m},children:[{type:b,value:ax}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:h}]},{type:a,tag:c,props:{class:v},children:[{type:b,value:"global"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:q}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:H}]},{type:a,tag:c,props:{class:m},children:[{type:b,value:ay}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:h}]},{type:a,tag:c,props:{class:I},children:[{type:b,value:"Window"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:q}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:az}]},{type:a,tag:c,props:{class:w},children:[{type:b,value:J}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:u}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:aA}]},{type:a,tag:c,props:{class:m},children:[{type:b,value:aB}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:h}]},{type:a,tag:c,props:{class:aC},children:[{type:b,value:aD}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:aE}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:K}]}]}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:_},{type:a,tag:f,props:{},children:[{type:b,value:$}]},{type:b,value:aa},{type:a,tag:f,props:{},children:[{type:b,value:ab}]},{type:b,value:ac},{type:a,tag:n,props:{href:ad},children:[{type:b,value:ae}]},{type:b,value:af}]},{type:a,tag:ag,props:{id:C},children:[{type:b,value:D}]},{type:a,tag:i,props:{},children:[{type:b,value:ah},{type:a,tag:f,props:{},children:[{type:b,value:p}]},{type:b,value:ai}]},{type:a,tag:g,props:{code:E,language:k},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:x},children:[{type:b,value:"\u002F\u002F Sample.ts"}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:j},children:[{type:b,value:"export"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:h}]},{type:a,tag:c,props:{class:m},children:[{type:b,value:"class"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:h}]},{type:a,tag:c,props:{class:I},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:q}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:H}]},{type:a,tag:c,props:{class:x},children:[{type:b,value:"\u002F\u002F nothing :-)"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:K}]}]}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:aj},{type:a,tag:f,props:{},children:[{type:b,value:ak}]},{type:b,value:al},{type:a,tag:n,props:{href:am,rel:[t]},children:[{type:b,value:an}]},{type:b,value:u}]},{type:a,tag:g,props:{code:F,language:k},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:x},children:[{type:b,value:"\u002F\u002F fancyThings.ts"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:j},children:[{type:b,value:L}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:aF}]},{type:a,tag:c,props:{class:v},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:aG}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:aH}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:h}]},{type:a,tag:c,props:{class:y},children:[{type:b,value:aI}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:m},children:[{type:b,value:ax}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:h}]},{type:a,tag:c,props:{class:m},children:[{type:b,value:"module"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:h}]},{type:a,tag:c,props:{class:y},children:[{type:b,value:aI}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:q}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:H}]},{type:a,tag:c,props:{class:m},children:[{type:b,value:ay}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:h}]},{type:a,tag:c,props:{class:I},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:q}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:az}]},{type:a,tag:c,props:{class:w},children:[{type:b,value:J}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:u}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:aA}]},{type:a,tag:c,props:{class:m},children:[{type:b,value:aB}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:h}]},{type:a,tag:c,props:{class:aC},children:[{type:b,value:aD}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:aE}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:K}]}]}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:ao},{type:a,tag:f,props:{},children:[{type:b,value:ap}]},{type:b,value:aq},{type:a,tag:f,props:{},children:[{type:b,value:ar}]},{type:b,value:as}]},{type:a,tag:g,props:{code:G,language:k},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:j},children:[{type:b,value:L}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:aF}]},{type:a,tag:c,props:{class:v},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:aG}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:aH}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:h}]},{type:a,tag:c,props:{class:y},children:[{type:b,value:"\".\u002Fsample\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:j},children:[{type:b,value:L}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:h}]},{type:a,tag:c,props:{class:y},children:[{type:b,value:"\".\u002FfancyThings\""}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:r}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:m},children:[{type:b,value:"const"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:h}]},{type:a,tag:c,props:{class:"ct-35e71a"},children:[{type:b,value:aJ}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:h}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:"="}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:h}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:"new"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:h}]},{type:a,tag:c,props:{class:w},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"();"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:v},children:[{type:b,value:aJ}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:A}]},{type:a,tag:c,props:{class:w},children:[{type:b,value:J}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"(); "}]},{type:a,tag:c,props:{class:x},children:[{type:b,value:"\u002F\u002F ok"}]}]}]}]}]},{type:a,tag:i,props:{},children:[{type:b,value:at},{type:a,tag:n,props:{href:au},children:[{type:b,value:av}]},{type:b,value:aw}]},{type:a,tag:"style",children:[{type:b,value:".ct-35e71a{color:#79C0FF}.ct-214b42{color:#A5D6FF}.ct-1265ec{color:#8B949E}.ct-756283{color:#79C0FF}.ct-66d539{color:#FF7B72}.ct-e9a4dd{color:#D2A8FF}.ct-494734{color:#FFA657}.ct-3a5851{color:#C9D1D9}.ct-44d604{color:#C9D1D9}.ct-b2af0d{color:#FF7B72}.light .ct-b2af0d{color:#073642}.light .ct-44d604{color:#657B83}.light .ct-3a5851{color:#268BD2}.light .ct-494734{color:#268BD2}.light .ct-e9a4dd{color:#268BD2}.light .ct-66d539{color:#859900}.light .ct-756283{color:#859900}.light .ct-1265ec{color:#93A1A1}.light .ct-214b42{color:#2AA198}.light .ct-35e71a{color:#268BD2}"}]}],toc:{title:l,searchDepth:M,depth:M,links:[{id:C,depth:M,text:D}]}},_type:"markdown",_id:"content:Typescript:Add global variable to window.md",_source:"content",_file:"Typescript\u002FAdd global variable to window.md",_extension:"md"}},prerenderedAt:1703697993292}}("element","text","span","ct-44d604","line","code-inline","code"," ","p","ct-66d539","typescript","","ct-b2af0d","a","pre","Sample"," {",";","window","nofollow",":","ct-3a5851","ct-e9a4dd","ct-1265ec","ct-214b42",false,".","declare global {\n interface Window {\n doFancyThings: () =\u003E void;\n }\n}\n","augmenting-existing-interface","Augmenting existing interface","\u002F\u002F Sample.ts\n\nexport class Sample {\n \u002F\u002F nothing :-)\n}\n","\u002F\u002F fancyThings.ts\nimport { Sample } from \".\u002FSample\";\n\ndeclare module \".\u002FSample\" {\n interface Sample {\n doFancyThings: () =\u003E void;\n }\n}\n","import { Sample } from \".\u002Fsample\";\nimport \".\u002FfancyThings\";\n\nconst sample = new Sample();\nsample.doFancyThings(); \u002F\u002F ok\n"," ","ct-494734","doFancyThings","}","import",2,"Add Global Variable To Window","\u002Ftypescript\u002Fadd-global-variable-to-window","root","Sometimes you want to add global variable to your ",". That thing's called ","https:\u002F\u002Fwww.typescriptlang.org\u002Fdocs\u002Fhandbook\u002Fdeclaration-merging.html#global-augmentation","global module augmentation","Say you need to call ","window.doFancyThings()",". For that you should augment global "," interface in ","*.d.ts"," file:","This is useful for declaring global ","window.ethereum"," (or ","window.web3",") in ","\u002Fblockchain\u002FCommon%20typescript%20examples","blockchain"," projects with typescript, which use wallet browser extensions.","h2","For example, you have class "," without any functionality:","Then you want extend it with ","doFancyThings()"," method. That can be achieved with said ","https:\u002F\u002Fwww.typescriptlang.org\u002Fdocs\u002Fhandbook\u002Fdeclaration-merging.html#module-augmentation","module augmentation","Now you can call ","sample.doFancyThings()"," by importing both ",".ts"," files:","This example is useful for ",".\u002FFrontend\u002FVue\u002FAdding%20global%20properties%20to%20component","adding global properties to component"," in vue.js.","declare","interface"," "," () ","=\u003E","ct-756283","void"," }"," { "," } ","from","\".\u002FSample\"","sample"))
\ No newline at end of file
diff --git a/docs/typescript/add-global-variable-to-window/index.html b/docs/typescript/add-global-variable-to-window/index.html
index 4a4f9bc..518e309 100644
--- a/docs/typescript/add-global-variable-to-window/index.html
+++ b/docs/typescript/add-global-variable-to-window/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Add Global Variable To Window • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Sometimes you want to add global variable to your window. That thing's called global module augmentation."><meta name="head:count" content="3"><link rel="modulepreload" href="/typescript/add-global-variable-to-window/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseH2.d950f051.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCodeInline.d9bcf614.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseA.c52e44f8.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a aria-current="page" href="/typescript/add-global-variable-to-window" class="router-link-active _active_192pu_81 _link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Add Global Variable To Window</h1><article><div><p><!--[-->Sometimes you want to add global variable to your <code><!--[-->window<!--]--></code>. That thing's called <a href="https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation" rel="nofollow" target="_blank"><!--[-->global module augmentation<!--]--></a>.<!--]--></p><p><!--[-->Say you need to call <code><!--[-->window.doFancyThings()<!--]--></code>. For that you should augment global <code><!--[-->window<!--]--></code> interface in <code><!--[-->*.d.ts<!--]--></code> file:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-05d7fc">declare</span><span class="ct-b2c08f"> </span><span class="ct-4278e1">global</span><span class="ct-b2c08f"> {</span></span><span class="line"><span class="ct-b2c08f"> </span><span class="ct-05d7fc">interface</span><span class="ct-b2c08f"> </span><span class="ct-24d477">Window</span><span class="ct-b2c08f"> {</span></span><span class="line"><span class="ct-b2c08f"> </span><span class="ct-233ec4">doFancyThings</span><span class="ct-c7b69f">:</span><span class="ct-b2c08f"> () </span><span class="ct-05d7fc">=></span><span class="ct-b2c08f"> </span><span class="ct-0b4a2b">void</span><span class="ct-b2c08f">;</span></span><span class="line"><span class="ct-b2c08f"> }</span></span><span class="line"><span class="ct-b2c08f">}</span></span></code></pre><!--]--></div><p><!--[-->This is useful for declaring global <code><!--[-->window.ethereum<!--]--></code> (or <code><!--[-->window.web3<!--]--></code>) in <a href="/blockchain/common-typescript-examples" class=""><!--[-->blockchain<!--]--></a> projects with typescript, which use wallet browser extensions.<!--]--></p><h2 id="augmenting-existing-interface"><a href="#augmenting-existing-interface"><!--[-->Augmenting existing interface<!--]--></a></h2><p><!--[-->For example, you have class <code><!--[-->Sample<!--]--></code> without any functionality:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-efa672">// Sample.ts</span></span><span class="line"></span><span class="line"><span class="ct-c7b69f">export</span><span class="ct-b2c08f"> </span><span class="ct-05d7fc">class</span><span class="ct-b2c08f"> </span><span class="ct-24d477">Sample</span><span class="ct-b2c08f"> {</span></span><span class="line"><span class="ct-b2c08f"> </span><span class="ct-efa672">// nothing :-)</span></span><span class="line"><span class="ct-b2c08f">}</span></span></code></pre><!--]--></div><p><!--[-->Then you want extend it with <code><!--[-->doFancyThings()<!--]--></code> method. That can be achieved with said <a href="https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation" rel="nofollow" target="_blank"><!--[-->module augmentation<!--]--></a>:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-efa672">// fancyThings.ts</span></span><span class="line"><span class="ct-c7b69f">import</span><span class="ct-b2c08f"> { </span><span class="ct-4278e1">Sample</span><span class="ct-b2c08f"> } </span><span class="ct-c7b69f">from</span><span class="ct-b2c08f"> </span><span class="ct-d12e32">"./Sample"</span><span class="ct-b2c08f">;</span></span><span class="line"></span><span class="line"><span class="ct-05d7fc">declare</span><span class="ct-b2c08f"> </span><span class="ct-05d7fc">module</span><span class="ct-b2c08f"> </span><span class="ct-d12e32">"./Sample"</span><span class="ct-b2c08f"> {</span></span><span class="line"><span class="ct-b2c08f"> </span><span class="ct-05d7fc">interface</span><span class="ct-b2c08f"> </span><span class="ct-24d477">Sample</span><span class="ct-b2c08f"> {</span></span><span class="line"><span class="ct-b2c08f"> </span><span class="ct-233ec4">doFancyThings</span><span class="ct-c7b69f">:</span><span class="ct-b2c08f"> () </span><span class="ct-05d7fc">=></span><span class="ct-b2c08f"> </span><span class="ct-0b4a2b">void</span><span class="ct-b2c08f">;</span></span><span class="line"><span class="ct-b2c08f"> }</span></span><span class="line"><span class="ct-b2c08f">}</span></span></code></pre><!--]--></div><p><!--[-->Now you can call <code><!--[-->sample.doFancyThings()<!--]--></code> by importing both <code><!--[-->.ts<!--]--></code> files:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-c7b69f">import</span><span class="ct-b2c08f"> { </span><span class="ct-4278e1">Sample</span><span class="ct-b2c08f"> } </span><span class="ct-c7b69f">from</span><span class="ct-b2c08f"> </span><span class="ct-d12e32">"./sample"</span><span class="ct-b2c08f">;</span></span><span class="line"><span class="ct-c7b69f">import</span><span class="ct-b2c08f"> </span><span class="ct-d12e32">"./fancyThings"</span><span class="ct-b2c08f">;</span></span><span class="line"></span><span class="line"><span class="ct-05d7fc">const</span><span class="ct-b2c08f"> </span><span class="ct-f10d77">sample</span><span class="ct-b2c08f"> </span><span class="ct-c7b69f">=</span><span class="ct-b2c08f"> </span><span class="ct-c7b69f">new</span><span class="ct-b2c08f"> </span><span class="ct-233ec4">Sample</span><span class="ct-b2c08f">();</span></span><span class="line"><span class="ct-4278e1">sample</span><span class="ct-b2c08f">.</span><span class="ct-233ec4">doFancyThings</span><span class="ct-b2c08f">(); </span><span class="ct-efa672">// ok</span></span></code></pre><!--]--></div><p><!--[-->This example is useful for <a href="/typescript/frontend/vue/adding-global-properties-to-component" class=""><!--[-->adding global properties to component<!--]--></a> in vue.js.<!--]--></p><style>.ct-f10d77{color:#79C0FF}.ct-d12e32{color:#A5D6FF}.ct-efa672{color:#8B949E}.ct-0b4a2b{color:#79C0FF}.ct-c7b69f{color:#FF7B72}.ct-233ec4{color:#D2A8FF}.ct-24d477{color:#FFA657}.ct-4278e1{color:#C9D1D9}.ct-b2c08f{color:#C9D1D9}.ct-05d7fc{color:#FF7B72}.light .ct-05d7fc{color:#073642}.light .ct-b2c08f{color:#657B83}.light .ct-4278e1{color:#268BD2}.light .ct-24d477{color:#268BD2}.light .ct-233ec4{color:#268BD2}.light .ct-c7b69f{color:#859900}.light .ct-0b4a2b{color:#859900}.light .ct-efa672{color:#93A1A1}.light .ct-d12e32{color:#2AA198}.light .ct-f10d77{color:#268BD2}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/typescript/add-global-variable-to-window/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695531749}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a aria-current="page" href="/typescript/add-global-variable-to-window" class="router-link-active _active_192pu_81 _link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Add Global Variable To Window</h1><article><div><p><!--[-->Sometimes you want to add global variable to your <code><!--[-->window<!--]--></code>. That thing's called <a href="https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation" rel="nofollow" target="_blank"><!--[-->global module augmentation<!--]--></a>.<!--]--></p><p><!--[-->Say you need to call <code><!--[-->window.doFancyThings()<!--]--></code>. For that you should augment global <code><!--[-->window<!--]--></code> interface in <code><!--[-->*.d.ts<!--]--></code> file:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-b2af0d">declare</span><span class="ct-44d604"> </span><span class="ct-3a5851">global</span><span class="ct-44d604"> {</span></span><span class="line"><span class="ct-44d604"> </span><span class="ct-b2af0d">interface</span><span class="ct-44d604"> </span><span class="ct-494734">Window</span><span class="ct-44d604"> {</span></span><span class="line"><span class="ct-44d604"> </span><span class="ct-e9a4dd">doFancyThings</span><span class="ct-66d539">:</span><span class="ct-44d604"> () </span><span class="ct-b2af0d">=></span><span class="ct-44d604"> </span><span class="ct-756283">void</span><span class="ct-44d604">;</span></span><span class="line"><span class="ct-44d604"> }</span></span><span class="line"><span class="ct-44d604">}</span></span></code></pre><!--]--></div><p><!--[-->This is useful for declaring global <code><!--[-->window.ethereum<!--]--></code> (or <code><!--[-->window.web3<!--]--></code>) in <a href="/blockchain/common-typescript-examples" class=""><!--[-->blockchain<!--]--></a> projects with typescript, which use wallet browser extensions.<!--]--></p><h2 id="augmenting-existing-interface"><a href="#augmenting-existing-interface"><!--[-->Augmenting existing interface<!--]--></a></h2><p><!--[-->For example, you have class <code><!--[-->Sample<!--]--></code> without any functionality:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-1265ec">// Sample.ts</span></span><span class="line"></span><span class="line"><span class="ct-66d539">export</span><span class="ct-44d604"> </span><span class="ct-b2af0d">class</span><span class="ct-44d604"> </span><span class="ct-494734">Sample</span><span class="ct-44d604"> {</span></span><span class="line"><span class="ct-44d604"> </span><span class="ct-1265ec">// nothing :-)</span></span><span class="line"><span class="ct-44d604">}</span></span></code></pre><!--]--></div><p><!--[-->Then you want extend it with <code><!--[-->doFancyThings()<!--]--></code> method. That can be achieved with said <a href="https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation" rel="nofollow" target="_blank"><!--[-->module augmentation<!--]--></a>:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-1265ec">// fancyThings.ts</span></span><span class="line"><span class="ct-66d539">import</span><span class="ct-44d604"> { </span><span class="ct-3a5851">Sample</span><span class="ct-44d604"> } </span><span class="ct-66d539">from</span><span class="ct-44d604"> </span><span class="ct-214b42">"./Sample"</span><span class="ct-44d604">;</span></span><span class="line"></span><span class="line"><span class="ct-b2af0d">declare</span><span class="ct-44d604"> </span><span class="ct-b2af0d">module</span><span class="ct-44d604"> </span><span class="ct-214b42">"./Sample"</span><span class="ct-44d604"> {</span></span><span class="line"><span class="ct-44d604"> </span><span class="ct-b2af0d">interface</span><span class="ct-44d604"> </span><span class="ct-494734">Sample</span><span class="ct-44d604"> {</span></span><span class="line"><span class="ct-44d604"> </span><span class="ct-e9a4dd">doFancyThings</span><span class="ct-66d539">:</span><span class="ct-44d604"> () </span><span class="ct-b2af0d">=></span><span class="ct-44d604"> </span><span class="ct-756283">void</span><span class="ct-44d604">;</span></span><span class="line"><span class="ct-44d604"> }</span></span><span class="line"><span class="ct-44d604">}</span></span></code></pre><!--]--></div><p><!--[-->Now you can call <code><!--[-->sample.doFancyThings()<!--]--></code> by importing both <code><!--[-->.ts<!--]--></code> files:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-66d539">import</span><span class="ct-44d604"> { </span><span class="ct-3a5851">Sample</span><span class="ct-44d604"> } </span><span class="ct-66d539">from</span><span class="ct-44d604"> </span><span class="ct-214b42">"./sample"</span><span class="ct-44d604">;</span></span><span class="line"><span class="ct-66d539">import</span><span class="ct-44d604"> </span><span class="ct-214b42">"./fancyThings"</span><span class="ct-44d604">;</span></span><span class="line"></span><span class="line"><span class="ct-b2af0d">const</span><span class="ct-44d604"> </span><span class="ct-35e71a">sample</span><span class="ct-44d604"> </span><span class="ct-66d539">=</span><span class="ct-44d604"> </span><span class="ct-66d539">new</span><span class="ct-44d604"> </span><span class="ct-e9a4dd">Sample</span><span class="ct-44d604">();</span></span><span class="line"><span class="ct-3a5851">sample</span><span class="ct-44d604">.</span><span class="ct-e9a4dd">doFancyThings</span><span class="ct-44d604">(); </span><span class="ct-1265ec">// ok</span></span></code></pre><!--]--></div><p><!--[-->This example is useful for <a href="/typescript/frontend/vue/adding-global-properties-to-component" class=""><!--[-->adding global properties to component<!--]--></a> in vue.js.<!--]--></p><style>.ct-35e71a{color:#79C0FF}.ct-214b42{color:#A5D6FF}.ct-1265ec{color:#8B949E}.ct-756283{color:#79C0FF}.ct-66d539{color:#FF7B72}.ct-e9a4dd{color:#D2A8FF}.ct-494734{color:#FFA657}.ct-3a5851{color:#C9D1D9}.ct-44d604{color:#C9D1D9}.ct-b2af0d{color:#FF7B72}.light .ct-b2af0d{color:#073642}.light .ct-44d604{color:#657B83}.light .ct-3a5851{color:#268BD2}.light .ct-494734{color:#268BD2}.light .ct-e9a4dd{color:#268BD2}.light .ct-66d539{color:#859900}.light .ct-756283{color:#859900}.light .ct-1265ec{color:#93A1A1}.light .ct-214b42{color:#2AA198}.light .ct-35e71a{color:#268BD2}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/typescript/add-global-variable-to-window/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697993292}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.d950f051.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.d9bcf614.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/typescript/flatten-object-with-periods/_payload.js b/docs/typescript/flatten-object-with-periods/_payload.js
index 4170331..e645e9c 100644
--- a/docs/typescript/flatten-object-with-periods/_payload.js
+++ b/docs/typescript/flatten-object-with-periods/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:X,_path:Y},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-3yyO3sZiNO":{_path:Y,_dir:z,_draft:I,_partial:I,_locale:J,_empty:I,title:X,description:K,excerpt:{type:Z,children:[{type:a,tag:u,props:{},children:[{type:c,value:K}]},{type:a,tag:u,props:{},children:[{type:c,value:_},{type:a,tag:$,props:{href:aa,rel:[ab]},children:[{type:c,value:ac}]},{type:c,value:ad}]},{type:a,tag:m,props:{code:L,language:z},children:[{type:a,tag:E,props:{},children:[{type:a,tag:m,props:{__ignoreMap:A},children:[{type:c,value:L}]}]}]},{type:a,tag:u,props:{},children:[{type:c,value:ae}]},{type:a,tag:m,props:{code:M,language:z},children:[{type:a,tag:E,props:{},children:[{type:a,tag:m,props:{__ignoreMap:A},children:[{type:c,value:M}]}]}]}]},body:{type:Z,children:[{type:a,tag:u,props:{},children:[{type:c,value:K}]},{type:a,tag:u,props:{},children:[{type:c,value:_},{type:a,tag:$,props:{href:aa,rel:[ab]},children:[{type:c,value:ac}]},{type:c,value:ad}]},{type:a,tag:m,props:{code:L,language:z},children:[{type:a,tag:E,props:{},children:[{type:a,tag:m,props:{__ignoreMap:A},children:[{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:f},children:[{type:c,value:"import"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:B},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"from"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'.\u002Fen.json'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:N}]}]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:af}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"typeof"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:B},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ag}]}]},{type:a,tag:b,props:{class:h},children:[]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:ah},children:[{type:c,value:"const"}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:"ct-c6ad8a"},children:[{type:c,value:ai}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:P},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:" ("}]},{type:a,tag:b,props:{class:aj},children:[{type:c,value:ak}]},{type:a,tag:b,props:{class:P},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:al},children:[{type:c,value:af}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:aj},children:[{type:c,value:am}]},{type:a,tag:b,props:{class:P},children:[{type:c,value:"?:"}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:al},children:[{type:c,value:"TranslateOptions"}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:") "}]},{type:a,tag:b,props:{class:ah},children:[{type:c,value:"=\u003E"}]}]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:B},children:[{type:c,value:"I18nLib"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"."}]},{type:a,tag:b,props:{class:"ct-8a9924"},children:[{type:c,value:ai}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"("}]},{type:a,tag:b,props:{class:B},children:[{type:c,value:ak}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:B},children:[{type:c,value:am}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:");"}]}]}]}]}]},{type:a,tag:u,props:{},children:[{type:c,value:ae}]},{type:a,tag:m,props:{code:M,language:z},children:[{type:a,tag:E,props:{},children:[{type:a,tag:m,props:{__ignoreMap:A},children:[{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:F},children:[{type:c,value:"\u002F\u002F This one based on answer from StackOverflow:"}]}]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:F},children:[{type:c,value:"\u002F\u002F https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F58434389\u002Ftypescript-deep-keyof-of-a-nested-object"}]}]},{type:a,tag:b,props:{class:h},children:[]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:f},children:[{type:c,value:"export"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:an}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ao}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"] "}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:U}]}]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:D}]}]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ap}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:F},children:[{type:c,value:"\u002F\u002F plural object"}]}]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:V}]}]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"object"}]}]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" { ["}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"in"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"-?:"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:as}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"], "}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:at}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:as}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"]\u003E\u003E }["}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:U}]}]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:N}]}]},{type:a,tag:b,props:{class:h},children:[]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:F},children:[{type:c,value:"\u002F\u002F Fix it for you plural form"}]}]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ap}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"Record"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'one'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'few'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'many'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ag}]}]},{type:a,tag:b,props:{class:h},children:[]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ao}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:S}]}]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:S}]}]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"`${"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"}${''"}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'.'}${"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"}`"}]}]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:D}]}]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:N}]}]},{type:a,tag:b,props:{class:h},children:[]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:at}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:au}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"1"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"2"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"3"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"4"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:an}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"..."}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"Array"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:au}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"\u003E];"}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-efb878{color:#A5D6FF}.ct-8a38d6{color:#79C0FF}.ct-63cd70{color:#79C0FF}.ct-a6611a{color:#8B949E}.ct-8a9924{color:#D2A8FF}.ct-4d3d51{color:#FFA657}.ct-e22ae2{color:#FFA657}.ct-5fbc13{color:#FF7B72}.ct-c6ad8a{color:#D2A8FF}.ct-5dcb62{color:#C9D1D9}.ct-d264cd{color:#FF7B72}.ct-e066a0{color:#FFA657}.ct-c090db{color:#FF7B72}.ct-74c656{color:#A5D6FF}.ct-3f0312{color:#C9D1D9}.ct-045bab{color:#C9D1D9}.ct-27117c{color:#FF7B72}.light .ct-27117c{color:#859900}.light .ct-045bab{color:#657B83}.light .ct-3f0312{color:#268BD2}.light .ct-74c656{color:#2AA198}.light .ct-c090db{color:#073642}.light .ct-e066a0{color:#268BD2}.light .ct-d264cd{color:#073642}.light .ct-5dcb62{color:#657B83}.light .ct-c6ad8a{color:#268BD2}.light .ct-5fbc13{color:#859900}.light .ct-e22ae2{color:#657B83}.light .ct-4d3d51{color:#268BD2}.light .ct-8a9924{color:#268BD2}.light .ct-a6611a{color:#93A1A1}.light .ct-63cd70{color:#859900}.light .ct-8a38d6{color:#D33682}.light .ct-efb878{color:#657B83}"}]}],toc:{title:A,searchDepth:av,depth:av,links:[]}},_type:"markdown",_id:"content:Typescript:Flatten object with periods.md",_source:"content",_file:"Typescript\u002FFlatten object with periods.md",_extension:"md"}},prerenderedAt:1703695531787}}("element","span","text","ct-045bab"," ","ct-27117c","ct-e066a0","line",", ","ct-c090db","ct-63cd70","ct-74c656","code","ct-8a38d6"," ","=","\u003C","ct-5dcb62",":","extends","p","T","?","K","ct-efb878","typescript","","ct-3f0312","type","never","pre","ct-a6611a","|","P",false,"en","This helper generates Typescript types for i18n dictionary json\nfiles by flattening it with period delimiter. Supports plural forms.","import en from '.\u002Fen.json';\ntype TranslationPath = Flatten\u003Ctypeof en\u003E;\n\nconst t = (key: TranslationPath, options?: TranslateOptions) =\u003E\n I18nLib.t(key, options);\n","\u002F\u002F This one based on answer from StackOverflow:\n\u002F\u002F https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F58434389\u002Ftypescript-deep-keyof-of-a-nested-object\n\nexport type Flatten\u003CT, D extends number = 5\u003E = [D] extends [never]\n ? never\n : T extends PluralForm \u002F\u002F plural object\n ? ''\n : T extends object\n ? { [K in keyof T]-?: Join\u003CK, Flatten\u003CT[K], Prev[D]\u003E\u003E }[keyof T]\n : '';\n\n\u002F\u002F Fix it for you plural form\ntype PluralForm = Record\u003C'one' | 'few' | 'many', string\u003E;\n\ntype Join\u003CK, P\u003E = K extends string | number\n ? P extends string | number\n ? `${K}${'' extends P ? '' : '.'}${P}`\n : never\n : never;\n\ntype Prev = [never, 0, 1, 2, 3, 4, 5, ...Array\u003C0\u003E];\n",";","Flatten","ct-5fbc13"," ","D","number"," [","]","''","string","Flatten Object With Periods","\u002Ftypescript\u002Fflatten-object-with-periods","root","Used for typing ","a","https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fi18n-js","nofollow","i18n.js"," dictionaries;","Flatten type defined here:","TranslationPath","\u003E;","ct-d264cd","t","ct-e22ae2","key","ct-4d3d51","options","5","\u003E ","PluralForm","keyof","Join","[","Prev","0",2))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:X,_path:Y},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-3yyO3sZiNO":{_path:Y,_dir:z,_draft:I,_partial:I,_locale:J,_empty:I,title:X,description:K,excerpt:{type:Z,children:[{type:a,tag:u,props:{},children:[{type:c,value:K}]},{type:a,tag:u,props:{},children:[{type:c,value:_},{type:a,tag:$,props:{href:aa,rel:[ab]},children:[{type:c,value:ac}]},{type:c,value:ad}]},{type:a,tag:m,props:{code:L,language:z},children:[{type:a,tag:E,props:{},children:[{type:a,tag:m,props:{__ignoreMap:A},children:[{type:c,value:L}]}]}]},{type:a,tag:u,props:{},children:[{type:c,value:ae}]},{type:a,tag:m,props:{code:M,language:z},children:[{type:a,tag:E,props:{},children:[{type:a,tag:m,props:{__ignoreMap:A},children:[{type:c,value:M}]}]}]}]},body:{type:Z,children:[{type:a,tag:u,props:{},children:[{type:c,value:K}]},{type:a,tag:u,props:{},children:[{type:c,value:_},{type:a,tag:$,props:{href:aa,rel:[ab]},children:[{type:c,value:ac}]},{type:c,value:ad}]},{type:a,tag:m,props:{code:L,language:z},children:[{type:a,tag:E,props:{},children:[{type:a,tag:m,props:{__ignoreMap:A},children:[{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:f},children:[{type:c,value:"import"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:B},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"from"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'.\u002Fen.json'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:N}]}]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:af}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"typeof"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:B},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ag}]}]},{type:a,tag:b,props:{class:h},children:[]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:ah},children:[{type:c,value:"const"}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:"ct-72900f"},children:[{type:c,value:ai}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:P},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:" ("}]},{type:a,tag:b,props:{class:aj},children:[{type:c,value:ak}]},{type:a,tag:b,props:{class:P},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:al},children:[{type:c,value:af}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:aj},children:[{type:c,value:am}]},{type:a,tag:b,props:{class:P},children:[{type:c,value:"?:"}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:al},children:[{type:c,value:"TranslateOptions"}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:") "}]},{type:a,tag:b,props:{class:ah},children:[{type:c,value:"=\u003E"}]}]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:B},children:[{type:c,value:"I18nLib"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"."}]},{type:a,tag:b,props:{class:"ct-ac8bfb"},children:[{type:c,value:ai}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"("}]},{type:a,tag:b,props:{class:B},children:[{type:c,value:ak}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:B},children:[{type:c,value:am}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:");"}]}]}]}]}]},{type:a,tag:u,props:{},children:[{type:c,value:ae}]},{type:a,tag:m,props:{code:M,language:z},children:[{type:a,tag:E,props:{},children:[{type:a,tag:m,props:{__ignoreMap:A},children:[{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:F},children:[{type:c,value:"\u002F\u002F This one based on answer from StackOverflow:"}]}]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:F},children:[{type:c,value:"\u002F\u002F https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F58434389\u002Ftypescript-deep-keyof-of-a-nested-object"}]}]},{type:a,tag:b,props:{class:h},children:[]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:f},children:[{type:c,value:"export"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:an}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ao}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"] "}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:U}]}]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:D}]}]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ap}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:F},children:[{type:c,value:"\u002F\u002F plural object"}]}]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:V}]}]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"object"}]}]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" { ["}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"in"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"-?:"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:as}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"], "}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:at}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:as}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:R}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"]\u003E\u003E }["}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:U}]}]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:N}]}]},{type:a,tag:b,props:{class:h},children:[]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:F},children:[{type:c,value:"\u002F\u002F Fix it for you plural form"}]}]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ap}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"Record"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'one'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'few'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'many'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ag}]}]},{type:a,tag:b,props:{class:h},children:[]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ao}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:S}]}]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:S}]}]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"`${"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"}${''"}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"'.'}${"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:l},children:[{type:c,value:"}`"}]}]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:D}]}]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:N}]}]},{type:a,tag:b,props:{class:h},children:[]},{type:a,tag:b,props:{class:h},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:C}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:at}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:au}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"1"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"2"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"3"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"4"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:an}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"..."}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"Array"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:au}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"\u003E];"}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-a027f6{color:#A5D6FF}.ct-f99b99{color:#79C0FF}.ct-11ec7f{color:#79C0FF}.ct-7f20ca{color:#8B949E}.ct-ac8bfb{color:#D2A8FF}.ct-dd53c4{color:#FFA657}.ct-ce246f{color:#FFA657}.ct-2d9980{color:#FF7B72}.ct-72900f{color:#D2A8FF}.ct-2b32b2{color:#C9D1D9}.ct-a7c233{color:#FF7B72}.ct-8ef880{color:#FFA657}.ct-b0b9f6{color:#FF7B72}.ct-15ea19{color:#A5D6FF}.ct-b74055{color:#C9D1D9}.ct-3f6086{color:#C9D1D9}.ct-62e4b4{color:#FF7B72}.light .ct-62e4b4{color:#859900}.light .ct-3f6086{color:#657B83}.light .ct-b74055{color:#268BD2}.light .ct-15ea19{color:#2AA198}.light .ct-b0b9f6{color:#073642}.light .ct-8ef880{color:#268BD2}.light .ct-a7c233{color:#073642}.light .ct-2b32b2{color:#657B83}.light .ct-72900f{color:#268BD2}.light .ct-2d9980{color:#859900}.light .ct-ce246f{color:#657B83}.light .ct-dd53c4{color:#268BD2}.light .ct-ac8bfb{color:#268BD2}.light .ct-7f20ca{color:#93A1A1}.light .ct-11ec7f{color:#859900}.light .ct-f99b99{color:#D33682}.light .ct-a027f6{color:#657B83}"}]}],toc:{title:A,searchDepth:av,depth:av,links:[]}},_type:"markdown",_id:"content:Typescript:Flatten object with periods.md",_source:"content",_file:"Typescript\u002FFlatten object with periods.md",_extension:"md"}},prerenderedAt:1703697993350}}("element","span","text","ct-3f6086"," ","ct-62e4b4","ct-8ef880","line",", ","ct-b0b9f6","ct-11ec7f","ct-15ea19","code","ct-f99b99"," ","=","\u003C","ct-2b32b2",":","extends","p","T","?","K","ct-a027f6","typescript","","ct-b74055","type","never","pre","ct-7f20ca","|","P",false,"en","This helper generates Typescript types for i18n dictionary json\nfiles by flattening it with period delimiter. Supports plural forms.","import en from '.\u002Fen.json';\ntype TranslationPath = Flatten\u003Ctypeof en\u003E;\n\nconst t = (key: TranslationPath, options?: TranslateOptions) =\u003E\n I18nLib.t(key, options);\n","\u002F\u002F This one based on answer from StackOverflow:\n\u002F\u002F https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F58434389\u002Ftypescript-deep-keyof-of-a-nested-object\n\nexport type Flatten\u003CT, D extends number = 5\u003E = [D] extends [never]\n ? never\n : T extends PluralForm \u002F\u002F plural object\n ? ''\n : T extends object\n ? { [K in keyof T]-?: Join\u003CK, Flatten\u003CT[K], Prev[D]\u003E\u003E }[keyof T]\n : '';\n\n\u002F\u002F Fix it for you plural form\ntype PluralForm = Record\u003C'one' | 'few' | 'many', string\u003E;\n\ntype Join\u003CK, P\u003E = K extends string | number\n ? P extends string | number\n ? `${K}${'' extends P ? '' : '.'}${P}`\n : never\n : never;\n\ntype Prev = [never, 0, 1, 2, 3, 4, 5, ...Array\u003C0\u003E];\n",";","Flatten","ct-2d9980"," ","D","number"," [","]","''","string","Flatten Object With Periods","\u002Ftypescript\u002Fflatten-object-with-periods","root","Used for typing ","a","https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fi18n-js","nofollow","i18n.js"," dictionaries;","Flatten type defined here:","TranslationPath","\u003E;","ct-a7c233","t","ct-ce246f","key","ct-dd53c4","options","5","\u003E ","PluralForm","keyof","Join","[","Prev","0",2))
\ No newline at end of file
diff --git a/docs/typescript/flatten-object-with-periods/index.html b/docs/typescript/flatten-object-with-periods/index.html
index 1b453a3..7d65412 100644
--- a/docs/typescript/flatten-object-with-periods/index.html
+++ b/docs/typescript/flatten-object-with-periods/index.html
@@ -3,6 +3,6 @@
<head><title>Flatten Object With Periods • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="This helper generates Typescript types for i18n dictionary json
files by flattening it with period delimiter. Supports plural forms."><meta name="head:count" content="3"><link rel="modulepreload" href="/typescript/flatten-object-with-periods/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseA.c52e44f8.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a aria-current="page" href="/typescript/flatten-object-with-periods" class="router-link-active _active_192pu_81 _link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Flatten Object With Periods</h1><article><div><p><!--[-->This helper generates Typescript types for i18n dictionary json
-files by flattening it with period delimiter. Supports plural forms.<!--]--></p><p><!--[-->Used for typing <a href="https://www.npmjs.com/package/i18n-js" rel="nofollow" target="_blank"><!--[-->i18n.js<!--]--></a> dictionaries;<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-27117c">import</span><span class="ct-045bab"> </span><span class="ct-3f0312">en</span><span class="ct-045bab"> </span><span class="ct-27117c">from</span><span class="ct-045bab"> </span><span class="ct-74c656">'./en.json'</span><span class="ct-045bab">;</span></span><span class="line"><span class="ct-c090db">type</span><span class="ct-045bab"> </span><span class="ct-e066a0">TranslationPath</span><span class="ct-045bab"> </span><span class="ct-27117c">=</span><span class="ct-045bab"> </span><span class="ct-e066a0">Flatten</span><span class="ct-045bab"><</span><span class="ct-27117c">typeof</span><span class="ct-045bab"> </span><span class="ct-3f0312">en</span><span class="ct-045bab">>;</span></span><span class="line"></span><span class="line"><span class="ct-d264cd">const</span><span class="ct-5dcb62"> </span><span class="ct-c6ad8a">t</span><span class="ct-5dcb62"> </span><span class="ct-5fbc13">=</span><span class="ct-5dcb62"> (</span><span class="ct-e22ae2">key</span><span class="ct-5fbc13">:</span><span class="ct-5dcb62"> </span><span class="ct-4d3d51">TranslationPath</span><span class="ct-5dcb62">, </span><span class="ct-e22ae2">options</span><span class="ct-5fbc13">?:</span><span class="ct-5dcb62"> </span><span class="ct-4d3d51">TranslateOptions</span><span class="ct-5dcb62">) </span><span class="ct-d264cd">=></span></span><span class="line"><span class="ct-045bab"> </span><span class="ct-3f0312">I18nLib</span><span class="ct-045bab">.</span><span class="ct-8a9924">t</span><span class="ct-045bab">(</span><span class="ct-3f0312">key</span><span class="ct-045bab">, </span><span class="ct-3f0312">options</span><span class="ct-045bab">);</span></span></code></pre><!--]--></div><p><!--[-->Flatten type defined here:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-a6611a">// This one based on answer from StackOverflow:</span></span><span class="line"><span class="ct-a6611a">// https://stackoverflow.com/questions/58434389/typescript-deep-keyof-of-a-nested-object</span></span><span class="line"></span><span class="line"><span class="ct-27117c">export</span><span class="ct-045bab"> </span><span class="ct-c090db">type</span><span class="ct-045bab"> </span><span class="ct-e066a0">Flatten</span><span class="ct-045bab"><</span><span class="ct-e066a0">T</span><span class="ct-045bab">, </span><span class="ct-e066a0">D</span><span class="ct-045bab"> </span><span class="ct-c090db">extends</span><span class="ct-045bab"> </span><span class="ct-63cd70">number</span><span class="ct-045bab"> </span><span class="ct-27117c">=</span><span class="ct-045bab"> </span><span class="ct-8a38d6">5</span><span class="ct-045bab">> </span><span class="ct-27117c">=</span><span class="ct-045bab"> [</span><span class="ct-e066a0">D</span><span class="ct-045bab">] </span><span class="ct-c090db">extends</span><span class="ct-045bab"> [</span><span class="ct-63cd70">never</span><span class="ct-045bab">]</span></span><span class="line"><span class="ct-045bab"> </span><span class="ct-27117c">?</span><span class="ct-045bab"> </span><span class="ct-63cd70">never</span></span><span class="line"><span class="ct-045bab"> </span><span class="ct-27117c">:</span><span class="ct-045bab"> </span><span class="ct-e066a0">T</span><span class="ct-045bab"> </span><span class="ct-c090db">extends</span><span class="ct-045bab"> </span><span class="ct-e066a0">PluralForm</span><span class="ct-045bab"> </span><span class="ct-a6611a">// plural object</span></span><span class="line"><span class="ct-045bab"> </span><span class="ct-27117c">?</span><span class="ct-045bab"> </span><span class="ct-74c656">''</span></span><span class="line"><span class="ct-045bab"> </span><span class="ct-27117c">:</span><span class="ct-045bab"> </span><span class="ct-e066a0">T</span><span class="ct-045bab"> </span><span class="ct-c090db">extends</span><span class="ct-045bab"> </span><span class="ct-63cd70">object</span></span><span class="line"><span class="ct-045bab"> </span><span class="ct-27117c">?</span><span class="ct-045bab"> { [</span><span class="ct-e066a0">K</span><span class="ct-045bab"> </span><span class="ct-27117c">in</span><span class="ct-045bab"> </span><span class="ct-27117c">keyof</span><span class="ct-045bab"> </span><span class="ct-e066a0">T</span><span class="ct-045bab">]</span><span class="ct-27117c">-?:</span><span class="ct-045bab"> </span><span class="ct-e066a0">Join</span><span class="ct-045bab"><</span><span class="ct-e066a0">K</span><span class="ct-045bab">, </span><span class="ct-e066a0">Flatten</span><span class="ct-045bab"><</span><span class="ct-e066a0">T</span><span class="ct-045bab">[</span><span class="ct-e066a0">K</span><span class="ct-045bab">], </span><span class="ct-e066a0">Prev</span><span class="ct-045bab">[</span><span class="ct-e066a0">D</span><span class="ct-045bab">]>> }[</span><span class="ct-27117c">keyof</span><span class="ct-045bab"> </span><span class="ct-e066a0">T</span><span class="ct-045bab">]</span></span><span class="line"><span class="ct-045bab"> </span><span class="ct-27117c">:</span><span class="ct-045bab"> </span><span class="ct-74c656">''</span><span class="ct-045bab">;</span></span><span class="line"></span><span class="line"><span class="ct-a6611a">// Fix it for you plural form</span></span><span class="line"><span class="ct-c090db">type</span><span class="ct-045bab"> </span><span class="ct-e066a0">PluralForm</span><span class="ct-045bab"> </span><span class="ct-27117c">=</span><span class="ct-045bab"> </span><span class="ct-e066a0">Record</span><span class="ct-045bab"><</span><span class="ct-74c656">'one'</span><span class="ct-045bab"> </span><span class="ct-27117c">|</span><span class="ct-045bab"> </span><span class="ct-74c656">'few'</span><span class="ct-045bab"> </span><span class="ct-27117c">|</span><span class="ct-045bab"> </span><span class="ct-74c656">'many'</span><span class="ct-045bab">, </span><span class="ct-63cd70">string</span><span class="ct-045bab">>;</span></span><span class="line"></span><span class="line"><span class="ct-c090db">type</span><span class="ct-045bab"> </span><span class="ct-e066a0">Join</span><span class="ct-045bab"><</span><span class="ct-e066a0">K</span><span class="ct-045bab">, </span><span class="ct-e066a0">P</span><span class="ct-045bab">> </span><span class="ct-27117c">=</span><span class="ct-045bab"> </span><span class="ct-e066a0">K</span><span class="ct-045bab"> </span><span class="ct-c090db">extends</span><span class="ct-045bab"> </span><span class="ct-63cd70">string</span><span class="ct-045bab"> </span><span class="ct-27117c">|</span><span class="ct-045bab"> </span><span class="ct-63cd70">number</span></span><span class="line"><span class="ct-045bab"> </span><span class="ct-27117c">?</span><span class="ct-045bab"> </span><span class="ct-e066a0">P</span><span class="ct-045bab"> </span><span class="ct-c090db">extends</span><span class="ct-045bab"> </span><span class="ct-63cd70">string</span><span class="ct-045bab"> </span><span class="ct-27117c">|</span><span class="ct-045bab"> </span><span class="ct-63cd70">number</span></span><span class="line"><span class="ct-045bab"> </span><span class="ct-27117c">?</span><span class="ct-045bab"> </span><span class="ct-74c656">`${</span><span class="ct-e066a0">K</span><span class="ct-74c656">}${''</span><span class="ct-efb878"> </span><span class="ct-c090db">extends</span><span class="ct-efb878"> </span><span class="ct-e066a0">P</span><span class="ct-efb878"> </span><span class="ct-27117c">?</span><span class="ct-efb878"> </span><span class="ct-74c656">''</span><span class="ct-efb878"> </span><span class="ct-27117c">:</span><span class="ct-efb878"> </span><span class="ct-74c656">'.'}${</span><span class="ct-e066a0">P</span><span class="ct-74c656">}`</span></span><span class="line"><span class="ct-045bab"> </span><span class="ct-27117c">:</span><span class="ct-045bab"> </span><span class="ct-63cd70">never</span></span><span class="line"><span class="ct-045bab"> </span><span class="ct-27117c">:</span><span class="ct-045bab"> </span><span class="ct-63cd70">never</span><span class="ct-045bab">;</span></span><span class="line"></span><span class="line"><span class="ct-c090db">type</span><span class="ct-045bab"> </span><span class="ct-e066a0">Prev</span><span class="ct-045bab"> </span><span class="ct-27117c">=</span><span class="ct-045bab"> [</span><span class="ct-63cd70">never</span><span class="ct-045bab">, </span><span class="ct-8a38d6">0</span><span class="ct-045bab">, </span><span class="ct-8a38d6">1</span><span class="ct-045bab">, </span><span class="ct-8a38d6">2</span><span class="ct-045bab">, </span><span class="ct-8a38d6">3</span><span class="ct-045bab">, </span><span class="ct-8a38d6">4</span><span class="ct-045bab">, </span><span class="ct-8a38d6">5</span><span class="ct-045bab">, </span><span class="ct-27117c">...</span><span class="ct-e066a0">Array</span><span class="ct-045bab"><</span><span class="ct-8a38d6">0</span><span class="ct-045bab">>];</span></span></code></pre><!--]--></div><style>.ct-efb878{color:#A5D6FF}.ct-8a38d6{color:#79C0FF}.ct-63cd70{color:#79C0FF}.ct-a6611a{color:#8B949E}.ct-8a9924{color:#D2A8FF}.ct-4d3d51{color:#FFA657}.ct-e22ae2{color:#FFA657}.ct-5fbc13{color:#FF7B72}.ct-c6ad8a{color:#D2A8FF}.ct-5dcb62{color:#C9D1D9}.ct-d264cd{color:#FF7B72}.ct-e066a0{color:#FFA657}.ct-c090db{color:#FF7B72}.ct-74c656{color:#A5D6FF}.ct-3f0312{color:#C9D1D9}.ct-045bab{color:#C9D1D9}.ct-27117c{color:#FF7B72}.light .ct-27117c{color:#859900}.light .ct-045bab{color:#657B83}.light .ct-3f0312{color:#268BD2}.light .ct-74c656{color:#2AA198}.light .ct-c090db{color:#073642}.light .ct-e066a0{color:#268BD2}.light .ct-d264cd{color:#073642}.light .ct-5dcb62{color:#657B83}.light .ct-c6ad8a{color:#268BD2}.light .ct-5fbc13{color:#859900}.light .ct-e22ae2{color:#657B83}.light .ct-4d3d51{color:#268BD2}.light .ct-8a9924{color:#268BD2}.light .ct-a6611a{color:#93A1A1}.light .ct-63cd70{color:#859900}.light .ct-8a38d6{color:#D33682}.light .ct-efb878{color:#657B83}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/typescript/flatten-object-with-periods/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695531787}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a aria-current="page" href="/typescript/flatten-object-with-periods" class="router-link-active _active_192pu_81 _link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Flatten Object With Periods</h1><article><div><p><!--[-->This helper generates Typescript types for i18n dictionary json
+files by flattening it with period delimiter. Supports plural forms.<!--]--></p><p><!--[-->Used for typing <a href="https://www.npmjs.com/package/i18n-js" rel="nofollow" target="_blank"><!--[-->i18n.js<!--]--></a> dictionaries;<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-62e4b4">import</span><span class="ct-3f6086"> </span><span class="ct-b74055">en</span><span class="ct-3f6086"> </span><span class="ct-62e4b4">from</span><span class="ct-3f6086"> </span><span class="ct-15ea19">'./en.json'</span><span class="ct-3f6086">;</span></span><span class="line"><span class="ct-b0b9f6">type</span><span class="ct-3f6086"> </span><span class="ct-8ef880">TranslationPath</span><span class="ct-3f6086"> </span><span class="ct-62e4b4">=</span><span class="ct-3f6086"> </span><span class="ct-8ef880">Flatten</span><span class="ct-3f6086"><</span><span class="ct-62e4b4">typeof</span><span class="ct-3f6086"> </span><span class="ct-b74055">en</span><span class="ct-3f6086">>;</span></span><span class="line"></span><span class="line"><span class="ct-a7c233">const</span><span class="ct-2b32b2"> </span><span class="ct-72900f">t</span><span class="ct-2b32b2"> </span><span class="ct-2d9980">=</span><span class="ct-2b32b2"> (</span><span class="ct-ce246f">key</span><span class="ct-2d9980">:</span><span class="ct-2b32b2"> </span><span class="ct-dd53c4">TranslationPath</span><span class="ct-2b32b2">, </span><span class="ct-ce246f">options</span><span class="ct-2d9980">?:</span><span class="ct-2b32b2"> </span><span class="ct-dd53c4">TranslateOptions</span><span class="ct-2b32b2">) </span><span class="ct-a7c233">=></span></span><span class="line"><span class="ct-3f6086"> </span><span class="ct-b74055">I18nLib</span><span class="ct-3f6086">.</span><span class="ct-ac8bfb">t</span><span class="ct-3f6086">(</span><span class="ct-b74055">key</span><span class="ct-3f6086">, </span><span class="ct-b74055">options</span><span class="ct-3f6086">);</span></span></code></pre><!--]--></div><p><!--[-->Flatten type defined here:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-7f20ca">// This one based on answer from StackOverflow:</span></span><span class="line"><span class="ct-7f20ca">// https://stackoverflow.com/questions/58434389/typescript-deep-keyof-of-a-nested-object</span></span><span class="line"></span><span class="line"><span class="ct-62e4b4">export</span><span class="ct-3f6086"> </span><span class="ct-b0b9f6">type</span><span class="ct-3f6086"> </span><span class="ct-8ef880">Flatten</span><span class="ct-3f6086"><</span><span class="ct-8ef880">T</span><span class="ct-3f6086">, </span><span class="ct-8ef880">D</span><span class="ct-3f6086"> </span><span class="ct-b0b9f6">extends</span><span class="ct-3f6086"> </span><span class="ct-11ec7f">number</span><span class="ct-3f6086"> </span><span class="ct-62e4b4">=</span><span class="ct-3f6086"> </span><span class="ct-f99b99">5</span><span class="ct-3f6086">> </span><span class="ct-62e4b4">=</span><span class="ct-3f6086"> [</span><span class="ct-8ef880">D</span><span class="ct-3f6086">] </span><span class="ct-b0b9f6">extends</span><span class="ct-3f6086"> [</span><span class="ct-11ec7f">never</span><span class="ct-3f6086">]</span></span><span class="line"><span class="ct-3f6086"> </span><span class="ct-62e4b4">?</span><span class="ct-3f6086"> </span><span class="ct-11ec7f">never</span></span><span class="line"><span class="ct-3f6086"> </span><span class="ct-62e4b4">:</span><span class="ct-3f6086"> </span><span class="ct-8ef880">T</span><span class="ct-3f6086"> </span><span class="ct-b0b9f6">extends</span><span class="ct-3f6086"> </span><span class="ct-8ef880">PluralForm</span><span class="ct-3f6086"> </span><span class="ct-7f20ca">// plural object</span></span><span class="line"><span class="ct-3f6086"> </span><span class="ct-62e4b4">?</span><span class="ct-3f6086"> </span><span class="ct-15ea19">''</span></span><span class="line"><span class="ct-3f6086"> </span><span class="ct-62e4b4">:</span><span class="ct-3f6086"> </span><span class="ct-8ef880">T</span><span class="ct-3f6086"> </span><span class="ct-b0b9f6">extends</span><span class="ct-3f6086"> </span><span class="ct-11ec7f">object</span></span><span class="line"><span class="ct-3f6086"> </span><span class="ct-62e4b4">?</span><span class="ct-3f6086"> { [</span><span class="ct-8ef880">K</span><span class="ct-3f6086"> </span><span class="ct-62e4b4">in</span><span class="ct-3f6086"> </span><span class="ct-62e4b4">keyof</span><span class="ct-3f6086"> </span><span class="ct-8ef880">T</span><span class="ct-3f6086">]</span><span class="ct-62e4b4">-?:</span><span class="ct-3f6086"> </span><span class="ct-8ef880">Join</span><span class="ct-3f6086"><</span><span class="ct-8ef880">K</span><span class="ct-3f6086">, </span><span class="ct-8ef880">Flatten</span><span class="ct-3f6086"><</span><span class="ct-8ef880">T</span><span class="ct-3f6086">[</span><span class="ct-8ef880">K</span><span class="ct-3f6086">], </span><span class="ct-8ef880">Prev</span><span class="ct-3f6086">[</span><span class="ct-8ef880">D</span><span class="ct-3f6086">]>> }[</span><span class="ct-62e4b4">keyof</span><span class="ct-3f6086"> </span><span class="ct-8ef880">T</span><span class="ct-3f6086">]</span></span><span class="line"><span class="ct-3f6086"> </span><span class="ct-62e4b4">:</span><span class="ct-3f6086"> </span><span class="ct-15ea19">''</span><span class="ct-3f6086">;</span></span><span class="line"></span><span class="line"><span class="ct-7f20ca">// Fix it for you plural form</span></span><span class="line"><span class="ct-b0b9f6">type</span><span class="ct-3f6086"> </span><span class="ct-8ef880">PluralForm</span><span class="ct-3f6086"> </span><span class="ct-62e4b4">=</span><span class="ct-3f6086"> </span><span class="ct-8ef880">Record</span><span class="ct-3f6086"><</span><span class="ct-15ea19">'one'</span><span class="ct-3f6086"> </span><span class="ct-62e4b4">|</span><span class="ct-3f6086"> </span><span class="ct-15ea19">'few'</span><span class="ct-3f6086"> </span><span class="ct-62e4b4">|</span><span class="ct-3f6086"> </span><span class="ct-15ea19">'many'</span><span class="ct-3f6086">, </span><span class="ct-11ec7f">string</span><span class="ct-3f6086">>;</span></span><span class="line"></span><span class="line"><span class="ct-b0b9f6">type</span><span class="ct-3f6086"> </span><span class="ct-8ef880">Join</span><span class="ct-3f6086"><</span><span class="ct-8ef880">K</span><span class="ct-3f6086">, </span><span class="ct-8ef880">P</span><span class="ct-3f6086">> </span><span class="ct-62e4b4">=</span><span class="ct-3f6086"> </span><span class="ct-8ef880">K</span><span class="ct-3f6086"> </span><span class="ct-b0b9f6">extends</span><span class="ct-3f6086"> </span><span class="ct-11ec7f">string</span><span class="ct-3f6086"> </span><span class="ct-62e4b4">|</span><span class="ct-3f6086"> </span><span class="ct-11ec7f">number</span></span><span class="line"><span class="ct-3f6086"> </span><span class="ct-62e4b4">?</span><span class="ct-3f6086"> </span><span class="ct-8ef880">P</span><span class="ct-3f6086"> </span><span class="ct-b0b9f6">extends</span><span class="ct-3f6086"> </span><span class="ct-11ec7f">string</span><span class="ct-3f6086"> </span><span class="ct-62e4b4">|</span><span class="ct-3f6086"> </span><span class="ct-11ec7f">number</span></span><span class="line"><span class="ct-3f6086"> </span><span class="ct-62e4b4">?</span><span class="ct-3f6086"> </span><span class="ct-15ea19">`${</span><span class="ct-8ef880">K</span><span class="ct-15ea19">}${''</span><span class="ct-a027f6"> </span><span class="ct-b0b9f6">extends</span><span class="ct-a027f6"> </span><span class="ct-8ef880">P</span><span class="ct-a027f6"> </span><span class="ct-62e4b4">?</span><span class="ct-a027f6"> </span><span class="ct-15ea19">''</span><span class="ct-a027f6"> </span><span class="ct-62e4b4">:</span><span class="ct-a027f6"> </span><span class="ct-15ea19">'.'}${</span><span class="ct-8ef880">P</span><span class="ct-15ea19">}`</span></span><span class="line"><span class="ct-3f6086"> </span><span class="ct-62e4b4">:</span><span class="ct-3f6086"> </span><span class="ct-11ec7f">never</span></span><span class="line"><span class="ct-3f6086"> </span><span class="ct-62e4b4">:</span><span class="ct-3f6086"> </span><span class="ct-11ec7f">never</span><span class="ct-3f6086">;</span></span><span class="line"></span><span class="line"><span class="ct-b0b9f6">type</span><span class="ct-3f6086"> </span><span class="ct-8ef880">Prev</span><span class="ct-3f6086"> </span><span class="ct-62e4b4">=</span><span class="ct-3f6086"> [</span><span class="ct-11ec7f">never</span><span class="ct-3f6086">, </span><span class="ct-f99b99">0</span><span class="ct-3f6086">, </span><span class="ct-f99b99">1</span><span class="ct-3f6086">, </span><span class="ct-f99b99">2</span><span class="ct-3f6086">, </span><span class="ct-f99b99">3</span><span class="ct-3f6086">, </span><span class="ct-f99b99">4</span><span class="ct-3f6086">, </span><span class="ct-f99b99">5</span><span class="ct-3f6086">, </span><span class="ct-62e4b4">...</span><span class="ct-8ef880">Array</span><span class="ct-3f6086"><</span><span class="ct-f99b99">0</span><span class="ct-3f6086">>];</span></span></code></pre><!--]--></div><style>.ct-a027f6{color:#A5D6FF}.ct-f99b99{color:#79C0FF}.ct-11ec7f{color:#79C0FF}.ct-7f20ca{color:#8B949E}.ct-ac8bfb{color:#D2A8FF}.ct-dd53c4{color:#FFA657}.ct-ce246f{color:#FFA657}.ct-2d9980{color:#FF7B72}.ct-72900f{color:#D2A8FF}.ct-2b32b2{color:#C9D1D9}.ct-a7c233{color:#FF7B72}.ct-8ef880{color:#FFA657}.ct-b0b9f6{color:#FF7B72}.ct-15ea19{color:#A5D6FF}.ct-b74055{color:#C9D1D9}.ct-3f6086{color:#C9D1D9}.ct-62e4b4{color:#FF7B72}.light .ct-62e4b4{color:#859900}.light .ct-3f6086{color:#657B83}.light .ct-b74055{color:#268BD2}.light .ct-15ea19{color:#2AA198}.light .ct-b0b9f6{color:#073642}.light .ct-8ef880{color:#268BD2}.light .ct-a7c233{color:#073642}.light .ct-2b32b2{color:#657B83}.light .ct-72900f{color:#268BD2}.light .ct-2d9980{color:#859900}.light .ct-ce246f{color:#657B83}.light .ct-dd53c4{color:#268BD2}.light .ct-ac8bfb{color:#268BD2}.light .ct-7f20ca{color:#93A1A1}.light .ct-11ec7f{color:#859900}.light .ct-f99b99{color:#D33682}.light .ct-a027f6{color:#657B83}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/typescript/flatten-object-with-periods/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697993350}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseA.c52e44f8.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/typescript/frontend/vue/adding-global-properties-to-component/_payload.js b/docs/typescript/frontend/vue/adding-global-properties-to-component/_payload.js
index 1ece90d..77f9569 100644
--- a/docs/typescript/frontend/vue/adding-global-properties-to-component/_payload.js
+++ b/docs/typescript/frontend/vue/adding-global-properties-to-component/_payload.js
@@ -1 +1 @@
-export default {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-6fvmNhB5QD":null},prerenderedAt:1703695532034}
\ No newline at end of file
+export default {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-6fvmNhB5QD":null},prerenderedAt:1703697993761}
\ No newline at end of file
diff --git a/docs/typescript/frontend/vue/adding-global-properties-to-component/index.html b/docs/typescript/frontend/vue/adding-global-properties-to-component/index.html
index 8bb175c..b2a5e50 100644
--- a/docs/typescript/frontend/vue/adding-global-properties-to-component/index.html
+++ b/docs/typescript/frontend/vue/adding-global-properties-to-component/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="head:count" content="2"><link rel="modulepreload" href="/typescript/frontend/vue/adding-global-properties-to-component/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><style>._list_1w161_1{margin:0;padding:0 20px}._list_1w161_1 li a{text-decoration:none}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><article><h1></h1><!----></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/typescript/frontend/vue/adding-global-properties-to-component/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:c,value:c,unknown:a,forced:b}},_errors:{"content-query-6fvmNhB5QD":a},serverRendered:a,config:{public:{content:{clientDB:{isSPA:b,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:b,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695532034}}(true,false,"dark","shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/HomeReference.de9617ff.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><article><h1></h1><!----></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/typescript/frontend/vue/adding-global-properties-to-component/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:c,value:c,unknown:a,forced:b}},_errors:{"content-query-6fvmNhB5QD":a},serverRendered:a,config:{public:{content:{clientDB:{isSPA:b,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:b,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697993761}}(true,false,"dark","shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/HomeReference.de9617ff.js" crossorigin></script></body>
</html>
\ No newline at end of file
diff --git a/docs/typescript/type-guards/_payload.js b/docs/typescript/type-guards/_payload.js
index 894e9f7..f69351a 100644
--- a/docs/typescript/type-guards/_payload.js
+++ b/docs/typescript/type-guards/_payload.js
@@ -1 +1 @@
-export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:z,_path:A}]}],"content-query-BxgTjDzHE9":{_path:A,_dir:k,_draft:r,_partial:r,_locale:"en",_empty:r,title:z,description:s,excerpt:{type:B,children:[{type:a,tag:n,props:{},children:[{type:c,value:s}]},{type:a,tag:h,props:{code:t,language:k},children:[{type:a,tag:o,props:{},children:[{type:a,tag:h,props:{__ignoreMap:l},children:[{type:c,value:t}]}]}]},{type:a,tag:n,props:{},children:[{type:c,value:C}]},{type:a,tag:h,props:{code:u,language:k},children:[{type:a,tag:o,props:{},children:[{type:a,tag:h,props:{__ignoreMap:l},children:[{type:c,value:u}]}]}]}]},body:{type:B,children:[{type:a,tag:n,props:{},children:[{type:c,value:s}]},{type:a,tag:h,props:{code:t,language:k},children:[{type:a,tag:o,props:{},children:[{type:a,tag:h,props:{__ignoreMap:l},children:[{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:"ct-bfd8bd"},children:[{type:c,value:"function"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:"ct-9d85c0"},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:F},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"|"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:"Bird"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:")"}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:F},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"is"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"return"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"as"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:"ct-8dc141"},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:")."}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"!=="}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:"ct-7d9c4d"},children:[{type:c,value:"undefined"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:";"}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]}]}]}]}]},{type:a,tag:n,props:{},children:[{type:c,value:C}]},{type:a,tag:h,props:{code:u,language:k},children:[{type:a,tag:o,props:{},children:[{type:a,tag:h,props:{__ignoreMap:l},children:[{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:"ct-1cc30b"},children:[{type:c,value:"const"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:"ct-b63305"},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"="}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:"getSmallPet"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:"if"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:")) {"}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"} "}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"else"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:H}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:"fly"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-0e947f{color:#D2A8FF}.ct-b63305{color:#79C0FF}.ct-1cc30b{color:#FF7B72}.ct-7d9c4d{color:#79C0FF}.ct-8dc141{color:#FFA657}.ct-3c6b43{color:#C9D1D9}.ct-0d6f0f{color:#FF7B72}.ct-9b249b{color:#C9D1D9}.ct-3da1c5{color:#FFA657}.ct-0b2270{color:#FF7B72}.ct-a7b800{color:#FFA657}.ct-9d85c0{color:#D2A8FF}.ct-290d98{color:#C9D1D9}.ct-bfd8bd{color:#FF7B72}.light .ct-bfd8bd{color:#073642}.light .ct-290d98{color:#657B83}.light .ct-9d85c0{color:#268BD2}.light .ct-a7b800{color:#657B83}.light .ct-0b2270{color:#859900}.light .ct-3da1c5{color:#268BD2}.light .ct-9b249b{color:#657B83}.light .ct-0d6f0f{color:#859900}.light .ct-3c6b43{color:#268BD2}.light .ct-8dc141{color:#268BD2}.light .ct-7d9c4d{color:#B58900}.light .ct-1cc30b{color:#073642}.light .ct-b63305{color:#268BD2}.light .ct-0e947f{color:#268BD2}"}]}],toc:{title:l,searchDepth:M,depth:M,links:[]}},_type:"markdown",_id:"content:Typescript:Type guards.md",_source:"content",_file:"Typescript\u002FType guards.md",_extension:"md"}},prerenderedAt:1703695531835}}("element","span","text","ct-9b249b"," ","line","ct-290d98","code","pet","ct-0d6f0f","typescript","","ct-3c6b43","p","pre","ct-0b2270","ct-0e947f",false,"Useful for type checking at compile and run time:","function isFish(pet: Fish | Bird): pet is Fish {\n return (pet as Fish).swim !== undefined;\n}\n","const pet = getSmallPet();\n \nif (isFish(pet)) {\n pet.swim();\n} else {\n pet.fly();\n}\n","ct-3da1c5","Fish"," ","();","Type Guards","\u002Ftypescript\u002Ftype-guards","root","Usage:","isFish","(","ct-a7b800",":"," {"," (","swim","}",".",2))
\ No newline at end of file
+export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"Detect Hook Deps Changes With UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:z,_path:A}]}],"content-query-BxgTjDzHE9":{_path:A,_dir:k,_draft:r,_partial:r,_locale:"en",_empty:r,title:z,description:s,excerpt:{type:B,children:[{type:a,tag:n,props:{},children:[{type:c,value:s}]},{type:a,tag:h,props:{code:t,language:k},children:[{type:a,tag:o,props:{},children:[{type:a,tag:h,props:{__ignoreMap:l},children:[{type:c,value:t}]}]}]},{type:a,tag:n,props:{},children:[{type:c,value:C}]},{type:a,tag:h,props:{code:u,language:k},children:[{type:a,tag:o,props:{},children:[{type:a,tag:h,props:{__ignoreMap:l},children:[{type:c,value:u}]}]}]}]},body:{type:B,children:[{type:a,tag:n,props:{},children:[{type:c,value:s}]},{type:a,tag:h,props:{code:t,language:k},children:[{type:a,tag:o,props:{},children:[{type:a,tag:h,props:{__ignoreMap:l},children:[{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:"ct-651390"},children:[{type:c,value:"function"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:"ct-50a0ee"},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:F},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"|"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:"Bird"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:")"}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:F},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"is"}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:H}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"return"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"as"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:"ct-35c055"},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:")."}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"!=="}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:"ct-9343ba"},children:[{type:c,value:"undefined"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:";"}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]}]}]}]}]},{type:a,tag:n,props:{},children:[{type:c,value:C}]},{type:a,tag:h,props:{code:u,language:k},children:[{type:a,tag:o,props:{},children:[{type:a,tag:h,props:{__ignoreMap:l},children:[{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:"ct-f16cd6"},children:[{type:c,value:"const"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:"ct-e065f3"},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"="}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:"getSmallPet"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:e}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:"if"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:E}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:")) {"}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"} "}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"else"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:H}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:q},children:[{type:c,value:"fly"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:y}]}]},{type:a,tag:b,props:{class:f},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-1f1b92{color:#D2A8FF}.ct-e065f3{color:#79C0FF}.ct-f16cd6{color:#FF7B72}.ct-9343ba{color:#79C0FF}.ct-35c055{color:#FFA657}.ct-a686d9{color:#C9D1D9}.ct-7b47ed{color:#FF7B72}.ct-413c42{color:#C9D1D9}.ct-8457d1{color:#FFA657}.ct-dbd72e{color:#FF7B72}.ct-a8285d{color:#FFA657}.ct-50a0ee{color:#D2A8FF}.ct-27e1db{color:#C9D1D9}.ct-651390{color:#FF7B72}.light .ct-651390{color:#073642}.light .ct-27e1db{color:#657B83}.light .ct-50a0ee{color:#268BD2}.light .ct-a8285d{color:#657B83}.light .ct-dbd72e{color:#859900}.light .ct-8457d1{color:#268BD2}.light .ct-413c42{color:#657B83}.light .ct-7b47ed{color:#859900}.light .ct-a686d9{color:#268BD2}.light .ct-35c055{color:#268BD2}.light .ct-9343ba{color:#B58900}.light .ct-f16cd6{color:#073642}.light .ct-e065f3{color:#268BD2}.light .ct-1f1b92{color:#268BD2}"}]}],toc:{title:l,searchDepth:M,depth:M,links:[]}},_type:"markdown",_id:"content:Typescript:Type guards.md",_source:"content",_file:"Typescript\u002FType guards.md",_extension:"md"}},prerenderedAt:1703697993411}}("element","span","text","ct-413c42"," ","line","ct-27e1db","code","pet","ct-7b47ed","typescript","","ct-a686d9","p","pre","ct-dbd72e","ct-1f1b92",false,"Useful for type checking at compile and run time:","function isFish(pet: Fish | Bird): pet is Fish {\n return (pet as Fish).swim !== undefined;\n}\n","const pet = getSmallPet();\n \nif (isFish(pet)) {\n pet.swim();\n} else {\n pet.fly();\n}\n","ct-8457d1","Fish"," ","();","Type Guards","\u002Ftypescript\u002Ftype-guards","root","Usage:","isFish","(","ct-a8285d",":"," {"," (","swim","}",".",2))
\ No newline at end of file
diff --git a/docs/typescript/type-guards/index.html b/docs/typescript/type-guards/index.html
index 97cc612..67320dc 100644
--- a/docs/typescript/type-guards/index.html
+++ b/docs/typescript/type-guards/index.html
@@ -2,5 +2,5 @@
<html data-head-attrs="">
<head><title>Type Guards • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Useful for type checking at compile and run time:"><meta name="head:count" content="3"><link rel="modulepreload" href="/typescript/type-guards/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.ff078795.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.19fa1ed2.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.d9b44fd0.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.9973dade.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.7e427602.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.c479da6a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.cc25619a.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.100d9cd6.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.11fd2e86.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.c73dcf70.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.de9617ff.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.a4202d99.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.b50b0981.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.059528f5.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.b62510f0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.a041c8c0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.65763d63.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.ff1ac866.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.76a50cb0.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.8e071ff5.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_16c5m_1{display:grid;grid-template-columns:360px auto;width:100vw}@media (max-width:1024px){._grid_16c5m_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_16c5m_1{grid-template-columns:auto}}._main_16c5m_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_16c5m_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_16c5m_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_16c5m_26._active_16c5m_39{opacity:1;visibility:visible}}._menu_16c5m_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_16c5m_45{transform:translate(-40px);transition:transform .25s .1s}._active_16c5m_39 ._menu_16c5m_45{transform:translate(0)}}._menu_toggle_16c5m_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_16c5m_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_16c5m_65._active_16c5m_39,._menu_toggle_16c5m_65._shifted_16c5m_82{transform:translate(-13px,-13px)}._menu_toggle_16c5m_65._shifted_16c5m_82{background:var(--color-menu-background)}._footer_16c5m_89{margin-top:40px}._content_16c5m_93{height:100%;width:100%}@media (max-width:768px){._content_16c5m_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.8e071ff5.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
</script></head>
-<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/usewhatschanged" class="_link_192pu_66">UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a aria-current="page" href="/typescript/type-guards" class="router-link-active _active_192pu_81 _link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Type Guards</h1><article><div><p><!--[-->Useful for type checking at compile and run time:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-bfd8bd">function</span><span class="ct-290d98"> </span><span class="ct-9d85c0">isFish</span><span class="ct-290d98">(</span><span class="ct-a7b800">pet</span><span class="ct-0b2270">:</span><span class="ct-290d98"> </span><span class="ct-3da1c5">Fish</span><span class="ct-290d98"> </span><span class="ct-0b2270">|</span><span class="ct-290d98"> </span><span class="ct-3da1c5">Bird</span><span class="ct-290d98">)</span><span class="ct-0b2270">:</span><span class="ct-290d98"> </span><span class="ct-a7b800">pet</span><span class="ct-290d98"> </span><span class="ct-0b2270">is</span><span class="ct-290d98"> </span><span class="ct-3da1c5">Fish</span><span class="ct-290d98"> {</span></span><span class="line"><span class="ct-9b249b"> </span><span class="ct-0d6f0f">return</span><span class="ct-9b249b"> (</span><span class="ct-3c6b43">pet</span><span class="ct-9b249b"> </span><span class="ct-0d6f0f">as</span><span class="ct-9b249b"> </span><span class="ct-8dc141">Fish</span><span class="ct-9b249b">).</span><span class="ct-3c6b43">swim</span><span class="ct-9b249b"> </span><span class="ct-0d6f0f">!==</span><span class="ct-9b249b"> </span><span class="ct-7d9c4d">undefined</span><span class="ct-9b249b">;</span></span><span class="line"><span class="ct-9b249b">}</span></span></code></pre><!--]--></div><p><!--[-->Usage:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-1cc30b">const</span><span class="ct-9b249b"> </span><span class="ct-b63305">pet</span><span class="ct-9b249b"> </span><span class="ct-0d6f0f">=</span><span class="ct-9b249b"> </span><span class="ct-0e947f">getSmallPet</span><span class="ct-9b249b">();</span></span><span class="line"><span class="ct-9b249b"> </span></span><span class="line"><span class="ct-0d6f0f">if</span><span class="ct-9b249b"> (</span><span class="ct-0e947f">isFish</span><span class="ct-9b249b">(</span><span class="ct-3c6b43">pet</span><span class="ct-9b249b">)) {</span></span><span class="line"><span class="ct-9b249b"> </span><span class="ct-3c6b43">pet</span><span class="ct-9b249b">.</span><span class="ct-0e947f">swim</span><span class="ct-9b249b">();</span></span><span class="line"><span class="ct-9b249b">} </span><span class="ct-0d6f0f">else</span><span class="ct-9b249b"> {</span></span><span class="line"><span class="ct-9b249b"> </span><span class="ct-3c6b43">pet</span><span class="ct-9b249b">.</span><span class="ct-0e947f">fly</span><span class="ct-9b249b">();</span></span><span class="line"><span class="ct-9b249b">}</span></span></code></pre><!--]--></div><style>.ct-0e947f{color:#D2A8FF}.ct-b63305{color:#79C0FF}.ct-1cc30b{color:#FF7B72}.ct-7d9c4d{color:#79C0FF}.ct-8dc141{color:#FFA657}.ct-3c6b43{color:#C9D1D9}.ct-0d6f0f{color:#FF7B72}.ct-9b249b{color:#C9D1D9}.ct-3da1c5{color:#FFA657}.ct-0b2270{color:#FF7B72}.ct-a7b800{color:#FFA657}.ct-9d85c0{color:#D2A8FF}.ct-290d98{color:#C9D1D9}.ct-bfd8bd{color:#FF7B72}.light .ct-bfd8bd{color:#073642}.light .ct-290d98{color:#657B83}.light .ct-9d85c0{color:#268BD2}.light .ct-a7b800{color:#657B83}.light .ct-0b2270{color:#859900}.light .ct-3da1c5{color:#268BD2}.light .ct-9b249b{color:#657B83}.light .ct-0d6f0f{color:#859900}.light .ct-3c6b43{color:#268BD2}.light .ct-8dc141{color:#268BD2}.light .ct-7d9c4d{color:#B58900}.light .ct-1cc30b{color:#073642}.light .ct-b63305{color:#268BD2}.light .ct-0e947f{color:#268BD2}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/typescript/type-guards/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703695505948},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703695531835}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
+<body data-head-attrs=""><div id="__nuxt"><div class="_grid_16c5m_1" hastransition="true"><button class="_menu_toggle_16c5m_65 _button_5opgq_1 _menu_toggle_16c5m_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_16c5m_26"><div class="_menu_16c5m_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="_link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a aria-current="page" href="/typescript/type-guards" class="router-link-active _active_192pu_81 _link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_16c5m_17"><div class="_content_16c5m_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Type Guards</h1><article><div><p><!--[-->Useful for type checking at compile and run time:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-651390">function</span><span class="ct-27e1db"> </span><span class="ct-50a0ee">isFish</span><span class="ct-27e1db">(</span><span class="ct-a8285d">pet</span><span class="ct-dbd72e">:</span><span class="ct-27e1db"> </span><span class="ct-8457d1">Fish</span><span class="ct-27e1db"> </span><span class="ct-dbd72e">|</span><span class="ct-27e1db"> </span><span class="ct-8457d1">Bird</span><span class="ct-27e1db">)</span><span class="ct-dbd72e">:</span><span class="ct-27e1db"> </span><span class="ct-a8285d">pet</span><span class="ct-27e1db"> </span><span class="ct-dbd72e">is</span><span class="ct-27e1db"> </span><span class="ct-8457d1">Fish</span><span class="ct-27e1db"> {</span></span><span class="line"><span class="ct-413c42"> </span><span class="ct-7b47ed">return</span><span class="ct-413c42"> (</span><span class="ct-a686d9">pet</span><span class="ct-413c42"> </span><span class="ct-7b47ed">as</span><span class="ct-413c42"> </span><span class="ct-35c055">Fish</span><span class="ct-413c42">).</span><span class="ct-a686d9">swim</span><span class="ct-413c42"> </span><span class="ct-7b47ed">!==</span><span class="ct-413c42"> </span><span class="ct-9343ba">undefined</span><span class="ct-413c42">;</span></span><span class="line"><span class="ct-413c42">}</span></span></code></pre><!--]--></div><p><!--[-->Usage:<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path 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"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-f16cd6">const</span><span class="ct-413c42"> </span><span class="ct-e065f3">pet</span><span class="ct-413c42"> </span><span class="ct-7b47ed">=</span><span class="ct-413c42"> </span><span class="ct-1f1b92">getSmallPet</span><span class="ct-413c42">();</span></span><span class="line"><span class="ct-413c42"> </span></span><span class="line"><span class="ct-7b47ed">if</span><span class="ct-413c42"> (</span><span class="ct-1f1b92">isFish</span><span class="ct-413c42">(</span><span class="ct-a686d9">pet</span><span class="ct-413c42">)) {</span></span><span class="line"><span class="ct-413c42"> </span><span class="ct-a686d9">pet</span><span class="ct-413c42">.</span><span class="ct-1f1b92">swim</span><span class="ct-413c42">();</span></span><span class="line"><span class="ct-413c42">} </span><span class="ct-7b47ed">else</span><span class="ct-413c42"> {</span></span><span class="line"><span class="ct-413c42"> </span><span class="ct-a686d9">pet</span><span class="ct-413c42">.</span><span class="ct-1f1b92">fly</span><span class="ct-413c42">();</span></span><span class="line"><span class="ct-413c42">}</span></span></code></pre><!--]--></div><style>.ct-1f1b92{color:#D2A8FF}.ct-e065f3{color:#79C0FF}.ct-f16cd6{color:#FF7B72}.ct-9343ba{color:#79C0FF}.ct-35c055{color:#FFA657}.ct-a686d9{color:#C9D1D9}.ct-7b47ed{color:#FF7B72}.ct-413c42{color:#C9D1D9}.ct-8457d1{color:#FFA657}.ct-dbd72e{color:#FF7B72}.ct-a8285d{color:#FFA657}.ct-50a0ee{color:#D2A8FF}.ct-27e1db{color:#C9D1D9}.ct-651390{color:#FF7B72}.light .ct-651390{color:#073642}.light .ct-27e1db{color:#657B83}.light .ct-50a0ee{color:#268BD2}.light .ct-a8285d{color:#657B83}.light .ct-dbd72e{color:#859900}.light .ct-8457d1{color:#268BD2}.light .ct-413c42{color:#657B83}.light .ct-7b47ed{color:#859900}.light .ct-a686d9{color:#268BD2}.light .ct-35c055{color:#268BD2}.light .ct-9343ba{color:#B58900}.light .ct-f16cd6{color:#073642}.light .ct-e065f3{color:#268BD2}.light .ct-1f1b92{color:#268BD2}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2023) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/typescript/type-guards/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1703697958723},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1703697993411}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.ff078795.js" crossorigin></script><script type="module" src="/nuxt/default.19fa1ed2.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.d9b44fd0.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.9973dade.js" crossorigin></script><script type="module" src="/nuxt/content.c479da6a.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.cc25619a.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.c73dcf70.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.11fd2e86.js" crossorigin></script><script type="module" src="/nuxt/ProseP.a4202d99.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.b50b0981.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.059528f5.js" crossorigin></script></body>
</html>
\ No newline at end of file